<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <!-- ==================左边================ -->
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24" class="custom-box-wrap">
          <!-- S0000021 : Responsible User -->
          <div style="width: calc(100% - 160px);margin-right: 20px;">
            <el-form-item label="Responsible User" prop="fidgrp.rec.ownusr">
              <c-input v-model="model.fidgrp.rec.ownusr" maxlength="8" disabled></c-input>
            </el-form-item>
          </div>
					<div style="width: 140px;text-align: right;">
            <c-checkbox v-model="model.rstcre.crerpaflg" disabled>{{ $t("factoring.风险出让") }}</c-checkbox>
          </div>
        </c-col>

        <c-col :span="24" class="custom-box-wrap">
          <div style="width: 240px;">
            <el-form-item label="Total Amt" prop="fidgrp.cbs.max.cur">
              <c-select v-model="model.fidgrp.cbs.max.cur" dbCode="curtxt" style="width: 100%; padding-right: 10px" disabled>
              </c-select>
            </el-form-item>
          </div>
          <div style="width: calc(100% - 240px);">
            <el-form-item label-width="5px" prop="fidgrp.cbs.max.amt">
              <c-input-currency v-model="model.fidgrp.cbs.max.amt" :currency="model.fidgrp.cbs.max.cur"
              disabled></c-input-currency>
            </el-form-item>
          </div>
				</c-col>
        <!-- S0000184 : 发票转让日期 -->
        <c-col :span="24">
          <el-form-item :label="$t('factoring.发票转让日期')" prop="fidgrp.rec.invdat">
            <c-date-picker type="date" v-model="model.fidgrp.rec.invdat" style="width: 100%" disabled></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item
            :label="$t('factoring.保理状态')"
            prop="fidgrp.rec.factyp"
            label-width="120px"
          >
            <c-select
              v-model="model.fidgrp.rec.factyp"
              dbCode="ELC024"
              style="width: 100%;"
              disabled
            >
            </c-select>
          </el-form-item>
        </c-col>
      </c-col>

      <!-- ============右边================= -->
      <c-col :span="12" style="padding-left: 20px">
        <!-- S0000033 : Inv. Batch Num -->

        <c-col :span="24">
          <el-form-item label="Invoice Batch Number" prop="fidgrp.rec.invbatnum">
            <c-input v-model="model.fidgrp.rec.invbatnum" maxlength="35" disabled></c-input>
          </el-form-item>
        </c-col>

        <!-- S0000025 : Message Text -->

        <c-col :span="24">
          <el-form-item label="Message Text" prop="fidgrp.blk.mesinf">
            <c-input type="textarea" v-model="model.fidgrp.blk.mesinf" maxlength="35" show-word-limit disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24" v-if="model.fidgrp.rec.factyp === 'JBBL'">
          <c-ptap
            :argadr="{
              title: $t('lc.保兑行'),
              grp: 'fidgrp',
              rol: 'con',
            }"
            :haveAdrLabel="true"
            :isAdrblk="true"
            :model="model"
            bchinr="00000036"
            ptytyp="B"
            disabled
          ></c-ptap>
        </c-col>
      </c-col>
      <c-col :span="24">
        <c-table max-height="300px" style="text-align: center" stripe :list="model.cddList || []" :paginationShow="false"
          :border="true">
          <el-table-column label="Document List">
            <el-table-column label="Document Type" width="auto" prop="doctyp">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.doctyp'"
                  :rules="[{ required: true, message: '必填项', trigger: 'change' }]">
                  <c-select v-model="scope.row.doctyp" dbCode="doctp1" style="width: 100%" disabled>
                  </c-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Document NO" width="auto" prop="ownref">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.ownref'"
                  :rules="[{ required: true, message: '必填项', trigger: 'blur' }]">
                  <c-input v-model="scope.row.ownref" maxlength="12" disabled> </c-input>
                </el-form-item>
              </template>
            </el-table-column>
            
            <el-table-column label="Cur" width="auto" prop="cur">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.cur'"
                  :rules="[{ required: true, message: '必填项', trigger: 'change' }]">
                  <c-select v-model="scope.row.cur" dbCode="curtxt" style="width: 100%" disabled>
                  </c-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Amount" width="auto" prop="amt">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.amt'"
                  :rules="[{ required: true, message: '必填项', trigger: 'blur' }]">
                  <c-input-currency v-model="scope.row.amt" :currency="scope.row.cur" disabled></c-input-currency>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Value Date" width="auto" min-width="120"	 prop="valdat">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.valdat'"
                  :rules="[{ required: true, message: '必填项', trigger: 'change' }]">
                  <c-date-picker type="date" v-model="scope.row.valdat" style="width: 100%" disabled></c-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Due Date" width="auto" min-width="120"	prop="expdat">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.expdat'"
                  :rules="[{ required: true, message: '必填项', trigger: 'change' }]">
                  <c-date-picker type="date" v-model="scope.row.expdat" style="width: 100%" disabled></c-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Pay Conditions" width="auto" prop="paycdt">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'cddList.' + scope.$index + '.paycdt'"
                  :rules="[{ required: true, message: '必填项', trigger: 'change' }]">
                  <c-select v-model="scope.row.paycdt" dbCode="edipay" style="width: 100%" disabled>
                  </c-select>
                </el-form-item>
              </template>
            </el-table-column>
            
            <el-table-column label="" prop="docnam" width="auto" min-width="90"	>
              <template slot="header" slot-scope="scope">
                <c-row>
                  <c-col >
                    <div >
                      <el-button @click="addTableValue" icon="el-icon-plus" type="primary" circle disabled></el-button>
                      <el-button @click="deleteTable" icon="el-icon-minus" type="primary" circle disabled></el-button>
                    </div>
                  </c-col>
                </c-row>
              </template>
            </el-table-column>
          </el-table-column>
        </c-table>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess";
import Event from "../event";
import Utils from "~/utils";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess, Event],
  data() {
    return {

    };
  },
  methods: {
    addTableValue(index) {
      var newTableValue = Object.assign({}, this.newValue);
      const serial = Utils.generateUUID();
      newTableValue.serialNum = serial;
      this.model.cddList.splice(index - 1, 0, newTableValue);
    },
    deleteTable(index) {
      this.model.cddList.splice(index, 1);
    },
  },
  created: function () { },
};
</script>
<style></style>