<!-- 核查项分类管理详情 -->
<script lang="ts" setup name="checkItemClassificationList">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from './checkItemClassification-interface'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { addCheckItemClassification, updateCheckItemClassification } from '@/api/equipment/standard/checkItemClassification'
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 ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
  belongStandardEquipment: '', // 检校标准装置code
  belongStandardEquipmentName: '', // 检校标准装置名称
  categoryName: '', // 核查项分类名称
  categoryNo: '', // 分类编号
  equipmentType: '', // 标准装置分类
  equipmentTypeName: '', // 标准装置分类名称
})
// 校验规则
const formRules = ref({
  belongStandardEquipment: [{ required: true, message: '检校标准装置不能为空', trigger: ['blur', 'change'] }],
  categoryName: [{ required: true, message: '核查项分类名称不能为空', trigger: ['blur', 'change'] }],
  equipmentType: [{ required: true, message: '标准装置分类不能为空', trigger: ['blur', 'change'] }],
})

// -------------------------------------------字典------------------------------------------
const deviceTypeList = ref<dictType[]>([])// 设备分类
const standardList = ref<dictType[]>([])// 检校标准装置
function getDict() {
  // 设备分类
  getDictByCode('bizEquipmentCategory').then((response) => {
    deviceTypeList.value = response.data
  })
  // 检校标准装置
  getDictByCode('bizStandardEquipmentType').then((response) => {
    standardList.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 save = () => {
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      if (pageType.value === 'add') { // 新建
        addCheckItemClassification({ ...form.value }).then((res) => {
          ElMessage.success('保存成功')
          form.value.categoryNo = res.data.categoryNo // 检定项分类编号
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateCheckItemClassification({ ...form.value, id: infoId.value }).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}
// 点击编辑
const edit = () => {
  pageType.value = 'edit'
}

// 选择校准装置变化
const changeSelectBelongStandardEquipment = (value: string) => {
  form.value.belongStandardEquipmentName = standardList.value.find(item => item.value === value)!.name!
}

// -------------------------------------钩子-----------------------------------------------------

onMounted(async () => {
  getDict()
  if (pageType.value !== 'add') {
    form.value = $route.query as any
  }
})
</script>

<template>
  <app-container>
    <detail-page :title="`核查项分类管理-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType === 'detail'" type="primary" @click="edit">
          编辑
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="130"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <!-- <el-col :span="6">
            <el-form-item label="核查项分类编号:" prop="categoryNo">
              <el-input v-model="form.categoryNo" class="full-width-input" :disabled="pageType !== 'add'" placeholder="系统自动生成" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="核查项分类名称:" prop="categoryName">
              <el-input v-model="form.categoryName" class="full-width-input" :disabled="pageType !== 'add'" placeholder="请输入检定项分类名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标准装置分类:" prop="equipmentType">
              <el-select
                v-model="form.equipmentType"
                placeholder="请选择标准装置分类"
                class="short-input"
                filterable
                :disabled="pageType === 'detail'"
              >
                <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="归属标准装置:" prop="belongStandardEquipment">
              <el-select
                v-model="form.belongStandardEquipment"
                placeholder="归属标准装置"
                class="short-input"
                filterable
                :disabled="pageType === 'detail'"
                @change="changeSelectBelongStandardEquipment"
              >
                <el-option v-for="item in standardList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
  </app-container>
</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>