<template>
  <div class="eibs">
    <!-- ==================左边================ -->
    <c-col :span="12" style="padding-right: 20px;">
      <c-ptap :model="model" :argadr="{
            title: '收款人',
            grp: 'bodgrp',
            rol: 'drr',
        }" :disabled="true">
      </c-ptap>

      <c-ptap :model="model" :argadr="{
            title: '付款人',
            grp: 'bodgrp',
            rol: 'dre',
        }" :disabled="true">
      </c-ptap>
    </c-col>
    <!-- ============右边================= -->
    <c-col :span="12" style="padding-left: 20px;">
      <c-ptap :model="model" :argadr="{
            title: '代收行',
            grp: 'bodgrp',
            rol: 'col',
        }" :disabled="true">
      </c-ptap>
    </c-col>

    <c-col :span="24">
      <c-table max-height="300px" style="text-align: center;" stripe :list="this.model.botp.ptsaddp.ptsaddg || []"
               :paginationShow="false" :border="true">
        <el-table-column label="其它参与方">
          <el-table-column label="角色" width="auto" prop="rol">
            <template slot-scope="scope">
              <c-select v-model="scope.row.rol" :code="ptyp2">
              </c-select>
            </template>

          </el-table-column>
          <el-table-column label="机构实体" width="auto" prop="ptyextkey">
            <template slot-scope="scope">
              <c-input v-model="scope.row.ptyextkey" maxlength="12">
              </c-input>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="auto" prop="nam">
            <template slot-scope="scope">
              <c-input v-model="scope.row.nam" maxlength="12">
              </c-input>
            </template>
          </el-table-column>
          <el-table-column label="参考地址" width="auto" prop="ref">
            <template slot-scope="scope">
              <c-input v-model="scope.row.ref" maxlength="12">
              </c-input>
            </template>
          </el-table-column>
          <el-table-column label="单据" prop="docnam" width="auto">
            <template slot="header" slot-scope="scope">
              <c-row>
                <c-col :span="12">
                  <span style="line-height: 36px;">操作</span>
                </c-col>
                <c-col :span="12">
                  <div style="float: right;">
                    <span class="add_del_button add_button" @click="addTableValue">+</span>
                    <span class="add_del_button" @click="deleteTable">-</span>
                  </div>
                </c-col>
              </c-row>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="primary">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </c-table>
    </c-col>
  </div>
</template>
<script>
import event from "../event"
import Utils from "~/utils";
import Ptap from "~/views/Public/Ptap";

export default {
  components: {"c-ptap": Ptap},
  inject: ['root'],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      newValue: {
        rol: "",
        ptyextkey: "",
        nam: "",
        ref: "",
      },
      ptyp2: [
        {label: "TPO 第三当事人", value: "TPO"},
        {label: "TP1 第一第三当事人 .", value: "TP1"},
        {label: "TP2 第二第三当事人", value: "TP2"},
        {label: "TP3 第三第三当事人", value: "TP3"},
        {label: "TP4 第四第三当事人", value: "TP4"},
        {label: "TP5 第五第三当事人", value: "TP5"},
        {label: "TP6 第六第三当事人", value: "TP6"},
        {label: "TP7 第七第三当事人", value: "TP7"},
        {label: "TP8 第八第三当事人", value: "TP8"},
      ],
    }
  },
  methods: {
    ...Event,
    addTableValue(index) {
      var newTableValue = Object.assign({}, this.newValue);
      const serial = Utils.generateUUID();
      newTableValue.serialNum = serial;
      this.model.botp.ptsaddp.ptsaddg.splice(index - 1, 0, newTableValue);
    },
    deleteTable(index) {
      this.model.botp.ptsaddp.ptsaddg.splice(index, 1);
    },
  },
  created: function () {
  }
}
</script>
<style>

</style>