<!-- 设备收发管理详情 -- 基本信息(这是受检设备系统的设备详情) -->
<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 emits = defineEmits(['givePrintForm'])
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: '', // 负责人
  directorId: '', // 负责人Id
  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 是否备份，判断基本信息是否变化
 */
const loading = ref(false)
function fetchInfo() {
  // const loading = ElLoading.service({
  //   lock: true,
  //   text: '加载中请稍后',
  //   background: 'rgba(255, 255, 255, 0.8)',
  // })
  loading.value = true
  if (!props.equipmentId) {
    loading.value = false
    return
  }
  getDetailBaseInfo({ equipmentId: props.equipmentId! }).then((res) => {
    emits('givePrintForm', {
      manufactureNo: res.data.manufactureNo, // 出厂编号
      measureValidDate: res.data.certificateValid, // 检定有效期、证书有效期
      directorName: res.data.directorName, // 负责人
      directorId: res.data.directorId, // 负责Id
      equipmentId: res.data.id, // 负责Id
    })
    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()
    loading.value = false
  }).catch(() => {
    // loading.close()
    loading.value = false
  })
}
// -------------------------------------------------------------------------------------------
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, loading })
</script>

<template>
  <div v-loading="loading">
    <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="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="helpInstruction">
              <el-input
                v-model.trim="form.helpInstruction"
                placeholder=" "
                disabled
                class="full-width-input"
              />
            </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="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="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="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="unitPrice">
              <el-input v-model.trim="form.unitPrice" 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="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-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-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 v-show="form.instructionsFile" :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-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="checkDestination">
              <el-select v-model="form.checkDestination" placeholder="检定去向" style="width: 100%;" disabled>
                <el-option label="计量室" value="1" />
                <el-option label="外送" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="安装位置" prop="installLocationId">
              <el-select v-model="form.installLocationId" filterable placeholder="安装位置" clearable style="width: 100%;">
                <el-option v-for="item in installLocationList" :key="item.id" :label="item.installLocation" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <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-form-item label="详细位置">
              <el-input v-model.trim="form.installLocationExt" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24" class="marg">
          <el-col :span="18">
            <el-form-item label="参试任务" prop="fileNo">
              <el-table :data="form.taskInfos" border stripe>
                <el-table-column label="任务名称" prop="taskName" align="center" />
                <el-table-column label="开始时间" prop="startTime" align="center" />
                <el-table-column label="结束时间" prop="taskName" align="center" />
                <el-table-column label="备注" prop="remark" align="center" />
              </el-table>
            </el-form-item>
          </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="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-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>
  </div>
</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>