<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 } 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) {
      let that = this;
      that.areaChainName = val.provinceName + '/' + val.cityName + '/' + val.countryName;
    },
    uploadOnSuccess(res, list) {
      res.file.url = res.res.result[0].qcloudImageUrl;
      list.push(res.file);
    },
    /* eslint-disable */
    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(',');
      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 that = this;
      let arr = (obj.areaChainName || '').split('/');
      // 将门店地址信息的省市区地址拆分
      that.areaOptions = {
        provinceName: arr[0],
        provinceId: obj.provinceId,
        cityName: arr[1],
        cityId: obj.cityId,
        countryName: arr[2],
        countyId: obj.countyId
      };
      that.imgs = !obj.imageUrl ? [] : obj.imageUrl.split(',');
      let newImgs = [];
      that.imgs.forEach(img => {
        newImgs.push({ url: img });
      });
      that.imgs = newImgs;
      that.location = obj.longitude + ',' + obj.latitude;
    }
  },
  mounted() {
    this.formatStoreInfo(this.storeInfo);
  },
  watch: {
    $route(to) {
      console.log(to, 'to');
    }
  }
};
</script>
<style lang="scss">

</style>
