<!-- 委托方名录 基本信息 -->
<script name="SupplierInfoBasic" lang="ts" setup>
import type { ISupplierInfo } from './supplier-interface'
import type { IDictType } from '@/commonInterface/resource-interface'

const supplierInfo = ref<ISupplierInfo>({
  id: '',
  labCode: '',
  labCodeName: '',
  groupCode: '',
  groupCodeName: '',
  supplierNo: '',
  supplierName: '',
  briefName: '',
  supplierType: '',
  supplierTypeName: '',
  taxNumber: '',
  bankAccount: '',
  bankName: '',
  bankAccountNumber: '',
  director: '',
  phone: '',
  postalCode: '',
  fax: '',
  mailbox: '',
  website: '',
  companyAddress: '',
  supplierContent: '',
  minioFileName: '',
  remark: '',
  approvalStatus: '',
  approvalStatusName: '',
  processId: '',
  taskId: '',
  createUserName: '',
  createTime: '',
})

const fileNameList = ref<string[]>([])

const supplierTypeDict = ref<Array<IDictType>>([])
const labCodeDict = ref<IDictType[]>([])
const groupCodeDict = ref<IDictType[]>([])

// 逻辑
// 查询人员基本信息
const getSupplierBasicInCache = () => {
  supplierInfo.value = JSON.parse(sessionStorage.getItem('supplierInfo')!)

  labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
  groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
}

const initDialog = (basic: ISupplierInfo) => {
  supplierInfo.value = basic
}

// 监听 显示中文 立即监听
watch(() => supplierInfo.value.supplierType, (newVal) => {
  if (supplierTypeDict.value.length === 0) {
    supplierTypeDict.value = JSON.parse(sessionStorage.getItem('bizSupplierType')!)
  }
  const targetList = supplierTypeDict.value.filter(item => item.value === newVal)
  if (targetList.length > 0) {
    supplierInfo.value.supplierTypeName = targetList[0].name
  }
  else {
    supplierInfo.value.supplierTypeName = ''
  }
}, { immediate: true })

// 监听 文件列表 立即监听
watch(() => supplierInfo.value.minioFileName, (newVal) => {
  if (newVal !== '') {
    fileNameList.value = newVal!.split(',')
  }
  else {
    fileNameList.value = []
  }
}, { immediate: true, deep: true })

defineExpose({
  getSupplierBasicInCache,
  initDialog,
})
</script>

<template>
  <app-container>
    <el-form ref="basicFormRef" :model="supplierInfo" label-position="right" label-width="130px" border stripe>
      <el-row :gutter="24">
        <!-- 第一行 第一列 -->
        <el-col :span="6">
          <el-form-item label="实验室代码">
            <el-input v-model="supplierInfo.labCodeName" :disabled="true" />
          </el-form-item>
          <el-form-item label="供方名称">
            <el-input v-model="supplierInfo.supplierName" :disabled="true" />
          </el-form-item>
          <el-form-item label="税号">
            <el-input v-model="supplierInfo.taxNumber" :disabled="true" />
          </el-form-item>
          <el-form-item label="邮编">
            <el-input v-model="supplierInfo.postalCode" :disabled="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第二列 -->
        <el-col :span="6">
          <el-form-item label="组别代码">
            <el-input v-model="supplierInfo.groupCodeName" :disabled="true" />
          </el-form-item>
          <el-form-item label="供方简称">
            <el-input v-model="supplierInfo.briefName" :disabled="true" />
          </el-form-item>
          <el-form-item label="银行账户名">
            <el-input v-model="supplierInfo.bankAccount" :disabled="true" />
          </el-form-item>
          <el-form-item label="传真">
            <el-input v-model="supplierInfo.fax" :disabled="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第三列 -->
        <el-col :span="6">
          <el-form-item label="供方编号">
            <el-input v-model="supplierInfo.supplierNo" :disabled="true" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="supplierInfo.director" :disabled="true" />
          </el-form-item>
          <el-form-item label="银行名称">
            <el-input v-model="supplierInfo.bankName" :disabled="true" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="supplierInfo.mailbox" :disabled="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第四列 -->
        <el-col :span="6">
          <el-form-item label="供方类型">
            <el-select v-model="supplierInfo.supplierType" style="width: 100%;" :disabled="true">
              <el-option v-for="item in supplierTypeDict" :key="item.id" :value="item.value" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="supplierInfo.phone" :disabled="true" />
          </el-form-item>
          <el-form-item label="银行账号">
            <el-input v-model="supplierInfo.bankAccount" :disabled="true" />
          </el-form-item>
          <el-form-item label="网址">
            <el-input v-model="supplierInfo.website" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="24">
        <!-- 第一列 -->
        <el-col :span="12">
          <el-form-item label="地址">
            <el-input v-model="supplierInfo.companyAddress" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="服务和供应的内容">
            <el-input v-model="supplierInfo.supplierContent" type="textarea" :rows="2" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="supplierInfo.remark" type="textarea" :rows="2" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第五行 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="附件">
            <template v-for="file in fileNameList" :key="file">
              <span style="margin-right: 15px;">{{ file }}</span>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </app-container>
</template>