<template>
  <div class="app-container" v-loading="loading">
    <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>
          <div>
            <el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="180px">
              <el-form-item label="执照类型：" prop="license_type">
                <el-select v-model="mainForm.license_type" placeholder="请选择..." :disabled="isMainItem"
                           style="width: 400px;">
                  <el-option
                    v-for="item in zzOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="营业执照电子版：" prop="license">
                <div class="demo-image__preview">
                  <div style="padding-right:6px;">
                    <div class="demo-image__preview">
                      <el-image v-for="(item,index) in licenseFileList" :key="index"
                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
                                :src="item"
                                :preview-src-list="getPreviewImgList(item)">
                      </el-image>
                    </div>
                  </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">图片大小在2MB以内，支持png,jpg格式，最多可上传2张</span>-->
                    <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>
                <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
              </el-form-item>

              <el-form-item label="营业执照详细地址：" prop="organization_address">
                <el-input v-model="mainForm.organization_address" :disabled="isMainItem"
                          style="width: 400px;"></el-input>
                <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上的详细地址填写</span>
              </el-form-item>

              <el-form-item :gutter="20" label="营业期限：" prop="license_expires_time">
                <el-date-picker type="date" placeholder="选择日期" v-model="periodConcreteTime"
                                style="width: 300px;" :disabled="isMainItem"></el-date-picker>
                <el-checkbox v-model="periodLongTermVal" :disabled="isMainItem"
                             style="padding-left:15px;" >长期
                </el-checkbox>
                <span class="tips-text"><i class="el-icon-warning h-warning"></i>具体时间和长期，二者必填一个</span>
              </el-form-item>

              <el-form-item label="法定代表人证件类型：" prop="idcard_type">
                <el-select v-model="mainForm.idcard_type" :disabled="isMainItem" placeholder="请选择..."
                           style="width: 400px;">
                  <el-option
                    v-for="item in idcardTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="法定代表人姓名：" prop="real_name">
                <el-input v-model="mainForm.real_name" :disabled="isMainItem" style="width: 400px;"></el-input>
                <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span>
              </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 type="date" placeholder="选择日期" v-model="validityConcreteTime"
                                style="width: 300px;" :disabled="isMainItem"></el-date-picker>
                <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" :disabled="isMainItem">长期</el-checkbox>
              </el-form-item>

              <el-form-item label="法人证件电子版：" prop="idcard_front">
                <div class="demo-image__preview">
                  <div style="padding-right:6px;">
                    <div class="demo-image__preview">
                      <el-image v-for="(item,index) in idcardFileList" :key="index"
                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
                                :src="item"
                                :preview-src-list="getPreviewImgList(item)">
                      </el-image>
                    </div>
                  </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>
          </div>
        </el-card>
      </div>
      <div style="margin-top: 15px;">
        <el-card>
          <div slot="header" class="clearfix">
            <p>店铺信息</p>
          </div>
          <div>
            <el-form ref="storeForm" :model="storeForm" :rules="shopRules" 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 class="demo-image__preview">
                  <div style="padding-right:6px;">
                    <div class="demo-image__preview">
                      <el-image v-for="(item,index) in logoFileList" :key="index"
                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
                                :src="item"
                                :preview-src-list="getPreviewImgList(item)">
                      </el-image>
                    </div>
                  </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;">
                  需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
                  生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
              </el-form-item>

              <el-form-item label="其他资质：" prop="business_auth">
                <div class="demo-image__preview">
                  <div style="padding-right:6px;">
                    <div class="demo-image__preview">
                      <el-image v-for="(item,index) in businessFileList" :key="index"
                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
                                :src="item"
                                :preview-src-list="getPreviewImgList(item)">
                      </el-image>
                    </div>
                  </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;color: #333;">
                    <span class="tips-text">点击图片,查看大图</span>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </el-card>

    <!--编辑-->
    <el-dialog :title="title" :visible.sync="isOpen" width="60%" class="shopinf-edit">
      <el-form ref="editForm" :model="editForm" :rules="eidtRules" label-width="180px">

        <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" multiple placeholder="请选择..." style="width: 400px;" @change="">
            <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"
                action="#"
                list-type="picture-card"
                :limit="1"
                :on-exceed="showTip1"
                :before-upload = "beforeUpLogoImg"
                :http-request="uploadLogoImgs"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list = 'logoImgFileList'
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" 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">请上传店铺LOGO，文件大小在500KB以内，支持png,jpg格式，最多可上传1张</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="其他资质：" prop="business_auth">
          <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
            <div style="padding-right:6px;">
              <el-upload
                class="uploadData"
                action="#"
                list-type="picture-card"
                :limit="20"
                :on-exceed="showTip20"
                :before-upload = "beforeUpBusImg"
                :http-request="uploadBusinessImgs"
                :on-preview="handlePictureCardPreview2"
                :on-remove="handleRemove2"
                :file-list = 'businessImgFileList'>
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible2">
                <img width="100%" :src="dialogImageUrl2" 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;color: #333;">
              <span class="tips-text">请上其他资质，单个文件大小在2MB以内，支持jpg,png格式，最多可上传20张</span>
            </div>
          </div>
        </el-form-item>

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

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {getGoodsType, getMainInf, getShopInf,upLoadImg, addShopInf} from '@/api/module/entry';

  export default {
    name: "Shop",
    data() {
      let logoValidator = (rule, value, callback) => {
        if(this.logoImgFileList.length > 0) {
          callback();
        }else if(this.logoImgFileList.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 {
        loading: false,
        isOpen: false,
        reviewResult: '加载中。。',
        title: '',
        isMainItem: true,// 主体/企业信息 单项 是否可以修改，目前暂时不能
        // 执照类型
        zzOptions: [
          {label: "多证合一营业执照（统一社会信用代码）", value: 1},
          {label: "多证合一营业执照（非统一社会信用代码）", value: 2},
        ],
        // 法人执照类型
        idcardTypeOptions: [
          {label: "大陆身份证", value: 1},
          {label: "护照", value: 2},
          {label: "港奥台居民通行证", value: 3},
          {label: "台湾居民通行证", value: 4},
        ],
        scopeOptions: [],
        // 营业期限
        periodConcreteTime: null,
        periodLongTermVal: false,
        // 证件有效期
        validityConcreteTime: null,
        validityLongTermVal: false,
        licenseFileList: [], // 营业执照图片
        idcardFileList: [], // 法人证件照
        logoFileList: [],  // 店铺logo
        businessFileList: [], // 其他资质
        mainForm: {
          organization_type: '',
          license_type: '',
          license: '',
          organization_name: '',
          organization_address: '',
          license_expires_time: '',
          idcard_type: '',
          real_name: '',
          idcard_number: '',
          idcard_expires_time: '',
          idcard_front: '',
          //idcardback: 'jiazhuangwshifanmian'
        },
        storeForm: {
          is_business_experience: '',
          store_name: '',
          scope: [],
          shop_logo: '',
          business_auth: '',
          emergency_name: '',
        },
        shopRules: {},
        mainRules: {},
        dialogImageUrl: '',
        dialogVisible: false,
        dialogImageUrl2: '',
        dialogVisible2: false,
        logoImgFileList: [],
        businessImgFileList: [],
        editForm: {
          is_business_experience: 0,
          store_name: '',
          scope: [],
          shop_logo: '',
          business_auth: '',
          emergency_name: '',
        },
        eidtRules: {
          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}],//
        }
      }
    },
    created() {
      // 获取经营一级类目
      getGoodsType().then(res => {
        if (res.code === 1) {
          this.scopeOptions = res.data;
        }
      });
      this.getMain();
      this.getShop();
    },
    methods: {
      // 图片只预览
      getPreviewImgList(ele) {
        let arr = [];
        arr.push(ele);
        return arr;
      },
      // 获取 主体=企业 信息
      getMain() {
        getMainInf().then(res => {
          if (res.code === 1 && res.data) {
            this.mainForm = res.data;
            // 处理证件照
            let licenseArr = [];
            if (this.mainForm.license.indexOf(",") > 0) {
              licenseArr = this.mainForm.license.split(",");
            } else {
              licenseArr.push(this.mainForm.license);
            }
            this.licenseFileList = licenseArr;

            // 处理法人证件照
            let idcardArr = [];
            if (this.mainForm.idcard_front.indexOf(",") > 0) {
              idcardArr = this.mainForm.idcard_front.split(",");
            } else {
              idcardArr.push(this.mainForm.idcard_front);
            }
            this.idcardFileList = idcardArr;

            if(this.mainForm.idcard_expires_time === 0) {
              this.validityLongTermVal = true;
            }else {
              this.validityConcreteTime = this.toStandTime(this.mainForm.idcard_expires_time);
            }

            if(this.mainForm.license_expires_time === 0) {
              this.periodLongTermVal = true;
            }else {
              this.periodConcreteTime = this.toStandTime(this.mainForm.license_expires_time);
            }

          }
        });
      },
      getShop() {
        getShopInf().then(res => {
          if (res.code === 1 && res.data) {
            // 审核状态
            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;
            console.log("00",res.data);
            // 店铺logo图片处理
            let logoArr = [];
            if (this.storeForm.shop_logo.indexOf(",") > 0) {
              logoArr = this.storeForm.shop_logo.split(",");
            } else {
              logoArr.push(this.storeForm.shop_logo);
            }
            this.logoFileList = logoArr;

            // 其他资质图片处理  business
            let businessArr = [];
            if (this.storeForm.business_auth.indexOf(",") > 0) {
              businessArr = this.storeForm.business_auth.split(",");
            } else {
              businessArr.push(this.storeForm.business_auth);
            }
            this.businessFileList = businessArr;
            // 店铺信息展示 end
          }else if( res.code === 0 && res.msg) {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }else {
            this.$message({
              message: "数据有误！",
              type: 'error'
            });
          }
        });
      },

      // 修改 店铺信息的 回显数据
      showShopInf() {
        getShopInf().then(res => {
          if (res.code === 1 && res.data) {
            // 店铺信息修改  start
            //this.editForm = res.data;
            console.log("处理后的格式555：",res.data);

            this.editForm.scope = [];
            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 logoList = {};
            let eidtLogoArr = [];
            if(this.editForm.shop_logo.indexOf(",") > 0) {
              eidtLogoArr = this.editForm.shop_logo.split(",");
              for(let a = 0; a < eidtLogoArr.length; a++){
                logoList = {};
                logoList.url = eidtLogoArr[a];
                this.logoImgFileList.push(logoList);
              }
            }else if(this.editForm.shop_logo) {
              logoList.url = this.editForm.shop_logo;
              this.logoImgFileList = [];
              this.logoImgFileList.push(logoList);
            }else {
              this.logoImgFileList = [];
            }
            // 资质图片回显处理
            let businessList = {};
            let editBusArr = [];
            if(this.editForm.business_auth.indexOf(",") > 0) {
              editBusArr = this.editForm.business_auth.split(",");
              for(let a = 0; a < editBusArr.length; a++){
                businessList = {};
                businessList.url = editBusArr[a];
                this.businessImgFileList.push(businessList);
              }
            }else if(this.editForm.business_auth) {
              businessList.url = this.editForm.business_auth;
              this.businessImgFileList = [];
              this.businessImgFileList.push(businessList);
            }else {
              this.businessImgFileList = [];
            }
            // 店铺信息修改  end
          }else if( res.code === 0 && res.msg) {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }else {
            this.$message({
              message: "数据有误！",
              type: 'error'
            });
          }
        });
      },
      // 编辑
      handleEdit() {
        this.isOpen = true;
        this.title = '编辑店铺信息';
        this.showShopInf();
      },
      // 保存
      handleAdd(formName) {
        this.$confirm('确定要修改信息吗？信息修改后需要重新提交审核，审核周期约1-3个工作日。', '提示：', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.save(formName);
        }).catch(() => {
          this.reset('editForm');
        });

      },
      save(formName) {
        let scoprStr = '';
        for(let i = 0; i < this.editForm.scope.length; i++) {
          scoprStr += this.editForm.scope[i] + ',';
        }
        this.editForm.scope = scoprStr.substring(0,scoprStr.length - 1);
        // shop_logo图片地址字段
        if(this.logoImgFileList.length > 0) {
          for(let i = 0; i < this.logoImgFileList.length; i++) {
            if(i === 0) {
              this.editForm.shop_logo = this.logoImgFileList[i].url;
            }else {
              this.editForm.shop_logo += ',' + this.logoImgFileList[i].url;
            }
          }
        }

        // 其他资质图片字段处理
        if(this.businessImgFileList.length > 0) {
          for(let i = 0; i < this.businessImgFileList.length; i++) {
            if(i === 0) {
              this.editForm.business_auth = this.businessImgFileList[i].url;
            }else {
              this.editForm.business_auth += ',' + this.businessImgFileList[i].url;
            }
          }
        }

        this.$refs[formName].validate((valid) => {
          if(valid) {
            addShopInf(this.editForm).then(res => {
              if(res.code === 1){
                this.getShop();
                this.$message({message: '店铺信息修改成功', type:'success'});
                this.isOpen = false;
              }else if(res.code === 0 && res.msg) {
                // 处理 scope数据格式冲突
                if(this.editForm.scope === '') {
                  this.editForm.scope = [];
                }else {
                  let scopeListStr = this.editForm.scope.split(',');
                  let scopeList = [];
                  for(let i = 0; i < scopeListStr.length; i++) {
                    scopeList.push(parseInt(scopeListStr[i]));
                  }
                  this.editForm.scope = scopeList;
                }
                if(res.msg) {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  });
                }else {
                  this.$message({
                    message: "数据开小差了，请稍后重试",
                    type: 'error'
                  });
                }
              }
            });
          }
          else {
            // 因  scope字段是selcet的绑定值，必须为数组类型，但是，在传给后台的时候，是字符串类型，传入的时候需要处理，回显的时候也需要处理
            // 在校验时候就产出了这个bug,校验不通过的话，他已经被处理为字符串了，不通过的话，还原格式，不能还原数据
            //this.storeForm.scope = [];
            if(this.storeForm.scope === '') {
              this.storeForm.scope = [];
            }else {
              let scopeListStr = this.storeForm.scope.split(',');
              let scopeList = [];
              for(let i = 0; i < scopeListStr.length; i++) {
                scopeList.push(parseInt(scopeListStr[i]));
              }
              this.storeForm.scope = scopeList;
            }
          }
        });
      },
      // 取消
      handleCancel() {
        this.resetForm('editForm');
        this.isOpen = false;
      },
      showTip1(files,fileList){
        this.$message({message: '最多上传1张图片', type: 'warning'});
      },
      showTip20(files,fileList) {
        this.$message({message: '最多上传20张图片', type: 'warning'});
      },

      // 上传店铺logo图片
      uploadLogoImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img};
          upLoadImg(data).then((res) => {
            if(res && res.code ==  1){
              this.logoImgFileList.push({'url':res.data.image_url});
              this.$message({message: '上传成功', type: 'success'});
              this.$refs.storeForm.clearValidate('shop_logo');
            }
          });
        });
      },
      // 上传资质图片
      uploadBusinessImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img};
          upLoadImg(data).then((res) => {
            if(res && res.code ==  1){
              this.businessImgFileList.push({'url':res.data.image_url});
              this.$message({message: '上传成功', type: 'success'});
              this.$refs.storeForm.clearValidate('business_auth');
            }
          });
        });
      },
      // 店铺logo图片上传格式和大小的校验
      beforeUpLogoImg(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;
        }
      },
      // 其他资质图片上传 校验
      beforeUpBusImg(file) {
        let isImgSize = (file.size / 1024 /1024) > 2;
        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: '上传图片大小不能超过2M',
            type: "warning"
          });
          return false;
        }
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file,fileList) {
        for(let i = 0; i < this.logoImgFileList.length; i++) {
          if(file.uid === this.logoImgFileList[i].uid) {
            this.logoImgFileList.splice(i,1);
          }
        }
      },
      handlePictureCardPreview2(file) {
        this.dialogImageUrl2 = file.url;
        this.dialogVisible2 = true;
      },
      handleRemove2(file,fileList) {
        for(let i = 0; i < this.businessImgFileList.length; i++) {
          if(file.uid === this.businessImgFileList[i].uid) {
            this.businessImgFileList.splice(i,1);
          }
        }
      },

      // 图片转换为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);
          };
        });
      },

      // 时间戳转换为 标准时间格式
      toStandTime(val) {
        let date = new Date(val * 1000)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
        const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
        return Y + M + D + h + m + s;
      },
    }
  }
</script>

<style lang="scss" type="text/stylus" scoped>

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

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

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

  /deep/ .speTip {
    color: #c0ccda;
  }

  .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;

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

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

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

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

    /deep/ .avatar {
      width: 100px;
      height: 100px;
    }
  }

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

  .h-warning:before {
    color: #e3c300;
  }
  // 提示语样式  end

  .btnCen {
    /deep/.el-form-item__content {
      margin-left: 0!important;
      text-align : center;
      //margin-top: 30px;
    }
  }
</style>