<template>
    <div class="store-info">
        <div class="info-cell">
            <p class="title">门店信息</p>
            <el-form
                class="store-info-form info-form"
                label-width="90px">
                <el-form-item label="门店名称" prop="name">
                    <el-input v-model="storeInfo.name">
                        <template slot="suffix">{{storeInfo.name.length}}/20</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="所属分组" prop="group">
                    <el-input v-model="storeInfo.groupChainName">
                        <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="门店图片" prop="imageUrls">
                    <ul class="img-list">
                        <li class="img-li" v-if="storeInfo.imageUrls.split(',').length == 0" v-for="(img, index) in storeInfo.imageUrls.split(',')" :key="index + '_' + img ">
                            <img :src="img">
                            <i class="el-icon-circle-close J_del-img"></i>
                        </li>
                        <li class="img-li J_add-img">
                            <i class="el-icon-plus"></i>
                            <p class="tip">图片规格640*340像素</p>
                        </li>
                    </ul>
                    <div class="member-upload-image">
                        <vue-gic-upload-image
                            projectName="gic-web"
                            wxFlag="0"
                            actionUrl="/api-plug/upload-img"
                            :imageList="storeInfo.imageUrls.split(',')"
                            :limitW="500"
                            :limitH="500"
                            :maxImageLength="5"
                            @uploadOnSuccess="uploadOnSuccess"
                            @sortImg="sortImg"
                            @deleteImage="deleteImage">
                        </vue-gic-upload-image>
                    </div>
                </el-form-item>
                <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="storeInfo.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="营业时间" prop="phoneNumber">
                     <el-time-select
                        placeholder="起始时间"
                        v-model="storeInfo.openTime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:05',
                            end: '24:00'
                        }">
                    </el-time-select>
                    ~
                    <el-time-select
                        placeholder="结束时间"
                        v-model="storeInfo.closeTime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:05',
                            end: '24:00',
                            minTime: storeInfo.openTime
                        }">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="门店类型">
                    <el-radio-group v-model="storeInfo.storeType">
                        <el-radio :label="0">自营</el-radio>
                        <el-radio :label="1">联营</el-radio>
                        <el-radio :label="2">代理</el-radio>
                        <el-radio :label="3">代销</el-radio>
                        <el-radio :label="4">托管</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="门店地址">
                    <vue-office-area :areaOptions="areaOptions" @selected="selected" projectName="haoban-web" postUrl="/api-admin/dict-district-list"></vue-office-area>
                    <el-input v-model="areaOptions.postAddress">
                        <template slot="suffix">{{storeInfo.postAddress.length}}/50</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="GPS坐标">
                    <el-input v-model="location" class="m-r-10"></el-input>
                    <a href="http://m.gpsspg.com/maps.htm" class="a-href">经纬度测试工具</a>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        门店代码
                        <i class="el-icon-question" style="color:#C0C4CC;"></i>
                    </template>
                    <el-input v-model="storeInfo.storeCode">
                        <template slot="suffix">{{storeInfo.storeCode.length}}/20</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="info-cell">
            <p class="title">店长信息</p>
            <el-form
                class="store-manager-info-form info-form"
                label-width="90px">
                <el-form-item label="店长姓名" prop="name">
                    <el-input v-model="storeInfo.managerName">
                        <template slot="suffix">{{storeInfo.managerName.length}}/10</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="storeInfo.managerPhoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="店长性别">
                    <el-radio-group v-model="storeInfo.managerSex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="店长代码">
                    <el-input v-model="storeInfo.managerCode">
                        <template slot="suffix">{{storeInfo.managerCode.length}}/20</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="info-cell">
            <p class="title">经营信息</p>
            <el-form
                class="operate-info-form info-form"
                label-width="90px">
                <el-form-item label="特色服务">
                    <el-input type="textarea" :rows="2" v-model="storeInfo.specialService"></el-input>
                    <p class="counter t-rt c-909399">{{storeInfo.specialService.length}}/20</p>
                </el-form-item>
                <el-form-item label="人均消费">
                    <el-input v-model="storeInfo.personCost">
                        <template slot="suffix">{{(storeInfo.personCost+'').length}}/10</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="推荐商品">
                    <el-input type="textarea" :rows="2" v-model="storeInfo.recommendGoods"></el-input>
                    <p class="counter t-rt c-909399">{{storeInfo.recommendGoods.length}}/100</p>
                </el-form-item>
                <el-form-item label="品牌介绍">
                    <el-input type="textarea" :rows="2" v-model="storeInfo.brandDes"></el-input>
                    <p class="counter t-rt c-909399">{{storeInfo.recommendGoods.length}}/200</p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    name: "storeInfo",
    data() {
        return {
            storeInfo: {
                name: "",
                groupChainName: "",
                group: "",
                imageUrls: "",
                phoneNumber: 18758198024,
                openTime: "08:00",
                closeTime: "18:00",
                storeCode: "code222",
                managerName: "翠花",
                storeType: 0,
                managerPhoneNumber: 13777800255,
                longitude: "40.5585354733",
                latitude: "106.284122062",
                managerSex: "女",
                managerCode: "m220",
                specialService: "脚底按摩了解一下",
                personCost: 1000,
                recommendGoods: "瓜子，花生，马应龙",
                brandDes: "are you ok",
                areaChainName: "河北省/邯郸市/成安县",
                postAddress: "河源",
                provinceId: "130000",
                cityId: "130300",
                countyId: "130302"
            },
            opts: {
                selectableRange: '18:30 - 20:30',
                format: 'HH:mm'
            }
        };
    },
    methods: {
        selected(val) {
            console.log(val);
        },
        uploadOnSuccess() {},
        sortImg() {},
        deleteImage() {}

    },
    computed: {
        areaOptions() {
            let ths = this;
            let arr = ths.storeInfo.areaChainName.split("/");
            return {
                provinceName: arr[0],
                provinceId: ths.provinceId,
                cityName: arr[1],
                cityId: ths.cityId,
                countryName: arr[2],
                countyId: ths.countyId
            };
        },
        location() {
            return this.storeInfo.longitude + "," + this.storeInfo.latitude;
        }
    }
};
</script>
<style lang="scss">
.store-info {
    flex: 1;
    .info-cell {
        margin-bottom: 24px;
        background: #fff;
        padding-bottom: 24px;
        >.title {
            line-height: 55px;
            text-indent: 32px;
            border-bottom: 1px solid #E4E7ED;
        }
        .info-form {
            padding: 24px 60px 0;
            .el-form-item:last-child {
                margin-bottom: 0;
            }
            .el-input, .el-textarea, .counter {
                width: 500px;
                &.el-date-editor {
                    width: 150px;
                }
            }
            .area-container {
                .el-select {
                    width: 163px;
                }
                .el-input {
                    width: 160px;
                }
            }
            .img-list {
                display: flex;
                flex-wrap: wrap;
                width: 500px;
                .img-li {
                    width:148px;
                    height:148px;
                    border-radius:6px;
                    margin-right: 12px;
                    margin-bottom: 10px;
                    position: relative;
                    &.J_add-img {
                        text-align: center;
                        line-height: 150px;
                        border:1px solid rgba(192,204,218,1);
                        font-size: 23px;
                        color: #909399;
                        .tip {
                            position: absolute;
                            font-size: 13px;
                            bottom: -23px;
                            height: 13px;
                            line-height: 13px;
                            text-align: center;
                            width: 100%;
                        }
                    }
                    .J_del-img {
                        position: absolute;
                        font-size: 20px;
                        color: #808995;
                        top: -10px;
                        right: -10px;
                        cursor: pointer;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius:6px;
                    }
                }
            }
        }
    }
}
</style>


