<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.storeName">
                        <template slot="suffix">{{storeInfo.storeName ? storeInfo.storeName.length : 0}}/20</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="所属分组" prop="departmentName">
                    <el-input v-model="storeInfo.departmentName" @focus="callSelector">
                        <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="门店图片(640*340)" prop="imageUrls">
                    <div class="member-upload-image">
                        <vue-office-upload-image
                            projectName="haoban-manage-web"
                            wxFlag="0"
                            :actionUrl="uploadUrl"
                            :imageList="imgs"
                            :limitW="640"
                            :limitH="340"
                            :maxImageLength="5"
                            @uploadOnSuccess="uploadOnSuccess"
                            @sortImg="sortImg"
                            @deleteImage="deleteImage">
                        </vue-office-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="storeInfo.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" target="_blank">经纬度测试工具</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" disabled></el-input>
                </el-form-item>
                <el-form-item label="店长性别">
                    <el-radio-group v-model="storeInfo.managerSex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</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 class="handle-area">
            <el-button type="primary" @click="save">保存</el-button>
        </div>
        <vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList" :treeSet="treeSet" :selectType="selectType" :forbidenList="[storeInfo.storeGroupId]"></vue-select-store>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import vueSelectStore from "components/common/vueSelectStore";
export default {
    name: "store-detail",
    components: {
        vueSelectStore
    },
    props: {
        storeInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            areaChainName: "",
            location: "",
            areaOptions: {},
            imgs: [],
            uploadUrl: "/haoban-manage-web/upload-img",
            treeSet: {
                isSelectPerson: false,
                dialogVisible: false,
                isSingle: true // 是否单选
            },
            selectType: "group"
        };
    },
    methods: {
        callSelector() {
            this.treeSet.dialogVisible = true;
        },
        handleSelectedList(list) {
            this.storeInfo.departmentName = list[0].label;
            this.storeInfo.storeGroupId = list[0].id;
        },
        selected(val) {
            console.log(val);
            let that = this;
            that.areaChainName = val.provinceName + "/" + val.cityName + "/" + val.countryName;
        },
        uploadOnSuccess(res, list) {
            console.log(res);
            res.file.url = res.res.result[0].qcloudImageUrl;
            list.push(res.file);
        },
        sortImg() {},
        deleteImage() {},
        save() {
            let that = this;
            let locationArr = that.location.split(",");
            that.storeInfo.longitude = locationArr[0];
            that.storeInfo.latitude = locationArr.length !== 2 ? "" : locationArr[1];
            that.storeInfo.managerPhone = that.storeInfo.managerPhoneNumber;
            that.storeInfo.areaChainName = that.areaOptions.provinceName + "/" + that.areaOptions.cityName + "/" + that.areaOptions.countryName;
            let params = that.storeInfo;
            let imageUrls = [];
            that.imgs.forEach(img => {
                imageUrls.push(img.url);
            })
            params.imageUrls = imageUrls.join(",");
            console.log(params, "params");
           getRequest("/haoban-manage-web/store/update", params)
           .then(res => {
               console.log(res, "eidt result");
               if (res.data.errorCode == 1) {
                   that.$message.success({
                       message: "操作成功！"
                   });
               } else {
                   that.$message.error({
                       message: res.data.message
                   });
               }
           })
           .catch(e => {
               that.$message.error({
                   message: e.message
               });
           });
        },
        formatStoreInfo(obj) {
            let ths = this;
            let arr = (obj.areaChainName || "").split("/");
            ths.areaOptions = {
                provinceName: arr[0],
                provinceId: obj.provinceId,
                cityName: arr[1],
                cityId: obj.cityId,
                countryName: arr[2],
                countyId: obj.countyId
            };
            ths.imgs = !obj.imageUrl ? [] : obj.imageUrl.split(",");
            let newImgs = [];
            ths.imgs.forEach(img => {
                newImgs.push({ url: img });
            });
            ths.imgs = newImgs;
            ths.location = obj.longitude + "," + obj.latitude;
        }

    },
    mounted() {
        this.formatStoreInfo(this.storeInfo);
    },
    watch: {
        $route(to) {
            console.log(to, "to");
        }
    }
};
</script>
<style lang="scss">

</style>


