<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.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="是否允许多行">{{ allowList.find(item => item.id === dataForm.extra.allowMultiple).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="合格判断方法">{{ qualifiedJudgeList.find(item => Number(item.id) === Number(dataForm.extra.qualifiedJudge)).label }}</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: "dialogTextDetail",
  components: {},
  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: 3, // 检查项类别 1选择、2数字、3文本、4拍照
          isRequired: true, // 是否必填
          defaultValue: undefined, // 默认值
          isScore: true, // 是否参与评分
          patrolTypeId: undefined, // 巡检类别id
          patrolTypeName: undefined, // 巡检类别名称
          remark: undefined, // 备注说明
        },
        extra: { // 数字项类型检查项额外信息
          allowMultiple: false, // 是否允许多行
          qualifiedScore: undefined, // 合格评分
          noQualifiedScore: undefined, // 不合格评分
          qualifiedJudge: 1, // 合格判定 1始终合格、2始终不合格、3无内容合格、4有内容合格
        }
      },

      classifyList: [], // 巡检类别列表
      whetherList: [{id: true, label: "是"}, {id: false, label: "否"}],
      allowList: [{id: true, label: "允许"}, {id: false, label: "不允许"}],
      qualifiedJudgeList: [{id: 1, label: "始终合格"}, {id: 2, label: "始终不合格"}, {id: 3, label: "无内容合格"}, {id: 4, 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;
    },

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

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

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