<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">
            <span>
               {{curmbSecond}}
            </span>
            <span v-if="certifyStatus >= 1" class="verify-status" :class="certifyStatusColor"  style="margin-left: 20px">{{ certifyStatus | storeStatusFormat}}</span>
          </p>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            :disabled="disabledFORM || storeData && storeData.tradeStore.storeType == 3"
            @click="completeWholeForm"
            >完成</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"
        :disabled="disabledFORM"
        inline-message
      >
        <div>
          <el-tabs v-model="activeTabName" @tab-click="handleTabName">
            <el-tab-pane label="基本信息" name="first">
              <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"
                  @change="storeTypeChange"
                  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>
              <el-form-item label="" v-if="formData.storeType != 3" prop="storeType">
                <el-button class="ml" size="small" type="primary" @click="nextStepFirst('second')">下一步</el-button>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="资质信息" name="second">
              <div>
                <div v-if="certifyValidDtoList(1)">
                  <el-form-item>
                    <div class="red">{{certifyValidDtoList(1)}}</div>
                  </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>
                </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-row>
                  <el-form-item
                    label="医疗资质"
                    prop="storeQualityUrl"
                  >
                    <el-input
                      size="small"
                      v-model="formData.storeQualityUrl"
                      placeholder="请填写URL,仅对批发商品生效"
                      style="width: 35%"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-form-item
                v-if="formData.storeType == 1"
                class="required-label"
                label="企业类型"
                prop="certifyReq.orgType"
              >
                <el-select
                  v-model="formData.certifyReq.orgType"
                  placeholder="请选择企业类型类型"
                  size="small"
                  clearable
                  :disabled="isDisabled"
                  style="width: 35%"
                >
                  <el-option
                    v-for="(item, index) in orgLIST"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="formData.storeType == 1"
                label="企业地区"
                class="required-label"
              >
                  <el-cascader
                    class="regionCascader"
                    ref="regionCascader"
                    style="width:35%"
                    size="small"
                    :options="optionsRegion"
                    :props="propsRegion"
                    @change="handleRegionChange"
                    :placeholder="orgRegionValueFirst"
                  ></el-cascader>
              </el-form-item>
              <el-form-item
                v-if="formData.storeType == 1"
                label="详细地址"
                class="required-label"
                prop="certifyReq.orgAddress"
              >
                <el-input
                  size="small"
                  v-model="formData.certifyReq.orgAddress"
                  placeholder="请填写详细地址"
                  maxlength="100"
                  style="width: 35%"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="formData.storeType == 1"
                label="经营范围"
                class="required-label"
                prop="certifyReq.bizScope"
              >
                <el-cascader
                  ref="cascaderBizScope"
                  v-model="formData.certifyReq.bizScope"
                  style="width: 360px"
                  size="small"
                  :options="orgScopeLIST"
                  @change="orgScopeLISTChange"
                  :props="{value: 'id', label: 'name',children: 'list', multiple: true, checkStrictly: false}"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item v-if="formData.storeType != 3" class="required-label" label="营业证明">
                <p v-if="certifyValidDtoList(2)" class="red">{{certifyValidDtoList(2)}}</p>
                <p class="tips">营业执照</p>
                <p class="p-tips">
                  仅支持jpg、png图片文件，且文件小于2M<br />
                  上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
                </p>
                <div>
                  <div>
                    <el-form-item prop="imgUrlC1">
                    <el-upload
                      v-model="formData.imgUrlC1"
                      :disabled="Boolean(formData.imgUrlC1)"
                      class="bg-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC1')}"
                    >
                      <el-image
                        class="bg-img"
                        v-if="formData.imgUrlC1"
                        :src="formData.imgUrlC1"
                        @mouseover.stop="imgMouseOverC1 = true"
                        :preview-src-list="[formData.imgUrlC1]">
                      </el-image>

                      <img
                        v-if="!formData.imgUrlC1"
                        class="bg-img"
                        src="../../assets/image/small.png"
                      />
                      <div
                        class="img-delete"
                        v-show="imgMouseOverC1"
                        @click.stop="deleteImg('imgUrlC1')"
                        @mouseout.stop="imgMouseOverC1 = false"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                    </el-upload>
                    </el-form-item>
                    <div v-if="formData.storeType == 1" class="img-data">
                      <el-form-item
                        label="企业名称"
                        label-width="100px"
                        prop="certifyReq.orgName"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入"
                          v-model="formData.certifyReq.orgName"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="信用代码"
                        prop="certifyReq.creditCode"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入"
                          v-model="formData.certifyReq.creditCode"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="有效日期"
                        prop="imgUrlC1Date"
                      >
                        <el-date-picker
                          v-model="formData.imgUrlC1Date"
                          @change="(v) => {this.orgDate(v, 'imgUrlC1')}"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </div>
                  <el-form-item v-if="formData.storeType == 1" label="认证类型" label-width="100px">
                    <el-radio-group v-model="formData.certifyReq.certType" >
                      <el-radio :label="1">法人认证</el-radio>
                      <el-radio :label="2">委托人认证</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <div v-if="formData.certifyReq.certType == 2">
                    <p v-if="certifyValidDtoList(4)" class="red">{{certifyValidDtoList(4)}}</p>
                    <div v-if="formData.storeType == 1">
                      <div>委托人身份证</div>
                      <div class="flex-wrap">
                        <el-upload
                          v-model="formData.imgUrlC4"
                          :disabled="Boolean(formData.imgUrlC4)"
                          class="bg-uploader"
                          action="#"
                          :show-file-list="false"
                          :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC4')}"
                        >
                          <el-image
                            class="bg-img"
                            v-if="formData.imgUrlC4"
                            :src="formData.imgUrlC4"
                            @mouseover.stop="imgMouseOverC4 = true"
                            :preview-src-list="[formData.imgUrlC4]">
                          </el-image>
                          <img
                            v-if="!formData.imgUrlC4"
                            class="bg-img"
                            src="../../assets/image/small.png"
                          />
                          <div
                            class="img-delete"
                            v-show="imgMouseOverC4"
                            @click.stop="deleteImg('imgUrlC4')"
                            @mouseout.stop="imgMouseOverC4 = false"
                          >
                            <i class="el-icon-delete"></i>
                          </div>
                        </el-upload>
                        <el-upload
                          :disabled="Boolean(formData.imgUrlC5)"
                          v-model="formData.imgUrlC5"
                          class="bg-uploader"
                          action="#"
                          :show-file-list="false"
                          :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC5')}"
                        >
                          <el-image
                            class="bg-img"
                            v-if="formData.imgUrlC5"
                            :src="formData.imgUrlC5"
                            @mouseover.stop="imgMouseOverC5 = true"
                            :preview-src-list="[formData.imgUrlC5]">
                          </el-image>
                          <img
                            v-if="!formData.imgUrlC5"
                            class="bg-img"
                            src="../../assets/image/small.png"
                          />
                          <div
                            class="img-delete"
                            v-show="imgMouseOverC5"
                            @click.stop="deleteImg('imgUrlC5')"
                            @mouseout.stop="imgMouseOverC5 = false"
                          >
                            <i class="el-icon-delete"></i>
                          </div>
                        </el-upload>
                      </div>
                      <div class="img-data">
                        <el-form-item
                          label="委托人姓名"
                          label-width="100px"
                          prop="certifyReq.assignorName"
                        >
                          <el-input
                            v-model="formData.certifyReq.assignorName"
                            size="small"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="证件号码"
                          prop="certifyReq.assignorCertNo"
                        >
                          <el-input
                            size="small"
                            placeholder="请输入"
                            v-model="formData.certifyReq.assignorCertNo"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="有效日期"
                          prop="imgUrlC5Date"
                        >
                          <el-date-picker
                            v-model="formData.imgUrlC5Date"
                            @change="(v) => {this.orgDate(v, 'imgUrlC5')}"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                  <div v-if="formData.certifyReq.certType == 2|| formData.storeType == 2 " class="flex-upload">
                    <p v-if="certifyValidDtoList(5)" class="red">{{certifyValidDtoList(5)}}</p>
                    <div>委托书</div>
                    <el-upload
                      :disabled="Boolean(formData.imgUrlP7)"
                      v-model="formData.imgUrlP7"
                      class="bg-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP7')}"
                    >
                      <el-image
                        class="bg-img"
                        v-if="formData.imgUrlP7"
                        :src="formData.imgUrlP7"
                        @mouseover.stop="imgMouseOverP7 = true"
                        :preview-src-list="[formData.imgUrlP7]">
                      </el-image>
                      <img
                        v-if="!formData.imgUrlP7"
                        class="bg-img"
                        src="../../assets/image/small.png"
                      />
                      <div
                        class="img-delete"
                        v-show="imgMouseOverP7"
                        @click.stop="deleteImg('imgUrlP7')"
                        @mouseout.stop="imgMouseOverP7 = false"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                    </el-upload>
                  </div>

                  <div v-if="formData.storeType == 1 && formData.certifyReq.certType === 1">
                    <p v-if="certifyValidDtoList(6)" class="red">{{certifyValidDtoList(6)}}</p>
                    <div>法人身份证</div>
                    <div class="flex-wrap">
                      <el-form-item prop="imgUrlC2">
                      <el-upload
                        :disabled="Boolean(formData.imgUrlC2)"
                        v-model="formData.imgUrlC2"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC2')}"
                      >
                        <el-image
                          class="bg-img"
                          v-if="formData.imgUrlC2"
                          :src="formData.imgUrlC2"
                          @mouseover.stop="imgMouseOverC2 = true"
                          :preview-src-list="[formData.imgUrlC2]">
                        </el-image>
                        <img
                          v-if="!formData.imgUrlC2"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete"
                          v-show="imgMouseOverC2"
                          @click.stop="deleteImg('imgUrlC2')"
                          @mouseout.stop="imgMouseOverC2 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                        <div>身份证正面</div>
                      </el-upload>
                      </el-form-item>
                      <el-form-item prop="imgUrlC3">
                      <el-upload
                        :disabled="Boolean(formData.imgUrlC3)"
                        v-model="formData.imgUrlC3"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC3')}"
                      >
                        <el-image
                          class="bg-img"
                          v-if="formData.imgUrlC3"
                          :src="formData.imgUrlC3"
                          @mouseover.stop="imgMouseOverC3 = true"
                          :preview-src-list="[formData.imgUrlC3]">
                        </el-image>
                        <img
                          v-if="!formData.imgUrlC3"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete"
                          v-show="imgMouseOverC3"
                          @click.stop="deleteImg('imgUrlC3')"
                          @mouseout.stop="imgMouseOverC3 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                        <div>身份证反面</div>
                      </el-upload>
                      </el-form-item>
                    </div>

                    <div class="img-data">
                      <el-form-item
                        label="法人姓名"
                        label-width="100px"
                        prop="certifyReq.legalName"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入"
                          v-model="formData.certifyReq.legalName"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="证件号码"
                        prop="certifyReq.legalCertNo"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入"
                          v-model="formData.certifyReq.legalCertNo"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="有效日期"
                        prop="imgUrlC3Date"
                      >
                        <el-date-picker
                          v-model="formData.imgUrlC3Date"
                          @change="(v) => {this.orgDate(v, 'imgUrlC3')}"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </div>
                  <div v-if="formData.storeType == 1 && formData.certifyReq.certType === 2">
                    <p v-if="certifyValidDtoList(6)" class="red">{{certifyValidDtoList(6)}}</p>
                    <div>法人身份证</div>
                    <div class="flex-wrap">
                      <el-form-item>
                      <el-upload
                        :disabled="Boolean(formData.imgUrlC2)"
                        v-model="formData.imgUrlC2"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC2')}"
                      >
                        <el-image
                          class="bg-img"
                          v-if="formData.imgUrlC2"
                          :src="formData.imgUrlC2"
                          @mouseover.stop="imgMouseOverC2 = true"
                          :preview-src-list="[formData.imgUrlC2]">
                        </el-image>
                        <img
                          v-if="!formData.imgUrlC2"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete"
                          v-show="imgMouseOverC2"
                          @click.stop="deleteImg('imgUrlC2')"
                          @mouseout.stop="imgMouseOverC2 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                        <div>身份证正面</div>
                      </el-upload>
                      </el-form-item>
                      <el-form-item>
                      <el-upload
                        :disabled="Boolean(formData.imgUrlC3)"
                        v-model="formData.imgUrlC3"
                        class="bg-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="(file) => {this.beforeUploadOrg(file, 'imgUrlC3')}"
                      >
                        <el-image
                          class="bg-img"
                          v-if="formData.imgUrlC3"
                          :src="formData.imgUrlC3"
                          @mouseover.stop="imgMouseOverC3 = true"
                          :preview-src-list="[formData.imgUrlC3]">
                        </el-image>
                        <img
                          v-if="!formData.imgUrlC3"
                          class="bg-img"
                          src="../../assets/image/small.png"
                        />
                        <div
                          class="img-delete"
                          v-show="imgMouseOverC3"
                          @click.stop="deleteImg('imgUrlC3')"
                          @mouseout.stop="imgMouseOverC3 = false"
                        >
                          <i class="el-icon-delete"></i>
                        </div>
                        <div>身份证反面</div>
                      </el-upload>
                      </el-form-item>
                    </div>

                    <div class="img-data">
                      <el-form-item
                        label="法人姓名"
                        label-width="100px"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入"
                          v-model="formData.certifyReq.legalName"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="证件号码"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入"
                          v-model="formData.certifyReq.legalCertNo"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="有效日期"
                      >
                        <el-date-picker
                          v-model="formData.imgUrlC3Date"
                          @change="(v) => {this.orgDate(v, 'imgUrlC3')}"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="line-section"></div>
                </div>
              </el-form-item>
              <el-form-item label="资质信息" class="required-label" v-if="formData.storeType < 3">
                <div v-if="controlLicense.includes('1') || formData.storeType == 2">
                  <p v-if="certifyValidDtoList(7)" class="red">{{certifyValidDtoList(7)}}</p>
                  <p class="tips">药品经营许可证</p>
                  <el-form-item prop="imgUrlP1">
                    <el-upload
                      :disabled="Boolean(formData.imgUrlP1)"
                      v-model="formData.imgUrlP1"
                      class="bg-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP1')}"
                    >
                      <el-image
                        class="bg-img"
                        v-if="formData.imgUrlP1"
                        :src="formData.imgUrlP1"
                        @mouseover.stop="imgMouseOverP1 = true"
                        :preview-src-list="[formData.imgUrlP1]">
                      </el-image>
                      <img
                        v-if="!formData.imgUrlP1"
                        class="bg-img"
                        src="../../assets/image/small.png"
                      />
                      <div
                        class="img-delete"
                        v-show="imgMouseOverP1"
                        @click.stop="deleteImg('imgUrlP1')"
                        @mouseout.stop="imgMouseOverP1 = false"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                    </el-upload>
                  </el-form-item>
                  <el-form-item
                    v-if="formData.storeType == 1"
                    label="有效日期"
                    label-width="100px"
                    prop="imgUrlP1Date"
                  >
                    <el-date-picker
                      v-model="formData.imgUrlP1Date"
                      @change="(v) => {this.orgDate(v, 'imgUrlP1')}"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div v-if="controlLicense.includes('1')">
                  <p v-if="certifyValidDtoList(8)" class="red">{{certifyValidDtoList(8)}}</p>
                  <p class="tips">药品经营质量管理规范认证证书</p>
                  <el-form-item prop="imgUrlP2">
                    <el-upload
                      :disabled="Boolean(formData.imgUrlP2)"
                      v-model="formData.imgUrlP2"
                      class="bg-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP2')}"
                    >
                      <el-image
                        class="bg-img"
                        v-if="formData.imgUrlP2"
                        :src="formData.imgUrlP2"
                        @mouseover.stop="imgMouseOverP2 = true"
                        :preview-src-list="[formData.imgUrlP2]">
                      </el-image>
                      <img
                        v-if="!formData.imgUrlP2"
                        class="bg-img"
                        src="../../assets/image/small.png"
                      />
                      <div
                        class="img-delete"
                        v-show="imgMouseOverP2"
                        @click.stop="deleteImg('imgUrlP2')"
                        @mouseout.stop="imgMouseOverP2 = false"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                    </el-upload>
                  </el-form-item>
                  <el-form-item
                    label="有效日期"
                    label-width="100px"
                    prop="imgUrlP2Date"
                  >
                    <el-date-picker
                      v-model="formData.imgUrlP2Date"
                      @change="(v) => {this.orgDate(v, 'imgUrlP2')}"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div v-if="controlLicense.includes('3')">
                  <p v-if="certifyValidDtoList(9)" class="red">{{certifyValidDtoList(9)}}</p>
                  <p class="tips">食品经营(流通)许可证</p>
                  <el-form-item prop="imgUrlP3">
                  <el-upload
                    :disabled="Boolean(formData.imgUrlP3)"
                    v-model="formData.imgUrlP3"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP3')}"
                  >
                    <el-image
                      class="bg-img"
                      v-if="formData.imgUrlP3"
                      :src="formData.imgUrlP3"
                      @mouseover.stop="imgMouseOverP3 = true"
                      :preview-src-list="[formData.imgUrlP3]">
                    </el-image>
                    <img
                      v-if="!formData.imgUrlP3"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete"
                      v-show="imgMouseOverP3"
                      @click.stop="deleteImg('imgUrlP3')"
                      @mouseout.stop="imgMouseOverP3 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  </el-form-item>
                  <el-form-item
                    label="有效日期"
                    label-width="100px"
                    prop="imgUrlP3Date"
                  >
                    <el-date-picker
                      v-model="formData.imgUrlP3Date"
                      @change="(v) => {this.orgDate(v, 'imgUrlP3')}"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div v-if="controlLicense.includes('2')">
                  <p v-if="certifyValidDtoList(10)" class="red">{{certifyValidDtoList(10)}}</p>
                  <p class="tips">医疗器械经营许可证</p>
                  <el-form-item prop="imgUrlP4">
                  <el-upload
                    :disabled="Boolean(formData.imgUrlP4)"
                    v-model="formData.imgUrlP4"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP4')}"
                  >
                    <el-image
                      class="bg-img"
                      v-if="formData.imgUrlP4"
                      :src="formData.imgUrlP4"
                      @mouseover.stop="imgMouseOverP4 = true"
                      :preview-src-list="[formData.imgUrlP4]">
                    </el-image>
                    <img
                      v-if="!formData.imgUrlP4"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete"
                      v-show="imgMouseOverP4"
                      @click.stop="deleteImg('imgUrlP4')"
                      @mouseout.stop="imgMouseOverP4 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  </el-form-item>
                  <el-form-item
                    label="有效日期"
                    label-width="100px"
                    prop="imgUrlP4Date"
                  >
                    <el-date-picker
                      v-model="formData.imgUrlP4Date"
                      @change="(v) => {this.orgDate(v, 'imgUrlP4')}"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div v-if="controlLicense.includes('2')">
                  <p class="tips">医疗器械网络销售备案</p>
                  <el-form-item prop="imgUrlP5">
                  <el-upload
                    :disabled="Boolean(formData.imgUrlP5)"
                    v-model="formData.imgUrlP5"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP5')}"
                  >
                    <el-image
                      class="bg-img"
                      v-if="formData.imgUrlP5"
                      :src="formData.imgUrlP5"
                      @mouseover.stop="imgMouseOverP5 = true"
                      :preview-src-list="[formData.imgUrlP5]">
                    </el-image>
                    <img
                      v-if="!formData.imgUrlP5"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete"
                      v-show="imgMouseOverP5"
                      @click.stop="deleteImg('imgUrlP5')"
                      @mouseout.stop="imgMouseOverP5 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  </el-form-item>
                  <el-form-item
                    label="有效日期"
                    label-width="100px"
                    prop="imgUrlP5Date"
                  >
                    <el-date-picker
                      v-model="formData.imgUrlP5Date"
                      @change="(v) => {this.orgDate(v, 'imgUrlP5')}"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div v-if="controlLicense.includes('2')">
                  <p v-if="certifyValidDtoList(11)" class="red">{{certifyValidDtoList(11)}}</p>
                  <p class="tips">二类医疗器械经营备案凭证</p>
                  <el-form-item prop="imgUrlP6">
                  <el-upload
                    :disabled="Boolean(formData.imgUrlP6)"
                    v-model="formData.imgUrlP6"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="(file) => {this.beforeUploadProve(file, 'imgUrlP6')}"
                  >
                    <el-image
                      class="bg-img"
                      v-if="formData.imgUrlP6"
                      :src="formData.imgUrlP6"
                      @mouseover.stop="imgMouseOverP6 = true"
                      :preview-src-list="[formData.imgUrlP6]">
                    </el-image>
                    <img
                      v-if="!formData.imgUrlP6"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete"
                      v-show="imgMouseOverP6"
                      @click.stop="deleteImg('imgUrlP6')"
                      @mouseout.stop="imgMouseOverP6 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  </el-form-item>
                  <el-form-item
                    label="有效日期"
                    label-width="100px"
                    prop="imgUrlP6Date"
                  >
                    <el-date-picker
                      v-model="formData.imgUrlP6Date"
                      @change="(v) => {this.orgDate(v, 'imgUrlP6')}"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-form-item>
              <el-form-item label="" prop="storeType">
                <el-button class="ml" size="small" @click="nextStepFirst('first')">上一步</el-button>
                <el-button class="ml" size="small" type="primary" @click="nextStepFirst('third')">下一步</el-button>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane v-if="formData.storeType != 3" label="其他设置" name="third">
              <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" 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">
                <el-button class="btn-small" @click.prevent="createAdress(1,index)">编辑</el-button> ｜
                 <el-button class="btn-small" @click.prevent="deleteAdress(index)">删除</el-button>
              </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-item label="" prop="storeType">
                <el-button class="ml" size="small" @click="nextStepFirst('second')">上一步</el-button>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </div>
      </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";
import dayjs from 'dayjs';
import { openLoading, closeLoading, deepCopy} from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from "@/components/common/cropper.vue";
import { saveStore, queryStore, getLgCompanyList, getStoreAdressRepot, OCRStore, idCardOcr, orgOptionList, orgScopeOptionList} from "@/utils/shop";
import { getProvinces, getCities, getCounties, getTowns } from '@/utils/base/baseApi';
import { checkMobile } from "@/utils/patients/checkValid";
import * as operationData from "../../utils/operation";
import storejs from 'storejs'
let vm = null;
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 {
      disabledFORM: false,
      controlLicense: [],
      activeTabName:'first',
      curmbFirst: "云鹊店铺",
      curmbSecond: "新建店铺",
      isDisabled: false,
      storeData: null,
      typeList: [
        {
          label: "供货商",
          value: 1,
        },
        {
          label: "小药房",
          value: 2,
        },
        {
          label: "医生小店",
          value: 3,
        },
      ],
      licenseDate: '',
      orgRegionValueFirst: '请选择地区',
      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
        imgUrlP4: "", //证明图4
        imgUrlP5: "", //证明图5
        imgUrlP6: "", //证明图6
        imgUrlP7: "", //证明图7
        docName: "", //医生小店-医生姓名
        docPhone: "", //医生小店-联系电话
        drugstoreName: "", //小药房-药店名称
        drugstorePhone: "", //小药房-联系电话
        imgUrlC1: "", //证明图1
        imgUrlC2: "", //证明图2
        imgUrlC3: "", //证明图3
        imgUrlC4: "",
        imgUrlC5: "",
        imgUrlP7Date: '',
        imgUrlP6Date: '',
        imgUrlP5Date: '',
        imgUrlP4Date: '',
        imgUrlP3Date: '',
        imgUrlP2Date: '',
        imgUrlP1Date: '',
        imgUrlC3Date:'',
        imgUrlC5Date:'',
        imgUrlC1Date:'',
        repotList:[//仓库地址
        ],
        selectedKey: '', //默认收货地址
        expressLimitFlag: 0, //是否限制物流公司
        repotExpressList:[], //支持的物流公司
        expressDesc: '', //退款说明
        certifyReq:{
          areaStr: [],
          orgType: '',
          orgName:'',
          licenseUrl:'',
          licenseValidDateBegin:'',
          licenseValidDateEnd:'',
          licenseType: 1,
          certType: 1,
          creditCode:'',
          assignorLetterUrl:'',
          bizScope:'',
          certifyLicenseImgList: []
        },
      },
      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" },
        ],
        'certifyReq.orgType':[{required: true, message: '请填企业类型', trigger: 'blur'}],  //有多条校验条件的时候可以放个ob
        'certifyReq.orgAddress':[{type: "string", required: true, message: '请填写详细地址', trigger: 'blur'}],
        'certifyReq.bizScope':[{type: "array", required: true, message: '请选择经营范围', trigger: 'change'}],
        'certifyReq.orgName':[{type: "string", required: true, message: '请输入企业名称', trigger: 'blur'}],
        'certifyReq.creditCode':[{type: "string", required: true, message: '请输入信用代码', trigger: 'blur'}],
        imgUrlC1Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'blur'}],
        'certifyReq.assignorName':[{type: "string", required: true, message: '请输入委托人姓名', trigger: 'blur'}],
        'certifyReq.assignorCertNo':[{type: "string", required: true, message: '请输入证件号码', trigger: 'blur'}],
        imgUrlC5Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        'certifyReq.legalName':[{type: "string", required: true, message: '请输入法人姓名', trigger: 'blur'}],
        'certifyReq.legalCertNo':[{type: "string", required: true, message: '请输入证件号码', trigger: 'blur'}],
        imgUrlC3Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP1:[{type: "string", required: true, message: '请上传图片', trigger: 'blur'}],
        imgUrlP1Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP2:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlP3:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlP4:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlP5:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlP6:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlP7:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlC1:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlC2:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlC3:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
        imgUrlP2Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP3Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP4Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP5Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP6Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
        imgUrlP7Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
      },
      imgMouseOver1: false,
      uploadImgMessage1: false, //未上传图片，校验提示语
      imgMouseOverP1: false,
      imgMouseOverP2: false,
      imgMouseOverP3: false,
      imgMouseOverP4: false,
      imgMouseOverP5: false,
      imgMouseOverP6: false,
      imgMouseOverP7: false,
      imgMouseOverC1: false,
      imgMouseOverC2: false,
      imgMouseOverC3: false,
      imgMouseOverC4: false,
      imgMouseOverC5: false,
      optionsRegion: [],
      propsRegion: {
        lazy: true,
        lazyLoad(node, resolve) {
          console.log("node", node);
          if (node.level == 1) {
            let req = {
              provinceId: node.data.value
            };
            vm.GET("basic-data/position/cities", req).then(res => {
              let newData = vm.setMoreOption(res.data.cityList, "cities");
              resolve(newData);
            });
          } else if (node.level == 2) {
            let req = {
              cityId: node.data.value
            };
            vm.GET("basic-data/position/counties", req).then(res => {
              let newData = vm.setMoreOption(res.data.countyList, "counties");
              resolve(newData);
            });
          } else if (node.level == 3) {
            let req = {
              countyId: node.data.value
            };
            vm.GET("basic-data/position/towns", req).then(res => {
              let newData = vm.setMoreOption(res.data.townList, "towns");
              resolve(newData);
            });
          }
        }
      },
      orgLIST: [],
      orgScopeLIST:[],
      certifyStatus: ''
    };
  },
  computed: {
    certifyStatusColor () {
      return `certifyStatusColor${this.certifyStatus}`;
    }
  },
  watch: {
    "formData.certifyReq.bizScope": {
      handler(val) {
        const j = [];
        if(val) {
          val.map( i => {
            if( i[0].includes('first') ){
              const m = i[0].charAt(0);
              j.includes(m) || j.push(m);
            }
          })
          this.controlLicense = j;
        }
      },
      deep: true,
    },
  },
  created() {
    vm = this;
    this.activeTabName = this.$route.query.currentTab || 'first';
    this.certifyStatus = this.$route.query.certifyStatus || null;
    this.disabledFORM = this.$route.query.disabled == 'false' ? false : true;

    this.getCompanyList();
    this.initDataLoading();
  },
  methods: {
    async initDataLoading () {
      const q = await this.getProvincesList();
      const w = await this.getRegionOption();
      const e = await this.orgOptionList();
      if(q && w && e){
        const storeId = this.$route.query.storeId || null;

        const s = storejs.get('store_info');
          if(storeId){
            // 编辑  详情
            this.curmbSecond = "编辑店铺";
            this.isDisabled = true;

            if(this.disabledFORM){
              this.formData.storeId = storeId;
              storejs.remove('store_info');
              this.initInfo();
              this.getDetail();
            }else{
              if(s && s.storeId == storeId){
                this.formData = s;
                const {areaStr} = s.certifyReq;
                const v = areaStr.map(i => {return i.label;}).join('/');
                this.orgRegionValueFirst = v;
                this.areaStr = v;
                this.orgDateReverse();
                this.resetImgUrl();
              }else{
                this.formData.storeId = storeId;
                storejs.remove('store_info');
                this.initInfo();
                this.getDetail();
              }
            }
          }else{
            // 新建店铺
            storejs.remove('store_info');
            this.curmbSecond = "新建店铺";
            this.isDisabled = false;
            if(s){
              // 存在数据 就反现
              this.formData = s;
              const {areaStr} = s.certifyReq;
              const v = areaStr.map(i => {return i.label;}).join('/');
              this.orgRegionValueFirst = v;
              this.orgDateReverse();
            }
          }
        }
    },
    //日期 设置
    orgDateReverse () {
      const {licenseValidDateBegin,licenseValidDateEnd,legalValidDateBegin, legalValidDateEnd, assignorValidDateBegin, assignorValidDateEnd} = this.formData.certifyReq;
      const {certifyLicenseImgList, certifyReportImgList} = this.formData.certifyReq;
      this.formData.imgUrlC1Date = [licenseValidDateBegin, licenseValidDateEnd];
      this.formData.imgUrlC5Date = [assignorValidDateBegin, assignorValidDateEnd];
      this.formData.imgUrlC3Date = [legalValidDateBegin, legalValidDateEnd];
      // imgUrlC3Date
      (certifyReportImgList || []).concat(certifyLicenseImgList).map(i => {
        const n = `imgUrlP${i.imageType}Date`;
        const m = `imgUrlP${i.imageType}`;
        this.formData[n] = [i.validDateBegin, i.validDateEnd];
        this.formData[m] = i.url;
      })
    },
    resetImgUrl () {
      // 营业执照 legalCertBackUrl legalCertFrontUrl
      const s = this.formData.certifyReq;
      this.formData.imgUrlC3 = s.legalCertBackUrl;
      this.formData.imgUrlC2 = s.legalCertFrontUrl;

      this.formData.imgUrlC1 = s.licenseUrl;

      this.formData.imgUrlC5 = s.assignorCertBackUrl;
      this.formData.imgUrlC4 = s.assignorCertFrontUrl;
      this.formData.imgUrlP7 = s.assignorLetterUrl;
    },
    getDetail() {
      getStoreAdressRepot(this.formData.storeId).then(res => {
        if (res.code == "000000" && res.data) {
          const l = res.data;
          const {areaStr, bizScope} = l.certifyReq;
          l.certifyReq.areaStr = JSON.parse(areaStr);
          l.certifyReq.bizScope = JSON.parse(bizScope);
          Object.assign(this.formData, l);

          const v = JSON.parse(areaStr).map(i => {return i.label;}).join('/');
          this.orgRegionValueFirst = v;
          this.areaStr = v;
          this.orgDateReverse();
          this.resetImgUrl();

        } 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 = "";
          this.formData.imgUrlP4 = "";
          this.formData.imgUrlP5 = "";
          this.formData.imgUrlP6 = "";
          this.formData.imgUrlP7 = "";
        }
        //处理管理员数据
        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;
        this.formData.certifyReq.certType = 2;
        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 = "";
          this.formData.imgUrlC4 = "";
          this.formData.imgUrlC5 = "";
        }
      }
    },
    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);
        }
      });
    },
    completeWholeForm() {
      let flag = this.submitForm();
      if (flag && this.certifyStatus == 3) {
        this.$confirm('确定要删除这条地址信息么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '',
          type: 'error'
        }).then(() => {
          this.formData.storeType = Number(this.formData.storeType);
          this.formData.storeEntry = "PCKAIDIAN"; // 添加店铺渠道
          const {bizScope, areaStr} = this.formData.certifyReq;
          const result = deepCopy(this.formData);
          result.certifyReq.bizScope = JSON.stringify(bizScope);
          result.certifyReq.areaStr = JSON.stringify(areaStr);
          console.log("提交的数据", result);
          saveStore(result).then((res) => {
            if (res.code == "000000") {
              storejs.remove('store_info');
              this.$message.success("操作成功");
              this.$router.push({
                path: "/shop-list",
              });
            } else {
              this.$message.error(res.message);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }else if(flag) {
          this.formData.storeType = Number(this.formData.storeType);
          this.formData.storeEntry = "PCKAIDIAN"; // 添加店铺渠道
        const {bizScope, areaStr} = this.formData.certifyReq;
        const result = deepCopy(this.formData);
        result.certifyReq.areaStr = JSON.stringify(areaStr);
        result.certifyReq.bizScope = JSON.stringify(bizScope);
        console.log("提交的数据", result);
          saveStore(result).then((res) => {
            if (res.code == "000000") {
              storejs.remove('store_info');
              this.$message.success("操作成功");
              this.$router.push({
                path: "/shop-list",
              });
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    // 返回
    back() {
      this.$router.push({
        path: "/shop-list",
      });
      // this.$confirm('返回后您填写的信息将不会被保存。', '确认要返回吗？', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'error'
      //   }).then(() => {
      //
      //   }).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;
      console.log('--this.formData', this.formData);
      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;
          this.$message.warning("请完善必填信息！");
        }
      });
      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);
    },
    //上传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;
        image.onload = function () {
          let _this = this;
          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) {
      let fileLimit = {
        width: "",
        height: "",
        size: 3,
        sizeText: "3M",
        key: type,
        more: "imgUrlP1More",
      };
      return fileLimit;
    },
    //日期 设置
    orgDate (v, type) {
      const b = dayjs(v[0]).format('YYYY-MM-DD');
      const e = dayjs(v[1]).format('YYYY-MM-DD');
      const l = this.formData.certifyReq.certifyLicenseImgList;
      const t = type.charAt(type.length-1);
      switch (type) {
        case 'imgUrlC1':
          // 营业执照
          this.formData.certifyReq.licenseValidDateBegin = b;
          this.formData.certifyReq.licenseValidDateEnd = e;
          break;
        case 'imgUrlC5':
          // 委托人身份证
          this.formData.certifyReq.assignorValidDateBegin = b;
          this.formData.certifyReq.assignorValidDateEnd = e;
          break;
        case 'imgUrlC3':
          // 法人身份证
          this.formData.certifyReq.legalValidDateBegin = b;
          this.formData.certifyReq.legalValidDateEnd = e;
          break;
        case 'imgUrlP1':
        // 药品经营许可证
        case 'imgUrlP2':
        // 药品经营质量管理规范认证
        case 'imgUrlP3':
        // 食品经营（流通）许可证
        case 'imgUrlP4':
        // 医疗器械经营许可证
        case 'imgUrlP5':
        // 二类医疗器械经营备案凭证
        case 'imgUrlP6':
        // 委托书
        case 'imgUrlP7':
          // 年度报告
          const r = l.filter( i => {return i.imageType == t})[0] || {};
          l.push(Object.assign(r, {validDateBegin: b, validDateEnd: e, imageType: t}));
          this.formData.certifyReq.certifyLicenseImgList = this.clearRepeat(l, 'imageType');
          console.log('--this.formData', this.formData);
          break;
        default:
          return false;
          break;
      }
    },
    // 资质信息上传
    beforeUploadProve(file, type) {
      let fileLimit = this.setOption(type);
      this.beforeUploadCommon(file, fileLimit);
    },
    // 需要ocr 上传
    beforeUploadOrg(file, type) {
      let fileLimit = this.setOption(type);
      switch (type) {
        case 'imgUrlC1':
          this.beforeUploadCommon(file, fileLimit, 'licenseFileHandle');
          break;
        case 'imgUrlC2':
          this.beforeUploadCommon(file, fileLimit, 'idCardFileHandle', 1, 'legal');
          break;
        case 'imgUrlC3':
          this.beforeUploadCommon(file, fileLimit, 'idCardFileHandle', 2, 'legal');
          break;
        case 'imgUrlC4':
          this.beforeUploadCommon(file, fileLimit, 'idCardFileHandle', 1, 'assignor');
          break;
        case 'imgUrlC5':
          this.beforeUploadCommon(file, fileLimit, 'idCardFileHandle', 2, 'assignor');
          break;
        default:
          return false;
          break;
      }
    },

    beforeUploadCommon(file, fileLimit, needOCR, isFront, legal) {
      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 () {
          openLoading(vm);
          doUpload(
            vm,
            file,
            getFilePath(file, null),
            "preview4",
            "progress1",
            1
          ).then(function (path) {
            closeLoading(vm);
            console.log('path--', path, fileLimit);
            vm.formData[fileLimit.key] = path.fullPath;
            vm.formData[fileLimit.more] = {
              attachmentName: path.storeName,
              attachmentExt: path.ext,
              attachmentSize: path.size,
            };
            console.log('vm.formData--', vm.formData, fileLimit);
            vm.setImgUrl(path, fileLimit);
            vm.$message.success("上传成功");
          });
        };
        const fileContent = theFile.currentTarget.result.split('base64,');
        const fD = {
          file64Str: fileContent[1],
          name:file.name
        };

        if(needOCR && needOCR == 'licenseFileHandle'){
          vm.licenseFileHandle(fD)
        }
        if(needOCR && needOCR == 'idCardFileHandle'){
          vm.idCardFileHandle(fD, isFront, legal)
        }
      };
      return isJPG && isLt2M;
    },
    setImgUrl (path, fileLimit) {
      const l = this.formData.certifyReq.certifyLicenseImgList;
      const f = path.fullPath;
      const imgName = fileLimit.key;
      const u = this.formData[imgName];
      const t = imgName.charAt(imgName.length-1);
      switch (imgName) {
        case 'imgUrlC1':
          // 营业执照
          this.formData.certifyReq.licenseUrl = u;
          break;
        case 'imgUrlC4':
          // 委托人身份证正面
          this.formData.certifyReq.assignorCertFrontUrl = u;
          break;
        case 'imgUrlC5':
          // 委托人身份证反面
          this.formData.certifyReq.assignorCertBackUrl = u;
          break;
        case 'imgUrlC2':
          // 法人身份证正面
          this.formData.certifyReq.legalCertFrontUrl = u;
          break;
        case 'imgUrlC3':
          // 法人身份证反面
          this.formData.certifyReq.legalCertBackUrl = u;
          break;
        case 'imgUrlP7':
          // 委托书
          this.formData.certifyReq.assignorLetterUrl = u;
          break;
        case 'imgUrlP1':
        // 药品经营许可证
        case 'imgUrlP2':
        // 药品经营质量管理规范认证
        case 'imgUrlP3':
        // 食品经营（流通）许可证
        case 'imgUrlP4':
        // 医疗器械经营许可证
        case 'imgUrlP5':
        // 二类医疗器械经营备案凭证
        case 'imgUrlP6':
        // 委托书
          // 年度报告
          const r = l.filter( i => {return i.imageType == t})[0] || {};
          l.push(Object.assign(r, {url: f, imageType: t}));
          this.formData.certifyReq.certifyLicenseImgList = this.clearRepeat(l, 'imageType');
          break;
        default:
          return false;
          break;
      }
    },
    //删除图片
    deleteImg(type) {
      if(this.disabledFORM){return false;}
      vm.formData[type] = "";
      const testMouse = new Map()
        .set("storeLogo", "imgMouseOver1")
        .set("imgUrlP1", "imgMouseOverP1")
        .set("imgUrlP2", "imgMouseOverP2")
        .set("imgUrlP3", "imgMouseOverP3")
        .set("imgUrlP4", "imgMouseOverP4")
        .set("imgUrlP5", "imgMouseOverP5")
        .set("imgUrlP6", "imgMouseOverP6")
        .set("imgUrlP7", "imgMouseOverP7")
        .set("imgUrlC1", "imgMouseOverC1")
        .set("imgUrlC2", "imgMouseOverC2")
        .set("imgUrlC3", "imgMouseOverC3")
        .set("imgUrlC4", "imgMouseOverC4")
        .set("imgUrlC5", "imgMouseOverC5");

      function matchType(type) {
        return testMouse.get(type) || "";
      }
      let mark = matchType(type);
      vm[mark] = false;
      this.deleteImgFormData(type);
    },
    deleteImgFormData (type) {
      const l = this.formData.certifyReq.certifyLicenseImgList;
      const t = type.charAt(type.length-1);
      switch (type) {
        case 'imgUrlC1':
          // 营业执照
          this.formData.certifyReq.licenseUrl = '';
          break;
        case 'imgUrlC4':
          // 委托人身份证正面
          this.formData.certifyReq.assignorCertFrontUrl = '';
          break;
        case 'imgUrlC5':
          // 委托人身份证反面
          this.formData.certifyReq.assignorCertBackUrl = '';
          break;
        case 'imgUrlC2':
          // 法人身份证正面
          this.formData.certifyReq.legalCertFrontUrl = '';
          break;
        case 'imgUrlC3':
          // 法人身份证反面
          this.formData.certifyReq.legalCertBackUrl = '';
          break;
        case 'imgUrlP7':
          this.formData.certifyReq.assignorLetterUrl = '';
          // 委托书
          break;
        case 'imgUrlP1':
        // 药品经营许可证
        case 'imgUrlP2':
        // 药品经营质量管理规范认证
        case 'imgUrlP3':
        // 食品经营（流通）许可证
        case 'imgUrlP4':
        // 医疗器械经营许可证
        case 'imgUrlP5':
        // 二类医疗器械经营备案凭证
        case 'imgUrlP6':
          // 年度报告
          const r = l.filter( i => {return i.imageType != t}) || [];
          this.formData.certifyReq.certifyLicenseImgList = r;
          break;
        default:
          return false;
          break;
      }
    },
    orgScopeLISTChange(v){
      console.log(v);
    },
    // 获取裁剪的图片数据
    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.disabledFORM){return false;}
      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.disabledFORM){return false;}
      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() {
      return new Promise((resolve) => {
        getProvinces().then((res) => {
          if (res.code == "000000") {
            this.provincesList = res.data.provinceList;
            resolve(true);
          }
        })
      })
    },
    //获取地区
    getRegionOption() {
      return new Promise((resolve) => {
        let req = {};
        vm.GET("basic-data/position/provinces", req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
            const p = operationData.setRegionOption2(res.data.provinceList);
            p.map(i => {
              if(i.id == 0) {
                i.disabled = true
              }
            });
            vm.optionsRegion = p;
            resolve(true);
          }
        });
      })
    },
    orgOptionList () {
      return new Promise((resolve) => {
        orgOptionList().then(res => {
          if(res.code == '000000') {
            this.orgLIST = res.data;
          }
        });
        orgScopeOptionList().then( res => {
          if(res.code == '000000') {
            const m = [
              {id: '1_first', name: '药品', list: []},
              {id: '2_first', name: '医疗器械', list: []},
              {id: '3_first', name: '食品', list: []},
              {id: '4_first', name: '其他', list: []},
            ];
            m.map(item => {
              item.list = res.data.filter(v => v.type == item.id.charAt(0) );
            });
            this.orgScopeLIST = m;
          }
        });
        resolve(true);
      })
    },
    //获取市列表
    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));
    },
    handleTabName() {
      const {query} = this.$route;
      storejs.set('store_info', this.formData);
      const s = {...query, currentTab: this.activeTabName};
      vm.$router.push({ path: "create-shop", query: s});
    },
    nextStepFirst(v) {
      const {query} = this.$route;
      storejs.set('store_info', this.formData);
      this.activeTabName = v;
      const s = {...query, currentTab: this.activeTabName};
      vm.$router.push({ path: "create-shop", query: s});
    },
    handleRegionChange(v) {
      const checkedNodes = this.$refs['regionCascader'].getCheckedNodes()[0];
      const n = [];
      checkedNodes.pathNodes.map(i => {
         n.push({label: i.label, value: i.value});
      });
      // countyId provinceId townId cityId
      this.formData.certifyReq.areaStr = n;
      this.formData.certifyReq.provinceId = v[0] || '';
      this.formData.certifyReq.cityId = v[1] || '';
      this.formData.certifyReq.countyId = v[2] || '';
      this.formData.certifyReq.townId = v[3] || '';
    },
    setMoreOption(data, type) {
      let option = [];
      for (let i = 0; i < data.length; i++) {
        let obj = data[i];
        if (type == "cities") {
          obj.label = data[i].cityName;
          obj.value = data[i].cityId;
        } else if (type == "counties") {
          obj.label = data[i].countyName;
          obj.value = data[i].countyId;
          // obj.leaf = true;
        } else if (type == "towns") {
          obj.label = data[i].townName;
          obj.value = data[i].townId;
          obj.leaf = true;
        }
        option.push(obj);
      }
      return option;
    },
    OCRStore () {},
    // 企业执照OCR上传后的回调处理
    licenseFileHandle(file) {
      OCRStore(file).then((res) => {
          const { code, data } = res;
          if (code === '000000') {
            console.log('res----', data.ocrCardDto);
            const {wordsResult} = data.ocrCardDto;
            if(wordsResult) {
              const {creditCode, establishmentDate, orgName, validDate} = wordsResult;
              vm.formData.certifyReq.orgName = orgName;
              vm.formData.certifyReq.creditCode = creditCode;
              if(establishmentDate && validDate) {
                vm.formData.imgUrlC1Date = [establishmentDate,validDate];
                vm.formData.certifyReq.licenseValidDateBegin = establishmentDate;
                vm.formData.certifyReq.licenseValidDateEnd = validDate;
              }
              console.log('-establishmentDate', establishmentDate, validDate);
            }
          } else {
            console.log(res);
          }
      });
    },
    // 身份证正面/反面OCR上传后的回调处理
    idCardFileHandle(file, type, legal) {
      file['cardSide'] = type;
      console.log('---cardSide', file);
      idCardOcr(file).then((res) => {
        try {
          const { code, data } = res;
          if (code === '000000') {
            console.log('---data', data);
            if(data.ocrCardDto.wordsResultDto){
              const {cardNo,name} = data.ocrCardDto.wordsResultDto;
              if(legal == 'legal'){
                vm.formData.certifyReq.legalName = name;
                vm.formData.certifyReq.legalCertNo = cardNo;
              }else {
                vm.formData.certifyReq.assignorName = name;
                vm.formData.certifyReq.assignorCertNo = cardNo;
              }
            }

            if(data.ocrCardDto.wordsResultBackDto){
              const {signYmd, endYmd} = data.ocrCardDto.wordsResultBackDto;
              if(legal == 'legal'){
                vm.formData.imgUrlC3Date = [signYmd, endYmd];
                vm.formData.certifyReq.legalValidDateBegin = signYmd;
                vm.formData.certifyReq.legalValidDateEnd = endYmd;
              }else {
                vm.formData.imgUrlC5Date = [signYmd, endYmd];
                vm.formData.certifyReq.assignorValidDateBegin = signYmd;
                vm.formData.certifyReq.assignorValidDateEnd = endYmd;
              }
            }
          } else {
            console.log(res);
          }
        } catch (e) {
          console.log(e);
        }
      });
    },
    clearRepeat (arr,key) {
      const m = new Map();
      arr.map(item => {
        m.set(item[key], item)
      })
      return [...m.values()];
    },
    certifyValidDtoList (v) {
      const l = vm.formData.certifyReq.certifyValidDtoList || [];
      const m = l.filter(i => {return i.infoType == v;})[0] || '';
      return m ? m.refuseContent : '';
    },
    storeTypeChange (v) {
      if(v != 1){
        vm.formData.certifyReq.certifyValidDtoList = [];
        vm.formData.certifyReq.bizScope = [];
      }
      console.log('--vm.formData', vm.formData);
    }
  },
  filters: {
    storeStatusFormat(v) {
      let s = '';
      switch (String(v)) {
        case '1':
          s = '信息待完善'
          break;
        case '2':
          s = '待审核'
          break;
        case '3':
          s = '审核成功'
          break;
        case '4':
          s = '审核失败'
          break;
        default:
          s =''
          break;
      }
      return s;
    }
  },
};
</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;
      }
      .verify-status{
        padding: 5px;
        border: 1px solid;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
  .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: 60px;
      top: 0px;
      width: 20px;
      height: 20px;
      background: #000;
      opacity: 0.7;
      z-index: 999;
      i {
        position: relative;
        top: -10px;
        color: #fff;
      }
    }
    .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 {
    display: inline-block;
    font-size: 13px;
    color: #8c8c8c;
    line-height: 26px;
    margin-bottom: 15px;
  }
  .warehouseAdress-wrap {
    .warehouseAdress-tip {
      font-size: 13px;
      color: #8c8c8c;
    }
    .warehouseAdress-add {
      color: #FFFFFF;
      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: 130px;
        .btn-small{
          width: 50px;
          text-align: center;
          padding: 3px 0px;
          margin: 0px;

        }
      }
    }
  }
  .warehouseAdress-input {
    width: 500px;
  }
  .img-data{
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
  }
  .flex-wrap{
    display: flex;
  }
  .line-section{
    height: 1px;
    display: block;
    width: 100%;
    padding: 30px 0px;
    border-bottom: 1px solid #C7C8C9;
  }
  .red{
    color: #FF4B33;
  }
  .regionCascader{
     input::-webkit-input-placeholder{
       color: #606266;
     }
   }
  .certifyStatusColor4{
    color: #FF4B33;
  }
  .certifyStatusColor2{
    color: #FF720C;
  }
  .certifyStatusColor3{
    color: #f6ffed;
  }

}
</style>
