<template>
  <div class="create-shop-wrapper">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
    ></bread-crumb>
    <div class="create-shop-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="20">
          <p class="title">{{curmbSecond}}</p>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            :disabled="storeData && storeData.tradeStore.storeType == 3"
            @click="complete"
            >完成</el-button
          >
          <el-button size="small" type="primary" @click="back">返回</el-button>
        </el-col>
      </el-row>
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="150px"
        label-suffix="："
        class="basic-form"
        style="margin-top: 15px"
      >
        <div class="basic-item-icon">
          <el-form-item label="店铺LOGO" class="required-label">
            <el-upload
              v-model="formData.storeLogo"
              class="bg-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeUploadPic1"
            >
              <img
                v-if="formData.storeLogo"
                :src="formData.storeLogo"
                @mouseover.stop="imgMouseOver1 = true"
                class="bg-img"
              />
              <img
                v-if="!formData.storeLogo"
                class="bg-img"
                src="../../assets/image/small.png"
              />
              <div
                v-if="storeData && storeData.tradeStore.storeType == 3"
                class="img-delete"
                v-show="imgMouseOver1"
                @click.stop="deleteImg('storeLogo')"
                @mouseout.stop="imgMouseOver1 = false"
              >
                <i class="el-icon-delete"></i>
              </div>
              <div class="limit-text">
                <p>限制大小: 200kb</p>
                <p>建议尺寸：128*128</p>
                <p>支持jpeg, png格式</p>
              </div>
            </el-upload>
          </el-form-item>
          <p class="upload-message" v-if="uploadImgMessage1">请上传店铺logo</p>
        </div>
        <el-form-item label="店铺名称" prop="storeName">
          <el-col :span="10">
            <el-input
              :disabled="storeData && storeData.tradeStore.storeType == 3"
              size="small"
              v-model="formData.storeName"
              placeholder="请输入店铺名称"
              maxlength="16"
              style="width: 85%"
            ></el-input>
            <span class="word-num"
              >{{ formData.storeName.replace(/\s+/g, "").length }}/16</span
            >
          </el-col>
        </el-form-item>
        <el-form-item label="店铺简介" prop="storeDescription">
          <el-col :span="10">
            <el-input
              :disabled="storeData && storeData.tradeStore.storeType == 3"
              type="textarea"
              rows="4"
              maxlength="400"
              size="small"
              v-model="formData.storeDescription"
              placeholder="请输入店铺简介"
              style="width: 85%"
            ></el-input>
            <span class="word-num"
              >{{
                formData.storeDescription.replace(/\s+/g, "").length
              }}/400</span
            >
          </el-col>
        </el-form-item>
        <el-form-item label="店铺类型" prop="storeType">
          <el-select
            v-model="formData.storeType"
            placeholder="请选择店铺类型"
            size="small"
            clearable
            :disabled="isDisabled"
            style="width: 35%"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div>
          <div v-if="formData.storeType == 1">
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="入驻企业名称"
                  prop="compainName"
                  class="required-label"
                >
                  <el-input
                    type="text"
                    maxlength="50"
                    size="small"
                    v-model="formData.compainName"
                    placeholder="请输入入驻企业名称"
                    style="width: 85%"
                  ></el-input>
                  <span class="word-num"
                    >{{
                      formData.compainName.replace(/\s+/g, "").length
                    }}/50</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1">
                <el-form-item
                  label="联系手机号"
                  prop="phoneNum"
                  label-width="95px"
                  class="required-label"
                >
                  <el-input
                    type="text"
                    size="small"
                    maxlength="11"
                    :disabled="isDisabled"
                    v-model="formData.phoneNum"
                    placeholder="请输入联系电话"
                    style="width: 85%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
              <div
                class="main-content"
                v-for="(item, index) in formData.adminList"
                :key="index"
              >
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="管理员姓名" class="required-label">
                      <el-input
                        type="text"
                        maxlength="10"
                        size="small"
                        v-model="item.adminName"
                        placeholder="请输入管理员姓名"
                        style="width: 85%"
                      ></el-input>
                      <span class="word-num"
                        >{{ item.adminName.replace(/\s+/g, "").length }}/10</span
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :span="1" style="text-align: right">
                    <img
                      style="margin-top: 5px"
                      src="../../assets/image/lianjie_icon.png"
                    />
                  </el-col>
                  <el-col :span="10">
                    <el-form-item
                      label="手机号"
                      label-width="95px"
                      class="required-label"
                    >
                      <el-input
                        type="text"
                        size="small"
                        maxlength="11"
                        v-model="item.adminMobile"
                        placeholder="请输入管理员手机号"
                        style="width: 85%"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" class="span-mt-10">
                    <img
                      v-if="index < 4 && index == formData.adminList.length - 1"
                      @click="addItem(index)"
                      class="edit-img"
                      src="../../assets/image/plus.png"
                    />
                    <img
                      v-if="formData.adminList.length > 1"
                      @click="deleteItem(index)"
                      class="edit-img"
                      src="../../assets/image/trash.png"
                    />
                  </el-col>
                </el-row>
              </div>
            <el-form-item label="营业证明">
              <p class="p-tips">
                若填写的联系人注册不是法定代表人，请上传委托书<br />
                仅支持jpg、png图片文件，且文件小于3M<br />
                上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
              </p>
              <div style="display: flex">
                <div class="flex-upload">
                  <el-upload
                    v-model="formData.imgUrlP1"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUploadProve1"
                  >
                    <img
                      v-if="formData.imgUrlP1"
                      :src="formData.imgUrlP1"
                      @mouseover.stop="imgMouseOverP1 = true"
                      class="bg-img"
                    />
                    <img
                      v-if="!formData.imgUrlP1"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete add-left-18"
                      v-show="imgMouseOverP1"
                      @click.stop="deleteImg('imgUrlP1')"
                      @mouseout.stop="imgMouseOverP1 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  <p class="tips">营业执照</p>
                </div>
                <div class="flex-upload">
                  <el-upload
                    v-model="formData.imgUrlP2"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUploadProve2"
                  >
                    <img
                      v-if="formData.imgUrlP2"
                      :src="formData.imgUrlP2"
                      @mouseover.stop="imgMouseOverP2 = true"
                      class="bg-img"
                    />
                    <img
                      v-if="!formData.imgUrlP2"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete add-left-18"
                      v-show="imgMouseOverP2"
                      @click.stop="deleteImg('imgUrlP2')"
                      @mouseout.stop="imgMouseOverP2 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  <p class="tips">药品经营许可证</p>
                </div>
                <div class="flex-upload">
                  <el-upload
                    v-model="formData.imgUrlP3"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUploadProve3"
                  >
                    <img
                      v-if="formData.imgUrlP3"
                      :src="formData.imgUrlP3"
                      @mouseover.stop="imgMouseOverP3 = true"
                      class="bg-img"
                    />
                    <img
                      v-if="!formData.imgUrlP3"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete add-left-18"
                      v-show="imgMouseOverP3"
                      @click.stop="deleteImg('imgUrlP3')"
                      @mouseout.stop="imgMouseOverP3 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  <p class="tips">委托书</p>
                </div>
              </div>
            </el-form-item>
          </div>
          <div v-if="formData.storeType == 3">
              <el-form-item
                label="医生姓名"
                prop="docName"
                class="required-label"
              >
                <el-input
                  :disabled="storeData && storeData.tradeStore.storeType == 3"
                  type="text"
                  maxlength="50"
                  size="small"
                  v-model="formData.docName"
                  placeholder="请输入医生姓名"
                  style="width: 35%"
                ></el-input>
                <span class="word-num"
                  >{{ formData.docName.replace(/\s+/g, "").length }}/50</span
                >
              </el-form-item>
              <el-form-item
                label="联系手机号"
                prop="docPhone"
                class="required-label"
              >
                <el-input
                  type="text"
                  size="small"
                  maxlength="11"
                  v-model="formData.docPhone"
                  :disabled="isDisabled"
                  placeholder="请输入联系电话"
                  style="width: 35%"
                ></el-input>
              </el-form-item>
          </div>
          <div v-if="formData.storeType == 2">
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="入驻药店名称"
                  prop="drugstoreName"
                  class="required-label"
                >
                  <el-input
                    type="text"
                    maxlength="50"
                    size="small"
                    v-model="formData.drugstoreName"
                    placeholder="请输入入驻药店名称"
                    style="width: 85%"
                  ></el-input>
                  <span class="word-num"
                    >{{
                      formData.drugstoreName.replace(/\s+/g, "").length
                    }}/50</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1">
                <el-form-item
                  label="联系电话"
                  prop="drugstorePhone"
                  label-width="95px"
                  class="required-label"
                >
                  <el-input
                    type="text"
                    size="small"
                    maxlength="11"
                    v-model="formData.drugstorePhone"
                    :disabled="isDisabled"
                    placeholder="请输入联系电话"
                    style="width: 85%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="营业证明">
                  <p class="p-tips">
                    若填写的联系人注册不是法定代表人，请上传委托书<br />
                    仅支持jpg、png图片文件，且文件小于3M<br />
                    上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
                  </p>
                  <div style="display: flex">
                    <div class="flex-upload">
                      <el-upload
                        v-model="formData.imgUrlC1"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeUploadC1"
                      >
                        <img
                          v-if="formData.imgUrlC1"
                          :src="formData.imgUrlC1"
                          @mouseover.stop="imgMouseOverC1 = true"
                          class="bg-img"
                        />
                        <img
                          v-if="!formData.imgUrlC1"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete add-left-18"
                          v-show="imgMouseOverC1"
                          @click.stop="deleteImg('imgUrlC1')"
                          @mouseout.stop="imgMouseOverC1 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                      </el-upload>
                      <p class="tips">营业执照</p>
                    </div>
                    <div class="flex-upload">
                      <el-upload
                        v-model="formData.imgUrlC2"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeUploadC2"
                      >
                        <img
                          v-if="formData.imgUrlC2"
                          :src="formData.imgUrlC2"
                          @mouseover.stop="imgMouseOverC2 = true"
                          class="bg-img"
                        />
                        <img
                          v-if="!formData.imgUrlC2"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete add-left-18"
                          v-show="imgMouseOverC2"
                          @click.stop="deleteImg('imgUrlC2')"
                          @mouseout.stop="imgMouseOverC2 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                      </el-upload>
                      <p class="tips">药品经营许可证</p>
                    </div>
                    <div class="flex-upload">
                      <el-upload
                        v-model="formData.imgUrlC3"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeUploadC3"
                      >
                        <img
                          v-if="formData.imgUrlC3"
                          :src="formData.imgUrlC3"
                          @mouseover.stop="imgMouseOverC3 = true"
                          class="bg-img"
                        />
                        <img
                          v-if="!formData.imgUrlC3"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete add-left-18"
                          v-show="imgMouseOverC3"
                          @click.stop="deleteImg('imgUrlC3')"
                          @mouseout.stop="imgMouseOverC3 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                      </el-upload>
                      <p class="tips">委托书</p>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
            <el-form-item
              label="医疗资质"
              prop="storeQualityUrl"
            >
              <el-input
                size="small"
                v-model="formData.storeQualityUrl"
                placeholder="请填写URL,仅对批发商品生效"
                style="width: 35%"
              ></el-input>
            </el-form-item>
        <el-form-item label="仓库地址管理" prop="selectedKey" class="required-label warehouseAdress-wrap" v-if="formData.storeType < 3">
          <p class="warehouseAdress-tip">(该地址用于买家退货时退回地址，请准确填写)</p>
          <el-button type="success" plain class="warehouseAdress-add" size="small" @click="createAdress(0)">+新增地址</el-button>
          <el-radio-group v-model="formData.selectedKey" class="warehouseAdress-list">
            <el-radio :label="addressItem.key" class="warehouseAdress-item" v-for="(addressItem, index) of formData.repotList" :key="index">
              <span>默认</span>
              <span class="warehouseAdress-main">
                <span class="warehouseAdress-msg">{{addressItem.receiver}}</span>
                <span class="warehouseAdress-msg">{{addressItem.receiverMobile}}</span>
                <span class="warehouseAdress-msg">{{setAddress(addressItem)}}</span>
              </span>
              <span class="warehouseAdress-do">
                <span @click.prevent="createAdress(1,index)">编辑</span> ｜ <span @click.prevent="deleteAdress(index)">删除</span>
              </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="退货支持的物流公司" class="required-label" v-if="formData.storeType < 3">
          <el-radio-group v-model="formData.expressLimitFlag" @change="changeExpressLimitFlag">
            <el-radio :label="0">无限制</el-radio>
            <el-radio :label="1">有限制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="物流公司名称" prop="repotExpressList" class="required-label" v-if="formData.expressLimitFlag && formData.storeType < 3">
           <el-select
              v-model="formData.repotExpressList"
              filterable
              clearable
              multiple
              placeholder="选择物流公司"
            >
              <el-option
                v-for="item in cpmList"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="退货物流说明" v-if="formData.storeType < 3">
          <el-row>
          <el-col :span="10">
            <el-input
              size="small"
              v-model="formData.expressDesc"
              placeholder="请输入退货物流说明"
              maxlength="20"
              style="width: 85%"
            ></el-input>
            <span class="word-num">{{ formData.expressDesc.replace(/\s+/g, "").length }}/20</span>
          </el-col>
          </el-row>
          <p class="p-tips"><i class="el-icon-warning-outline"></i>该文字会在云鹊医App买家退货处显示</p>
        </el-form-item>
      </el-form>
      <!-- 图片裁剪弹框 -->
      <el-dialog
        class="dialog-title-border-old"
        title="图片裁剪"
        :visible.sync="showCropper"
        :width="currentOption.cropDialogWidth"
        center
      >
        <div slot="title" style="text-align: left">
          <span style="font-weight: 700">图片裁剪</span>
        </div>
        <div v-if="showCropper" style="margin-bottom: 20px">
          <Cropper
            :cropOption="currentOption"
            @getCropImg="getCropImg(arguments)"
            :originImg="slide2.oriUrl"
          />
        </div>
      </el-dialog>
      <!-- 创建/编辑收货地址弹框 -->
      <el-dialog :title="warehouseAdressFormTitle" :visible.sync="warehouseAdressFormVisible" >
        <el-form :model="warehouseAdressForm" :rules="warehouseAdressRules" ref="warehouseAdressForm">
          <el-form-item label="收件人" label-width="70px" prop="receiver">
            <el-input v-model="warehouseAdressForm.receiver" autocomplete="off" clearable class="warehouseAdress-input"  placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px" prop="receiverMobile">
            <el-input v-model="warehouseAdressForm.receiverMobile" autocomplete="off" clearable class="warehouseAdress-input" placeholder="请输入收货人联系方式"></el-input>
          </el-form-item>
          <el-form-item prop="provinceId" label="省" label-width="70px">
            <el-select
              v-model="warehouseAdressForm.provinceId"
              class="warehouseAdress-input"
              filterable
              clearable
              placeholder="省"
              @change="changeProvince"
            >
              <el-option
                v-for="item in provincesList"
                :key="item.provinceId"
                :label="item.provinceName"
                :value="item.provinceId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cityId" label="市" label-width="70px">
            <el-select
              v-model="warehouseAdressForm.cityId"
              class="warehouseAdress-input"
              filterable
              clearable
              placeholder="市"
              @change="changeCity"
            >
              <el-option
                v-for="item in cityList"
                :key="item.cityId"
                :label="item.cityName"
                :value="item.cityId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="countyId" label="区/县" label-width="70px">
            <el-select
              v-model="warehouseAdressForm.countyId"
              class="warehouseAdress-input"
              filterable
              clearable
              placeholder="区/县"
              @change="changeCounty"
            >
              <el-option
                v-for="item in countyList"
                :key="item.countyId"
                :label="item.countyName"
                :value="item.countyId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item prop="townId" label="乡/镇" label-width="70px"> -->
          <el-form-item label="乡/镇" label-width="70px">
            <el-select
              v-model="warehouseAdressForm.townId"
              class="warehouseAdress-input"
              filterable
              clearable
              placeholder="乡/镇"
              @change="changeTown"
            >
              <el-option
                v-for="item in townList"
                :key="item.townId"
                :label="item.townName"
                :value="item.townId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" label-width="70px" prop="addr">
            <el-input v-model="warehouseAdressForm.addr" autocomplete="off" clearable class="warehouseAdress-input"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="warehouseAdressFormSet">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
let vm = null;
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from "@/components/common/cropper.vue";
import { saveStore, queryStore, getLgCompanyList, getStoreAdressRepot } from "@/utils/shop";
import { getProvinces, getCities, getCounties, getTowns } from '@/utils/base/baseApi';
import { checkMobile } from "@/utils/patients/checkValid";
export default {
  components: {
    BreadCrumb,
    Cropper,
  },
  data() {
    let checkProjectStr = (rule, value, callback) => {
      if (value.indexOf("\\") != -1) {
        callback(new Error("请勿输入字符“ \\ ”"));
      } else if (value.indexOf(".") != -1) {
        callback(new Error("请勿输入字符“ . ”"));
      } else {
        callback();
      }
    };
    return {
      curmbFirst: "云鹊店铺",
      curmbSecond: "新建店铺",
      isDisabled: false,
      storeData: null,
      typeList: [
        {
          label: "供货商",
          value: 1,
        },
        {
          label: "小药房",
          value: 2,
        },
        {
          label: "医生小店",
          value: 3,
        },
      ],
      formData: {
        storeId: null,
        userId: null,
        storeQualityUrl:"",
        storeLogo: "", //店铺logo
        storeName: "",
        storeDescription: "",
        storeType: "",
        storeOwner: "",
        storePhone: "",
        imageList: [],
        adminList: [
          {
            adminName: "",
            adminMobile: "",
            id: null,
          },
        ], //供货商-管理员信息
        compainName: "", //供货商-入驻企业名称
        phoneNum: "", //供货商-联系电话
        imgUrlP1: "", //证明图1
        imgUrlP2: "", //证明图2
        imgUrlP3: "", //证明图3
        docName: "", //医生小店-医生姓名
        docPhone: "", //医生小店-联系电话
        drugstoreName: "", //小药房-药店名称
        drugstorePhone: "", //小药房-联系电话
        imgUrlC1: "", //证明图1
        imgUrlC2: "", //证明图2
        imgUrlC3: "", //证明图3
        repotList:[//仓库地址
          // {
          //   addr: "asdasd",
          //   cityId: 130300000000,
          //   cityName: "秦皇岛市",
          //   countyId: 130306000000,
          //   countyName: "抚宁县",
          //   key: 0,
          //   provinceId: 130,
          //   provinceName: "河北省",
          //   receiver: "河北省河北省河北省河北省河北省河北省河北省河北省河北省河北省河北省河北省",
          //   receiverMobile: "13889873718"
          // }
        ],
        selectedKey: '', //默认收货地址
        expressLimitFlag: 0, //是否限制物流公司
        repotExpressList:[], //支持的物流公司
        expressDesc: '' //退款说明
      },
      cpmList: [], //所有的物流公司
      warehouseAdressType: 0, // 0为新建地址，1为编辑地址
      warehouseAdressIndex: 0, // 编辑的第几条地址
      warehouseAdressForm: { //收货地址form
        receiver: '',
        receiverMobile: '',
        provinceId: '',
        cityId: '',
        countyId: '',
        townId: '',
        provinceName: '',
        cityName: '',
        countyName: '',
        townName: '',
        addr: '',
        key: ''
      },
      warehouseAdressFormVisible: false,
      warehouseAdressFormTitle: '添加地址',
      provincesList: [],
      cityList: [],
      countyList: [],
      townList: [],
      warehouseAdressRules: {
        receiver: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          {
            min: 2,
            message: "收件人名称长度应大于2位",
            trigger: "blur",
          },
        ],
        receiverMobile:[
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
        provinceId: { required: true, message: "请选择省", trigger: ["change", "blur"]  },
        cityId: { required: true, message: "请选择市", trigger: ["change", "blur"]  },
        countyId: { required: true, message: "请选择区/县", trigger: ["change", "blur"]  },
        townId: { required: true, message: "请选择乡/镇", trigger: ["change", "blur"]  },
        addr:[
          { required: true, message: "请输入详细收货地址", trigger: "blur" }
        ],
      },
      supplierImg1: {
        id: null,
        imageSort: 1,
        imageType: 2,
        imageUrl: "",
      },
      supplierImg2: {
        id: null,
        imageSort: 2,
        imageType: 2,
        imageUrl: "",
      },
      supplierImg3: {
        id: null,
        imageSort: 3,
        imageType: 2,
        imageUrl: "",
      },
      drugstoreImg1: {
        id: null,
        imageSort: 1,
        imageType: 2,
        imageUrl: "",
      },
      drugstoreImg2: {
        id: null,
        imageSort: 2,
        imageType: 2,
        imageUrl: "",
      },
      drugstoreImg3: {
        id: null,
        imageSort: 3,
        imageType: 2,
        imageUrl: "",
      },
      showCropper: false,
      currentOption: {
        offset_x: 120,
        offset_y: 185,
        width: 160,
        height: 120,
        cvWidth: 1000,
        cvHeight: 800,
        uploadType: 1,
        cropDialogWidth: "900px",
        cropBoxResizable: true,
        minCropBoxWidth: 100,
        minCropBoxHeight: 100,
        aspectRatio: 16 / 9,
        currentPic: "",
      },
      slide2: {
        oriUrl: "", // 原图
      },
      rules: {
        storeName: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "输入长度为2-16的内容，可包含中英文、数字及特殊符号",
            trigger: "blur",
          },
          { validator: checkProjectStr, trigger: "blur" },
        ],
        storeDescription: [
          { required: false, message: "请输入店铺简介", trigger: "blur" },
          { validator: checkProjectStr, trigger: "blur" },
        ],
        storeType: [
          { required: true, message: "请选择店铺类型", trigger: "blur" },
        ],
        compainName: [
          { required: true, message: "请输入入驻企业名称", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
        docName: [
          { required: true, message: "请输入医生姓名", trigger: "blur" },
        ],
        docPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
        drugstoreName: [
          { required: true, message: "请输入入驻药店名称", trigger: "blur" },
        ],
        drugstorePhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
        selectedKey: [
          { required: true, message: "请增加地址并选择默认地址", trigger: "change" },
        ],
        repotExpressList: [
          { required: true, message: "请选择物流公司名称", trigger: "change" },
        ],
      },
      imgMouseOver1: false,
      uploadImgMessage1: false, //未上传图片，校验提示语
      imgMouseOverP1: false,
      imgMouseOverP2: false,
      imgMouseOverP3: false,
      imgMouseOverC1: false,
      imgMouseOverC2: false,
      imgMouseOverC3: false,
      addItemFlag: true,
      enterType: 1,
    };
  },
  watch: {},
  created() {
    vm = this;
    this.formData.storeId = this.$route.query.storeId || null;
    // this.storeData = this.$route.query.storeData || null;
    this.getProvincesList();
    this.getCompanyList();
    if (this.formData.storeId) {
      this.curmbSecond = "编辑店铺";
      this.isDisabled = true;
      this.initInfo();
      this.getDetail();
    } else {
      this.curmbSecond = "新建店铺";
      this.isDisabled = false;
    }
  },
  methods: {
    getDetail() {
      getStoreAdressRepot(this.formData.storeId).then(res => {
        if (res.code == "000000") {
          Object.assign(this.formData,res.data)
        } else {
          this.$message.error(res.message);
        }
      })     
    },
    //回显数据处理
    getStoreInfo() {
      if (!this.storeData || !this.storeData.tradeStore) return;
      const {
        storeLogo,
        storeName,
        storeDescription,
        storeType,
        storeOwner,
        storePhone,
        storeQualityUrl
      } = this.storeData.tradeStore;
      this.formData.storeLogo = storeLogo;
      this.formData.storeName = storeName;
      this.formData.storeQualityUrl=storeQualityUrl;
      this.formData.storeDescription = storeDescription;
      this.formData.storeType = storeType;

      if (storeType == 1) {
        this.formData.compainName = storeOwner;
        this.formData.phoneNum = storePhone;
        if (this.storeData.imageList && this.storeData.imageList.length) {
          this.storeData.imageList.map((item) => {
            if (item.imageSort == 1) {
              this.supplierImg1 = item;
              this.formData.imgUrlP1 = item.imageUrl;
            } else if (item.imageSort == 2) {
              this.supplierImg2 = item;
              this.formData.imgUrlP2 = item.imageUrl;
            } else if (item.imageSort == 3) {
              this.supplierImg3 = item;
              this.formData.imgUrlP3 = item.imageUrl;
            }
          });
        } else {
          this.formData.imgUrlP1 = "";
          this.formData.imgUrlP2 = "";
          this.formData.imgUrlP3 = "";
        }
        //处理管理员数据
        if (this.storeData.adminList && this.storeData.adminList.length) {
          this.formData.adminList = this.storeData.adminList;
        } else {
          this.formData.adminList = [
            {
              adminName: "",
              adminMobile: "",
              id: null,
            },
          ];
        }
      } else if (storeType == 3) {
        this.formData.docName = storeOwner;
        this.formData.docPhone = storePhone;
      } else if (storeType == 2) {
        this.formData.drugstoreName = storeOwner;
        this.formData.drugstorePhone = storePhone;
        if (this.storeData.imageList && this.storeData.imageList.length) {
          this.storeData.imageList.map((item) => {
            if (item.imageSort == 1) {
              this.drugstoreImg1 = item;
              this.formData.imgUrlC1 = item.imageUrl;
            } else if (item.imageSort == 2) {
              this.drugstoreImg2 = item;
              this.formData.imgUrlC2 = item.imageUrl;
            } else if (item.imageSort == 3) {
              this.drugstoreImg3 = item;
              this.formData.imgUrlC3 = item.imageUrl;
            }
          });
        } else {
          this.formData.imgUrlC1 = "";
          this.formData.imgUrlC2 = "";
          this.formData.imgUrlC3 = "";
        }
      }
    },
    initInfo() {
      let req = {
        storeId: this.formData.storeId,
        pageNo: 1,
        pageSize: 10,
      };
      queryStore(req).then((res) => {
        if (res.code == "000000") {
          this.storeData = res.data.tradeStore[0];
          this.getStoreInfo();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    complete() {
      let flag = this.submitForm();
      if (flag) {
        // let para = {
        //   storeId: this.formData.storeId,
        //   userId: this.formData.userId,
        //   storeLogo: this.formData.storeLogo,//店铺logo
        //   storeName: this.formData.storeName,
        //   storeDescription: this.formData.storeDescription,
        //   storeType: Number(this.formData.storeType),
        //   storeOwner:this.formData.storeOwner,
        //   storePhone: this.formData.storePhone,
        //   imageList: this.formData.imageList,
        //   adminList:this.formData.adminList,
        // }
        this.formData.storeType = Number(this.formData.storeType);
        this.formData.storeEntry = "PCKAIDIAN"; // 添加店铺渠道
        console.log("提交的数据", this.formData);
        saveStore(this.formData).then((res) => {
          if (res.code == "000000") {
            this.$message.success("操作成功");
            this.$router.push({
              path: "/shop-list",
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    // 返回
    back() {
      this.$confirm('返回后您填写的信息将不会被保存。', '确认要返回吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.$router.push({
            path: "/shop-list",
          });
        }).catch(() => {      
        });
    },
    checkPhone(val) {
      if (!/^1[3456789]\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    resetType(type) {
      this.formData.imageList = [];
      if (type == 1) {
        this.formData.storeOwner = this.formData.compainName;
        this.formData.storePhone = this.formData.phoneNum;
        if (this.formData.imgUrlP1) {
          this.supplierImg1.imageUrl = this.formData.imgUrlP1;
          this.formData.imageList.push(this.supplierImg1);
        }
        if (this.formData.imgUrlP2) {
          this.supplierImg2.imageUrl = this.formData.imgUrlP2;
          this.formData.imageList.push(this.supplierImg2);
        }
        if (this.formData.imgUrlP3) {
          this.supplierImg3.imageUrl = this.formData.imgUrlP3;
          this.formData.imageList.push(this.supplierImg3);
        }
      } else if (type == 3) {
        this.formData.storeOwner = this.formData.docName;
        this.formData.storePhone = this.formData.docPhone;
        this.formData.adminList = [];
      } else if (type == 2) {
        this.formData.storeOwner = this.formData.drugstoreName;
        this.formData.storePhone = this.formData.drugstorePhone;
        this.formData.adminList = [];
        if (this.formData.imgUrlC1) {
          this.drugstoreImg1.imageUrl = this.formData.imgUrlC1;
          this.formData.imageList.push(this.drugstoreImg1);
        }
        if (this.formData.imgUrlC2) {
          this.drugstoreImg2.imageUrl = this.formData.imgUrlC2;
          this.formData.imageList.push(this.drugstoreImg2);
        }
        if (this.formData.imgUrlC3) {
          this.drugstoreImg3.imageUrl = this.formData.imgUrlC3;
          this.formData.imageList.push(this.drugstoreImg3);
        }
      }
    },
    setTypeForData() {
      let flag = false;
      if (this.formData.storeType == 1) {
        if (!this.formData.compainName) {
          this.$message.warning("请输入入驻企业名称");
          return;
        }
        if (!this.formData.phoneNum) {
          this.$message.warning("请输入联系电话");
          return;
        } else {
          if (!this.checkPhone(this.formData.phoneNum)) {
            this.$message.warning("请输入正确的手机号");
            return;
          }
        }
        if (this.formData.adminList && this.formData.adminList.length) {
          for (let i = 0; i < this.formData.adminList.length; i++) {
            if (!this.formData.adminList[i].adminName) {
              this.$message.warning(`请输入第${i + 1}个管理员的姓名`);
              return;
            }
            if (!this.formData.adminList[i].adminMobile) {
              this.$message.warning(`请输入第${i + 1}个管理员的联系电话`);
              return;
            } else {
              if (!this.checkPhone(this.formData.adminList[i].adminMobile)) {
                this.$message.warning(`请输入第${i + 1}个管理员的正确联系电话`);
                return;
              }
            }
          }
        }

        flag = true;
      }
      if (this.formData.storeType == 3) {
        if (!this.formData.docName) {
          this.$message.warning("请输入医生姓名");
          return;
        }
        if (!this.formData.docPhone) {
          this.$message.warning("请输入联系电话");
          return;
        } else {
          if (!this.checkPhone(this.formData.docPhone)) {
            this.$message.warning("请输入正确的联系电话");
            return;
          }
        }
        flag = true;
      }
      if (this.formData.storeType == 2) {
        if (!this.formData.drugstoreName) {
          this.$message.warning("请输入入驻药店名称");
          return;
        }
        if (!this.formData.drugstorePhone) {
          this.$message.warning("请输入联系电话");
          return;
        } else {
          if (!this.checkPhone(this.formData.drugstorePhone)) {
            this.$message.warning("请输入正确的联系电话");
            return;
          }
        }
        flag = true;
      }
      return flag;
    },
    //表单校验
    submitForm() {
      let formName = "formData";
      let submitFlag = false;

      if (!this.formData.storeLogo) {
        this.uploadImgMessage1 = true;
        return;
      } else {
        this.uploadImgMessage1 = false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.setTypeForData()) {
            return;
          }
          this.resetType(this.formData.storeType);
          submitFlag = true;
        } else {
          submitFlag = false;
        }
      });
      return submitFlag;
    },
    //上传店铺logo
    beforeUploadPic1(file) {
      this.currentOption.aspectRatio = 1 / 1;
      this.currentOption.cropBoxResizable = true;
      this.currentOption.minCropBoxWidth = 128;
      this.currentOption.minCropBoxHeight = 128;
      this.currentOption.currentPic = "storeLogo";
      let fileLimit = {
        width: 128,
        height: 128,
        size: 0.2,
        sizeText: "200K",
        key: "storeLogo",
        more: "imgUrl1More",
        show: "uploadImgMessage1",
      };
      this.beforeUploadLogo(file, fileLimit);
      //this.beforeUpload1(file, fileLimit);
    },
    //上传logo  add
    beforeUploadLogo(file, fileLimit) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 < 200;
      if (!isJPG && !isPNG) {
        vm.$message.error("仅支持jpeg，png格式");
        // return;
      }
      if (!isLt2M) {
        vm.$message.error("图片大小请控制在200kb以内");
        return;
      }

      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function (theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        //vm.slide2.oriUrl = theFile.target.result;
        image.onload = function () {
          let _this = this;
          // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
          let l = _this.width / _this.height;
          if (l != 1) {
            vm.$message.error("图片宽高比例请控制在1:1");
            return;
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function (path) {
              closeLoading(vm);

              vm.formData[fileLimit.key] = path.fullPath;
              vm.formData[fileLimit.more] = {
                attachmentName: path.storeName,
                attachmentExt: path.ext,
                attachmentSize: path.size,
              };
              vm.$message.success("上传成功");
            });
          }
        };
      };
    },
    setOption(type) {
      // this.currentOption.aspectRatio = 1/1;
      // this.currentOption.cropBoxResizable = true;
      // this.currentOption.minCropBoxWidth = 160;
      // this.currentOption.minCropBoxHeight = 160;
      // this.currentOption.currentPic = type;
      let fileLimit = {
        width: "",
        height: "",
        size: 3,
        sizeText: "3M",
        key: type,
        more: "imgUrlP1More",
      };
      return fileLimit;
    },
    beforeUploadProve1(file) {
      let fileLimit = this.setOption("imgUrlP1");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadProve2(file) {
      let fileLimit = this.setOption("imgUrlP2");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadProve3(file) {
      let fileLimit = this.setOption("imgUrlP3");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadC1(file) {
      let fileLimit = this.setOption("imgUrlC1");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadC2(file) {
      let fileLimit = this.setOption("imgUrlC2");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadC3(file) {
      let fileLimit = this.setOption("imgUrlC3");
      this.beforeUpload(file, fileLimit);
    },
    beforeUpload(file, fileLimit) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
      if (!isJPG && !isPNG) {
        vm.$message.error("仅支持jpeg，png格式");
        return;
      }
      if (!isLt2M) {
        vm.$message.error(`图片大小不可以超过${fileLimit.sizeText}`);
        return;
      }
      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function (theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        vm.slide2.oriUrl = theFile.target.result;
        image.onload = function () {
          let _this = this;
          openLoading(vm);
          doUpload(
            vm,
            file,
            getFilePath(file, null),
            "preview4",
            "progress1",
            1
          ).then(function (path) {
            closeLoading(vm);
            vm.formData[fileLimit.key] = path.fullPath;
            vm.formData[fileLimit.more] = {
              attachmentName: path.storeName,
              attachmentExt: path.ext,
              attachmentSize: path.size,
            };
            vm.$message.success("上传成功");
          });
        };
      };
      return isJPG && isLt2M;
    },
    //上传图片
    beforeUpload1(file, fileLimit) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
      if (!isJPG && !isPNG) {
        vm.$message.error("仅支持jpeg，png格式");
        // return;
      }
      // if (!isLt2M) {
      //   vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
      //   return;
      // }
      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function (theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        vm.slide2.oriUrl = theFile.target.result;
        image.onload = function () {
          let _this = this;
          // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
          if (
            _this.width < fileLimit.width ||
            _this.height < fileLimit.height
          ) {
            vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
            return;
          } else if (
            _this.width > fileLimit.width ||
            _this.height > fileLimit.height
          ) {
            vm.showCropper = true;
            vm.currentOption.cvWidth = _this.width;
            vm.currentOption.cvHeight = _this.height;
            return;
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function (path) {
              closeLoading(vm);
              if (fileLimit.show == "uploadImgMessage1") {
                vm.uploadImgMessage1 = false;
              }
              vm.formData[fileLimit.key] = path.fullPath;
              vm.formData[fileLimit.more] = {
                attachmentName: path.storeName,
                attachmentExt: path.ext,
                attachmentSize: path.size,
              };
              vm.$message.success("上传成功");
            });
          }
        };
      };
      return isJPG && isLt2M;
    },
    //删除图片
    deleteImg(type) {
      vm.formData[type] = "";
      const testMouse = new Map()
        .set("storeLogo", "imgMouseOver1")
        .set("imgUrlP1", "imgMouseOverP1")
        .set("imgUrlP2", "imgMouseOverP2")
        .set("imgUrlP3", "imgMouseOverP3")
        .set("imgUrlC1", "imgMouseOverC1")
        .set("imgUrlC2", "imgMouseOverC2")
        .set("imgUrlC3", "imgMouseOverC3");

      function matchType(type) {
        return testMouse.get(type) || "";
      }
      let mark = matchType(type);
      vm[mark] = false;
      /* if (type == 'storeLogo') {
          vm.imgMouseOver1 = false;
        }else if (type == 'imgUrlP1') {
          vm.imgMouseOverP1 = false;
        }else if (type == 'imgUrlP2') {
          vm.imgMouseOverP2 = false;
        }else if (type == 'imgUrlP3') {
          vm.imgMouseOverP3 = false;
        }*/
    },
    // 获取裁剪的图片数据
    getCropImg(argument) {
      this.showCropper = false;
      this.cropData = argument[1];
      vm.doUploadQiNiu(argument[2]);
      argument[3] && argument[3].destroy();
      // vm.slide2.oriUrl = "";
    },
    // 上传七牛
    doUploadQiNiu(file) {
      doUpload(
        this,
        file,
        getFilePath(file, null),
        "preview4",
        "uploadProgress1",
        ""
      ).then(function (path) {
        vm.formData[vm.currentOption.currentPic] = path.fullPath;
        vm.$message.success("上传成功");
      });
    },
    //新增管理员
    addItem(index) {
      if (
        this.formData.adminList != null &&
        this.formData.adminList.length >= 5
      ) {
        this.$message.warning("只可新增5位管理员！");
      } else {
        let item = {
          adminName: "",
          adminMobile: "",
          id: null,
        };
        this.formData.adminList.push(item);
      }
    },
    //删除管理员
    deleteItem(index) {
      if (this.formData.adminList.length == 1 && index == 0) {
        this.$message.warning("最少需要1位管理员哦！");
        return;
      }
      this.formData.adminList.splice(index, 1);
    },
    // 创建或编辑地址 type
    // 编辑第几条数据  index
    createAdress(type,index) {
      this.warehouseAdressType = type;
      this.warehouseAdressFormTitle = type ? '编辑地址' : '添加地址';
      this.warehouseAdressIndex = type ? index : '';
      if (type) {
        Object.assign(this.warehouseAdressForm,this.formData.repotList[index]);
        this.getCitiesList();
        this.getCountiesList();
        this.getTownsList();
      } else {
        this.warehouseAdressForm = {
          receiver: '',
          receiverMobile: '',
          provinceId: '',
          cityId: '',
          countyId: '',
          townId: '',
          provinceName: '',
          cityName: '',
          countyName: '',
          townName: '',
          addr: '',
          key: ''
        }
      }
      this.warehouseAdressFormVisible = true;
    },
    deleteAdress(index) {
       this.$confirm('确定要删除这条地址信息么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '',
          type: 'error'
        }).then(() => {
          if (this.formData.repotList[index].key == this.formData.selectedKey) {
            this.formData.selectedKey = '';
          }
          this.formData.repotList.splice(index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 选择省
    changeProvince() {
      this.warehouseAdressForm.cityId = "";
      this.warehouseAdressForm.countyId = "";
      this.warehouseAdressForm.townId = "";
      this.countyList = [];
      this.getCitiesList();
      this.selectGet(this.warehouseAdressForm.provinceId, 'provinceId', 'provinceName',this.provincesList);
    },
    // 选择市
    changeCity() {
      this.warehouseAdressForm.countyId = "";
      this.warehouseAdressForm.townId = "";
      this.getCountiesList();
      this.selectGet(this.warehouseAdressForm.cityId, 'cityId', 'cityName',this.cityList);
    },
    // 选择区
    changeCounty() {
      this.warehouseAdressForm.townId = "";
      this.getTownsList();
      this.selectGet(this.warehouseAdressForm.countyId, 'countyId', 'countyName',this.countyList);
    },
    // 选择乡镇
    changeTown() {
      this.selectGet(this.warehouseAdressForm.townId, 'townId', 'townName',this.townList);
    },
    //获取省列表
    getProvincesList() {
      getProvinces()
        .then((res) => {
          if (res.code == "000000") {
            this.provincesList = res.data.provinceList;
          }
        })
        .catch({});
    },
    //获取市列表
    getCitiesList() {
      let params = {
        provinceId: this.warehouseAdressForm.provinceId,
      };
      getCities(params)
        .then((res) => {
          if (res.code == "000000") {
            this.cityList = res.data.cityList;
          }
        })
        .catch({});
    },
    //获取区列表
    getCountiesList() {
      let params = {
        cityId: this.warehouseAdressForm.cityId,
      };
      getCounties(params)
        .then((res) => {
          if (res.code == "000000") {
            this.countyList = res.data.countyList;
          }
        })
        .catch({});
    },
     //获取镇列表
    getTownsList() {
      let params = {
        countyId: this.warehouseAdressForm.countyId
      };
      getTowns(params)
        .then((res) => {
          if (res.code == "000000") {
            this.townList = res.data.townList;
          }
        })
        .catch({});
    },
    /* slelect时，获取省市区对应的名称
    * vId：省市区id
    * cId： id对应的key值名称
    * cname： 省市区名称对应的key值
    * list: 省市区列表
    */
    selectGet(vId,cId,cname, list){
      if (!cId || !cname) return;
      let obj = {};
      obj = list.find((item)=>{//这里的userList就是上面遍历的数据源
          return item[cId] === vId;//筛选出匹配数据
      });
      this.warehouseAdressForm[cname] = obj[cname];
    },
    // 确认地址
    warehouseAdressFormSet() {
      const {warehouseAdressForm, warehouseAdressIndex, warehouseAdressFormTitle, warehouseAdressType} = this;
      const { repotList } = this.formData;
      this.$refs['warehouseAdressForm'].validate((valid) => {
        if (valid) {
          if (warehouseAdressType) {
            repotList[warehouseAdressIndex] = JSON.parse(JSON.stringify(warehouseAdressForm));
          } else {
            warehouseAdressForm.key = repotList.length + Math.round(Math.random()*1000);
            repotList.push(JSON.parse(JSON.stringify(warehouseAdressForm)));
          }
          this.$message({
            type: 'success',
            message: `${warehouseAdressFormTitle}成功!`
          });
          this.$refs['warehouseAdressForm'].resetFields();
          this.warehouseAdressFormVisible = false;
        }
      });
    },
    // 切换退货支持的物流公司类型
    changeExpressLimitFlag() {
      if(!this.formData.expressLimitFlag) {
        this.formData.repotExpressList = [];
      }
    },
    // 格式化地址
    setAddress(arg) {
      let townName = arg.townName || '';
      return arg.provinceName + arg.cityName + arg.countyName + townName + arg.addr;
    },
    // 获取退货物流
    getCompanyList() {
      getLgCompanyList()
        .then(({ code, data, message }) => {
          console.log(data);
          if (code == '000000') {
            this.cpmList = data;
          } else {
            this.$toast(message);
          }
        })
        .catch(() => {});
    },
    // 数据A- Z排序
    componentSort() {
      if (this.cpmList.length == 0) return;
      if (!String.prototype.localeCompare) return null;
      var letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('');
      var segs = []; // 存放数据
      let curr;

      letters.filter((items, i) => {
        curr = {
          key: i,
          initial: '', //字母
          data: [] //数据
        };
        this.cpmList.map(v => {
          if (v.no_char.toUpperCase() == items) {
            curr.data.push(v);
          }
        });

        if (curr.data.length) {
          curr.initial = items;
          segs.push(curr);
          curr.data = curr.data.sort((a, b) => {
            return a.no_char.localeCompare(b.no_char);
          });
        }
      });
      return Array.from(new Set(segs));
    }
  },
};
</script>
<style lang="scss">
.create-shop-wrapper {
  .create-shop-content {
    background: #fff;
    padding: 10px;
    .step-content {
      overflow: hidden;
      height: 60px;
      padding: 10px 10px 50px;
      border-bottom: 1px solid #efefef;
      .title {
        font-size: 13px;
        color: #449284;
      }
    }
  }
  .el-button--text {
    color: #449284;
    font-size: 14px;
    &::after {
      content: "";
      position: relative;
      height: 14px;
      /*border-right: 1px solid #EBEEF5;*/
      border-right: 1px solid #aaaaaa;
      padding-right: 10px;
    }
    &:last-of-type {
      &::after {
        content: "";
        position: relative;
        width: 1px;
        height: 14px;
        border-right: none;
      }
    }
  }
  .required-label .el-form-item__label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .basic-item-icon {
    position: relative;

    .require {
      position: absolute;
      left: 67px;
      top: 11px;
      color: #f56c6c;
    }

    .upload-message {
      position: absolute;
      left: 160px;
      top: 105px;
      font-size: 12px;
      color: #f56c6c;
    }
  }

  .word-num {
    font-size: 12px;
    color: #999;
    padding-top: 5px;
  }

  .line {
    margin-left: 10px;
    width: 20px;
  }

  .flex-upload {
    width: 120px;
    text-align: center;
    .tips {
      font-size: 13px;
      color: #8c8c8c;
      line-height: 24px;
    }
  }
  .bg-uploader {
    position: relative;
    /*margin-right: 20px;*/
    .bg-img {
      float: left;
      width: 84px;
      height: 100px;
    }
    .img-delete {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 84px;
      height: 100px;
      background: #000;
      opacity: 0.7;
      z-index: 999;
      &.add-left-18 {
        left: 18px;
      }
      i {
        color: #fff;
        margin-top: 39px;
        margin-left: 0px;
      }
    }
    .limit-text {
      float: left;
      margin-left: 10px;
      margin-top: -10px;

      p {
        font-size: 12px;
        color: #999;
        text-align: left;
      }
    }
  }
  .el-upload__tip {
    position: absolute;
    top: -6px;
    left: 130px;
  }
  .span-mt-10 {
    .edit-img {
      width: 20px;
      margin-top: 10px;
    }
  }
  .p-tips {
    font-size: 13px;
    color: #8c8c8c;
    line-height: 26px;
    margin-bottom: 15px;
  }
  .warehouseAdress-wrap {
    .warehouseAdress-tip {
      font-size: 13px;
      color: #8c8c8c;
    }
    .warehouseAdress-add {
      color: #449284;
      border-color: #449284;
    }
    .warehouseAdress-list {
      display: block;
      margin-top: 20px;
      border: 1px solid #DCDFE6;
      padding: 10px;
      border-radius: 4px;
      height: 114px;
      width: 900px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        height: 2px;
        width: 4px;
        background-color: #ddd;
      }
      .warehouseAdress-item {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        position: relative;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
      .el-radio__label {
        display: flex;
        flex: 1;
      }
      .warehouseAdress-main {
        flex: 1;
        padding-right: 60px;
      }
      .warehouseAdress-msg {
        color: #606266;
        margin: 0 10px;
      }
      .warehouseAdress-do {
        position: sticky;
        right: -10px;
        color: #449284;
        background: #fff;
        padding: 0 10px 0 10px;
        width: 100px;
      }
    }
  }
  .warehouseAdress-input {
    width: 500px;
  }
}
</style>
