<template>
  <div class="eibs-tab">

    <c-col :span="24">
      <!-- ==================左边================ -->
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item label="操作类型" prop="operate">
            <c-select v-model="model.operate" style="width:100%" placeholder="请选择操作类型" :code="codes.operate">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="外管局融资申请编号" prop="safeassetid">
            <c-input v-model="model.safeassetid" maxlength="22" placeholder="请输入外管局融资申请编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="中信保保单号" prop="policyno">
            <c-input v-model="model.policyno" maxlength="25" placeholder="中信保保单号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="发票清单" prop="">
            <el-table style="text-align: center" :data="model.inelst" :border="true" highlight-current-row @row-click="handRowClick" :row-class-name="tableRowClassName" >
              <el-table-column label="发票号" prop="invoiceNo" width="auto">
                <template slot-scope="scope">
                  <c-input v-model="scope.row.invoiceNo"></c-input>
                </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="addRowInelst(scope)">
                  </c-button>
                  <c-button style="padding: 4px" circle class="el-icon-minus" size="mini" @click="removeRowInelst(scope)">
                  </c-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>

    <el-dialog :visible.sync="model.xycyvisible" v-if="model.xycyvisible" width="70%" title="查询结果">
      <m-infodsp :info="model.info"></m-infodsp>
    </el-dialog>

  </div>
</template>
<script>
import event from "../event";
import Infodsp from "./Xycyinfodsp.vue";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: {
    "m-infodsp": Infodsp
  },
  data() {
    return {
      index: 0,
      inelstIndex: -1
    };
  },
  methods: {
    addRowInelst(row) {
      let newRow = {
        invoiceNo: ""
      };
      let start = 0;
      if (this.model.inelst) {
        start = this.model.inelst.length;
      }
      this.model.inelst.splice(start, 0, newRow);
      this.inelstIndex = this.model.inelst.length - 1;
    },

    removeRowInelst() {
      console.log("选中的他行下标", this.inelstIndex);
      if (this.inelstIndex === -1) {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据删除!"
        });
        return;
      }
      this.model.inelst.splice(this.inelstIndex, 1);
      this.inelstIndex = -1;
    },

    handRowClick(row) {
      this.inelstIndex = row.index;
    },

    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    }
  },
  computed: {
    isEmptyData() {
      return this.model.inelst.every(item => {
        return !item.invoiceNo;
      })
    }
  },
  created: function() {}
};
</script>
<style>
</style>