<template>
  <div class="component-business-info-reupload">
    <el-dialog
      v-model="dialogVisible"
      title="影印件上传"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="500px"
    >
      <el-alert
        :title="msg"
        type="error"
        show-icon
        style="margin-bottom: 20px;"
      />
      <!-- native modifier has been removed, please confirm whether the function has been affected  -->
      <el-form
        ref="companyInfoFormRef"
        :model="companyInfoForm"
        :rules="companyInfoRule"
        label-width="140px"
        class="business-info"
        @submit.prevent
      >
        <el-form-item
          v-if="idCardCollectProcessStatus===3 || idCardCollectProcessStatus === 0"
          :label="$t('multishop.shopInformation.businessLicense')"
          prop="businessLicense"
        >
          <div class="business-license-box">
            <div class="license-content">
              <img-upload v-model="companyInfoForm.businessLicense" />
              <div class="example-box">
                <img
                  src="@/assets/example-img/Business-license.png"
                  alt
                >
                <div class="tips">
                  {{ $t('multishop.shopInformation.example') }}
                </div>
              </div>
            </div>
            <div class="upload-tips">
              {{ $t('multishop.shopInformation.uploadTips') }}
            </div>
          </div>
        </el-form-item>
        <div
          v-if="idCardCollectProcessStatus===2 || idCardCollectProcessStatus === 0"
          class="id-box"
        >
          <div class="upload-content">
            <div class="upload-img">
              <el-form-item
                class="idcard"
                :label="$t('multishop.shopInformation.identityCardFront')"
                prop="identityCardFront"
              >
                <img-upload v-model="companyInfoForm.identityCardFront" />
              </el-form-item>
              <el-form-item
                class="idcard"
                label-width="0"
                prop="identityCardLater"
              >
                <img-upload v-model="companyInfoForm.identityCardLater" />
              </el-form-item>
            </div>
            <div class="upload-example">
              <div class="example-box">
                <img
                  src="@/assets/example-img/idcard1.png"
                  alt
                >
                <div class="tips">
                  {{ $t('multishop.shopInformation.portraitFace') }}
                </div>
              </div>
              <div class="example-box">
                <img
                  src="@/assets/example-img/idcard2.png"
                  alt
                >
                <div class="tips">
                  {{ $t('multishop.shopInformation.national') }}
                </div>
              </div>
            </div>
            <div
              class="upload-tips"
              style="margin-bottom:15px"
            >
              {{ $t('multishop.shopInformation.identityCardTips') }}
            </div>
          </div>
        </div>
      </el-form>
      <template #footer>
        <div>
          <el-button
            @click="dialogVisible = false"
          >
            取消
          </el-button>
          <el-button
            v-permission="['supplier:uploadIdCard:update']"
            type="primary"
            @click="submitForm"
          >
            上传
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Debounce } from '@/utils/debounce'
import { reUploadIdCard } from '@/api/multishop/shop-process'
import { ElMessage } from 'element-plus'

const props = defineProps({
  supplierCompanyId: {
    type: Number,
    default: 0
  },
  supplierId: {
    type: Number,
    default: 0
  }
})

const companyInfoForm = reactive({
  businessLicense: '',
  identityCardFront: '',
  identityCardLater: ''
})

const companyInfoRule = computed(() => {
  return {
    businessLicense: [
      { required: true, message: $t('multishop.shopInformation.businessLicenseTips'), trigger: 'change' }
    ],
    identityCardFront: [
      { required: true, message: $t('multishop.shopInformation.identityCardFrontTips'), trigger: 'change' }
    ],
    identityCardLater: [
      { required: true, message: $t('multishop.shopInformation.identityCardLaterTips'), trigger: 'change' }
    ]
  }
})

const dialogVisible = ref(false)
const idCardCollectProcessStatus = ref(-1) // 影印件采集审核状态 0.未上传 1.待审核 2.只有工商认证通过 3.只有法人信息通过 4.均审核通过
const msg = ref('') // 提示信息
const companyInfoFormRef = ref(null)
const init = (data) => {
  dialogVisible.value = true
  idCardCollectProcessStatus.value = data
  if (data === 0) {
    msg.value = '审核未通过，请重新上传'
  } else if (data === 2) {
    msg.value = '法人身份证审核失败，请重新上传'
  } else if (data === 3) {
    msg.value = '工商营业执照审核失败，请重新上传'
  }
  nextTick(() => {
    companyInfoFormRef.value.resetFields()
  })
}
const submitForm = Debounce(() => {
  companyInfoForm.supplierCompanyId = props.supplierCompanyId
  companyInfoForm.supplierId = props.supplierId
  companyInfoFormRef.value?.validate(valid => {
    if (valid) {
      reUploadIdCard(companyInfoForm).then((data) => {
        ElMessage({
          message: data,
          type: 'success',
          duration: 1500,
          onClose: () => {
            // 上传成功后，刷新页面
            location.reload()
          }
        })
      })
    }
  })
}, 1500)

defineExpose({
  init
})

</script>

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