<!-- 监测智能模型详情 -->
<script lang="ts" setup name="EquipementMonitorRadioDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from './radio-interface'
import { getUserList } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import countries from '@/components/AddressSelect/country-code.json'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import { addMonitorRadioList, getInfo, updateMonitorRadioList } from '@/api/equipment/monitor/radio'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const countryList = ref(countries) // 国家列表
const ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
  labCode: '', // 实验室代码
  // groupCode: '',	// 组别代码(字典code)
  equipmentNo: '', // 统一编号
  equipmentName: '', // 智能模型名称
  model: '', // 规格型号
  checkCycle: 0, // 检定周期
  transmitFrequencyBand: '', // 发射频段
  transmitPower: '', // 发射功率
  receiveFrequencyBand: '', // 接收频段
  receiverSensitivity: '', // 接收灵敏度
  belongSystem: '', // 所属系统
  spectralCharacteristics: '', // 频谱特征
  productCountry: '', // 生产国家
  manufacturer: '', // 厂商
  manufactureNo: '', // 出厂编号
  produceDate: '', // 生产日期
  traceCompany: '', // 溯源单位
  traceDate: '', // 溯源日期
  measureValidDate: '', // 检定有效期
  meterIdentifyName: '', // 计量标识
  meterIdentify: '', // 计量标识code
  createDept: '', // 所属部门
  createDeptId: '', // 所属部门id
  createUserId: '', // 负责人id
  createUserName: '', // 负责人
  location: '', // 地点
})
// 校验规则
const formRules = ref({
  equipmentName: [{ required: true, message: '智能模型名称不能为空', trigger: ['blur', 'change'] }],
  labCode: [{ required: true, message: '实验室代码不能为空', trigger: ['blur', 'change'] }],
  // groupCode: [{ required: true, message: '组别代码不能为空', trigger: ['blur', 'change'] }],
})
// -------------------------------------------字典------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const labCodeList = ref<dictType[]>([]) // 实验室代码
// const groupCodeList = ref<dictType[]>([]) // 组别代码
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const useDeptList = ref<deptType[]>([]) // 所属部门列表
const deptList = ref<deptType[]>([]) // 所属部门列表
// 获取字典值
async function getDict() {
  // 计量标识
  getDictByCode('bizMeterIdentify').then((response) => {
    meterIdentifyDict.value = response.data
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 获取部门列表
  getDeptTreeList().then((res) => {
    deptList.value = res.data
    // 转成树结构
    useDeptList.value = toTreeList(res.data, '0', true)
  })
  // 获取用户列表
  // getStaffList({ offset: 1, limit: 999999 }).then((res: any) => {
  //   userList.value = res.data.rows
  // })
  // 实验室代码
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 组别代码
  // getDictByCode('bizGroupCode').then((response) => {
  //   groupCodeList.value = response.data
  // })
}
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// -------------------------------------------按钮----------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 点击编辑按钮
const edit = () => {
  pageType.value = 'edit'
}

// 保存
const save = () => {
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const params = {
        ...form.value,
        createDept: deptList.value.find(item => item.id === form.value.createDeptId)?.name,
        createUserName: userList.value.find(item => item.id === form.value.createUserId)?.name,
        id: infoId.value,
      }
      // 新建
      if (pageType.value === 'add') { // 新建
        addMonitorRadioList(params).then((res) => {
          ElMessage.success('保存成功')
          form.value.equipmentNo = res.data.equipmentNo // 统一编号
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateMonitorRadioList(params).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// -------------------------------------------获取详情信息--------------------------------------------------
// 获取详情信息
const fetchInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getInfo({ id: infoId.value }).then((res) => {
    form.value = res.data
    loading.close()
  })
}

onMounted(async () => {
  getDict().then(() => {
    if (pageType.value !== 'add') {
      fetchInfo()
    }
  })
})
</script>

<template>
  <app-container>
    <detail-page :title="`无线电库-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <el-button v-if="pageType === 'detail'" type="primary" @click="edit">
          编辑
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="实验室代码" prop="labCode">
              <el-select v-model="form.labCode" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室代码'" :disabled="pageType === 'detail'" class="full-width-input">
                <el-option v-for="item in labCodeList" :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="groupCode">
              <el-select v-model="form.groupCode" :placeholder="pageType === 'detail' ? ' ' : '请选择组别代码'" :disabled="pageType === 'detail'" class="full-width-input">
                <el-option v-for="item in groupCodeList" :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="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="pageType === 'detail' ? '' : '请输入智能模型名称'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格型号" prop="model">
              <el-input
                v-model.trim="form.model"
                :placeholder="pageType === 'detail' ? '' : '请输入规格型号'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检定周期(月)" prop="checkCycle">
              <el-input-number
                v-model="form.checkCycle"
                :placeholder="pageType === 'detail' ? '' : '请输入检定周期'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发射频段" prop="transmitFrequencyBand">
              <el-input
                v-model.trim="form.transmitFrequencyBand"
                :placeholder="pageType === 'detail' ? '' : '请输入发射频段'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发射功率" prop="transmitPower">
              <el-input
                v-model.trim="form.transmitPower"
                :placeholder="pageType === 'detail' ? '' : '请输入发射功率'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收频段" prop="receiveFrequencyBand">
              <el-input
                v-model.trim="form.receiveFrequencyBand"
                :placeholder="pageType === 'detail' ? '' : '请输入接收频段'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收灵敏度" prop="receiverSensitivity">
              <el-input
                v-model.trim="form.receiverSensitivity"
                :placeholder="pageType === 'detail' ? '' : '请输入接收灵敏度'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属系统" prop="belongSystem">
              <el-input
                v-model.trim="form.belongSystem"
                :placeholder="pageType === 'detail' ? '' : '请输入所属系统'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="频谱特征" prop="spectralCharacteristics">
              <el-input
                v-model.trim="form.spectralCharacteristics"
                type="textarea"
                autosize
                :placeholder="pageType === 'detail' ? '' : '请输入频谱特征'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地点" prop="location">
              <el-input
                v-model.trim="form.location"
                type="textarea"
                autosize
                :placeholder="pageType === 'detail' ? '' : '请输入地点'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产国家:" prop="productCountry">
              <el-select
                v-model="form.productCountry"
                filterable
                :placeholder="pageType === 'detail' ? ' ' : '请选择生产国家'"
                :disabled="pageType === 'detail'"
                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="pageType === 'detail' ? '' : '请输入厂商'"
                :class="{ 'detail-input': pageType === 'detail' }"
                :disabled="pageType === 'detail'"
                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="pageType === 'detail' ? '' : '请输入出厂编号'"
                :class="{ 'detail-input': pageType === 'detail' }"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </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="pageType === 'detail' ? ' ' : '请选择生产日期'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="溯源单位:" prop="traceCompany" style="flex: 1;">
              <el-input
                v-model="form.traceCompany"
                :disabled="pageType === 'detail'"
                :placeholder="pageType === 'detail' ? ' ' : '请输入溯源单位'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="溯源日期:" prop="traceDate" style="flex: 1;">
              <el-date-picker
                v-model="form.traceDate"
                type="date"
                :placeholder="pageType === 'detail' ? ' ' : '请选择日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检定有效期:" prop="measureValidDate" style="flex: 1;">
              <el-date-picker
                v-model="form.measureValidDate"
                type="date"
                :placeholder="pageType === 'detail' ? ' ' : '请选择日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量标识:" prop="meterIdentify" style="flex: 1;">
              <el-select
                v-model="form.meterIdentify"
                :placeholder="pageType === 'detail' ? ' ' : '请选择计量标识'"
                :disabled="pageType === 'detail'"
                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-col>
          <el-col :span="6">
            <el-form-item label="所属部门" prop="createDeptId">
              <dept-select v-model="form.createDeptId" :data="useDeptList" :disabled="pageType === 'detail'" :placeholder="pageType === 'detail' ? ' ' : '所属部门'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="createUserId">
              <el-select
                v-model.trim="form.createUserId"
                placeholder="请选择负责人"
                filterable
                :disabled="pageType === 'detail'"
                class="full-width-input"
              >
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
.step {
  line-height: 28px;
  font-size: 20px;
  color: #3d7eff;
  font-weight: bold;
  margin-bottom: 5px;
  width: fit-content;
}
</style>

<style lang="scss">
.fieldtest-record-detail {
  .el-table thead.is-group th.el-table__cell {
    background: #f2f6ff;
  }
}
</style>