<template>
  <el-drawer :withHeader="false" size="65%" :visible.sync="visible" :before-close="close">
    <div class="page">
      <div class="top-info">
        <div class="title">查看原文</div>
        <span class="number">{{rowIndex+1}}</span>
        <span>{{ originList[rowIndex].fileName }}</span>
        <div class="btn">
          <el-button type="primary" size="mini" @click="onPrev" :disabled="rowIndex===0">上一张</el-button>
          <el-button type="primary" size="mini" @click="onNext" :disabled="rowIndex===originList.length-1">下一张</el-button>
          <el-button type="danger" icon="el-icon-close" size="mini" @click="close">关闭</el-button>
        </div>
      </div>
      <div class="content">
        <!--v-if="imgType === 'pdf'"-->
        <iframe noresize align=center width="100%" height="100%" :src="picUrl"
                  frameborder="0" scrolling="no"></iframe>
        <!-- <el-image v-else :src="picUrl" style="height:100%" fit="cover"></el-image> -->
      </div>
      <div>
        <el-form ref="form" :model="form" label-suffix=":" size="mini" label-width="150px">
          <el-form-item label="错误类型" prop="errorList">
            <el-checkbox-group v-model="form.errorList">
              <el-checkbox label="breakMistake">分件错误</el-checkbox>
              <el-checkbox label="imgNotClear">不清晰、偏斜</el-checkbox>
              <el-checkbox label="scanMiss">漏扫</el-checkbox>
              <el-checkbox label="scanOrderError">顺序颠倒</el-checkbox>
              <el-checkbox label="imgNameError">命名错误</el-checkbox>
              <el-checkbox label="dataLinkError">挂接错误</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="图像数据问题备注" prop="imageErrorNote">
            <el-input type="textarea" rows="2" v-model="form.imageErrorNote" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="数据挂接问题备注" prop="dataLinkErrorNote">
            <el-input type="textarea" rows="2" v-model="form.dataLinkErrorNote" 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>
  </el-drawer>
</template>

<script>
import { mapState } from "vuex";
import { message } from "@/utils/common";
import localStronge from "@/api/localData";
import { URL_PREFIX } from "@/utils/url-prefix";
import { saveOriginError, getOriginErrorInfo } from "@/api/dataManagement/qualityCheck";
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
    originList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      btnloading: false,
      checkArr: ['breakMistake','imgNotClear','scanMiss','scanOrderError','imgNameError','dataLinkError'],
      rowIndex: 0,
      //imgType: '',
      recId: '', // 该原文所属的档案id
      form: {
        errorList: [],
        imageErrorNote: '',
        dataLinkErrorNote: ''
      }
    };
  },
  computed: {
    ...mapState({
      batchRow: state => state.qualityCheck.batchRow,
    }),
    picUrl(){
      const row = this.originList[this.rowIndex];
      //this.imgType = row.fileType;
      let name = row.fileServerName.replace('.jpg','.pdf')
      return URL_PREFIX + "/point-strategy/v/archiveFile/showImg?fileName=" +
      name + "&path="+row.filePath+'&userId='+sessionStorage.getItem("userid")
    }
  },
  watch:{
    visible: {
      handler(val, oldVal){
        if(val){
          this.getOriginErrorInfo()
        }
      }
    }
  },
  methods: {
    onPrev(){
      this.rowIndex--;
      this.getOriginErrorInfo();
    },
    onNext(){
      this.rowIndex++;
      this.getOriginErrorInfo();
    },
    close() {
      this.reset('form');
      this.$emit("close");
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    getCheckParam(){
      let param = {}
      this.checkArr.forEach(item=>{
        param[item] = this.form.errorList.includes(item) ? 1 : 0;
      })
      return param;
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          /* if(!this.form.imageErrorNote.trim() && !this.form.dataLinkErrorNote.trim() && !this.form.errorList.length){
            message('warning', '请输入错误内容', 2000);
            return false;
          } */
          let qualityInspectionFileIssue  = {
              imageErrorNote: this.form.imageErrorNote,
              dataLinkErrorNote: this.form.dataLinkErrorNote,
              ...this.getCheckParam()
          }
          const reqParams = {
            params: { 
              batchInfoId: this.batchRow.id, 
              recId: this.recId,
              fileId: this.originList[this.rowIndex].filePrimaryKey
            },
            data: qualityInspectionFileIssue
          }
          this.btnloading = true;
          saveOriginError(reqParams).then(res => {
            this.btnloading = false;
            if (res.code === "100") {
              message('success','保存成功',2000)
            }
          }).catch(err=>{
            this.btnloading = false;
          })
        } else {
          return false;
        }
      });
    },
    getOriginErrorInfo(){
      const params = {
        batchInfoId: this.batchRow.id,
        recId: this.recId,
        fileId: this.originList[this.rowIndex].filePrimaryKey
      }
      getOriginErrorInfo(params).then(res => {
        if (res.code === "100") {
          const data = res.body.fileIssuesResult;
          this.form = {
            errorList: this.checkArr.filter(item=> data[item] === 1),
            imageErrorNote: data.imageErrorNote,
            dataLinkErrorNote: data.dataLinkErrorNote,
          }
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding: 0 20px;
  .top-info {
    position: relative;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin: 10px 0;
    .title{
      position:absolute;
      top: 0;
      left: 0;
    }
    .number{
      background: #409EFF;
      color: #fff;
      border-radius: 3px;
      display: inline-block;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      margin-right: 5px;
      padding: 0 4px;
    }
    .btn {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .content{
    height: calc(100vh - 280px);
    text-align: center;
  }
}
</style>
