<template>
  <el-dialog class="dialog"
             :visible.sync="dialogVisible"
             center
             title="详情"
             append-to-body
             @close="onClose"
             width="800px">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="检查项目名称">{{ dataForm.checkItem.itemName }}</el-descriptions-item>
      <el-descriptions-item label="计量单位">{{ dataForm.extra.unit }}</el-descriptions-item>
      <el-descriptions-item label="小数点后位数">{{ dataForm.extra.decimalPlaces }}</el-descriptions-item>
      <el-descriptions-item label="默认输入值">{{ dataForm.checkItem.defaultValue }}</el-descriptions-item>
      <el-descriptions-item label="是否为必填项">{{ whetherList.find(item => item.id === dataForm.checkItem.isRequired).label }}</el-descriptions-item>
      <el-descriptions-item label="是否计算评分">{{ whetherList.find(item => item.id === dataForm.checkItem.isScore).label }}</el-descriptions-item>
      <el-descriptions-item label="合格评分数">{{ dataForm.extra.qualifiedScore }}</el-descriptions-item>
      <el-descriptions-item label="不合格评分数">{{ dataForm.extra.noQualifiedScore }}</el-descriptions-item>
      <el-descriptions-item label="有效值上限">
        <span class="w100 flex-inline">{{ dataForm.extra.validMaxValue }}</span>
        <el-checkbox v-model="dataForm.extra.checkValidMaxValue" label="强制校验，输入值不能大于有效值上限。" class="ml20" disabled></el-checkbox>
      </el-descriptions-item>
      <el-descriptions-item label="有效值下限">
        <span class="w100 flex-inline">{{ dataForm.extra.validMaxValue }}</span>
        <el-checkbox v-model="dataForm.extra.checkValidMinValue" label="强制校验，输入值不能小于有效值下限。" class="ml20"  disabled></el-checkbox>
      </el-descriptions-item>
      <el-descriptions-item label="合格值上限">
        <span class="w100 flex-inline">{{ dataForm.extra.validMaxValue }}</span>
        <el-checkbox v-model="dataForm.extra.checkQualifiedMaxValue" label="合格判断，输入值大于合格值上限时为不合格。" class="ml20" disabled></el-checkbox>
      </el-descriptions-item>
      <el-descriptions-item label="合格值下限">
        <span class="w100 flex-inline">{{ dataForm.extra.validMaxValue }}</span>
        <el-checkbox v-model="dataForm.extra.checkQualifiedMinValue" label="合格判断，输入值小于合格值下限时为不合格。" class="ml20" disabled></el-checkbox>
      </el-descriptions-item>
      <el-descriptions-item label="所属分类目录">{{ dataForm.checkItem.patrolTypeName }}</el-descriptions-item>
      <el-descriptions-item label="检查项目说明">{{ dataForm.checkItem.remark }}</el-descriptions-item>
    </el-descriptions>

    <div slot="footer">
      <el-button @click="onCancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: "dialogNumberDetail",
  props: {
    visible: {
      type: Boolean
    },
    data: {
      type: undefined
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {},
  data() {
    return {
      dataForm: {
        checkItem: {
          itemName: undefined, // 检查项名称
          itemType: 2, // 检查项类别 1选择、2数字、3文本、4拍照
          isRequired: true, // 是否必填
          defaultValue: undefined, // 默认值
          isScore: true, // 是否参与评分
          patrolTypeId: undefined, // 巡检类别id
          patrolTypeName: undefined, // 巡检类别名称
          remark: undefined, // 备注说明
        },
        extra: { // 数字项类型检查项额外信息
          unit: undefined, // 单位
          decimalPlaces: undefined, // 小数点后位数
          qualifiedScore: undefined, // 合格评分
          noQualifiedScore: undefined, // 不合格评分
          validMaxValue: undefined, // 有效值上限
          validMinValue: undefined, // 有效值下限
          qualifiedMaxValue: undefined, // 合格值上限
          qualifiedMinValue: undefined, // 合格值下限
          checkValidMaxValue: false, // 是否强制校验有效值上限 输入值不能大于有效值上限
          checkValidMinValue: false, // 是否强制校验有效值下限 输入值不能大于有效值下限
          checkQualifiedMaxValue: false, // 是否强制校验合格值上限 输入值大于合格值上限时为不合格
          checkQualifiedMinValue: false, // 是否强制校验合格值下限 输入值小于合格值下限时为不合格
        }
      },

      classifyList: [], // 巡检类别列表
      whetherList: [{id: true, label: "是"}, {id: false, label: "否"}]
    }
  },

  mounted() {
    this.initData();
    if (this.data) {
      this.getDetail(this.data.id);
    }
  },

  methods: {
    // 初始化数据
    initData() {
      this.$axios.get("/v1/check/item/type/list", {params: {size: 100}}, false).then(data => {
        this.classifyList = data.list;
      });
    },

    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 确认
    // onConfirm() {
    //   this.$axios.post("/check/check/item/updateNumCheckItem", this.dataForm).then(() => {
    //     this.$message.success("更新成功！");
    //     this.$emit("update");
    //     this.onCancel();
    //   });
    // },

    // 获取详情
    getDetail(checkItemId) {
      this.$axios.get(`/v1/check/item/query/num/${checkItemId}`).then(data => {
        this.dataForm = data;
      });
    },

    // 关闭
    onClose() {
      this.$emit("close");
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-descriptions-item__label {
  width: 20%;
}
</style>
