<template>
  <div
    class="component-view-modify-business"
  >
    <el-dialog
      v-model="visible"
      :title="$t('multishop.shopInformation.applicationChange')"
      :close-on-click-modal="false"
      top="10vh"
      width="70%"
    >
      <div class="popup">
        <!-- 审核状态 -->
        <div class="topModifyColumn">
          <div>
            <span>
              {{ $t('multishop.shopInformation.auditStatus') + ':' }}
            </span>
            <span>
              {{ auditStatus === '1' ? $t('multishop.shopInformation.alPass') : auditStatus === '-1' ? $t('multishop.shopInformation.noPass') : $t('multishop.shopInformation.notreView') }}
              <span v-if="auditStatus === -1">&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('multishop.shopInformation.remarks') + '：' }} {{ formData.remarks ? formData.remarks : $t('multishop.shopInformation.noYet') }}</span>
            </span>
          </div>
          <el-button
            v-if="auditStatus === 0 && paySettlementType !== 1"
            v-permission="['supplier:companyAudit:revoke']"
            type="primary"
            @click="withdrawalSubmission"
          >
            {{ $t('multishop.shopInformation.withdrawalRequest') }}
          </el-button>
        </div>
        <!-- 修改信息 -->
        <el-form
          ref="formDataRef"
          v-loading="pageLoading"
          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
              >
                {{ formData.startTime.slice(0,10) + ' - ' + (!formData.endTime ? $t('multishop.shopInformation.noFixedTerm') : formData.endTime.slice(0, 10)) }}
              </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="image-box-wrap">
                  <el-image
                    v-if="formData.businessLicense"
                    class="logo-image"
                    fit="contain"
                    :src="addDomain(formData.businessLicense)"
                  >
                    <template #error>
                      <img
                        alt
                        class="img-slot"
                        src="@/assets/images/def.png"
                      >
                    </template>
                  </el-image>
                </div>
              </el-form-item>
              <el-form-item
                :label="$t('multishop.shopInformation.identityCardFront') + ':'"
                required
              >
                <div class="business-license-box">
                  <div class="image-box-wrap">
                    <el-image
                      v-if="formData.identityCardFront"
                      class="logo-image"
                      fit="contain"
                      :src="addDomain(formData.identityCardFront)"
                    >
                      <template #error>
                        <img
                          alt
                          class="img-slot"
                          src="@/assets/images/def.png"
                        >
                      </template>
                    </el-image>
                  </div>
                  <div class="image-box-wrap">
                    <el-image
                      v-if="formData.identityCardLater"
                      class="logo-image"
                      fit="contain"
                      :src="addDomain(formData.identityCardLater)"
                    >
                      <template #error>
                        <img
                          alt
                          class="img-slot"
                          src="@/assets/images/def.png"
                        >
                      </template>
                    </el-image>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="foot-box">
        <el-button
          @click="closeLog"
        >
          {{ $t('multishop.shopInformation.closePage') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import * as api from '@/api/multishop/shop-process.js'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['closeLog', 'closeLog'])

const visible = ref(false) // 控制显示

const allinPayStore = useAllinpayStore()
const paySettlementType = ref(allinPayStore.paySettlementType)

const formData = ref({
  creditCode: '',
  firmName: '',
  residence: '',
  representative: '',
  capital: '',
  foundTime: '',
  endTime: '',
  businessScope: '',
  businessLicense: '',
  identityCardFront: '',
  identityCardLater: '',
  startTime: '',
  remarks: ''
})
const auditStatus = ref('')
const pageLoading = ref(false)

watch(() => visible.value, (val) => {
  if (!val) emit('closeLog')
})

const init = () => {
  visible.value = true
  getmodifyInformation()
}

defineExpose({ init })

// 获取申请审核情况
const getmodifyInformation = () => {
  pageLoading.value = true
  nextTick(() => {
    api.getAuditInfo()
      .then(data => {
        formData.value = { ...data, ...data.supplierCompanyVO }
        auditStatus.value = data.status
      })
      .finally(() => {
        pageLoading.value = false
      })
  })
}
// 撤销申请
const withdrawalSubmission = () => {
  api.setRevoke()
    .then(() => {
      ElMessage({
        message: $t('multishop.shopInformation.withdrawalRequestTips'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          closeLog()
        }
      })
    })
}
const closeLog = () => {
  visible.value = false
  emit('closeLog')
}

</script>

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