<template>
  <div class="eibs-tab">
    <!--=== =================================左边======================================== -->

    <c-col :span="11">
      <!-- Discrepancies -->
      <c-col :span="24">
        <el-form-item label="Discrepancies" prop="brdgrp.blk.docdis">
          <c-fullbox>
            <c-input type="textarea" v-model="model.brdgrp.blk.docdis" maxlength="50" show-word-limit
              placeholder="请输入Discrepancies" rows="5" :disabled="!docdisflg"></c-input>

            <template slot="footer">
              <c-button size="small" type="primary" icon="el-icon-search" @click="onDocdisButtxmsel"
                :disabled="!docdisflg">
                <!-- ... -->
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <!-- Comments and Conclusion -->
      <c-col :span="24">
        <el-form-item label="Comments and Conclusions" prop="brdgrp.blk.comcon">
          <c-input type="textarea" v-model="model.brdgrp.blk.comcon" maxlength="65" show-word-limit
            placeholder="请输入Comments and Conclusions" rows="5"></c-input>
        </el-form-item>
      </c-col>
      <!-- Settlement Instructions BR -->
      <!-- <c-col :span="21"> -->
      <c-col :span="24">
        <el-form-item label="Settlement Instructions BR" prop="brdgrp.blk.setinsbr">
          <c-fullbox>
            <c-input type="textarea" v-model="model.brdgrp.blk.setinsbr" maxlength="65" show-word-limit
              placeholder="请输入Settlement Instructions BR" rows="5"></c-input>
            <template slot="footer">
              <c-button size="small" type="primary" icon="el-icon-search" @click="onSetinstxmButtxmsel">
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Documents Presented">
          <c-table
          height="200px"
          style="text-align: center"
          :list="this.model.brtp.docgrdm.docgrd || []"
          :paginationShow="false"
          :border="true"
        >
            <el-table-column prop="CMAIL1" label="1st" sortable>
              <template slot-scope="scope">
              <c-input v-model="scope.row.cmail1"></c-input>
            </template>
            </el-table-column>
            <el-table-column prop="CMAIL2" label="2nd" sortable>
              <template slot-scope="scope">
              <c-input v-model="scope.row.cmail2"></c-input>
            </template>
            </el-table-column>
            <el-table-column prop="DOCNAM" label="Document" sortable>
              <template slot-scope="scope">
              <!-- {{scope.row.docnam}} -->
              <c-select
                style="width: 100%"
                placeholder="请选择"
                v-model="scope.row.docnam"
              >
                <el-option
                  v-for="item in codeTable"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </c-select>
            </template>
            </el-table-column>
            <el-table-column label="" prop="det" width="80px" fixed="right">
              <template slot-scope="scope" slot="header">
                <el-button circle style="padding:4px" class="el-icon-plus" size="mini" @click="addRow(scope)">
                </el-button>
                <el-button style="padding:4px" circle class="el-icon-minus" size="mini" @click="removeRow(scope)">
                </el-button>
              </template>
            </el-table-column>
          </c-table>
        </el-form-item>
      </c-col>

    </c-col>

    <!--=== ========================================右边======================================== -->
    <c-col :span="11" :offset="1">
      <c-col :span="24">
        <c-checkbox v-model="model.brdgrp.rec.igndisflg">Ignore Discrepancies</c-checkbox>
      </c-col>

      <c-col :span="24">
        <c-checkbox v-model="docdisflg">discrepancies modified</c-checkbox>
        <!-- <c-checkbox v-model="model.brdgrp.blk.docdisflg">discrepancies modified</c-checkbox> -->
      </c-col>

      <c-col :span="24">
        <el-form-item label="Type of Advice Received" prop="brdgrp.rec.advtyp">
          <c-select v-model="model.brdgrp.rec.advtyp" style="width: 100%" placeholder="请选择Type of Advice Received"
            :code="codes.advtyp">
          </c-select>
        </el-form-item>
      </c-col>

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

      <c-col :span="24">
        <el-form-item label="Discrepancy Advice Dated" prop="brdgrp.rec.disdat" label-width="155px">
          <c-date-picker type="date" v-model="model.brdgrp.rec.disdat" style="width: 100%"
            placeholder="请选择Discrepancy Advice Dated" disabled></c-date-picker>
        </el-form-item>
      </c-col>


    </c-col>


    <!-- <c-col :span="12">
      <c-checkbox v-model="model.brdgrp.rec.approvcod">Documents on Approval Basis</c-checkbox>
    </c-col>

    <c-col :span="12">
      <c-checkbox v-model="model.brtp.cre752flg">Create 752</c-checkbox>
    </c-col>

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

    <c-col :span="12">
      <c-checkbox v-model="model.brtp.cre732flg">Create MT 732</c-checkbox>
    </c-col>

    <c-col :span="12">
      <span v-text="model.brtp.docgrdm.docdsclab" data-path=".brtp.docgrdm.docdsclab">
      </span>
    </c-col> -->
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Brtudp/Event";
import Utils from "~/utils";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      newValue: {
        id: 0,
        cmail1: "",
        cmail2: "",
        docnam: "",
        serialNum: "",
        tableName: "",
        tcddoc: "",
      },
      codeTable: [
        { label: 'Airway Bills', value: '1' },
        { label: `Beneficiary's Declaration`, value: '2' },
        { label: 'Bill of Lading Copies', value: '3' },
        { label: 'Bill of Lading Originals', value: '4' },
        { label: 'Certificate', value: '5' },
        { label: 'Certificate of Analysis', value: '6' },
        { label: 'Certificate of Origin', value: '7' },
        { label: 'Certificate of Quality', value: '8' },
        { label: 'Certificate of Quantity', value: '9' },
        { label: 'Commercial Invoice', value: '10' },
        { label: 'Courier Receipt', value: '11' },
        { label: 'Draft', value: '12' },
        { label: 'Export Licence ', value: '13' },
        { label: 'Fax Report', value: '14' },
        { label: 'Inspection Cert', value: '15' },
        { label: 'Insurance Policy', value: '16' },
        { label: 'Packing List', value: '17' },
        { label: 'Shipment Advice', value: '18' },
        { label: 'Weight List', value: '19' },
      ],
    };
  },
  methods: { ...Event 
    ,addRow(scope){
       var newTableValue = Object.assign({}, this.newValue);
      const serial=Utils.generateUUID();
      newTableValue.serialNum=serial;
      // this.model.brtp.docgrdm.docgrd.push(newTableValue);
      this.model.brtp.docgrdm.docgrd.splice(scope.index-1,0,newTableValue);
    },
    removeRow(scope){
      this.model.brtp.docgrdm.docgrd.splice(scope.index, 1);
    },
  },
  created: function () { },
  computed: {
    docdisflg: {
      get() {
        return this.model.brdgrp.blk.docdisflg != ""
      },
      set(val) {
        this.model.brdgrp.blk.docdisflg = val ? "X" : ""
      }
    },
  },
};
</script>
<style>
</style>
