<template>
  <div class="eibs-tab">
    <!-- =================左边====================== -->
    <c-col :span="11">
      <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="11" :offset="1">
      <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-table
        :border="true"
        :paginationShow="false"
        :list="model.bdtp.docgrdm.docgrd"
        style="width:80%,text-align:center"
      >
        <el-table-column prop="cmail1" label="1st" width="auto">
        </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 label="操作" prop="det" width="80px" fixed="right">
          <template slot="header">
            <span>操作</span>
            <el-button
              circle
              style="padding: 4px; margin-left: 9px"
              class="el-icon-plus"
              size="mini"
              @click="addDialogVisible = true"
            >
            </el-button>
            <!-- 
                            style="padding:4px"
                            circle
                            class="el-icon-minus"
                            size="mini"
                            @click="removeRow(scope)"
                        >
                        </el-button> -->
          </template>
          <template slot-scope="scope">
            <c-button
              style="margin-left: 0"
              size="small"
              @click="removeRow(scope.$index)"
            >
              删除
            </c-button>
          </template>
        </el-table-column>
      </c-table>
    </c-col>
    <c-col>
      <el-dialog :visible.sync="addDialogVisible" center width="500px">
        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="1st" label-width="100px">
              <c-input v-model="dialog.cmail1"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="2st" label-width="100px">
              <c-input v-model="dialog.cmail2"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="Document" label-width="100px">
              <!-- <c-select v-model="dialog.docnam" style="width:100%"></c-select> -->
              <c-inputselect :liData="liData" v-model="dialog.docnam">
              </c-inputselect>
            </el-form-item>
          </c-col>
        </c-col>
        <!-- <c-col :span="24"> -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addRow">确定</el-button>
          <el-button @click="addDialogVisible = false">取消</el-button>
        </span>
        <!-- </c-col> -->
      </el-dialog>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditdck/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [CommonProcess],
  data() {
    return {
      addDialogVisible: false,
      dialog: {
        cmail1: "",
        cmail2: "",
        docnam: "",
      },
      liData:["增值税发票","发票","装箱单","空运单","海运提单","铁路运单","货物收据","邮政收据","出库单","保险单","质检证","受益人证明"],
    };
  },
  methods: {
    ...Event,
    addRow(){
            this.addDialogVisible=false;
            let newRow = {...this.dialog};
            this.model.bdtp.docgrdm.docgrd.push(newRow);
        },
    removeRow(idx){
        this.model.bdtp.docgrdm.docgrd.pop(idx);

    }
  },
  created: function () {},
};
</script>
<style scoped>
.el-checkbox >>> .el-checkbox__label {
  width: 70px;
}
</style>