<template>
  <div class="eibs-tab">
    <!-- =================左边====================== -->
    <c-col :span="12">
      <el-form-item label="不符点">
        <c-col :span="21">
          <c-input
            type="textarea"
            v-model="model.bddgrp.blk.docdis"
            :disabled="!model.bddgrp.blk.docdisflg"
            maxlength="50"
            show-word-limit
            placeholder="请输入不符点"
          ></c-input>
        </c-col>

        <c-col :span="3" style="text-align: right">
          <!-- <el-form-item label-width="0"> -->
          <c-button
            size="small"
            type="primary"
            icon="el-icon-search"
            style="margin-left: 0"
            @click="onDocdisButtxmsel"
            disabled
          ></c-button>
          <!-- </el-form-item> -->
        </c-col>
      </el-form-item>

      <c-col :span="24">
        <el-form-item label="注释和结论">
          <c-input
            type="textarea"
            v-model="model.bddgrp.blk.comcon"
            maxlength="65"
            show-word-limit
            placeholder="请输入注释和结论"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="到期付款确认备注">
          <c-input
            type="textarea"
            v-model="model.bddgrp.blk.accrmk"
            maxlength="65"
            show-word-limit
            placeholder="请输入到期付款确认备注"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- =================右边====================== -->
    <c-col :span="12">
      <c-col :span="24">
        <el-form-item label="" prop="bddgrp.rec.igndisflg">
          <c-checkbox v-model="model.bddgrp.rec.igndisflg"
            >忽略不符点</c-checkbox
          >
          <c-checkbox v-model="model.bddgrp.blk.docdisflg"
            >录入不符点</c-checkbox
          >
        </el-form-item>
      </c-col>

      <!-- <c-col :span="24">
                <el-form-item label="" prop="bddgrp.blk.docdisflg">
                </el-form-item>
            </c-col> -->

      <c-col :span="24">
        <el-form-item label="收到的通知类型" prop="bddgrp.rec.advtyp">
          <c-select
            v-model="model.bddgrp.rec.advtyp"
            style="width: 100%"
            placeholder="请选择收到的通知类型"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="付款日期" prop="bddgrp.rec.totdat">
          <c-date-picker
            type="date"
            v-model="model.bddgrp.rec.totdat"
            style="width: 100%"
            placeholder="请选择付款日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="不符点通知日期" prop="bddgrp.rec.disdat">
          <c-date-picker
            type="date"
            v-model="model.bddgrp.rec.disdat"
            style="width: 100%"
            placeholder="请选择不符点通知日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="" prop="bddgrp.rec.approvcod">
          <c-checkbox v-model="model.bddgrp.rec.approvcod"
            >议付行担保协议</c-checkbox
          >
          <c-checkbox v-model="model.bdtp.cre732flg">Create MT 732</c-checkbox>
        </el-form-item>
      </c-col>

      <!-- <c-col :span="8">
                <c-checkbox v-model="model.bdtp.cre752flg">Create MT 752</c-checkbox>
            </c-col>

            <c-col :span="16">
                <el-form-item label="Further Identification" prop="bdtp.furide">
                    <c-select v-model="model.bdtp.furide" style="width:100%" placeholder="请选择Further Identification">
                    </c-select>
                </el-form-item>
            </c-col> -->

      <!-- <c-col :span="24">
                 <el-form-item label="" prop="bdtp.cre732flg">
                 </el-form-item>
            </c-col> -->
    </c-col>

    <!-- =================已交单据====================== -->
    <c-col :span="24">
        <c-button  style="margin-bottom:5px;float:right" @click="addDocgrdDataStore" type="primary">新增单据</c-button>
    </c-col>
    <c-col :span="24">
        <!-- :list="model.bdtp.docgrdm.docgrd" -->
      <c-table
        :border="true"
        :paginationShow="false"
        :list="docgrdData"
        :span-method="arraySpanMethod"
        style="width:80%,text-align:center"
      >
        <el-table-column prop="cmail1" label="1st" width="auto">
            <template slot-scope="scope">
                 <div v-if="!scope.row.states">
                     {{scope.row.cmail1}}
                 </div>
                 <div v-else>
                     <c-col :span="20">
                         <div v-for="(item, idx) in scope.row.list" :key="idx" >
                         <c-col :span="6" :offset="2" >
                             <div style="border:1px solid #eaeaea;padding:8px 8px 8px 15px;margin:5px;background:#f5ffff;height:75px">
                                 <div style="height:20px">
                                    <span>{{item.discribe}}</span>
                                    <el-button type="text" class="button" icon="el-icon-delete" @click="DeleteError(scope.$index, idx)" style="float:right"></el-button>
                                 </div>
                                 <br>
                                 <div style="height:20px;float:right;">
                                    <el-radio v-model="item.state" :label="true">接受</el-radio>
                                    <el-radio v-model="item.state" :label="false">忽略</el-radio>
                                 </div>
                             </div>
                         </c-col>
                     </div>
                        <c-col :span="6" :offset="2" >
                            <div class="addCss" style="border:1px dashed;padding:8px;margin:5px;height:75px;display: flex;justify-content: center;align-items: center;">
                            <el-button type="text" class="button" icon="el-icon-plus" @click="InsertErrorDialog(scope.$index)" style="text-align:center"></el-button><br>
                            </div>
                        </c-col>
                     </c-col>
                 </div>
            </template>
        </el-table-column>
        <el-table-column prop="cmail2" label="2st" width="auto">
        </el-table-column>
        <el-table-column prop="docnam" label="Document" width="auto">
        </el-table-column>
        <!-- <el-table-column prop="state" label="状态" width="auto">
        </el-table-column> -->
        <el-table-column label="操作" prop="det" width="170px" fixed="right">
          <!-- <template slot="header">
            <span>操作</span>
            <el-button
              circle
              style="padding: 4px; "
              class="el-icon-plus"
              size="mini"
              @click="addDialogVisible = true"
            >
            </el-button>
          </template> -->
          <template slot-scope="scope">
            <el-popover
                placement="right"
                width="400px"
                trigger="click">
                <el-table :data="gridPDFData">
                    <el-table-column width="300px" property="name" label="name"></el-table-column>
                    <el-table-column label="操作" width="80px">
                      <template slot-scope="scoped">
                          <el-button
                              style="margin-left:0"
                              size="small"
                              type="primary"
                              @click="openPdfDialog(scoped.row.id, scoped.$index)"
                              >选择</el-button
                          >
                      </template>
                    </el-table-column>
                </el-table>
                <div class="file-add" title="导入文件"  @click="importFile">
                  <i class="el-icon-plus"></i>
                </div>
                <c-button slot="reference" @click="addPDF(scope.row.id)"  type="primary">添加</c-button>
                <c-button v-if="scope.row.state != '缺失'" slot="reference" @click="detailPDF(scope.row.id)">详情</c-button>
            </el-popover>
          </template>
        </el-table-column>
      </c-table>
    </c-col>
    <!-- 不符点 -->
    <c-col>
      <el-dialog :visible.sync="InsertErrorDialogVisibal" center width="500px">
        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="不符点" label-width="100px">
              <c-input v-model="newInsertError"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="InsertError()">确定</el-button>
          <el-button @click="InsertErrorDialogVisibal = false;newInsertError= ''">取消</el-button>
        </span>
      </el-dialog>
    </c-col>
    <!-- 新加单据 -->
    <c-col>
      <el-dialog :visible.sync="InsertGridDataDialogVisibal" center width="500px">
        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="单据名称" label-width="100px">
              <c-input v-model="newInsertGridData"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="InsertGridData()">确定</el-button>
          <el-button @click="InsertGridDataDialogVisibal = false;newInsertGridData = ''">取消</el-button>
        </span>
      </el-dialog>
    </c-col>
    <OcrRecognition ref="ocrRecognition" v-on:confirm="selectGridPDF"></OcrRecognition>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditdck/Event";

import OcrRecognition from "./OcrRecognition.vue";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  components: { OcrRecognition },
  data() {
    return {
      addDialogVisible: false,
      InsertErrorDialogVisibal: false,
      InsertGridDataDialogVisibal: false,
      newInsertError:"",
      newInsertErrorIndex: -1,
      newInsertGridData:"",
      dialog: {
        cmail1: "",
        cmail2: "",
        docnam:"",
        state:"",
      },
      liData:["增值税发票","发票","装箱单","空运单","海运提单","铁路运单","货物收据","邮政收据","出库单","保险单","质检证","受益人证明"],
      docgrdDataStore:[
          {
              id:"invoice",
              cmail1:"1",
              cmail2:"",
              docnam:"发票",
              state:"缺失",
          },
          {
              id:"receipt",
              cmail1:"1",
              cmail2:"",
              docnam:"货物收据",
              state:"缺失",
          },
          {
              id:"oceanShipping",
              cmail1:"1",
              cmail2:"",
              docnam:"海运提单",
              state:"缺失",
          },
      ],
      docgrdData:[],
      gridData:[
          {
              id:"invoice",
              data:[
                    {
                        name:"KZ3500220597AA-001.pdf",
                        errorData:[
                            {
                                discribe:"发票金额不符",
                                state:true
                            },
                            {
                                discribe:"发票非原始正本",
                                state:true
                            },
                            {
                                discribe:"未批注交单情况",
                                state:true
                            },
                        ]
                    }
                  ],
          },
          {
              id:"receipt",
              data:[
                    {
                        name:"KZ3500220597AA-002.pdf",
                        errorData:[
                            {
                                discribe:"货物收据金额不符",
                                state:true
                            },
                            {
                                discribe:"货物收据缺失",
                                state:true
                            },
                        ]
                    },
                    // {
                    //     name:"KZ3500220597AA-003.pdf",
                    //     errorData:[
                    //         {
                    //             discribe:"货物数量有误",
                    //             state:true
                    //         },
                    //     ]
                    // },
                  ],
          },
          {
              id:"oceanShipping",
              data:[
                    {
                        name:"KZ3500220597AA-003.pdf",
                        errorData:[
                        ]
                    },
                  ]
          }
      ],
      gridPDFData:[],
      selectPDFData:"",
      selectedPdf: {
        id: '',
        index: null
      }
    };
  },
  methods: {
    ...Event,
    importFile() {
      this.root.setDraggableContent('cms', '影像信息');
    },
    addRow(){
        this.addDialogVisible=false;
        let newRow = {...this.dialog};
        this.model.bdtp.docgrdm.docgrd.push(newRow);
    },
    removeRow(idx){
        this.model.bdtp.docgrdm.docgrd.pop(idx);
    },
    addPDF(idx){
        this.selectPDFData = idx;
    },
    detailPDF(id){
        this.openPdfDialog(id, 0);
    },
    openPdfDialog(id, idx) {
      this.$refs.ocrRecognition.show = true
      var tempId = 0;
      for(let i = 0; i < this.docgrdDataStore.length; i++){
          if(id == this.docgrdDataStore[i].id){
              tempId = i;
              break;
          }
      }
      this.$refs.ocrRecognition.formData.type = this.$refs.ocrRecognition.fileType[tempId].value;
      this.selectedPdf.id = id;
      this.selectedPdf.index = idx;
      this.$nextTick(() => {
        this.$refs.ocrRecognition.fileUrl = require(`~/assets/demo-files/${this.$refs.ocrRecognition.formData.type}.jpg`)
      })
    },
    selectGridPDF(){
        const id = this.selectedPdf.id;
        // const idx = this.selectedPdf.index;
        const idx = 0;  //PDF全部展示，就不存在idx
        var tempData = [];
        var list = [];
        var flag = false;
        for(let i = 0; i < this.gridData.length; i++){
            if(this.gridData[i].id == this.selectPDFData){
                list = [...this.gridData[i].data[idx].errorData]
                break;
            }
        }
        for (let i = 0; i < this.docgrdData.length; i++) {
            if (this.docgrdData[i].id == id && id == this.selectPDFData){
                if(list.length > 0){
                    this.docgrdData[i].state = "内容不符"
                }else{
                    this.docgrdData[i].state = "符合"
                }
            }
            if(flag){
                    let tempListData = this.docgrdData[i];
                    tempListData.list.push(...list);
                    tempData.push(tempListData);
                    flag = false;
            }else{
                tempData.push(this.docgrdData[i]);
                if (this.docgrdData[i].id == id && id == this.selectPDFData && list.length > 0){
                    if(i < this.docgrdData.length - 1 && this.docgrdData[i + 1].hasOwnProperty("list")){
                        flag = true;
                    }else{
                        tempData.push({
                            list,
                            states: true,
                        });
                    } 
                }
            }
        }
        this.docgrdData = tempData;
        sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (this.docgrdData[rowIndex].states) {
            return [1, 5];
        }
    },
    DeleteError(index, idx){
        this.docgrdData[index].list.splice(idx, 1);
        if(this.docgrdData[index].list.length == 0){
            this.docgrdData.splice(index, 1);
            this.docgrdData[index - 1].state = "符合"
        }
        sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    },
    InsertErrorDialog(index){
        this.InsertErrorDialogVisibal = true;
        this.newInsertErrorIndex = index;
    },
    InsertError(){
        var temp = {
                        discribe:this.newInsertError,
                        state:true
                    };
        this.docgrdData[this.newInsertErrorIndex].list.push(temp);
        this.newInsertError = "";
        this.InsertErrorDialogVisibal = false;
        sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    },
    addDocgrdDataStore(){
        this.InsertGridDataDialogVisibal = true;
    },
    InsertGridData(){
        var index = this.docgrdData.length;
        var tempData = this.dialog;
        tempData.cmail1 = this.newInsertGridData;
        tempData.id = "tempId" + index;
        tempData.state = "符合";
        this.docgrdData.push(this.dialog);
        this.InsertGridDataDialogVisibal = false;
        this.newInsertGridData = "";
        sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    }
  },
  created: function () {
      //docgrdData， gridPDFData
      var temp_docgrdData = JSON.parse(sessionStorage.getItem("docgrdData"));
      if(temp_docgrdData != null){
          var temp_gridPDFData = JSON.parse(sessionStorage.getItem("gridPDFData"));
          this.docgrdData = temp_docgrdData;
          this.gridPDFData = temp_gridPDFData;
      }else{
          var IconList = JSON.parse(sessionStorage.getItem("IconList"));
        if(IconList == null){
            IconList = ["invoice","receipt"];
        }
        var list = [];
        for(let i = 0; i < IconList.length; i++){
            for(let j = 0; j < this.docgrdDataStore.length; j++){
                if(IconList[i] == this.docgrdDataStore[j].id){
                        list.push(this.docgrdDataStore[j]);
                        break;
                }
            }
        }
        this.docgrdData = list;
      }
  },
  computed:{
  },
  watch:{
      selectPDFData(){
        if(this.selectPDFData.length > 0){
            const arr = []
            for(let i = 0; i < this.gridData.length; i++){
                // if(this.gridData[i].id == this.selectPDFData){
                    // arr.push({"id" : this.gridData[i].id});
                    for(let j = 0; j < this.gridData[i].data.length; j++){
                        arr.push({"name" : this.gridData[i].data[j].name, "id": this.gridData[i].id });
                    }
                //     break;
                // }
            }
            this.gridPDFData = arr;
            sessionStorage.setItem('gridPDFData', JSON.stringify(this.gridPDFData));
        }   
      }
  }
};
</script>
<style scoped>
.addCss {
    
}
/* 如果要增加竖线上方加上.el-table td */
/* 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式 */
/* 如果td没有颜色，可以去掉，这里加上保险 */
/* .el-table{
  background-color: transparent;
  color:white;
}
.el-table th, .el-table tr{
  border: 0;
  background-color: transparent;
}
.el-table tbody tr:hover>td {
  background-color:transparent!important;
}
.el-table__body tr.hover-row>td {
  background-color: transparent;
} */

/* .el-table tbody tr:hover>td {   
    background-color:#ffffff!important
} */

.file-add {
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #EBEEF5;
}
.file-add:hover {
  color: #5cb6ff;
  border: 1px solid #5cb6ff;
}
</style>