<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 0 20px;">
          <p class="text-v-c">
            当前审核状态：<span class="speDom">{{ reviewResult }}</span><span
            style="display: block;width:20px;height:100%"></span>
            <span class="speTip">仅可修改店铺相关信息，企业主体信息不允许修改！</span></p>
          <p>
            <el-button size="small" icon="el-icon-edit" type="primary" @click="handleEdit">编辑信息</el-button>
          </p>
        </div>
      </div>
      <div>
        <el-card>
          <div slot="header" class="clearfix">
            <p>企业认证信息</p>
          </div>
          <el-form ref="mainForm" :model="mainForm" label-width="180px" class="main-form-con"
                     size="small">

              <el-form-item label="营业执照：" prop="license">
                <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                  <div style="padding-right:6px;">
                    <el-upload
                      :disabled="true"
                      :class="['uploadData',{ 'hiden-dom': licenseImgFileList.length >= 1 }]"
                      action="#"
                      list-type="picture-card"
                      :on-preview="handleLicenseImgview"
                      :file-list='licenseImgFileList'
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="isLicenseVisible">
                      <img width="100%" :src="licenseImgUrl" alt="">
                    </el-dialog>
                  </div>
                  <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
                  </div>
                  <div style="width:380px;line-height: 24px;padding-top: 6px;">
                    <span class="tips-text">点击可查看大图</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="企业名称：" prop="organization_name" inline-message="true">
                <el-input v-model="mainForm.organization_name" :disabled="isMainItem" style="width: 400px;"></el-input>
              </el-form-item>

            <el-form-item label="企业地址：" prop="organization_address" inline-message="true">
              <el-input v-model="mainForm.organization_address" :disabled="isMainItem" style="width: 400px;"></el-input>
            </el-form-item>

              <el-form-item label="统一社会代码：" prop="license_number" inline-message="true">
                <el-input v-model="mainForm.license_number" :disabled="isMainItem" style="width: 400px;"></el-input>
              </el-form-item>

              <el-form-item label="营业期限：" prop="license_expires_time">
                <el-date-picker
                  style="width:400px;"
                  v-model="periodConcreteTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :disabled="isMainItem"
                />
                <el-checkbox v-model="periodLongTermVal" :disabled="isMainItem" style="padding-left:15px;">长期</el-checkbox>
              </el-form-item>

              <el-form-item label="法人身份证：">
                <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                  <!-- 身份证正面 -->
                  <div style="padding: 0 20px;">
                    <el-upload
                      :disabled="true"
                      :class="['uploadData',{ 'hiden-dom': idcardImgFileList.length >= 1 }]"
                      list-type="picture-card"
                      action="#"
                      :on-preview="handleIdcardPositiveImgview"
                      :file-list='idcardImgFileList'
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="idcardPositiveVisible">
                      <img width="100%" :src="idcardPositiveImgUrl" alt="">
                    </el-dialog>
                  </div>
                  <!-- 身份证反面 -->
                  <div style="padding: 0 20px;">
                    <el-upload
                      :disabled="true"
                      :class="['uploadData',{ 'hiden-dom': idcardBackImgFileList.length >= 1 }]"
                      list-type="picture-card"
                      action="#"
                      :on-preview="handleIdcardBackImgview"
                      :file-list='idcardBackImgFileList'
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="idcardBackVisible">
                      <img width="100%" :src="idcardBackImgUrl" alt="">
                    </el-dialog>
                  </div>
                  <div>
                    <span class="tips-text">
                      <i class="el-icon-warning h-warning"></i>
                    </span>
                  </div>
                  <div style="width:380px;line-height: 24px;padding-top: 6px;">
                    <span class="tips-text">点击可查看大图</span>
                  </div>
                </div>
                <div class="idcard-tips-con">
                  <p>请上传身份证正面</p>
                  <p>请上传身份证国徽面</p>
                </div>
              </el-form-item>

              <el-form-item label="法定姓名：" prop="real_name">
                <el-input v-model="mainForm.real_name" :disabled="isMainItem" style="width: 400px;"></el-input>
              </el-form-item>

              <el-form-item label="法定代表人证件号：" prop="idcard_number">
                <el-input v-model="mainForm.idcard_number" :disabled="isMainItem" style="width: 400px;"></el-input>
              </el-form-item>

              <el-form-item label="有效期至：" prop="idcard_expires_time">
                <el-date-picker
                  style="width:400px;"
                  v-model="validityConcreteTime"
                  type="daterange"
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled="isMainItem"
                />
                <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
                             :disabled="isMainItem">长期
                </el-checkbox>
              </el-form-item>
            </el-form>
        </el-card>
      </div>
      <!-- 店铺信息 -->
      <div style="margin-top: 15px;">
        <el-card>
          <div slot="header" class="clearfix">
            <p>店铺信息</p>
          </div>
          <el-form ref="storeForm" :model="storeForm" label-width="180px">

              <el-form-item label="电商平台经验：" prop="is_business_experience">
                <el-radio-group v-model="storeForm.is_business_experience" :disabled="isMainItem">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="店铺名称：" prop="store_name" inline-message="true">
                <el-input v-model="storeForm.store_name" :disabled="isMainItem" style="width: 400px;"
                          placeholder="请输入店铺名称"></el-input>
              </el-form-item>

              <el-form-item label="经营类目：" prop="scope">
                <el-select v-model="storeForm.scope" multiple :disabled="isMainItem" placeholder="请选择..."
                           style="width: 400px;">
                  <el-option
                    v-for="item in scopeOptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="店铺LOGO：" prop="shop_logo">
                <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                  <div style="padding-right:6px;">
                    <el-upload
                      :disabled="true"
                      :class="['uploadData',{ 'hiden-dom': logoImgFileList.length >= 1 }]"
                      action="#"
                      list-type="picture-card"
                      :on-preview="handleShopLogoPreview"
                      :file-list='logoImgFileList'
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="shopLogoVisible">
                      <img width="100%" :src="shopLogoImgUrl" alt="">
                    </el-dialog>
                  </div>
                  <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
                  </div>
                  <div style="width:380px;line-height: 24px;padding-top: 6px;">
                    <span class="tips-text">点击可查看大图</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="运营负责人：" prop="emergency_name" inline-message="true">
                <el-input v-model="storeForm.emergency_name" :disabled="isMainItem" style="width: 400px;"
                          placeholder="请输入运营负责人姓名"></el-input>
              </el-form-item>

              <el-form-item label="联系电话：" prop="emergency_tel">
                <el-input v-model="storeForm.emergency_tel" :disabled="isMainItem" style="width: 400px;"
                          placeholder="请输入联系电话"></el-input>
              </el-form-item>

              <el-form-item>
                <p style="width:580px;line-height:24px;font-size:14px;margin: 0;color: #333;">
                  需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
                  生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
              </el-form-item>

              <el-form-item label="其他资质：">
                <div class="auth-con">
                  <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">
                    <div v-show="!item.url" class="single-auth-img"></div>

                    <div v-show="item.url" class="single-auth-img-con">
                      <img class="auth-spec-img" :src="item.url" alt=""/>
                      <span class="span-img-del-loading">
                    <span class="span-img-del el-icon-zoom-in zoom-span-block"
                          @click="viewSingleSpecImg(index,item)"></span>
                  </span>
                    </div>
                    <div class="single-title">{{ authTitleFormatter(item.content) }}</div>
                  </div>
                </div>
               
              </el-form-item>

            </el-form>
        </el-card>
      </div>
    </el-card>

    <!--编辑-->
    <el-dialog title="编辑店铺信息" :visible.sync="isOpen" width="65%" class="shopinf-edit"
               center :destroy-on-close="true" :close-on-click-modal="false" :before-close="handleCancel">
      <el-form v-if="isOpen" ref="editForm" class="editForm" :model="editForm" :rules="editRules" label-width="180px" size="small">

        <el-form-item label="电商平台经验：" prop="is_business_experience">
          <el-radio-group v-model="editForm.is_business_experience">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="0">无</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="店铺名称：" prop="store_name" inline-message="true">
          <el-input v-model="editForm.store_name" style="width: 400px;" placeholder="请输入店铺名称"></el-input>
        </el-form-item>

        <el-form-item label="经营类目：" prop="scope">
          <el-select v-model="editForm.scope" @remove-tag="removeEditTag" @visible-change="editScopeVisibleChange($event)" multiple placeholder="请选择..." style="width: 400px;">
            <el-option
              v-for="item in scopeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="店铺LOGO：" prop="shop_logo">
          <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
            <div style="padding-right:6px;">
              <el-upload
                :class="['uploadData',{ 'hiden-dom': editLogoImgFileList.length >= 1 }]"
                action="#"
                list-type="picture-card"
                :limit="1"
                :on-exceed="showTip1"
                :before-upload = "beforeUploadLogoImg"
                :http-request="uploadShopLogoImg"
                :on-preview="handleEditShopLogoView"
                :on-remove="removeEditShopLogoImg"
                :file-list = 'editLogoImgFileList'
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="isEditShopLogoVisible" append-to-body>
                <img width="100%" :src="editShopLogoImgUrl" alt="">
              </el-dialog>
            </div>
            <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
            </div>
            <div style="width:380px;line-height: 24px;padding-top: 6px;">
              <span class="tips-text">图片大小在500KB以内，支持png/jpg，限一张，请确保图片清晰</span>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="运营负责人：" prop="emergency_name" inline-message="true">
          <el-input v-model="editForm.emergency_name" style="width: 400px;" placeholder="请输入运营负责人姓名"></el-input>
        </el-form-item>

        <el-form-item label="联系电话：" prop="emergency_tel">
          <el-input v-model="editForm.emergency_tel" style="width: 400px;" placeholder="请输入联系电话"></el-input>
        </el-form-item>

        <el-form-item>
          <p style="width:580px;line-height:24px;font-size:14px;margin: 0;">需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
            生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
        </el-form-item>

        <el-form-item label="其他资质：">
          <div class="auth-con">
            <div v-for="(item,index) in editQualificationList" :key="item.id" class="single-upload-con">
              <div v-show="!item.url" class="single-auth-img" @click="upPreAuthImg(index)"></div>

              <div v-show="item.url" class="single-auth-img-con">
                <img class="auth-spec-img" :src="item.url" alt="" />
                <span class="span-img-del-loading">
                    <span class="span-img-del el-icon-zoom-in zoom-span-block" @click="viewSingleAuthImg(index,item)"></span>
                    <span class="span-img-del el-icon-delete del-span-block" @click="delSingleAuthImg(index,item)"></span>
                  </span>
              </div>
              <div class="single-title">{{ authTitleFormatter(item.content) }}</div>
              <!-- 真正上传 dom 原生 input -->
              <input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*"
                     @change="changeIMG(index,item)">
            </div>
            
          </div>
          <div style="width:680px;line-height: 24px;padding-top: 6px;">
            <span class="tips-text">
              <i class="el-icon-warning h-warning"></i>
            </span>
            <span class="tips-text">图片大小在500KB以内，支持png/jpg，每个上传位置仅限一张，请确保图片清晰</span>
          </div>
        </el-form-item>

        <el-form-item class="btnCen">
          <el-button type="" @click="handleCancel" style="margin-right: 20px;">取 消</el-button>
          <el-button type="primary" @click="handleAdd('editForm')">提交审核</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 资质图片预览 -->
    <el-dialog
      :visible.sync="imgDialog"
      :destroy-on-close="true"
      width="60%"
      center
      :close-on-click-modal="false"
      class="img-dialog-con"
    >
      <img class="img-spe" :src="qualificationUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {getGoodsType, getMainInf, getShopInf, upLoadImg, addShopInf, getUploadQualificationListData} from '@/api/module/entry';
  import { dateFormat } from '@/utils'
  export default {
    name: "Shop",
    data() {
      let logoValidator = (rule, value, callback) => {
        if (this.editLogoImgFileList.length > 0) {
          callback();
        } else if (this.editLogoImgFileList.length === 0) {
          callback(new Error("店铺logo图片至少上传一张"));
        }
      };
      let busAuthValidator = (rule, value, callback) => {
        if (this.businessImgFileList.length > 0) {
          callback();
        } else if (this.businessImgFileList.length === 0) {
          callback(new Error("其他资质图片至少上传一张"));
        }
      };
      // 手机号码格式校验
      let checkTel = (rule, value, callback) => {
        const reg = /^1[3456789]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('手机号码格式有误'));
        } else {
          callback();
        }
      };
      return {
        reviewResult: '加载中。。',
        isMainItem: true,// 主体/企业信息 是否可以修改，目前暂时不能
        mainForm: {
          license: '',
          organization_name: '',
          license_number: '',
          license_start_time: '',
          license_expires_time: '',
          idcard_front: '',
          idcard_back: '',
          real_name: '',
          idcard_number: '',
          idcard_start_time: '',
          idcard_expires_time: '',
        },
        // 营业执照图片
        licenseImgFileList: [],
        isLicenseVisible: false,
        licenseImgUrl: '',
        // 营业期限
        periodConcreteTime: [], // 区间时间
        periodLongTermVal: false, // 是否长期
        // 身份证 正面
        idcardImgFileList: [],
        idcardPositiveVisible: false,
        idcardPositiveImgUrl: '',
        // 身份证国徽面
        idcardBackImgFileList: [],
        idcardBackVisible: false,
        idcardBackImgUrl: '',
        //  身份证 有效期
        validityConcreteTime: [],
        validityLongTermVal: false,
        // 店铺信息
        storeForm: {
          is_business_experience: '',
          store_name: '',
          scope: [],
          shop_logo: '',
          emergency_name: '',
          emergency_tel: '',
          business_auth: '',
        },
        scopeOptions: [], // 经营类目
        // 店铺logo 图片
        logoImgFileList: [],
        shopLogoVisible: false,
        shopLogoImgUrl: '',
        // 需要上传的资质
        qualificationList: [],
        qualificationUrl: '',
        imgDialog: false,
        // 编辑
        isOpen: false,
        editForm: {
          is_business_experience: '',
          store_name: '',
          scope: [],
          shop_logo: '',
          emergency_name: '',
          emergency_tel: '',
          business_auth: '',
        },
        editRules: {
          store_name: [{required: true, message: '店铺名称不能为空', trigger: 'blur'}],
          scope: [{required: true, message: '经营类目至少选择一种', trigger: 'change'}],
          shop_logo: [{required: true, message: '店铺Logo至少上传一张图片', validator: logoValidator}],//
          emergency_name: [{required: true, message: '运营负责人不能为空', trigger: 'blur'}],//
          emergency_tel: [
            {required: true, message: '联系人手机号码不能为空', trigger: 'blur'},
            {required: true, validator: checkTel, trigger: 'blur'}
          ],
          business_auth: [{required: true, message: '店铺Logo至少上传一张图片', validator: busAuthValidator}],//
        },
        // 编辑 店铺logo
        editLogoImgFileList: [],
        isEditShopLogoVisible: false,
        editShopLogoImgUrl: '',
        // 编辑 资质
        editQualificationList: [],

      }
    }, // data end
    created() {
      // 获取经营一级类目
      getGoodsType().then(res => {
        if (res.code === 1) {
          this.scopeOptions = res.data;
        }
      });
      this.getMain();
      this.getShop();
    },
    methods: {
      /** 获取 主体即企业 信息 */
      getMain() {
        getMainInf().then(res => {
          if (res.code == 1) {
            this.mainForm = res.data;
            // 营业执照电子图片处理
            let licenseImgArr = [];
            let licenseImgUrl = {};
            licenseImgArr = this.mainForm.license.split(",");
            if (licenseImgArr.length > 0) {
              licenseImgArr.forEach(item => {
                licenseImgUrl = {};
                if (item) {
                  licenseImgUrl.url = item
                  this.licenseImgFileList.push(licenseImgUrl)
                }
              });
            } else {
              this.licenseImgFileList = [];
            }

            // 身份证 正面数据处理
            let idcardFrontImgArr = [];
            let idcardFrontImgUrl = {};
            idcardFrontImgArr = this.mainForm.idcard_front.split(",");
            if (idcardFrontImgArr.length > 0) {
              idcardFrontImgArr.forEach(item => {
                idcardFrontImgUrl = {};
                if (item) {
                  idcardFrontImgUrl.url = item
                  this.idcardImgFileList.push(idcardFrontImgUrl)
                }
              });
            } else {
              this.idcardImgFileList = [];
            }

            // 身份证 反面数据处理
            let idcardBackImgArr = [];
            let idcardBackImgUrl = {};

            idcardBackImgArr = this.mainForm.idcard_back.split(",");
            if (idcardBackImgArr.length > 0) {
              idcardBackImgArr.forEach(item => {
                idcardBackImgUrl = {};
                if (item) {
                  idcardBackImgUrl.url = item
                  this.idcardBackImgFileList.push(idcardBackImgUrl)
                }
              });
            } else {
              this.idcardBackImgFileList = [];
            }

            // 营业期限 日期格式处理
            if (this.mainForm.license_expires_time == 0) {
              this.periodLongTermVal = true
              this.periodConcreteTime = [];
            } else if (this.mainForm.license_expires_time > 0) {
              this.periodLongTermVal = false;
              this.periodConcreteTime = [];
              let start = this.formatterTime(this.mainForm.license_start_time)
              let end = this.formatterTime(this.mainForm.license_expires_time);
              this.periodConcreteTime.push(start)
              this.periodConcreteTime.push(end)
            }

            // 身份证 有效期 日期格式处理
            if (this.mainForm.idcard_expires_time == 0) {
              this.validityLongTermVal = true
              this.validityConcreteTime = [];
            } else if (this.mainForm.idcard_expires_time > 0) {
              this.validityLongTermVal = false;
              this.validityConcreteTime = [];
              let start = this.formatterTime(this.mainForm.idcard_start_time)
              let end = this.formatterTime(this.mainForm.idcard_expires_time);
              this.validityConcreteTime.push(start)
              this.validityConcreteTime.push(end)
            }

          }
        });
      },
      /** 获取 店铺信息 */
      getShop() {
        getShopInf().then(res => {
          if (res.code == 1) {
            // 审核状态
            if (res.data.state === 1) {
              this.reviewResult = '已通过';
            } else if (res.data.state === 2) {
              this.reviewResult = '未审核';
            } else if (res.data.state === 3) {
              this.reviewResult = '未通过';
            } else {
              this.reviewResult = '';
            }
            // 处理  select 下拉回显数据格式
            this.storeForm.scope = [];
            if (res.data.scope === '') {
              this.storeForm.scope = [];
            } else {
              let scopeListStr = res.data.scope.split(',');
              let scopeList = [];
              for (let i = 0; i < scopeListStr.length; i++) {
                scopeList.push(parseInt(scopeListStr[i]));
              }
              this.storeForm = res.data;
              this.storeForm.scope = scopeList;
            }

            // 店铺信息展示 start
            this.storeForm = res.data;

            // 店铺logo回显处理
            let logoImgArr = [];
            let logoImgUrl = {};
            this.logoImgFileList = []
            logoImgArr = this.storeForm.shop_logo.split(",");
            if (logoImgArr.length > 0) {
              logoImgArr.forEach(item => {
                logoImgUrl = {};
                if (item) {
                  logoImgUrl.url = item
                  this.logoImgFileList.push(logoImgUrl)
                }
              });
            } else {
              this.logoImgFileList = [];
            }

            // 资质图片回显处理
            this.qualificationList = this.storeForm.qualification ? this.storeForm.qualification : [];

          } else if (res.code) {
            this.$message({message: res.msg, type: 'error'});
          }
        });
      },
      /** 编辑 */
      handleEdit() {
        getShopInf().then(res=> {
          if (res.code == 1) {
            this.isOpen = true;
            this.editForm = res.data
            // 经营类目 数据处理
            if (res.data.scope === '') {
              this.editForm.scope = [];
            } else {
              let scopeListStr = res.data.scope.split(',');
              let scopeList = [];
              for (let i = 0; i < scopeListStr.length; i++) {
                scopeList.push(Number(scopeListStr[i]));
              }
              this.editForm = res.data;
              this.editForm.scope = scopeList;
            }

            // 店铺logo回显处理
            let logoImgArr = [];
            let logoImgUrl = {};
            this.editLogoImgFileList = []
            logoImgArr = this.editForm.shop_logo.split(",");
            if (logoImgArr.length > 0) {
              logoImgArr.forEach(item=> {
                logoImgUrl = {};
                if (item) {
                  logoImgUrl.url = item
                  this.editLogoImgFileList.push(logoImgUrl)
                }
              });
            }else {
              this.editLogoImgFileList = [];
            }

            // 资质图片回显处理
            this.editQualificationList = this.editForm.qualification ? this.editForm.qualification : [];
          } else {
            this.$message({type: 'error', message: res.msg ? res.msg : '获取店铺信息失败' });
          }
        });
      },
      /** 关闭/取消 编辑 */
      handleCancel() {
        this.resetEditForm('editForm');
        this.isOpen = false;
      },
      /** 提交审核 */
      handleAdd(formName) {
        // 其他 资质 填写拦截校验
        let isComplete = false;
        if (this.editQualificationList.length > 0) {
          for (let i = 0; i < this.editQualificationList.length; i++) {
            if (!this.editQualificationList[i].url) {
              isComplete = true;
              break
            }
          }

          if (isComplete) {
            this.$message({type:'warning',message: '请上传对应资质所需的图片'});
            return;
          }
        }


        //   business_auth: '',
        let data = {};
        this.$refs[formName].validate((valid) => {
          if (valid) {
            data['is_business_experience'] = this.editForm.is_business_experience;
            data['store_name'] = this.editForm.store_name;
            data['emergency_name'] = this.editForm.emergency_name;
            data['emergency_tel'] = this.editForm.emergency_tel;
            data['scope'] = this.editForm.scope.join(',');
            // 编辑 的店铺logolist
            debugger
            if(this.editLogoImgFileList.length > 0) {
              for(let i = 0; i < this.editLogoImgFileList.length; i++) {
                if(i === 0) {
                  data['shop_logo'] = this.editLogoImgFileList[i].url;
                }else {
                  data['shop_logo'] += ',' + this.editLogoImgFileList[i].url;
                }
              }
            }
            data['qualification_auth'] = JSON.stringify(this.editQualificationList)

            this.$confirm('确定要修改信息吗？信息修改后需要重新提交审核，审核周期约1-3个工作日', '提示：', {
              type: 'warning',
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(() => {
              addShopInf(data).then(res=> {
                if (res.code == 1) {
                  this.$message({type: 'success',message: '编辑成功'});
                  this.isOpen = false;
                  this.getShop();
                }else {
                  this.$message({type: 'error',message: res.message ? res.message : '操作失败'});
                }
              });
            }).catch(() => {});
          } // valid true 通过  end
        })

      },
      /** 预览 营业执照 */
      handleLicenseImgview(file) {
        this.licenseImgUrl = file.url;
        this.isLicenseVisible = true;
      },
      /** 预览 身份证 正面 */
      handleIdcardPositiveImgview(file) {
        this.idcardPositiveImgUrl = file.url;
        this.idcardPositiveVisible = true;
      },
      /** 预览 身份证 反面 */
      handleIdcardBackImgview(file) {
        this.idcardBackImgUrl = file.url;
        this.idcardBackVisible = true;
      },
      /** 预览 店铺 logo */
      handleShopLogoPreview(file) {
        this.shopLogoImgUrl = file.url;
        this.shopLogoVisible = true;
      },
      /** 预览 当前资质对应图片 */
      viewSingleSpecImg(index,item) {
        this.imgDialog = false;
        if (!item.url) return;
        this.imgDialog = true;
        this.qualificationUrl = item.url
      },
      /** 上传 店铺logo 格式和大小的校验 */
      beforeUploadLogoImg(file) {
        let isImgSize = (file.size / 1024) > 500;
        if (file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持png/png格式',
            type: "warning"
          });
          return false;
        }
        if (isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500kb',
            type: "warning"
          });
          return false;
        }
      },
      /** 上传 店铺logo图片 */
      uploadShopLogoImg(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img,"type":2};
          this.editLogoImgFileList = []
          upLoadImg(data).then((res) => {
            if (res && res.code == 1) {
              this.editLogoImgFileList.push({'url': res.data.image_url});
              debugger
              this.$message({message: '上传成功', type: 'success'});
              this.$refs.storeForm.clearValidate('shop_logo');
            }
          });
        });
      },
      /** 编辑 预览 店铺logo 图片 */
      handleEditShopLogoView(file) {
        this.editShopLogoImgUrl = file.url;
        this.isEditShopLogoVisible = true;
      },
      /** 编辑 删除 店铺logo 图片 */
      removeEditShopLogoImg(file) {
        for (let i = 0; i < this.editLogoImgFileList.length; i++) {
          if (file.uid === this.editLogoImgFileList[i].uid) {
            this.editLogoImgFileList.splice(i, 1);
          }
        }
      },
      /** 上传 对应资质图片 */
      upPreAuthImg(index) {
        let domRef = "hxz" + index;
        this.$refs[domRef][0].value = '';
        this.$refs[domRef][0].click();
      },
      /** 真正的上传图片方法，原生input */
      changeIMG(index, item) {
        let curItem = item;
        let inputDom = "hxz" + index;
        let file = this.$refs[inputDom][0].files[0];

        if( file.size > 1024 * 500 ) {
          this.$message({ type: 'error',message: '规格图片不能大于 500k'});
          return;
        }

        this.getBase64(file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img,"type":2}
          upLoadImg(data).then(res => {
            if (res && res.code == 1) {
              curItem.url = res.data.image_url;
              // this.singleSpecImgList.push({'url': res.data.image_url})
              this.$message({ message:'上传成功',type:'success'});
            }else {
              this.$message({ message:'上传失败，请重新上传',type:'error'});
            }
          })
        });
      },
      /** 查看 当前资质图片 */
      viewSingleAuthImg(index,item) {
        this.imgDialog = false;
        // this.qualificationUrl = "";
        if (!item.url) return;
        this.imgDialog = true;
        this.qualificationUrl = item.url
      },
      /** 删除 当前图片 */
      delSingleAuthImg(index,item) {
        if( item.url ) {
          item.url = '';
          this.$message({type: 'success',message: '删除成功'});
        }
      },

      /** 删除单个 经营类目 触发 */
      removeEditTag(indexVal) {
        if (!indexVal) return;
        if (this.editForm.scope.length == 0) {
          this.editQualificationList = [];
        }
        if (this.editForm.scope.length > 0) {
          let data = { cate_ids: this.editForm.scope }
          getUploadQualificationListData(data).then(res=> {
            if (res.code == 1) {
              this.editQualificationList = res.data ? res.data : [];
            }
          })
        }
      },
      /** 经营类目 下拉框隐藏时候，触发 */
      editScopeVisibleChange(handleType) {
        if (!handleType) {
          if (Array.isArray(this.editForm.scope) && this.editForm.scope.length > 0) {
            let data = { cate_ids: this.editForm.scope }
            getUploadQualificationListData(data).then(res=> {
              if (res.code == 1) {
                this.editQualificationList = res.data ? res.data : [];
              }
            })
          }
        }
      },
      /** 初始化 编辑 表单 */
      resetEditForm(formName) {
        this.$refs[formName].resetFields();
        this.editQualificationList = [];
        this.editLogoImgFileList = [];
      },

      // --- 通用 ---
      /** 图片转换为base64位 */
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
      },
      /** 时间戳转换为 标准时间格式 */
      formatterTime(time) {
        return dateFormat(time *1000, 'Y-m-d')
      },
      /** 上传图片限制 1张 */
      showTip1() {
        this.$message({message: '最多上传1张图片', type: 'warning'});
      },
      /** 资质类目 title格式化 */
      authTitleFormatter(textVal) {
        let res = '';
        if (textVal) {
          res = textVal.trim();
        }
        return res
      },
      // /** 图片只预览 */
      // getPreviewImgList(ele) {
      //   let arr = [];
      //   arr.push(ele);
      //   return arr;
      // },

    }
  }
</script>
<style scoped>
  .box-card /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
     line-height: 20px !important;
   }
   .editForm /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
     line-height: 20px !important;
   }
 </style>
<style lang="scss" type="text/stylus" scoped>

  .shopinf-edit {
    //::v-deep .el-dialog {
    //  height: 80%;
    //  overflow : hidden;
    //}
    //::v-deep .el-dialog__body{
    //  height: calc(100% - 60px);
    //  overflow-x: hidden;
    //  overflow-y: scroll;
    //}

  }

  /* 弹窗 样式 重置 */
  .shopinf-edit >>> .el-dialog {
    width: 60%;
    height: 80%;
    overflow: hidden;
  }

  .shopinf-edit >>> .el-dialog .el-dialog__body {
    height: calc(100% - 60px);
    padding: 10px 20px 20px 40px;
    overflow: auto;
  }

  /* 弹窗 样式 重置 ---- end ---- */

  .main-form-con {
    //margin-left: 100px;
  }


  ::v-deep  .el-card__body {
    height: calc(100% - 80px);
    margin: 10px 0;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  ::v-deep  .speDom {
    color: red;
    font-size: 20px;
    margin: 0 0 4px 10px;
  }

  ::v-deep  .speTip {
    color: #c0ccda;
    font-size: 14px;
  }

  .text-v-c {
    align-items: center;
    display: -webkit-flex;
  }

  .demo-image__preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: normal;
  }

  // 上传图片样式
  .uploadData {
    display: inline-block;

    ::v-deep  .el-upload--picture-card {
      width: 100px;
      height: 100px;
    }

    ::v-deep  .el-upload {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    ::v-deep  .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    ::v-deep  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    ::v-deep  .avatar {
      width: 100px;
      height: 100px;
    }
  }

  .hiden-dom >>> .el-upload--picture-card {
    display: none !important;
  }

  .idcard-tips-con {
    display: flex;
    flex-direction: row;
    justify-content: normal;
    justify-items: center;
  }

  .idcard-tips-con > p {
    margin: 0;
    padding: 0 15px;
  }

  /*** 资质 样式  start ***/
  .auth-con {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: normal;
    flex-wrap: wrap;

  }

  .single-upload-con {
    width: 160px;
    height: 140px;
    text-align: center;
    overflow: hidden;
  }

  .single-auth-img {
    width: 98px;
    height: 98px;
    border-radius: 6px;
    border: 1px dashed #eee;
    margin: 5px auto;
    cursor: pointer;
  }

  .single-auth-img-con {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 98px;
    height: 98px;
    position: relative;
    //top:4px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #c0ccda;
  }

  .auth-spec-img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    border: none;
  }

  /* 当前图片滑过 效果，显示删除icon */
  .span-img-del-loading {
    display: none;
    position: absolute;
    width: 98px;
    height: 98px;
    top: 0;
    left: 0;
    border-radius: 5px;
    z-index: 66;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.75;
    transition: opacity .3s;
  }

  .span-img-del-loading > .zoom-span-block {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin: 41px 4px 0;
    z-index: 70;
  }

  .span-img-del-loading > .del-span-block {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin: 41px 4px 0;
    z-index: 70;
  }


  .single-auth-img-con:hover > .span-img-del-loading {
    display: block;
  }

  .single-title {
    font-size: 12px;
    color: #666;
    text-align: center;
    //line-height :14px;
    //margin: 10px 0;
  }

  /*** 资质 样式  end ***/

  // 提示语 样式 start
  .tips-text {
    font-size: 14px;
    color: #C9C9C9;
    word-break: break-all;
  }

  .h-warning:before {
    color: #e3c300;
  }

  // 提示语样式  end

  .btnCen {
    ::v-deep  .el-form-item__content {
      margin-left: 0 !important;
      text-align: center;
      //margin-top: 30px;
    }
  }
  /* 预览 资质图片 */
  .img-dialog-con >>> .el-dialog__body {
    text-align : center;
  }

  .img-spe {
    //width: 80%;
    margin: 0 auto;
  }
</style>
