<template>
  <div class="transfer-accounts">
    <cy-info-title>转出账户信息</cy-info-title>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="rule-form-orange"
    >
      <el-form-item label="转出账号">
        <el-input
          v-model="ruleForm.accountNumber"
          placeholder="请输入转出账号"
          disabled
        />
      </el-form-item>
      <el-form-item label="转出账户名称">
        <el-input
          v-model="ruleForm.accountName"
          placeholder="请输入转出账户名称"
          disabled
        />
      </el-form-item>
      <el-form-item label="账户可用余额">
        <el-input
          v-model="ruleForm.availableBalance"
          placeholder="请输入账户可用余额"
          disabled
        />
      </el-form-item>
      <el-form-item label="币种">
        <el-input
          v-model="ruleForm.currency"
          placeholder="请输入币种"
          disabled
        />
      </el-form-item>
      <cy-info-title>转入账户信息</cy-info-title>
      <div v-for="(item, index) in ruleForm.bocomVipTransferAccountsRecordList" :key="index" class="account-box">
        <el-form-item label="转入账号" class="form-required">
          <!-- <custom-select
            :value.sync="item.bindAcctNo"
            placeholder="请输入转入账号"
            @search-click="(val) => { searchClick(val, index) }"
            @search-change="(val) => { searchChange(val, index) }"
          >
            <el-option
              v-for="bindItem in item.bindList"
              :key="bindItem.accountNumber"
              :label="bindItem.accountName"
              :value="bindItem.accountNumber"
            />
          </custom-select> -->
          <el-input v-model="item.bindAcctNo">
            <el-button slot="append" icon="el-icon-search" @click="searchClick(index)"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="转入账户名称" class="form-required">
          <el-input
            v-model="item.bindAcctNoAcctNme"
          />
        </el-form-item>
        <el-form-item label="转入金额" class="form-required">
          <cy-amount-input
            v-model="item.txnAmt"
            placeholder="请输入转入金额"
            :is-unit="true"
            :dig-limit="true"
            :unit-name="ruleForm.currency"
          />
        </el-form-item>
        <el-form-item label="备注说明" style="width: 100%;">
          <el-input
            v-model="item.remark"
            type="textarea"
            placeholder="请输入备注说明"
          />
        </el-form-item>
        <div class="btn-end">
          <el-button v-if="index > 0" type="text" @click="handleDeleteAccountInfo(index)">删除</el-button>
          <el-button type="text" @click="handleAddAccountInfo">添加</el-button>
        </div>
      </div>
    </el-form>
    <div class="submit-btn">
      <el-button style="width: 150px;" @click="() => { $router.go(-1) }">取消</el-button>
      <el-button type="primary" style="width: 150px;" @click="onSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  getMemberRegister,
  findAbnormalBindAccountByAccountNumber,
  assetsTransfer
} from '@/api/cyAccountManage/memberAccountManage/index'

export default {
  components: {
    // CustomSelect: () => import('@/components/CustomSelect/index.vue')
  },
  data() {
    return {
      ruleForm: {
        accountNumber: '',
        accountName: '',
        accountBalance: '',
        availableBalance: '',
        currency: '',
        bocomBasicInfoId: '',
        bocomVipTransferAccountsRecordList: [ // 付款放账户信息
          {
            bindAcctNo: '',
            bindAcctNoAcctNme: '',
            txnAmt: '',
            remark: '',
            collectionBocomVipAccountBasicInfoId: '',
            payBocomVipAccountBasicInfoId: ''
          }
        ]
      },
      payBocomVipAccountBasicInfoId: '',
      rules: {}
    }
  },
  mounted() {
    this.queryRigister()
  },
  methods: {
    async queryRigister() {
      if (this.$route.query.id) {
        const res = await getMemberRegister({ id: this.$route.query.id, Loading: true })

        if (res.data) {
          this.ruleForm.accountNumber = res.data.accountNumber
          this.ruleForm.accountName = res.data.accountName
          this.ruleForm.accountBalance = res.data.accountBalance
          this.ruleForm.availableBalance = res.data.availableBalance
          this.ruleForm.currency = res.data.currency
          this.ruleForm.bocomBasicInfoId = res.data.bocomBasicInfoId
          this.payBocomVipAccountBasicInfoId = res.data.id
        }
      }
    },
    async searchClick(index) {
      const res = await findAbnormalBindAccountByAccountNumber({
        vipAccountNumber: this.ruleForm.bocomVipTransferAccountsRecordList[index].bindAcctNo,
        Loading: true
      })

      if (res.data) {
        console.log(res.data)
        this.$set(this.ruleForm.bocomVipTransferAccountsRecordList[index], 'bindAcctNoAcctNme', res.data.accountName)
        this.$set(this.ruleForm.bocomVipTransferAccountsRecordList[index], 'collectionBocomVipAccountBasicInfoId', res.data.id)
        this.$set(this.ruleForm.bocomVipTransferAccountsRecordList[index], 'payBocomVipAccountBasicInfoId', this.payBocomVipAccountBasicInfoId)
      }
    },
    // searchChange(val, index) {
    //   const find = this.ruleForm.bocomVipTransferAccountsRecordList[index].bindList.find(item => item.accountNumber === val)

    //   if (find) {
    //     this.ruleForm.bocomVipTransferAccountsRecordList[index].accountName = find.accountName
    //     this.ruleForm.bocomVipTransferAccountsRecordList[index].collectionBocomVipAccountBasicInfoId = find.id
    //     this.ruleForm.bocomVipTransferAccountsRecordList[index].payBocomVipAccountBasicInfoId = this.payBocomVipAccountBasicInfoId
    //   }
    // },
    handleAddAccountInfo() {
      this.ruleForm.bocomVipTransferAccountsRecordList.push({
        bindAcctNo: '',
        bindAcctNoAcctNme: '',
        txnAmt: '',
        remark: '',
        bindList: []
      })
    },
    handleDeleteAccountInfo(index) {
      this.ruleForm.bocomVipTransferAccountsRecordList.splice(index, 1)
      if (this.ruleForm.bocomVipTransferAccountsRecordList.length === 0) {
        this.ruleForm.bocomVipTransferAccountsRecordList.push({
          bindAcctNo: '',
          bindAcctNoAcctNme: '',
          txnAmt: '',
          remark: '',
          bindList: []
        })
      }
    },
    async onSubmit() {
      if (!this.verifyAccountInfoList()) return

      const params = {
        accountNumber: this.ruleForm.accountNumber,
        accountName: this.ruleForm.accountName,
        accountBalance: this.ruleForm.accountBalance,
        availableBalance: this.ruleForm.availableBalance,
        currency: this.ruleForm.currency,
        bocomBasicInfoId: this.ruleForm.bocomBasicInfoId,
        bocomVipTransferAccountsRecordList: this.ruleForm.bocomVipTransferAccountsRecordList.map(item => {
          return {
            payBocomVipAccountBasicInfoId: item.payBocomVipAccountBasicInfoId,
            collectionBocomVipAccountBasicInfoId: item.collectionBocomVipAccountBasicInfoId,
            remark: item.remark,
            txnAmt: item.txnAmt
          }
        }),
        Loading: true
      }

      const res = await assetsTransfer(params)
      if (res.success) {
        this.$message.success('转账成功')
        this.$router.go(-1)
      }
    },
    verifyAccountInfoList() {
      if (this.ruleForm.bocomVipTransferAccountsRecordList.length) {
        let i = 0
        while (i < this.ruleForm.bocomVipTransferAccountsRecordList.length) {
          if (!this.ruleForm.bocomVipTransferAccountsRecordList[i].bindAcctNo) {
            this.$message.warning(`请选择转入账户信息${i + 1}行收款方卡号`)
            return false
          }
          if (!this.ruleForm.bocomVipTransferAccountsRecordList[i].bindAcctNoAcctNme) {
            this.$message.warning(`请输入转入账户信息${i + 1}行转入账户名称`)
            return false
          }
          if (!this.ruleForm.bocomVipTransferAccountsRecordList[i].txnAmt) {
            this.$message.warning(`请输入转入账户信息${i + 1}行转入金额`)
            return false
          }
          i++
        }
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.transfer-accounts {
  .account-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px dashed #cbcbcb;
    padding-left: 20px;
    padding-bottom: 10px;
    margin-top: 20px;
    border-radius: 5px;
    .btn-end {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      margin-right: 20px;
    }
  }
}

</style>
