<template>
  <ele-pro-table
    ref="table"
    :columns="bankColumns"
    :datasource="tableBankData"
    :toolkit="[]"
    class="el-form-box"
    :need-page="false"
  >
    <!-- 表头工具栏 -->
    <template v-slot:toolbar>
      <el-button type="primary" @click="addBank">添加</el-button>
      <el-button type="primary" @click="save">确认修改</el-button>
    </template>
    <template v-slot:action="{ row, $index }">
      <el-link
        type="danger"
        :underline="false"
        icon="el-icon-delete"
        @click="handleBankDel(row, $index)"
        >删除
      </el-link>
    </template>
    <template v-slot:accountNameHeader="{ column }">
      <span>{{ column.label }}</span
      ><span style="color: red">*</span>
    </template>

    <template v-slot:accountName="{ row }">
      <el-input
        v-model="row.accountName"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
    <template v-slot:accountNo="{ row }">
      <el-input
        v-model="row.accountNo"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
    <template v-slot:bankName="{ row }">
      <el-input
        v-model="row.bankName"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
    <template v-slot:interbankNo="{ row }">
      <el-input
        v-model="row.interbankNo"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
  </ele-pro-table>
</template>

<script>
import { contactUpdate } from '@/api/saleManage/contact';

import dictMixins from '@/mixins/dictMixins';
export default {
  mixins: [dictMixins],
  components: {},
  data() {
    return {
      tableBankData: [],
      form: {},
      bankColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '单位名称',
          prop: 'accountName',
          slot: 'accountName',
          headerSlot: 'accountNameHeader',
          align: 'center'
        },
        {
          label: '银行账号',
          prop: 'accountNo',
          slot: 'accountNo',
          action: 'accountNo',
          align: 'center'
        },
        {
          label: '开户行',
          prop: 'bankName',
          slot: 'bankName',
          action: 'bankName',
          align: 'center'
        },
        {
          label: '银行银联号',
          prop: 'interbankNo',
          slot: 'interbankNo',
          action: 'interbankNo',
          align: 'center'
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: 'center'
        }
      ]
    };
  },
  methods: {
    async init(row) {
      this.form = row;
      this.tableBankData = row.bankList;
    },

    addBank() {
      this.tableBankData.push({
        accountName: this.form.name,
        accountNo: '',
        bankName: '',
        interbankNo: ''
      });
    },
    handleBankDel(row, index) {
      this.tableBankData.splice(index, 1);
    },
    save() {
      this.form.bankList = this.tableBankData;
      contactUpdate(this.form)
        .then((res) => {
          this.$message.success('修改成功');
         
        })
        .catch((e) => {
          //this.loading = false;
        });
    }
  }
};
</script>
