<template>
  <div class="form-table">
    <div>
      <el-table :data="busDetailBanks" class="el-tab" border size="small" header-cell-class-name="form-table-header">
        <el-table-column prop="index" label="序号" width="100"/>
        <el-table-column prop="accountName" label="账户名称" width="300"/>
        <el-table-column prop="accountNumber" label="银行账号" width="300"/>
        <el-table-column prop="depositBankName" label="开户行名称" width="300"/>
        <el-table-column prop="depositBankNumber" label="开户行号" width="200"/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delBankDetail(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button class="table-btn" type="primary" @click="showAddBankAccount">添加银行账户</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="添加银行账户" :close-on-click-modal="false" append-to-body>
      <el-form ref="dataForm" :rules="bankRules" :model="bankDetail" label-well-code="right" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账户名称" prop="accountName">
              <el-input v-model.trim="bankDetail.accountName" type="text" placeholder="请输入账户名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="accountNumber">
              <el-input v-model.trim="bankDetail.accountNumber" type="text" placeholder="请输入银行账号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开户行" prop="depositBank">
              <el-input v-model.trim="bankDetail.depositBank" type="text" placeholder="请输入开户行"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行名称" prop="depositBankName">
              <el-input v-model.trim="bankDetail.depositBankName" type="text" placeholder="请输入开户行名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开户行号" prop="depositBankNumber">
              <el-input v-model.trim="bankDetail.depositBankNumber" type="text" placeholder="请输入开户行号"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'BankInfo',
  data() {
    return {
      busDetailBanks: [],
      bankRules: {
        accountName: [{ required: true, message: '请输入账户名称', trigger: 'blur' }],
        accountNumber: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
        depositBank: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
        depositBankName: [{ required: true, message: '请输入开户行名称', trigger: 'blur' }]
      },
      bankDetail: {
        accountName: '',
        accountNumber: '',
        depositBank: '',
        depositBankName: '',
        depositBankNumber: ''
      },
      dialogVisible: false,
      bankDetailValid: false
    }
  },
  methods: {
    validateDialogForm: function() {
      this.$refs.dataForm.validate(valid => {
        this.bankDetailValid = valid
      })
    },
    showAddBankAccount() {
      this.dialogVisible = true
      // 清除已有的内容
      this.bankDetail = {
        accountName: '',
        accountNumber: '',
        depositBank: '',
        depositBankName: '',
        depositBankNumber: ''
      }

      this.$nextTick(() => {
        //  延时到下一帧才开始，也就是页面刚刚渲染结束！！
        this.$refs.dataForm.clearValidate()
      })
    },
    saveData() {
      this.validateDialogForm()
      if (this.bankDetailValid === true) {
        const bank = {}
        bank.index = this.busDetailBanks.length + 1
        bank.accountName = this.bankDetail.accountName
        bank.accountNumber = this.bankDetail.accountNumber
        bank.depositBank = this.bankDetail.depositBank
        bank.depositBankName = this.bankDetail.depositBankName
        bank.depositBankNumber = this.bankDetail.depositBankNumber
        bank.open = 1 // 新增的时候默认启用
        this.busDetailBanks.push(bank)
        this.dialogVisible = false
      }
    },
    delBankDetail(row) {
      for (const i in this.busDetailBanks) {
        if (this.busDetailBanks[i].index === row.index) {
          this.busDetailBanks.splice(i, 1)
          return
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .form-table {
    display: flex;
    margin: 20px;

    .table-btn {
      margin-left: 100px;
    }

    ::v-deep .form-table-header {
      font-size: 16px;
    }
  }
</style>