<!-- 选择设备的哪个检定项去配置检定数据  -->
<script lang="ts" setup name="SelectItemDialog">
import { ElMessage } from 'element-plus'
const emits = defineEmits(['confirm'])
const dialogFormVisible = ref(false)

// --------------------------------------------------------------------------------------------
const selectList = ref()
const formData = reactive({
  item: '', // 检定项分类
  code: '0.02级活塞式压力计标准库',
})
// 表单对象
const dataFormRef = ref()
// 校验规则
const rules = reactive({
  item: [{ required: true, message: '检定项分类必选', trigger: ['blur', 'change'] }],
})
// 点击确定
const confirmSelect = () => {
  if (dataFormRef.value) {
    dataFormRef.value?.validate((valid: boolean) => {
      if (valid) {
        emits('confirm', formData.item)
        dialogFormVisible.value = false
      }
    })
  }
}
// 取消
const resetForm = () => {
  dialogFormVisible.value = false
}
// 初始化
const initDialog = async (list: any) => {
  dialogFormVisible.value = true
  selectList.value = list
  formData.item = ''
  console.log(list)
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="选择设备检定项" width="450px">
    <!-- 查询结果Table显示 -->
    <el-form
      ref="dataFormRef"
      label-width="120px"
      :model="formData"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="检校标准库">
            <el-input
              v-model="formData.code"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="item" label="检定项分类">
            <el-select
              v-model="formData.item"
              placeholder="检定项分类"
              filterable
              class="full-width-input"
              clearable
              style="width: 100%;"
            >
              <el-option v-for="item in selectList" :key="item.id" :label="item.itemCategoryName" :value="item.itemCategoryName" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmSelect">确认</el-button>
        <el-button @click="resetForm">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>