<template>
  <el-dialog
    class="shopAuditDetails-container"
    custom-class="center-dialog"
    :fullscreen="true"
    :title="title"
    top="0vh"
    :visible.sync="showDialog"
    v-loading.fullscreen.lock="showLoading"
    @close="close"
  >
    <div class="item-content" v-if="!showLoading">
      <div class="item-title">基本信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺 ID</div>
          <el-input
            class="item-input"
            v-model="form.store_id"
            clearable
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺名称</div>
          <el-input
            class="item-input"
            style="width: 300px"
            v-model="form.store_name"
            clearable
            disabled
          />
        </div>

        <div class="item-block">
          <div class="item-lable">经营品类</div>
          <el-input
            class="item-input"
            v-model="form.biz_category"
            clearable
            disabled
          />
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">联系人姓名</div>
          <el-input
            class="item-input"
            v-model="form.contact_name"
            clearable
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">登录手机号</div>
          <el-input
            class="item-input"
            v-model="form.login_mobile"
            clearable
            disabled
          />
        </div>
      </div>
      <div class="item-title">地址信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺所在的省</div>
          <el-input
            class="item-input"
            v-model="form.province_nmae"
            clearable
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺所在的市</div>
          <el-input
            class="item-input"
            v-model="form.city_name"
            clearable
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺所在的县区</div>
          <el-input
            class="item-input"
            v-model="form.county_name"
            clearable
            disabled
          />
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺经度</div>
          <el-input
            class="item-input"
            v-model="form.store_longitude"
            clearable
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺维度</div>
          <el-input
            class="item-input"
            v-model="form.store_latitude"
            clearable
            disabled
          />
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺的详细地址</div>
          <el-input
            class="item-input"
            v-model="form.store_address"
            style="width: 600px"
            clearable
            disabled
          />
        </div>
      </div>
      <div class="item-info" style="margin: 40px 0">
        <div class="item-block">
          <div class="item-lable">店铺门面正面图片</div>
          <el-image
            style="margin-right: 20px; width: 400px; height: 300px"
            :src="
              form.front_facade_image ||
              require('@/assets/index_images/image.jpg')
            "
            :preview-src-list="srcList1"
            lazy
          ></el-image>
          <div class="item-lable">店铺门面环境图片</div>
          <el-image
            style="margin-right: 20px; width: 400px; height: 300px"
            :src="
              form.environment_image ||
              require('@/assets/index_images/image.jpg')
            "
            :preview-src-list="srcList2"
            lazy
          ></el-image>
        </div>
      </div>
      <div class="item-title">分账/结算 &nbsp;信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账比例</div>
          <el-input
            class="item-input"
            v-model="form.split_ratio"
            clearable
            disabled
          >
            <template slot="append">%</template>
          </el-input>
        </div>
        <div class="item-block">
          <div class="item-lable">资金结算交割天数</div>
          <el-input
            class="item-input"
            v-model="form.settlement_method"
            clearable
            disabled
          >
            <template slot="append">天</template>
          </el-input>
        </div>
      </div>
      <div class="item-title">证件信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">主体类型</div>
          <el-input
            class="item-input"
            v-model="entityType[form.entity_type - 1]"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">姓名</div>
          <el-input
            class="item-input"
            v-model="form.legal_person_name || form.individual_id_name"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">身份证地址</div>
          <el-input
            style="width: 354px"
            class="item-input"
            v-model="form.legal_person_id_addr || form.individual_id_addr"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div v-if="form.entity_type == 1">
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">公司名</div>
            <el-input
              class="item-input"
              v-model="form.biz_license_company"
              clearable
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">营业执照编号</div>
            <el-input
              class="item-input"
              v-model="form.biz_license_number"
              style="width: 600px"
              clearable
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">营业执照图片</div>
            <el-image
              style="margin-right: 20px; width: 400px; height: 300px"
              :src="
                form.biz_license_image ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList3"
              lazy
            ></el-image>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">经营范围</div>
            <el-input
              type="textarea"
              class="item-input"
              v-model="form.biz_license_content"
              style="width: 600px"
              clearable
              :autosize="{ minRows: 15 }"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">许可证类型</div>
            <el-input
              class="item-input"
              v-model="licenseType[form.license_type - 1]"
              clearable
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">许可证编号</div>
            <el-input
              class="item-input"
              v-model="form.license_number"
              style="width: 600px"
              clearable
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">许可证图片</div>
            <el-image
              v-for="(item, index) of form.license_image"
              :key="index"
              style="margin-right: 20px; width: 300px; height: 200px"
              :src="item || require('@/assets/index_images/image.jpg')"
              :preview-src-list="srcList4"
              lazy
            ></el-image>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">法人姓名</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_name"
              clearable
              disabled
            ></el-input>
          </div>
          <div class="item-block">
            <div class="item-lable">法人手机号</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_mobile"
              clearable
              disabled
            ></el-input>
          </div>
          <div class="item-block">
            <div class="item-lable">法人身份证号码</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_id_number"
              style="width: 300px"
              clearable
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">法人身份证正面图片</div>
            <el-image
              style="margin-right: 20px; width: 400px; height: 300px"
              :src="
                form.legal_person_id_images ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList5"
              lazy
            ></el-image>
          </div>
          <div class="item-block">
            <div class="item-lable">法人身份证反面图片</div>
            <el-image
              style="margin-right: 20px; width: 400px; height: 300px"
              :src="
                form.legal_person_id_images2 ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList6"
              lazy
            ></el-image>
          </div>
        </div>
      </div>
      <div class="" v-if="form.entity_type == 2">
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">个人入驻时的身份证号码</div>
            <el-input
              class="item-input"
              v-model="form.individual_id_number"
              style="width: 300px"
              clearable
              disabled
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">个人入驻时身份证正面图片</div>
            <el-image
              style="margin-right: 20px; width: 400px; height: 300px"
              :src="
                form.individual_id_images ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList7"
              lazy
            ></el-image>
          </div>
          <div class="item-block">
            <div class="item-lable">个人入驻时身份证反面图片</div>
            <el-image
              style="margin-right: 20px; width: 400px; height: 300px"
              :src="
                form.individual_id_images2 ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList8"
              lazy
            ></el-image>
          </div>
        </div>
      </div>
      <div class="item-title">银行信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">开户银行</div>
          <el-input
            class="item-input"
            v-model="form.bank_name"
            clearable
            disabled
          ></el-input>
        </div>
        <!-- <div class="item-block">
          <div class="item-lable">开户银行的支行名称</div>
          <el-input
            class="item-input"
            v-model="form.bank_branch_name"
            style="width: 400px"
            clearable
            disabled
          ></el-input>
        </div> -->
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">收款账户姓名</div>
          <el-input
            class="item-input"
            v-model="form.account_holder_name"
            style="width: 400px"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">收款账户号码</div>
          <el-input
            class="item-input"
            v-model="form.account_number"
            style="width: 400px"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-title">合同信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">合同编号</div>
          <el-input
            class="item-input"
            v-model="form.contract_number"
            style="width: 400px"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">正式合同的下载地址</div>
          <el-input
            class="item-input"
            v-model="form.contract_download_url"
            style="width: 400px"
            clearable
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-title">审核信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">审批状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color:approvalStatusClass(form.approval_status)}"
          >
            {{  formatApprovalStatus(form.approval_status) }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">合同状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_ec_signed == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_ec_signed == 1 ? '成功' : '未签署' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">进件状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_apply_mer == 1 ? '#48c978': 'red'}"
          >
             {{  form.has_apply_mer == 1 ? '成功' : '未进件' }}
          </span>
        </div>
      </div>

      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺创建状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.store_status == 1 ? '#48c978': 'red'}"
          >
            {{  form.store_status == 1 ? '已创建' : '未创建' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账业务申请状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_apply_split == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_apply_split == 1 ? '已申请' : '未申请' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账业务申请状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_apply_split == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_apply_split == 1 ? '已申请' : '未申请' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账接收方绑定状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_bind_receiver == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_bind_receiver == 1 ? '已绑定' : '未绑定' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">审批时的备注信息</div>
          <el-input
            type="textarea"
            class="item-input"
            v-model="form.approval_remark"
            style="width: 400px"
            clearable
            :autosize="{ minRows: 15 }"
          ></el-input>
        </div>
        <div class="item-block item-block-2" v-show="form.signed_status <= 0">
          <div>
            <el-checkbox
              :isIndeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >
              全选（全选 等于
              重新填写所有审核资料）（单个/多个就是补交审核资料）
            </el-checkbox>
          </div>
          <div class="check-item">
            <div class="check-title">基本信息</div>
            <el-checkbox-group v-model="checkboxList" @change="handlecheckbox">
              <el-checkbox
                v-for="(item, index) of formConfig.baseInfo"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="check-item">
            <div class="check-title">地址信息</div>
            <el-checkbox-group v-model="checkboxList" @change="handlecheckbox">
              <el-checkbox
                v-for="(item, index) of formConfig.addressInfo"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="check-item">
            <div class="check-title">证件信息</div>
            <el-checkbox-group
              v-if="form.entity_type == 1"
              v-model="checkboxList"
              @change="handlecheckbox"
              class="check-certificate"
            >
              <el-checkbox
                v-for="(item, index) of formConfig.certificate"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group
              v-if="form.entity_type == 2"
              v-model="checkboxList"
              @change="handlecheckbox"
              class="check-certificate"
            >
              <el-checkbox
                v-for="(item, index) of formConfig.certificate2"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="check-item">
            <div class="check-title">银行信息</div>
            <el-checkbox-group
              v-model="checkboxList"
              @change="handlecheckbox"
              class="check-certificate"
            >
              <el-checkbox
                v-for="(item, index) of formConfig.bankInfo"
                :key="index + item.key"
                :label="item.key"
              >
                {{ form.entity_type == 1 ? '银行' : item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-content" v-if="!showLoading">
      <el-button
        class="btn"
        style="width: 150px;"
        type="success"
        @click="getMerchApproval(5)"
        v-if="![1,5].includes(form.approval_status)"
      >
        提交拉卡拉审核
      </el-button>
      <el-button
      v-if="form.approval_status != 1"
        class="btn"
        type="danger"
        
        @click="getMerchApproval(2)"
      >
        驳回审核
      </el-button>
      <!-- <el-button class="btn" type="danger" @click="getCheckContractFile()">
        查看商家签署合同
      </el-button> -->
      <el-button
        class="btn btn-hetong"
        type="success"
        @click="createShop()"
        v-if="form.has_apply_mer == 1 &&  form.approval_status == 5 && form.has_apply_split == 2 && form.store_status == 2"
      >
        创建店铺
      </el-button>
      <el-button
        class="btn btn-hetong"
        type="success"
        @click="createSubAccount()"
        v-if=" form.approval_status == 5 && form.has_apply_mer ==1 && form.has_apply_split != 1"
      >
        分账业务申请
      </el-button>
      <el-button class="btn" @click="close()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getMerchDetail,
  getMerchApproval,
  getCreateByFile,
  getCheckContractFile,
  createShop,
  createSubAccount
} from '@/api/shopAudit/shopAudit'
import { GetCategoryList } from '@/api/base/store/category'
import city from './cityData.js'
import config from './formConfig'
import { color } from 'echarts'
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
    id: {
      typeof: Number,
    },
  },
  data() {
    return {
      title: '店铺审核详情',
      showDialog: false,
      showLoading: false,
      formConfig: JSON.parse(JSON.stringify(config)),
      cityData: JSON.parse(JSON.stringify(city.cityData)),
      form: {
        login_mobile: '66',
        store_id: '1',
        store_name: '',
        contact_name: '',
        biz_category: 0,
        settlement_method: '',
        store_area:'',
        store_longitude: '',
        store_latitude: '',
        province_id: '',
        city_id: '',
        store_address: '',
        entity_type: '',
        front_facade_image: '',
        environment_image: '',
        biz_license_number: '',
        biz_license_image: '',
        biz_license_content:'',
        license_type: 1,
        license_number: '',
        license_image: '',
        legal_person_name: '',
        legal_person_mobile: '',
        legal_person_id_number: '',
        legal_person_id_images: '',
        legal_person_id_images2: '',
        individual_id_number: '',
        individual_id_images: '',
        individual_id_images2: '',
        bank_name: '',
        bank_branch_name: '',
        account_number: '',
        account_holder_name: '',
        contract_number: '',
        contract_download_url: '',
        approval_status: 3,
        approval_remark: '',
        province_nmae: '',
        city_name: '',
        county_name: '',
        signed_status: 0,
        lkl_mer_cup_no:'',  // 拉卡拉商户号
        lkl_term_no:'',// 拉卡拉终端号
        has_ec_signed:'' , // 是否签合同，1-是；2-否；
        has_apply_mer:'' ,// 是否进件成功，1-是；2-否；
        has_apply_split:'',// 是否申请分账业务，1-是；2-否；
        has_apply_receiver:'',// 是否申请创建分账接收方，1-是；2-否；,
        has_bind_receiver:''// 是否是否绑定分账接收方，1-是；2-否；
      },
      entityType: ['企业', '个人'],
      // approvalStatus: ['已通过', '未通过', '待审核','未申请过','已提交拉卡拉审核','拉卡拉审核未通过'],
      approvalStatus:[
        {
          key:1,
          value:'已通过',
          color:'#48c978'
        },
        {
          key:2,
          value:'未通过',
          color:'red'
        },
        {
          key:3,
          value:'待审核',
          color:'#ffba00'
        },
        {
          key:4,
          value:'未申请过',
          color:'#000'
        },
        {
          key:5,
          value:'已提交拉卡拉审核',
          color:'#ffba00'
        },
        {
          key:21,
          value:'拉卡拉审核未通过',
          color:'red'
        },
      ],
      licenseType: ['许可证', '特许证件', '其他证件'],
      storeStatus : ['已创建','未创建'],
      signedStatus: [
        {
          index: -1,
          value: '预备数据阶段',
        },
        {
          index: 0,
          value: '等待签署',
        },
        {
          index: 1,
          value: '已部分签署',
        },
        {
          index: 2,
          value: '已完成',
        },
        {
          index: 3,
          value: '已撤销',
        },
        {
          index: 5,
          value: '已过期',
        },
        {
          index: 7,
          value: '已拒签',
        },
      ],
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
      ],
      checkboxList: [],
      checkAll: false,
      isIndeterminate: true,
      srcList1: [],
      srcList2: [],
      srcList3: [],
      srcList4: [],
      srcList5: [],
      srcList6: [],
      srcList7: [],
      srcList8: [],
    }
  },
  computed: {
    signedStatusClass() {
      

      if (this.form.store_status  == 1) {
        return 'color:#48c978'
      } else {
        return 'color:red'
      }
    },
  },
  watch: {
    show: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showDialog = true
          this.getMerchDetail()
    
        } else {
          this.showDialog = false
        }
      },
    },
  },
  methods: {
    async getMerchDetail() {

      this.showLoading = true
      let res = await getMerchDetail({ id: this.id })
      if (res && res.status == 200) {
        this.form = res.data

        if (res.data) {
          let item = this.signedStatus.find(
            (item) => item.index == res.data.signed_status
          )
          if (item) {
            this.form.signedStatusName = item.value
          }
        }

        if(this.form.store_area){
          let areaArr = this.form.store_area.split('/');
          if(areaArr[0]){
            this.form.province_nmae = areaArr[0]
          }

          if(areaArr[1]){
            this.form.city_name = areaArr[1]
          }

          if(areaArr[2]){
            this.form.county_name = areaArr[2]
          }
        }

        // this.cityData.provinceData.forEach((item) => {
        //   if (item.value == res.data.province_id) {
        //     this.form.province_nmae = item.label
        //   }
        // })

        // this.cityData.cityData.forEach((item) => {
        //   item.forEach((group) => {
        //     if (group.value == res.data.city_id) {
        //       this.form.city_name = group.label
        //     }
        //   })
        // })

        // this.cityData.areaData.forEach((item) => {
        //   item.forEach((group) => {
        //     group.forEach((group2) => {
        //       if (group2.value == res.data.county_id) {
        //         this.form.county_name = group2.label
        //       }
        //     })
        //   })
        // })

        this.srcList1.push(res.data.front_facade_image)
        this.srcList2.push(res.data.environment_image)
        this.srcList3.push(res.data.biz_license_image)

        if (res.data.license_image) {
          this.srcList4 = res.data.license_image.split(',')
          this.form.license_image = this.srcList4
        }
        this.srcList5.push(res.data.legal_person_id_images)
        this.srcList6.push(res.data.legal_person_id_images2)
        this.srcList7.push(res.data.individual_id_images)
        this.srcList8.push(res.data.individual_id_images2)
      }
      this.showLoading = false
      await this.getCategoryList();
    },
    async getCategoryList(){
      let res =  await GetCategoryList();

      if(res && res.status == 200){

        let name =  this.findCategoryName(res.data,this.form.biz_category);
        if(name){
          this.form.biz_category = name
        }
      }
    },
    findCategoryName(categories, targetId) {
    for (const category of categories) {
        // 如果当前分类匹配，直接返回名称
            if (category.store_category_id === targetId) {
                return category.store_category_name;
            }
            
            // 如果有子分类，递归查找
            if (category.children && category.children.length > 0) {
                const foundInChildren = findCategoryName(category.children, targetId);
                if (foundInChildren) {
                    return foundInChildren;
                }
            }
        }
        
        return null; // 没找到
    },
    async getMerchApproval(status) {
      if (status == 2 && this.checkboxList.length == 0) {
        this.$message({
          message: '请勾选至少一项驳回原因',
          type: 'warning',
        })
        return
      }

      let msg =
        status == 5
          ? '此操作将通过审核，是否继续？'
          : '此操作将驳回审核，是否继续？'

      if (this.form.approval_status == 1) {
        msg = '已经审核通过了，确定要驳回吗？'
      }

      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let parems = {
            id: this.id,
            approvalStatus: status,
            approvalRemark: this.form.approval_remark,
            approvalInvalidCol: this.checkboxList.filter(item => !['businessLicenseOCR', 'legalPersonOCR','personOCR','bankOCR'].includes(item)),
          }
         
          let res = await getMerchApproval(parems)
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: '成功',
            })
            this.checkboxList = []
            this.getMerchDetail()

            // if (this.status == 2) {
            //   this.close()
            // }
          }else{
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核',
          })
        })
    },
    getCreateByFile() {
      this.$confirm('此操作将签署合同, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let parems = {
            mchMobile: this.form.login_mobile,
          }
          let res = await getCreateByFile(parems)
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: '签署成功',
            })

            await this.getMerchDetail()
            // this.close()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消签署',
          })
        })
    },
    async getCheckContractFile() {
      let params = {
        mchMobile: this.form.login_mobile,
      }
      let res = await getCheckContractFile(params)
      if (res && res.status == 200) {
        
      }
    },
    approvalStatusClass(status){
      
      const found = this.approvalStatus.find(item => item.key == status);
      return found ? found.color : '#000';

    },
    close() {
      this.$emit('close')
    },
    handlecheckbox(e) {
  
      // 企业身份证驳回 <!-- 身份证号码，身份证正面图片，身份证反面图片--!>
      if(e.includes('legalPersonOCR') && !this.checkboxList.some(item => item === 'legal_person_id_number')){

        let arr = [
        'legal_person_id_number',
        'legal_person_id_images',
        'legal_person_id_images2',
        'legal_person_id_addr',
        'legal_person_id_period_begin',
        'legal_person_id_period_end'
        ]

        this.checkboxList = [...arr,...this.checkboxList ]
      }
      // 个人身份证驳回 <!-- 身份证号码，身份证正面图片，身份证反面图片--!>
      if(e.includes('personOCR')&& !this.checkboxList.some(item => item === 'individual_id_number')){

        let arr = [
          'individual_id_number',
          'individual_id_name',
          'individual_id_addr',
          'individual_id_images',
          'individual_id_images2',
          'individual_id_period_begin',
          'individual_id_period_end'
        ]

        this.checkboxList = [...arr,...this.checkboxList]
      }
      //银行卡驳回 <!-- 银行卡上传图片,开户名称，银行卡号，开户银行 --!>
      if(e.includes('bankOCR')&& !this.checkboxList.some(item => item === 'bankcard_item')){

        let arr = [
          'bankcard_item',
          'account_holder_name',
          'account_number',
          'bank_name'
        ]

        this.checkboxList = [...arr,...this.checkboxList]
      }
      // 企业营业执照驳回
      if(e.includes('businessLicenseOCR')&& !this.checkboxList.some(item => item === 'biz_license_image')){

        let arr = [
          'biz_license_image',
          'biz_license_company',
          'legal_person_name',
          'biz_license_content',
          'biz_license_number',
          'legal_person_mobile'
        ]

        this.checkboxList = [...arr,...this.checkboxList]
      }

      if(e.includes("mapAddress") && !this.checkboxList.some(item => item === 'store_address')){
        this.checkboxList = ['store_address',...this.checkboxList];
      }
      
      console.log(this.checkboxList)
    },
    handleCheckAllChange(val) {
      if (this.form.entity_type == 1) {
        this.checkboxList = val
          ? this.formConfig.enterpriseCheckBoxList.map((item) => {
              return item.key
            })
          : []
      } else {
        this.checkboxList = val
          ? this.formConfig.personCheckBoxList.map((item) => {
              return item.key
            })
          : []
      }

      if (val) {
        this.checkboxList.unshift('all')
      } else {
        let index = this.checkboxList.indexOf('all')
        if (index !== -1) {
          this.checkboxList.splice(index, 1)
        }
      }

      this.isIndeterminate = false
    },
    formatApprovalStatus(status){

      const found = this.approvalStatus.find(item => item.key == status);
      return found ? found.value : 'Unknown Status';
    },
    async createSubAccount(){
      let res  = await createSubAccount({merCupNo:this.form.lkl_mer_cup_no})
      if(res && res.status == 200){
        this.$message({
          type: 'success',
          message: '分账成功',
        })
      }
    },
    async createShop(){
      let res  = await createShop({mchMobile:this.form.login_mobile})
      if(res && res.status == 200){
        this.$message({
          type: 'success',
          message: '店铺创建成功',
        })
      }
    }
  },
}
</script>

<style lang="scss">
.shopAuditDetails-container {
  .item-content {
    .item-title {
      padding: 20px 0;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px solid #dcdfe6;
      color: #000;
    }
    .item-info {
      display: flex;
      margin: 20px 0;

      .item-block {
        display: flex;
        align-items: center;

        .item-lable {
          min-width: 100px;
          margin-right: 20px;
        }

        .item-input {
          width: 200px;
          margin-right: 60px;
        }
      }

      .item-block-2 {
        align-items: initial;
        flex-flow: column;

        .check-item {
          margin: 0 24px;

          .check-title {
            margin: 10px 0px;
            font-weight: bold;
            color: #000;
          }
        }
      }

      .check-certificate {
        .el-checkbox__label {
          min-width: 108px;
        }
      }
    }

    .approval-status {
      font-weight: bold;
      font-size: 20px;
    }
  }

  .el-dialog__header {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
    z-index: 1;

    .el-dialog__title {
      font-weight: bold;
      color: #000;
    }

    .el-dialog__close {
      font-size: 22px;
      font-weight: bold;
    }
  }

  .btn-content {
    text-align: center;

    .btn {
      width: 100px;
      height: 40px;
    }
  }

  .btn-hetong:hover {
    content: '需要通过审核才可以点击此按钮';
  }
}
</style>