<template>
  <div class="page">
    <el-card>
      <div slot="header" class="header">
        <span>问题记录</span>
        <el-button type="primary" @click="goBack" icon="el-icon-back" size="mini">返回</el-button>
      </div>
      <div class="content">
        <el-table
          ref="table"
          v-loading="quesLoading"
          :data="quesData"
          border
          max-height="650px"
        >
          <el-table-column label="档号" width="200" prop="dangHaoValues" align="center">
          </el-table-column>
          <el-table-column label="关键项错误" width="110" prop="keyFieldInputErrorResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.keyFieldInputErrorResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="其他项错误"
            width="110"
            prop="unKeyFieldInputErrorResult"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.unKeyFieldInputErrorResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="著录不全" width="90" prop="unCompleteInputErrorResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.unCompleteInputErrorResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            show-overflow-tooltip
            label="条目及元数据错误备注"
            prop="inputErrorNoteResult"
            align="center"
          >
          </el-table-column>
          <el-table-column label="分件错误" width="90" prop="breakMistakeResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.breakMistakeResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="不清晰、偏斜" width="130" prop="imgNotClearResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.imgNotClearResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="漏扫" width="70" prop="scanMissResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.scanMissResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="顺序颠倒" width="90" prop="scanOrderErrorResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.scanOrderErrorResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="命名错误" width="90" prop="imgNameErrorResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.imgNameErrorResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="挂接错误" width="90" prop="dataLinkErrorResult" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini" v-if="scope.row.dataLinkErrorResult===1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="图像数据问题备注"
            prop="imageErrorNoteResult"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="数据挂接问题备注"
            prop="dataLinkErrorNoteResult"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      entity: state => state.qualityCheck.entity,
      quesData: state => state.qualityCheck.quesData,
      batchRow: state => state.qualityCheck.batchRow
    }),
    quesLoading: {
      get() {
        return this.$store.state.qualityCheck.quesLoading;
      },
      set(val) {
        this.$store.state.qualityCheck.quesLoading = val;
      }
    }
  },
  methods: {
    goBack() {
      this.$store.commit("qualityCheck/SET_PAGE_TYPE", 2);
    },
    getData() {
      const eleTable = this.entity.tableData || [];
      let flags = '';
      if(eleTable.length){
        // N:简化卷内,A:案卷
        flags = eleTable[0].archive_no ? 'N' : 'A'
      }
      this.quesLoading = true;
      const params = {
        flags,
        batchInfoId: this.batchRow.id
      };
      this.$store.dispatch("qualityCheck/getQuesData", params).catch(err => {
        this.quesLoading = false;
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.page {
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
