<template>
  <div class="component-business-info-show">
    <div class="business-info-mod">
      <el-form
        ref="formDataRef"
        label-width="140px"
        :model="formData"
        @submit.prevent
      >
        <div class="ci-wrapper">
          <div class="left-wrap">
            <el-form-item :label="$t('multishop.shopInformation.creditCode') + ':'">
              <span v-if="formData.creditCode ">{{ formData.creditCode }}</span>
              <span
                v-else
                class="noyet-wrap"
              >{{ $t('multishop.shopInformation.noYet') }}</span>
            </el-form-item>
            <el-form-item
              :label="$t('multishop.shopInformation.firmName') + ':'"
              required
            >
              {{ formData.firmName }}
            </el-form-item>
            <el-form-item :label="$t('multishop.shopInformation.residence') + ':'">
              <span v-if="formData.residence"> {{ formData.residence }} </span>
              <span
                v-else
                class="noyet-wrap"
              >{{ $t('multishop.shopInformation.noYet') }}</span>
            </el-form-item>
            <el-form-item
              :label="$t('multishop.shopInformation.representative') + ':'"
              required
            >
              {{ formData.representative }}
            </el-form-item>
            <el-form-item
              v-if="paySettlementType===1"
              label="法人身份证："
              required
            >
              {{ formData.legalIds }}
            </el-form-item>
            <el-form-item
              v-if="paySettlementType===1"
              label="法人手机号："
              required
            >
              {{ formData.legalPhone }}
            </el-form-item>
            <el-form-item :label="$t('multishop.shopInformation.capital') + ':'">
              <span v-if="formData.capital"> {{ formData.capital }} </span>
              <span
                v-else
                class="noyet-wrap"
              >{{ $t('multishop.shopInformation.noYet') }}</span>
            </el-form-item>
            <el-form-item :label="$t('multishop.shopInformation.foundTime') + ':'">
              <span v-if="formData.foundTime"> {{ formData.foundTime }} </span>
              <span
                v-else
                class="noyet-wrap"
              >{{ $t('multishop.shopInformation.noYet') }}</span>
            </el-form-item>
            <el-form-item
              :label="$t('multishop.shopInformation.businessTerm') + ':'"
              required
            >
              {{ timerStr(formData.timeRange) }}
            </el-form-item>
            <el-form-item
              :label="$t('multishop.shopInformation.businessScope') + ':'"
              required
            >
              {{ formData.businessScope }}
            </el-form-item>
          </div>
          <div class="right-wrap">
            <el-form-item
              :label="$t('multishop.shopInformation.businessLicense') + ':'"
              required
            >
              <div class="logo-image-box">
                <el-image
                  v-if="formData.businessLicense"
                  class="logo-image"
                  fit="contain"
                  :src="addDomain(formData.businessLicense)"
                >
                  <template #error>
                    <img
                      class="img-slot"
                      src="@/assets/images/def.png"
                      alt
                    >
                  </template>
                </el-image>
              </div>
            </el-form-item>
            <el-form-item
              :label="$t('multishop.shopInformation.identityCardFront') + ':'"
              required
            >
              <div class="business-license-box">
                <div class="logo-image-box">
                  <el-image
                    v-if="formData.identityCardFront"
                    class="logo-image"
                    fit="contain"
                    :src="addDomain(formData.identityCardFront)"
                  >
                    <template #error>
                      <img
                        class="img-slot"
                        src="@/assets/images/def.png"
                        alt
                      >
                    </template>
                  </el-image>
                </div>
                <div class="logo-image-box">
                  <el-image
                    v-if="formData.identityCardLater"
                    class="logo-image"
                    fit="contain"
                    :src="addDomain(formData.identityCardLater)"
                  >
                    <template #error>
                      <img
                        class="img-slot"
                        src="@/assets/images/def.png"
                        alt
                      >
                    </template>
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item v-if="paySettlementType === 1 && idCardCollectProcessStatus !== 4 && (supplierStatus===3 || supplierStatus===5)">
              <span
                v-permission="['supplier:idCardStatus:update']"
                class="data-update"
                @click="dataUpdate"
              >
                <el-icon><RefreshRight /></el-icon>
                <span>{{ formData.updateTime }}数据更新</span>
              </span>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="footer">
      <div class="foot-box">
        <el-button
          v-if="(formData.newStatus !== 0 && paySettlementType!==1) || (paySettlementType===1 && (formData.newStatus!==0 || companyInfoProcessStatus===3 || companyInfoProcessStatus===0) && companyInfoProcessStatus!==1)"
          v-permission="['shop:shopCompany:save']"
          type="primary"
          @click="modifyBasicInfor"
        >
          {{ $t('multishop.shopInformation.modification') }}
        </el-button>
        <el-button
          v-if="formData.edit"
          type="primary"
          @click="modifyLog"
        >
          {{ $t('multishop.shopInformation.modifyView') }}
        </el-button>
      </div>
    </div>

    <viewModifyBusiness
      v-if="isModifyLog"
      ref="viewModifysRef"
      @close-log="closeModifyLog"
    />

    <businessInfoReupload
      v-if="reuploadVisible"
      ref="businessInfoReuploadRef"
      :supplier-company-id="formData.supplierCompanyId"
      :supplier-id="formData.supplierId"
    />
  </div>
</template>

<script setup>
import { Debounce } from '@/utils/debounce.js'
import * as api from '@/api/multishop/shop-process.js'
import viewModifyBusiness from '../view-modify-business/index.vue'
import businessInfoReupload from '../business-info-reupload/index.vue'

const emit = defineEmits(['closeBrowse'])

const isModifyLog = ref(false) // 查看工商信息修改记录
const formData = ref({})
const allinPayStore = useAllinpayStore()
const paySettlementType = ref(allinPayStore.paySettlementType) // 1：通联支付
const reuploadVisible = ref(false) // 重新上传影印件

const companyInfoProcessStatus = computed(() => {
  return allinPayStore.companyInfoProcessStatus
})
const idCardCollectProcessStatus = computed(() => {
  return allinPayStore.idCardCollectProcessStatus
})
const supplierStatus = computed(() => {
  return allinPayStore.supplierStatus
})

onMounted(() => {
  queryShopBusinessInfo()
})

// 修改
const modifyBasicInfor = () => {
  formData.value = {}
  emit('closeBrowse')
}

const viewModifysRef = ref(null)
const modifyLog = () => {
  if (!isModifyLog.value) isModifyLog.value = true
  nextTick(() => {
    viewModifysRef.value?.init()
  })
}

const closeModifyLog = () => {
  isModifyLog.value = false
  nextTick(() => {
    queryShopBusinessInfo()
  })
}

/**
 * 查询工商信息
 */
const queryShopBusinessInfo = () => {
  api.getCompanyInfo().then(data => {
    formData.value = data
    formData.value.timeRange = [data.startTime, data.endTime]
  })
}

// 数据更新
const businessInfoReuploadRef = ref(null)
const dataUpdate = Debounce(() => {
  api.updateIdCardStatus({ supplierId: formData.value.supplierId }).then(data => {
    if (data === 4) {
      // 审核成功就刷新页面
      location.reload()
    } else if (data === 0 || data === 2 || data === 3) {
      // 审核失败，弹窗让用户重新上传
      reuploadVisible.value = true
      nextTick(() => {
        businessInfoReuploadRef.value?.init(data)
      })
      queryShopBusinessInfo()
    } else if (data === 1) {
      // 待审核则更新工商信息
      queryShopBusinessInfo()
    }
  })
}, 1500)

const timerStr = (val) => {
  if (!val || val.length === 0) return val
  let str = ''
  val.forEach((item, index) => {
    if (index === 0) {
      str += item.slice(0, 10)
    } else {
      str = str + ' - ' + (!item ? $t('multishop.shopInformation.noFixedTerm') : item.slice(0, 10))
    }
  })
  return str
}
</script>

<style scoped lang="scss">
@use "index";
</style>
