<!-- 设备收发管理详情 -- 基本信息(这是受检设备系统的设备详情) -->
<script name="SendReceiveDetailBasic" lang="ts" setup>
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { IBasicForm } from '../sendReceive-interface'
import templateTable from './components/templateTable.vue'
import type { IAccessory, Itech } from '@/views/equipement/info/book/book-interface'
import { getDictByCode } from '@/api/system/dict'
import countries from '@/components/AddressSelect/country-code.json'
import type { deptType, dictType } from '@/global'
import { getDeptTreeList } from '@/api/system/dept'
import { getUserList } from '@/api/system/user'
import showPhoto from '@/components/showPhoto/index.vue'
import { toTreeList } from '@/utils/structure'
import useUserStore from '@/store/modules/user'
import { getDetailBaseInfo } from '@/api/business/manager/sendReceive'
const props = defineProps({
  equipmentId: { // 设备id
    type: String,
  },
})
const user = useUserStore() // 用户信息
const countryList = ref(countries) // 国家列表
const testTask = ref<string[]>([])
const form: Ref<IBasicForm> = ref({ // 基本信息表单
  equipmentNo: '', // 统一编号
  equipmentName: '', // 设备名称
  usageStatus: '', // 使用状态
  level: '', // 重要等级
  productCountry: '', // 生产国家
  manufactureNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  productDate: '', // 生产日期
  unitPrice: '', // 单价(万元)
  purchaseDate: '', // 购进日期
  model: '', // 型号规格
  category: '', // 设备分类
  qualityCondition: '', // 质量状况
  deptId: '', // 使用部门id
  deptName: '', // 使用部门
  checkCycle: '', // 检定周期(月)
  companyId: '', // 所在单位id
  companyName: '', // 所在单位
  remark: '', // 备注
  instructionsFile: '', // 说明书(minio存储文件名)（多个用,拼接）
  checkDate: '', // 检定日期
  checkOrganization: '', // 检定机构
  certificateValid: '', // 证书有效期
  meterIdentify: '', // 计量标识
  usePosition: '', // 使用岗位
  directorName: '', // 负责人
  rfid: '', // RFID标签绑定
  useSign: '', // 在用信息(字典code)
  groupInfos: [], // 组别信息
  installLocation: '', // 安装位置(多个用,拼接)
  installLocationExt: '', // 安装位置(自定义编写)
  testTask: '', // 参试任务
  remarkExt: '', // 备注(扩展)
})
// ------------------------------------技术指标-------------------------------------------
const technicalTargetList = ref<Itech[]>([]) // 技术指标列表
const technicalIndexColumns = [ // 技术指标表头
  { text: '测量范围', value: 'measureRange', required: true },
  { text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', required: true },
  { text: '依据的技术文件', value: 'basedDocuments', required: true },
]
// -------------------------------------主附件信息----------------------------------------
const attachmentList = ref<IAccessory[]>([]) // 主附件信息
const accessoryColumns = [ // 主附件信息
  { text: '名称', value: 'name', required: true },
  { text: '信息', value: 'information', required: true },
  { text: '位置', value: 'position', required: true },
]
// ------------------------------------------字典----------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const usageStatusList = ref<dictType[]>([]) // 使用状态
const levelList = ref<dictType[]>([]) // 重要等级
const typeList = ref<dictType[]>([]) // 设备类型
const standardTypeList = ref<dictType[]>([]) // 标准类型
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const categoryList = ref<dictType[]>([]) // 设备分类
const useInfoList = ref<dictType[]>([]) // 在用信息
const useDeptList = ref<deptType[]>([]) // 所属部门列表
/**
 * 获取字典
 */
function getDict() {
  // 获取部门列表
  getDeptTreeList().then((res) => {
    // 转成树结构
    useDeptList.value = toTreeList(res.data, '0', true)
  })
  // 计量标识
  getDictByCode('eqptMeterIdentify').then((response) => {
    meterIdentifyDict.value = response.data
  })
  // 使用状态
  getDictByCode('eqptDeviceUseStatus').then((response) => {
    usageStatusList.value = response.data
  })
  // 重要等级
  getDictByCode('eqptDeviceLevel').then((response) => {
    levelList.value = response.data
  })
  // 设备类型
  // getDictByCode('equipmentType').then((response) => {
  //   typeList.value = response.data
  // })
  typeList.value = [
    {
      id: '1',
      value: '1',
      name: '受检设备',
    },
    {
      id: '2',
      value: '2',
      name: '特种设备',
    },
  ]
  // 标准类型
  getDictByCode('bizStandardType').then((response) => {
    standardTypeList.value = response.data
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 设备分类
  getDictByCode('eqptDeviceType').then((response) => {
    categoryList.value = response.data
  })
  getDictByCode('eqptDeviceInUse').then((res) => {
    useInfoList.value = res.data
  })
}

// -------------------------------------------获取详情信息----------------------------------------
/**
 * 获取详情
 * @param isCopy 是否备份，判断基本信息是否变化
 */
function fetchInfo() {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getDetailBaseInfo({ equipmentId: props.equipmentId! }).then((res) => {
    form.value = res.data
    attachmentList.value = res.data.attachmentList // 主附件信息
    technicalTargetList.value = res.data.technicalTargetList // 技术指标
    if (form.value.testTask) { // 参试任务
      if (form.value.testTask.includes(',')) {
        testTask.value = form.value.testTask.split(',')
      }
      else {
        testTask.value = [form.value.testTask]
      }
    }
    else {
      testTask.value = ['']
    }
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
// -------------------------------------------------------------------------------------------
watch(() => testTask.value, (newVal) => { // 参试任务监听
  if (newVal && Array.isArray(newVal) && newVal.length) {
    form.value.testTask = testTask.value.join(',')
  }
}, { deep: true })
onMounted(async () => {
  await getDict() // 获取字典
  fetchInfo()
})

defineExpose({ fetchInfo })
</script>

<template>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="统一编号:" prop="equipmentNo">
            <el-input v-model="form.equipmentNo" disabled placeholder=" " />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备名称:" prop="equipmentName">
            <el-input
              v-model.trim="form.equipmentName"
              placeholder=" "
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="使用状态:" prop="usageStatus">
            <el-select
              v-model.trim="form.usageStatus"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in usageStatusList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="重要等级:" prop="level">
            <el-select
              v-model.trim="form.level"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in levelList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产国家:" prop="productCountry">
            <el-select
              v-model="form.productCountry"
              filterable
              placeholder=" "
              disabled
              class="full-width-input"
            >
              <el-option v-for="country of countryList" :key="country.code" :label="country.CNName" :value="country.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产厂家:" prop="manufacturer">
            <el-input
              v-model.trim="form.manufacturer"
              placeholder=" "
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出厂编号:" prop="manufactureNo">
            <el-input
              v-model.trim="form.manufactureNo"
              placeholder=" "
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产日期:" prop="productDate">
            <el-date-picker
              v-model="form.productDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder=" "
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备单价(万元)" prop="unitPrice">
            <el-input v-model.trim="form.unitPrice" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购进日期:" prop="purchaseDate">
            <el-date-picker
              v-model="form.purchaseDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder=" "
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="型号规格" prop="model">
            <el-input
              v-model.trim="form.model"
              placeholder=" "
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="质量状况" prop="qualityCondition">
            <el-input
              v-model.trim="form.qualityCondition"
              placeholder=" "
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所在单位:">
            <dept-select v-model="form.companyId" :data="useDeptList" disabled placeholder="使用部门" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="使用部门" prop="deptId">
            <dept-select v-model="form.deptId" :data="useDeptList" disabled placeholder="使用部门" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备分类:" prop="category">
            <el-select
              v-model.trim="form.category"
              clearable
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检定周期(月)" prop="checkCycle">
            <el-input v-model.trim="form.checkCycle" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              v-model="form.remark"
              type="textarea"
              autosize
              disabled
              class="detail-input"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="说明书:">
            <show-photo :minio-file-name="form.instructionsFile" width="100%" height="125px" />
            <!-- <div v-for="(item, index) in form.instructionsFile" :key="index" style="display: flex;" />
            <span v-if="!form.instructionsFile">无</span>
            <input v-show="false" ref="fileRef" type="file" name="upload" multiple> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <!-- 检定（校准）机构表单 -->
  <detail-block title="">
    <el-form
      ref="sourceFormRef"
      :model="form"
      :label-width="130"
      label-position="right"
      style="display: flex;flex-wrap: nowrap;"
    >
      <el-form-item label="检定（校准）机构:" prop="checkOrganization" style="flex: 1;">
        <el-input
          v-model="form.checkOrganization"
          disabled
        />
      </el-form-item>
      <el-form-item label="检定(校准)日期:" prop="checkDate" style="flex: 1;">
        <el-date-picker
          v-model="form.checkDate"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          disabled
          class="full-width-input"
        />
      </el-form-item>
      <el-form-item label="证书有效期:" prop="certificateValid" style="flex: 1;">
        <el-date-picker
          v-model="form.certificateValid"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          disabled
          class="full-width-input"
        />
      </el-form-item>
      <el-form-item label="计量标识:" prop="meterIdentify" style="flex: 1;">
        <el-select
          v-model="form.meterIdentify"
          placeholder=" "
          disabled
          class="full-width-input"
        >
          <el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </detail-block>
  <!-- 技术指标 -->
  <detail-block title="技术指标">
    <el-table
      ref="techRef"
      :data="technicalTargetList"
      border
      style="width: 100%;"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in technicalIndexColumns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        align="center"
      />
    </el-table>
  </detail-block>

  <!-- 组别信息 -->
  <detail-block title="">
    <el-form
      ref="sourceFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="使用岗位" prop="usePosition">
            <el-input v-model.trim="form.usePosition" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="directorName">
            <el-input v-model.trim="form.directorName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="RFID标签绑定" prop="rfid">
            <el-input v-model.trim="form.rfid" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="在用信息" prop="useSign">
            <!-- <el-input v-model.trim="form.useSign" /> -->
            <el-select v-model="form.useSign" placeholder="选择在用信息" style="width: 100%;" disabled>
              <el-option v-for="item in useInfoList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="安装位置" prop="installLocation">
            <el-input v-model.trim="form.installLocation" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-input v-model.trim="form.installLocationExt" disabled style="padding-left: 0;" />
        </el-col>
      </el-row>
      <el-row v-if="form.groupInfos && form.groupInfos.length" :gutter="24" class="marg">
        <el-col :span="24" style="display: flex;">
          <el-form-item label="组别信息" />
          <el-input v-for="(item, index) in form.groupInfos" :key="index" v-model.trim="item.groupName" disabled style="width: 220px;height: 32px;margin-right: 12px;" />
        </el-col>
        <!-- <el-col v-for="(item, index) in form.groupInfos" :key="index" :span="3.5">
          <el-input v-model.trim="item.groupName" disabled />
        </el-col> -->
      </el-row>

      <el-row :gutter="24" class="marg">
        <!-- <el-col :span="6">
          <el-form-item label="参试任务" />
        </el-col>
        <el-col v-for="(item, index) in testTask" :key="index" :span="6" type="flex">
          <el-input v-model.trim="testTask[index]" disabled style="width: 220px;height: 32px;margin-right: 12px;" />
        </el-col> -->

        <el-col :span="24" style="display: flex;">
          <el-form-item label="参试任务" />
          <el-input v-for="(item, index) in testTask" :key="index" v-model.trim="testTask[index]" disabled style="width: 220px;height: 32px;margin-right: 12px;" />
        </el-col>
      </el-row>

      <el-row :gutter="24" class="marg">
        <el-col :span="12">
          <el-form-item label="备注" prop="remarkExt">
            <el-input v-model.trim="form.remarkExt" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>

  <!-- 主附件信息 -->
  <detail-block title="主附件信息">
    <el-table
      ref="accessoryRef"
      :data="attachmentList"
      border
      style="width: 100%;"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in accessoryColumns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        align="center"
      >
        <template #header>
          <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input v-else v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>

<style lang="scss" scoped>
.link {
  text-decoration: underline;
  color: #3d7eff;
  cursor: pointer;
}

.file-area {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #60627f;
  margin-bottom: 10px;
  margin-left: 40px;
  white-space: nowrap;

  .tech-file {
    display: flex;
    align-items: center;
    margin-left: 20px;

    .file-text {
      margin-right: 10px;
    }
  }
}
</style>