<template>
  <div class="eibs-tab">
    <!-- ======================= 左边 ========================= -->
    <c-col :span="12" style="padding-right: 20px">
      <!-- S0000001 : 临时申报编号 -->
      <c-col :span="24">
        <el-form-item label="临时申报编号" prop="recgrp.vrf.tmpref">
          <c-input v-model="model.recgrp.vrf.tmpref" maxlength="16" placeholder="请输入临时申报编号"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000003 : 操作类型 -->
      <c-col :span="24">
        <el-form-item label="操作类型" prop="recgrp.vrf.actiontype">
          <c-input v-model="model.recgrp.vrf.actiontype" maxlength="1" placeholder="请输入操作类型"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000002 : 地区机构号 -->
      <c-col :span="24">
        <el-form-item label="地区机构号" prop="recgrp.vrf.ownextkey">
          <c-input v-model="model.recgrp.vrf.ownextkey" maxlength="8" placeholder="请输入地区机构号"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000058 : 最迟装运日期 -->
      <c-col :span="24">
        <el-form-item label="最迟装运日期" prop="recgrp.vrf.impdate">
          <c-date-picker type="date" v-model="model.recgrp.vrf.impdate" style="width:100%" placeholder="请输入最迟装运日期"></c-date-picker>
        </el-form-item>
      </c-col>
      <!-- S0000052 : 报关单经营单位编码 -->
      <c-col :span="24">
        <el-form-item label="报关单经营单位编码" prop="recgrp.vrf.cusmno">
          <c-input v-model="model.recgrp.vrf.cusmno" maxlength="12" placeholder="请输入报关单经营单位编码"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000051 : 外汇局批件/备案表号 -->
      <c-col :span="24">
        <el-form-item label="外汇局批件/备案表号" prop="recgrp.vrf.regno">
          <c-input v-model="model.recgrp.vrf.regno" maxlength="20" placeholder="请输入外汇局批件/备案表号"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000015 : 申报日期 -->
      <c-col :span="24">
        <el-form-item label="申报日期" prop="recgrp.vrf.rptdate">
          <c-date-picker type="date" v-model="model.recgrp.vrf.rptdate" style="width:100%" placeholder="请输入申报日期"></c-date-picker>
        </el-form-item>
      </c-col>
    </c-col>
    <!-- ======================= 右边 ========================= -->
    <c-col :span="12" style="padding-left: 20px">

      <!-- S0000018 : RoptNam -->
      <c-col :span="24">
        <el-form-item label="RoptNam" prop="recgrp.vrf.rptno">
          <c-input v-model="model.recgrp.vrf.rptno" maxlength="22" placeholder="请输入RoptNam"></c-input>
        </el-form-item>
      </c-col>

      <!-- S0000004 : 修改/删除原因 -->
      <c-col :span="24">
        <el-form-item label="修改/删除原因" prop="recgrp.vrf.actiondesc">
          <c-input type="textarea" v-model="model.recgrp.vrf.actiondesc" maxlength="32" show-word-limit placeholder="请输入修改/删除原因"></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item prop="recp.vrfpp.acp" class="checkbox-left">
          <c-checkbox v-model="model.recp.vrfpp.acp">确认</c-checkbox>
        </el-form-item>
      </c-col>
      <!-- S0000049 : 合同号 -->
      <c-col :span="24">
        <el-form-item label="合同号" prop="recgrp.vrf.contrno">
          <c-input v-model="model.recgrp.vrf.contrno" maxlength="20" placeholder="请输入合同号"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000050 : 发票号 -->
      <c-col :span="24">
        <el-form-item label="发票号" prop="recgrp.vrf.invoino">
          <c-input v-model="model.recgrp.vrf.invoino" maxlength="35" placeholder="请输入发票号"></c-input>
        </el-form-item>
      </c-col>

      <!-- S0000013 : 填报人 -->
      <c-col :span="24">
        <el-form-item label="填报人" prop="recgrp.vrf.crtuser">
          <c-input v-model="model.recgrp.vrf.crtuser" maxlength="20" placeholder="请输入填报人"></c-input>
        </el-form-item>
      </c-col>
      <!-- S0000014 : 填报人电话 -->
      <c-col :span="24">
        <el-form-item label="填报人电话" prop="recgrp.vrf.inptelc">
          <c-input v-model="model.recgrp.vrf.inptelc" maxlength="20" placeholder="请输入填报人电话"></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24">
      <c-table style="text-align: center" highlight-current-row @row-click="handleRowClick" :row-class-name="tableRowClassName" :list="model.recp.vrfpp.cusmod" :paginationShow="true" :border="true" :total="model.recp.vrfpp.cusmod.length">
        <el-table-column label="报关单号" width="185px">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="'recp.vrfpp.cusmod.' + scope.$index + '.customn'">
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="币种" width="185px">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="'recp.vrfpp.cusmod.' + scope.$index + '.custccy'">
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="报关金额" width="185px">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="'recp.vrfpp.cusmod.' + scope.$index + '.custamt'">
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="本次核注金额" width="185px">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="'recp.vrfpp.cusmod.' + scope.$index + '.offamt'">
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="" prop="det" width="150px" fixed="right">
          <template slot-scope="scope" slot="header">
            <c-button circle style="padding: 4px" class="el-icon-plus" size="mini" @click="addRowZcinvlst(scope)">
            </c-button>
            <c-button style="padding: 4px" circle class="el-icon-minus" size="mini" @click="removeRowZcinvlst(scope)">
            </c-button>
          </template>
          <template slot-scope="scoped">
            <c-button style="margin-left: 0" size="small" type="primary" icon="el-icon-info" @click="detailForeignDialog(scoped.$index, scoped.row)"></c-button>
          </template>
        </el-table-column>
      </c-table>
    </c-col>
  </div>
</template>
<script>
import Event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [Event],
  data() {
    return { currentIndex: -1 };
  },
  methods: {
    addRowZcinvlst(row) {
      let newRow = {
        repflg: "",
        invoicecode: "",
        invoicenumber: "",
        monstatus: "",
        hantyp: "",
        handat: ""
      };
      let start = 0;
      if (this.model.recp.vrfpp.cusmod) {
        start = this.model.recp.vrfpp.cusmod.length;
      }
      this.model.recp.vrfpp.cusmod.splice(start, 0, newRow);
    },
    removeRowZcinvlst() {
      console.log("选中的他行下标", this.currentIndex);
      if (this.currentIndex === -1) {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据删除!"
        });
        return;
      }
      this.model.recp.vrfpp.cusmod.splice(this.currentIndex, 1);
      this.currentIndex = -1;
      //this.processSetpan();
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    handleRowClick(row) {
      this.currentIndex = row.index;
    }
  },
  created: function() {}
};
</script>
<style>
</style>