<template>
  <div class="withdrawal-box">
    <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="账户可用余额">
        <cy-amount-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>
      <el-form-item label="收款方卡号" prop="bindAcctNo">
        <el-select
          v-model="ruleForm.bindAcctNo"
          placeholder="请选择收款方卡号"
          @change="bindAcctNoChange"
        >
          <el-option
            v-for="item in bindCardList"
            :key="item.bindAcctNo"
            :label="item.bindAcctNo"
            :value="item.bindAcctNo"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="收款方账户名称" prop="bindAcctNoAcctNme">
        <el-input
          v-model="ruleForm.bindAcctNoAcctNme"
          placeholder="请输入收款方账户名称"
          disabled
        />
      </el-form-item>
      <el-form-item label="提现金额" prop="withdrawalAmt">
        <cy-amount-input
          v-model="ruleForm.withdrawalAmt"
          placeholder="请输入提现金额"
          :is-unit="true"
          :unit-name="ruleForm.currency"
          @change="withdrawalAmtChange"
        />
      </el-form-item>
      <el-form-item label="手续费" prop="poundageAmt">
        <cy-amount-input
          v-model="ruleForm.poundageAmt"
          placeholder="请输入手续费"
          :is-unit="true"
          :unit-name="ruleForm.currency"
          disabled
        />
      </el-form-item>
      <el-form-item label="实际提现到账金额" prop="elecTrsFee">
        <cy-amount-input
          v-model="ruleForm.elecTrsFee"
          placeholder="请输入实际提现到账金额"
          :is-unit="true"
          :unit-name="ruleForm.currency"
          disabled
        />
      </el-form-item>
      <el-form-item label="备注说明">
        <el-input
          v-model="ruleForm.remark"
          maxlength="200"
          placeholder="请输入备注说明"
        />
      </el-form-item>
    </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,
  assetsWithdraw,
  findAbnormalBindAccount,
  getWithdrawFee
} from '@/api/cyAccountManage/memberAccountManage/index'

export default {
  data() {
    return {
      ruleForm: {
        accountNumber: '',
        accountName: '',
        accountBalance: '',
        availableBalance: '',
        currency: '',
        bindAcctNo: '',
        bocomVipBindAccountInfoId: '',
        bocomVipAccountBasicInfoId: '',
        bindAcctNoAcctNme: '',
        hasBankOfCommunications: '',
        withdrawalAmt: '',
        poundageAmt: '',
        poundageAmtRate: '',
        elecTrsFee: '',
        remark: ''
      },
      bindCardList: [],
      rules: {
        bindAcctNo: [
          { required: true, message: '请选择收款方卡号', trigger: 'blur' }
        ],
        bindAcctNoAcctNme: [
          { required: true, message: '请输入收款方账户名称', trigger: 'blur' }
        ],
        withdrawalAmt: [
          { required: true, message: '请输入提现金额', trigger: 'blur' }
        ],
        poundageAmt: [
          { required: true, message: '请输入手续费', trigger: 'blur' }
        ],
        elecTrsFee: [
          { required: true, message: '请输入实际提现到账金额', trigger: 'blur' }
        ]
      },
      tempFindCard: {}
    }
  },
  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.bocomVipAccountBasicInfoId = res.data.id

          if (res.data.id) {
            this.queryValideBindCard(res.data.id)
          }
        }
      }
    },
    // 收款方卡号change
    bindAcctNoChange(val) {
      const find = this.bindCardList.find(item => item.bindAcctNo === val)

      if (find) {
        this.ruleForm.hasBankOfCommunications = find.hasBankOfCommunications
        this.ruleForm.bocomVipBindAccountInfoId = find.id
        this.ruleForm.bindAcctNoAcctNme = find.bindAcctNoAcctNme

        this.tempFindCard = find

        if (this.ruleForm.withdrawalAmt) {
          this.queryHandRate(this.tempFindCard, this.ruleForm.withdrawalAmt)
        }
      }
    },
    withdrawalAmtChange(val) {
      if (Object.keys(this.tempFindCard).length === 0) {
        this.$message.warning('请选择收款方卡号')
        return
      }
      this.queryHandRate(this.tempFindCard, val)
    },
    // 查询收款方实体账户信息已经生效的银行卡绑卡信息
    async queryValideBindCard(id) {
      const res = await findAbnormalBindAccount({ id, Loading: true })

      console.log('findAbnormalBindAccount---', res)
      if (res.data) {
        this.bindCardList = res.data
      }
    },
    // 查询手续费
    async queryHandRate(curCard, withDrawAmt) {
      const reqParams = {
        bocomVipAccountBasicInfoId: curCard.bocomVipAccountBasicInfoId,
        bocomVipBindAccountInfoId: curCard.id,
        withdrawalAmt: this.formatToFloat(withDrawAmt)
      }
      const res = await getWithdrawFee({ ...reqParams, Loading: true })

      if (res.success) {
        this.ruleForm.poundageAmt = res.data

        this.ruleForm.elecTrsFee = this.ruleForm.poundageAmt + reqParams.withdrawalAmt
      }
    },
    formatToFloat(amountStr) {
      const cleanedStr = amountStr.replace(/,/g, '')

      const amountFloat = parseFloat(cleanedStr)

      return amountFloat
    },
    onSubmit() {
      this.$refs.ruleFormRef.validate(async(valid) => {
        if (valid) {
          const params = {
            bocomVipBindAccountInfoId: this.ruleForm.bocomVipBindAccountInfoId,
            bocomVipAccountBasicInfoId: this.ruleForm.bocomVipAccountBasicInfoId,
            withdrawalAmt: this.ruleForm.withdrawalAmt,
            poundageAmt: this.formatToFloat(this.ruleForm.poundageAmt),
            elecTrsFee: this.ruleForm.elecTrsFee,
            remark: this.ruleForm.remark,
            Loading: true
          }

          const res = await assetsWithdraw(params)
          console.log('assetsWithdraw res-----', res)

          if (res.success) {
            this.$message.success('提现成功')
            this.$router.go(-1)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
