<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.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.photoPoints" 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="name" label="名称" align="center" min-width="160px"></el-table-column>
        <el-table-column prop="isRequired" label="必须拍照" align="center" width="106px">
           <template v-slot="scope">
            <div>{{ whetherList.find(item => item.id === scope.row.isRequired).label }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedJudge" label="合格判断" align="center" width="160px">
           <template v-slot="scope">
            <div>{{ qualifiedList.find(item => item.id === scope.row.qualifiedJudge).label }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedScore" label="合格评分" align="center" width="80px"></el-table-column>
        <el-table-column prop="noQualifiedScore" label="不合格评分" align="center" width="96px"></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: "dialogPhotoDetail",
  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: 4, // 检查项类别 1选择、2数字、3文本、4拍照
          isRequired: true, // 是否必填
          defaultValue: undefined, // 默认值
          isScore: true, // 是否参与评分
          patrolTypeId: undefined, // 巡检类别id
          patrolTypeName: undefined, // 巡检类别名称
          remark: undefined, // 备注说明
        },
        photoPoints: [] // 选项
      },

      classifyList: [], // 巡检类别列表
      whetherList: [{id: true, label: "是"}, {id: false, label: "否"}],
      qualifiedList: [{id: true, label: "拍照合格"}, {id: false, label: "拍照不合格"}],

      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/photo/${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>
