<script lang="ts" setup name="BaseInfoDetail">
/**
 * 溯源供方详情-基础信息表单
 */
import type { PropType } from 'vue'
import type { FormInstance, UploadUserFile } from 'element-plus'
import type { ISupplier } from './../list_interface'
import showPhoto from '@/views/system/tool/showPhoto.vue'
// 按钮加载状态
const props = defineProps({
  formData: {
    type: Object as PropType<ISupplier>,
    required: true,
  },
})
const companyAddress = computed(() => {
  return [props.formData.companyCountryName, props.formData.companyProvinceName, props.formData.companyCityName, props.formData.companyAreaName, props.formData.companyAddress]
})
const invoiceAddress = computed(() => {
  return [props.formData.invoiceCountryName, props.formData.invoiceProvinceName, props.formData.invoiceCityName, props.formData.invoiceAreaName, props.formData.invoiceAddress]
})

const ruleFormRef = ref<FormInstance>()
</script>

<template>
  <div id="form">
    <el-form
      ref="ruleFormRef"
      :model="formData"
      label-width="auto"
      label-position="right"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="溯源供方编号:" prop="supplierNo">
            <el-input
              v-model="formData.supplierNo"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="税号:" prop="taxNumber">
            <el-input
              v-model="formData.taxNumber"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮编:">
            <el-input
              v-model="formData.postalCode"
              placeholder=""
              disabled
              class="detail-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机:">
            <el-input
              v-model="formData.mobile"
              placeholder=""
              disabled
              class="detail-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="公司名称:" prop="supplierName">
            <el-input
              v-model="formData.supplierName"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行账户名:">
            <el-input
              v-model="formData.bankAccount"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人:">
            <el-input
              v-model="formData.director"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮箱:">
            <el-input
              v-model="formData.mailbox"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="公司简称:">
            <el-input
              v-model="formData.briefName"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行名称:">
            <el-input
              v-model="formData.bankName"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话:">
            <el-input
              v-model="formData.phone"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="网址:">
            <el-input
              v-model="formData.website"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="业务内容:" prop="businessContent">
            <el-input
              v-model="formData.businessContent"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行账号:">
            <el-input
              v-model="formData.bankAccountNumber"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="传真:">
            <el-input
              v-model="formData.fax"
              placeholder=""
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <el-form-item label="公司地址:">
          <address-select :data="companyAddress" detail />
        </el-form-item>
      </el-row>
      <el-row :gutter="5">
        <el-form-item label="开票地址:">
          <address-select :data="invoiceAddress" detail />
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="14">
          <el-form-item label="公司业务范围:">
            <el-input
              v-model="formData.businessScope"
              placeholder=""
              disabled
              class="detail-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="14">
          <el-form-item label="备注:">
            <el-input
              v-model="formData.remark"
              placeholder=""
              disabled
              class="detail-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="14">
          <el-form-item label="附件:">
            <show-photo v-if="formData.minioFileName" :minio-file-name="formData.minioFileName" />
            <span v-else>无</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>