<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 style="color:#F56C6C;font-weight:bold; padding:0 0 10px;">
        {{tableData.length?tableData[0].status:''}}
      </div>
      <div class="content">
        <div class="item-box">
          <el-table :data="tableData" border>
            <el-table-column label="质检字段" prop="columnChnName" align="center">
            </el-table-column>
            <el-table-column label="值" prop="value" align="center">
            </el-table-column>
          </el-table>
          <div style="margin:10px 0 0;">
            <el-button
              type="text"
              size="mini"
              @click="onPrev">
              上一条
            </el-button>
            <span style="margin:0 5px;"
              >当前批第{{ curIndex + 1 }}/{{batchRow.recordNums}}条
            </span>
            <el-button
              type="text"
              size="mini"
              @click="onNext">
              下一条
            </el-button>
          </div>
          <div style="background:#F2F6FC;padding:10px 15px;margin-top:10px;">
            <el-form
              ref="form"
              :model="form"
              label-position="top"
              label-suffix=":"
              size="mini"
            >
              <el-form-item label="错误类型" prop="errorList">
                <el-checkbox-group v-model="form.errorList">
                  <el-checkbox label="keyFieldInputError">关键项错误</el-checkbox>
                  <el-checkbox label="unkeyFieldInputError"
                    >其他项错误</el-checkbox
                  >
                  <el-checkbox label="uncompleteInputError">著录不全</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="条目及元数据错误备注" prop="inputErrorNote">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="form.inputErrorNote"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button :loading="btnloading" type="primary" size="mini" @click="submit('form')">
                  保存
                </el-button>
                <el-button size="mini" @click="reset('form')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="item-box">
          <el-table :data="originList" border>
            <el-table-column label="序号" prop="sort" width="60" align="center">
            </el-table-column>
            <el-table-column label="原文" prop="fileName" align="center">
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="view(scope.$index)"
                  style="color: #409eff; font-weight:700"
                  >查看原文
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <origin-drawer ref="origin" v-if="originList.length" :originList="originList" :visible="originVisible" @close="close" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { message } from "@/utils/common";
import originDrawer from "./origin";
import { getBatchStatusRecord, updateBatchStatus, saveErrorInfo, getErrorInfo, getOriginInfo } from "@/api/dataManagement/qualityCheck";
export default {
  data() {
    return {
      btnloading: false,
      form: {
        errorList: [],
        inputErrorNote: '',
      },
      curIndex: 0,
      tableData: [], // 质检表格数据
      recId: '', // 档案id
      originList: [],
      originVisible: false, // 原文弹窗
    };
  },
  computed: {
    ...mapState({
      batchRow: state => state.qualityCheck.batchRow,
    }),
  },
  components: {
    originDrawer
  },
  methods: {
    goBack() {
      const func = () => {
        this.$store.commit("qualityCheck/SET_PAGE_TYPE", 2);
      }
      if(this.tableData.length){
        this.updateStatus(func); 
      }else{
        func();
      }
    },
    // 质检字段表格
    getBatchData(){
      const params = {
        batchInfoId: this.batchRow.id,
        currentSequence: this.curIndex + 1
      }
      getBatchStatusRecord(params).then(res => {
        if (res.code === "100") {
          this.tableData = res.body.resultList[0].currentArchivesInspectItemAndValue;
          if(this.tableData.length){
            this.recId = this.tableData[0].recId;
            this.getErrorInfo();
            this.getOriginInfo();
          }
        }
      });
    },
    // 获取原文信息
    getOriginInfo(){
      const params = {
        recId: this.recId, //该条档案id
        tableNameNew: this.batchRow.tableName
      }
      getOriginInfo(params).then(res => {
        if (res.code === "100") {
          this.originList = res.body.resultList
        }
      });
    },
    // 获取错误信息
    getErrorInfo(){
      const params = {
        batchInfoId: this.batchRow.id,
        recId: this.recId
      }
      getErrorInfo(params).then(res => {
        if (res.code === "100") {
          const result = res.body.archivesIssues;
          const errorList = [];
          if(result.keyFieldInputError === 1){
            errorList.push('keyFieldInputError');
          }
          if(result.unkeyFieldInputError === 1){
            errorList.push('unkeyFieldInputError');
          }
          if(result.uncompleteInputError === 1){
            errorList.push('uncompleteInputError');
          }
          this.form = {
            errorList,
            inputErrorNote: result.inputErrorNote,
          }
        }
      });
    },
    // 上一条
    onPrev(){
      if (this.curIndex > 0) {
        this.curIndex--;
        this.getBatchData();
      }else{
        message('warning','已经是第一条了', 2000)
      }
    },
    // 下一条
    onNext(){
      const nextFunc = () => {
        if (this.curIndex < this.batchRow.recordNums-1) {
          this.curIndex++;
          this.getBatchData();
        }else{
          message('warning', '没有更多了', 2000)
        }
      }
      this.updateStatus(nextFunc);
    },
    // 更新上一条状态后，再加载下一条或返回
    updateStatus(func){
      const params = {
        batchInfoId: this.batchRow.id,
        qualityInspectionBatchArchivesRelationId: this.tableData[0].qualityInspectionBatchArchivesRelationId,
        recId: this.recId
      }
      updateBatchStatus(params).then(res => {
        if (res.code === "100") {
          func();
        }
      });
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          /* if(!this.form.inputErrorNote.trim() && !this.form.errorList.length){
            message('warning', '请输入错误内容', 2000);
            return false;
          } */
          const reqParams = {
            params: { 
              batchInfoId: this.batchRow.id, 
              recId: this.recId,
            },
            data: {
              inputErrorNote: this.form.inputErrorNote,
              keyFieldInputError: this.form.errorList.includes('keyFieldInputError') ? 1 : 0,
              unkeyFieldInputError: this.form.errorList.includes('unkeyFieldInputError') ? 1 : 0,
              uncompleteInputError: this.form.errorList.includes('uncompleteInputError') ? 1 : 0,
            }
          }
          this.btnloading = true;
          saveErrorInfo(reqParams).then(res => {
            this.btnloading = false;
            if (res.code === "100") {
              message('success','保存成功',2000)
            }
          }).catch(err=>{
            this.btnloading = false;
          })
        } else {
          return false;
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    view(index){
      this.originVisible = true;
      this.$refs.origin.rowIndex = index;
      this.$refs.origin.recId = this.recId;
    },
    close(){
      this.originVisible = false;
    }
  },
  created(){
    this.getBatchData();
  }
};
</script>

<style lang="scss" scoped>
.page {
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .content {
    display: flex;
    .item-box {
      flex: 1;
      margin: 0 5px;
    }
  }
}
</style>
