<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="是否允许多选">{{ whetherList.find(item => item.id === dataForm.allowMultiple).label }}</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.checkItem.patrolTypeName }}</el-descriptions-item>
      <el-descriptions-item label="检查项目说明">{{ dataForm.checkItem.remark }}</el-descriptions-item>
    </el-descriptions>
    <el-table :data="dataForm.options" border stripe highlight-current-row ref="table" class="mt10" @row-click="onRowClick">
      <el-table-column label="选择项目" align="center">
        <el-table-column type="index" :index="indexCompute" label="序号" align="center" fixed="left" width="60px"/>
        <el-table-column prop="optionName" label="选项名称" align="center" min-width="160px"></el-table-column>
        <el-table-column prop="qualifiedIfSelect" label="选中是否合格" align="center" width="106px">
           <template v-slot="scope">
            <div>{{ qualifiedList.find(item => item.id === scope.row.qualifiedIfSelect).label }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedIfNoSelect" label="未选中是否合格" align="center" width="120px">
           <template v-slot="scope">
            <div>{{ qualifiedList.find(item => item.id === scope.row.qualifiedIfNoSelect).label }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="isScore" label="选中评分" align="center" width="80px"></el-table-column>
        <el-table-column prop="defaultSelect" label="是否默认选中" align="center" width="106px">
           <template v-slot="scope">
            <div>{{ whetherList.find(item => item.id=== scope.row.defaultSelect).label }}</div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

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

<script>

export default {
  name: "dialogChooseDetail",
  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: 1, // 检查项类别 1选择、2数字、3文本、4拍照
          isRequired: true, // 是否必填
          defaultValue: undefined, // 默认值
          isScore: true, // 是否参与评分
          patrolTypeId: undefined, // 巡检类别id
          patrolTypeName: undefined, // 巡检类别名称
          remark: undefined, // 备注说明
        },
        allowMultiple: true, // 是否允许多选
        options: [] // 选项
      },

      classifyList: [], // 巡检类别列表
      whetherList: [{id: true, label: "是"}, {id: false, label: "否"}],
      qualifiedList: [{id: true, label: "合格"}, {id: false, label: "不合格"}],
      allowList: [{id: true, label: "允许"}, {id: false, label: "不允许"}],
      defaultOption: { // 默认选项
        optionName: undefined, // 选项名称
        qualifiedIfSelect: false, // 选中是否合格
        qualifiedIfNoSelect: false, // 未选中是否合格
        defaultSelect: false, // 是否默认选中
        isScore: undefined, // 选中评分
        seq: undefined, // 排序
      },

      selectItem: undefined, // 选中的单条记录
    }
  },

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

  methods: {
    // 表格索引
    indexCompute(index) {
      return index + 1;
    },

    // 初始化数据
    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/select/${checkItemId}`).then(data => {
        this.dataForm = data;
      });
    },

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

    // 行点击
    onRowClick(row, column, event) {
      this.selectItem = row;
      this.$refs["table"].setCurrentRow(row);
    }
  }
}
</script>

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