<!-- 设备收发管理详情 -- 基本信息 -->
<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'
const user = useUserStore() // 用户信息
const countryList = ref(countries) // 国家列表
const form: Ref<IBasicForm> = ref({ // 基本信息表单
  equipmentNo: '', // 统一编号
  equipmentName: '', // 设备名称
  model: '', // 型号规格
  type: '', // 设备类型
  productCountry: '', // 生产国家
  manufacturer: '', // 生产厂家
  manufactureNo: '', // 出厂编号
  produceDate: '', // 生产日期
  333: '', // 使用年限
  unitPrice: 0, // 设备单价（万元）
  purchaseDate: '', // 购进日期
  qualityStatus: '', // 质量状况
  tzsb: '', // 是否是特种设备
  qzjd: '', // 是否强制检定
  ABC: '', // ABC
  measureCycle: 0, // 检定周期
  azdw: 0, // 所在单位
  deptId: '', // 使用部门id
  deptName: '', // 使用部门
  level: '', // 重要等级
  usageStatus: '', // 使用状态
  jszb: '', // 技术指标
  instructionsFile: '', // 说明书
  traceCompany: '', // 溯源单位
  traceDate: '', // 溯源日期
  measureValidDate: '', // 检定有效期
  meterIdentify: '', // 计量标识
  fileList: [], // 文件列表

  sygw: '', // 使用岗位
  fzr: '', // 负责人
  RFID: '', // RFID标签绑定
  zyxx: '', // 在用信息
  csrw: '', // 参试任务
  azwz: '', // 安装位置
  remark: '', // 备注
})
// ------------------------------------技术指标-------------------------------------------
const technicalIndexList = ref<Itech[]>([]) // 技术指标列表
const technicalIndexColumns = [ // 技术指标表头
  { text: '测量范围', value: 'limit', required: true },
  { text: '不确定度或允许误差极限或准确度等级', value: 'du', required: true },
  { text: '依据的技术文件', value: 'zb', required: true },
]
// -------------------------------------主附件信息----------------------------------------
const accessoryList = ref<IAccessory[]>([]) // 主附件信息
const accessoryColumns = [ // 主附件信息
  { text: '名称', value: 'name', required: true },
  { text: '信息', value: 'info', 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 useDeptList = ref<deptType[]>([]) // 所属部门列表
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const categoryList = ref<dictType[]>([]) // 设备分类
const approveTypeList = ref<dictType[]>([]) // 审批类型
const ABCList = ref<dictType[]>([]) // ABC
const useInfoList = ref<dictType[]>([]) // 在用信息
const positionList = ref<deptType[]>([]) // 安装位置列表
const whetherList = [ // 是否字典
  {
    id: '1',
    name: '是',
  },
  {
    id: '0',
    name: '否',
  },
]
/**
 * 获取字典
 */
function getDict() {
  // 计量标识
  getDictByCode('bizMeterIdentify').then((response) => {
    meterIdentifyDict.value = response.data
  })
  // 使用状态
  getDictByCode('bizUsageStatus').then((response) => {
    usageStatusList.value = response.data
  })
  // 重要等级
  getDictByCode('bizEquipmentLevel').then((response) => {
    levelList.value = response.data
  })
  // 设备类型
  getDictByCode('bizEquipmentType').then((response) => {
    typeList.value = response.data
  })
  // 标准类型
  getDictByCode('bizStandardType').then((response) => {
    standardTypeList.value = response.data
  })
  // 获取部门列表
  getDeptTreeList().then((res) => {
    // 转成树结构
    useDeptList.value = toTreeList(res.data, '0', true)
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 设备分类
  getDictByCode('bizEquipmentCategory').then((response) => {
    categoryList.value = response.data
  })
  // 审批类型
  getDictByCode('approvalType').then((response) => {
    approveTypeList.value = response.data
  })
  // ABC
  getDictByCode('ABC').then((response) => {
    ABCList.value = response.data
  })
  // 使用信息
  getDictByCode('').then((response) => {
    useInfoList.value = response.data
  })
  // 获取安装位置
  // getPositonList().then((res) => {
  //   // 转成树结构
  //   positionList.value = toTreeList(res.data, '0', true)
  // })
}
// -------------------------------------------------------------------------------------------
onMounted(async () => {
  await getDict() // 获取字典
})
</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="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="type">
            <el-select
              v-model.trim="form.type"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in typeList"
                :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="produceDate">
            <el-date-picker
              v-model="form.produceDate"
              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="333">
            <el-input
              v-model="form[333]"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备单价(万元)" prop="singlePrice">
            <el-input-number
              v-model="form.unitPrice"
              placeholder=" "
              disabled
              :precision="4"
              :step="0.1"
              :min="0"
              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="qualityStatus">
            <el-input
              v-model.trim="form.qualityStatus"
              placeholder=" "
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否是特种设备:" prop="tzsb">
            <el-select
              v-model.trim="form.tzsb"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in whetherList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否强制检定:" prop="qzjd">
            <el-select
              v-model.trim="form.qzjd"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in whetherList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="ABC:" prop="ABC">
            <el-select
              v-model.trim="form.ABC"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in ABCList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检定周期(月)" prop="measureCycle">
            <el-input-number
              v-model="form.measureCycle"
              disabled
              class="full-width-input"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在单位:">
            <el-input
              v-model="form.azdw"
              type="textarea"
              autosize
              disabled
              class="detail-input"
            />
          </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=" " />
          </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="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-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="说明书:">
            <div v-for="(item, index) in form.instructionsFile" :key="index" style="display: flex;" />
            <span v-if="!form.instructionsFile.length">无</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="120"
      label-position="right"
      style="display: flex;flex-wrap: nowrap;"
    >
      <el-form-item label="溯源单位:" prop="traceCompany" style="flex: 1;">
        <el-input
          v-model="form.traceCompany"
          disabled
        />
      </el-form-item>
      <el-form-item label="溯源日期:" prop="traceDate" style="flex: 1;">
        <el-date-picker
          v-model="form.traceDate"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          disabled
          class="full-width-input"
        />
      </el-form-item>
      <el-form-item label="检定有效期:" prop="measureValidDate" style="flex: 1;">
        <el-date-picker
          v-model="form.measureValidDate"
          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="technicalIndexList"
      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="sygw">
            <el-input
              v-model="form.sygw"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人:" prop="fzr">
            <el-input
              v-model="form.fzr"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="RFID标签绑定:" prop="RFID">
            <el-input
              v-model="form.RFID"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="在用信息:" prop="zyxx">
            <el-select
              v-model.trim="form.zyxx"
              clearable
              placeholder=" "
              size="default"
              disabled
              class="full-width-input"
            >
              <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-form-item label="组别信息:" style="display: flex;width: 100%;flex-wrap: wrap;">
          <div v-for="(item, index) in ['1', '2', '3', '4', '5']" :key="index">
            <el-input
              readonly
              style="width: fit-content ; margin-left: 10px;"
              disabled
            />
          </div>
        </el-form-item>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="18">
          <el-form-item label="安装位置:">
            <div style="display: flex;width: 100%; align-items: center;">
              <dept-select v-model="form.azwz" style="width: 320px;" :data="positionList" disabled placeholder=" " />
              <el-input
                v-model="form.azwz"
                style="flex: 1;margin-left: 10px;"
                disabled
              />
            </div>
          </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.csrw"
              type="textarea"
              autosize
              disabled
              class="detail-input"
            />
          </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-form>
  </detail-block>

  <!-- 主附件信息 -->
  <detail-block title="主附件信息">
    <el-table
      ref="accessoryRef"
      :data="accessoryList"
      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>