<!-- 委托方名录 基本信息 -->
<script name="CustomerInfoBasic" lang="ts" setup>
import type { ICustomerInfo } from './customer-info'

const customerBasicInfo = ref<ICustomerInfo>({
  id: '',
  customerNo: '',
  customerName: '',
  deptId: '',
  customerLocation: '',
  customerLocationName: '',
  contacts: '',
  mobile: '',
  phone: '',
  postalCode: '',
  address: '',
  file: '',
  remark: '',
})
const fileNameList = ref<string[]>([])

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

const initDialog = (basic: ICustomerInfo) => {
  customerBasicInfo.value = basic
}

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

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

<template>
  <app-container>
    <el-form ref="basicFormRef" :model="customerBasicInfo" label-position="right" label-width="110px" border stripe>
      <el-row :gutter="24">
        <!-- 第一行 第一列 -->
        <el-col :span="6">
          <el-form-item label="委托方编号">
            <el-input v-model="customerBasicInfo.customerNo" :disabled="true" />
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="customerBasicInfo.contacts" :disabled="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第二列 -->
        <el-col :span="6">
          <el-form-item label="委托方名称" prop="deptId">
            <!-- <dept-select v-model="customerBasicInfo.deptId" style="width: 100%;" :disabled="true" /> -->
            <el-input v-model="customerBasicInfo.customerName" :disabled="true" />
          </el-form-item>
          <el-form-item label="座机电话" prop="mobile">
            <el-input v-model="customerBasicInfo.mobile" :disabled="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第三列 -->
        <el-col :span="6">
          <el-form-item label="委托方所属地" prop="customerLocation">
            <el-input v-model="customerBasicInfo.customerLocationName" :disabled="true" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="customerBasicInfo.phone" :disabled="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第四列 -->
        <el-col :span="6">
          <el-form-item label="默认检定实验室">
            <el-input v-model="customerBasicInfo.defaultLab" :disabled="true" />
          </el-form-item>
          <el-form-item label="邮编" prop="postalCode">
            <el-input v-model="customerBasicInfo.postalCode" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="24">
        <!-- 第一列 -->
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input v-model="customerBasicInfo.address" :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="customerBasicInfo.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>