<template>
  <div class="activation-content">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="银行卡号" prop="bindAcctNo" style="width: 100%;">
        <!-- <el-select
          v-model="ruleForm.bindAcctNo"
          placeholder="请选择银行卡号"
          @chang="bankNoChange"
        >
          <el-option
            v-for="item in bankList"
            :key="item.bindAcctNo"
            :label="item.bindAcctNoAcctNme"
            :value="item.bindAcctNo"
          />
        </el-select> -->
        <el-input
          v-model="ruleForm.bindAcctNo"
          placeholder="请输入银行卡号"
          disabled
        />
      </el-form-item>
      <el-form-item label="账户名称" prop="bindAcctNoAcctNme" style="width: 100%;">
        <el-input
          v-model="ruleForm.bindAcctNoAcctNme"
          placeholder="请输入账户名称"
          disabled
        />
      </el-form-item>
    </el-form>
    <div class="submit-btn">
      <el-button
        @click="
          () => {
            $emit('close', false)
          }
        "
      >取消</el-button>
      <el-button type="primary" @click="submitClick">提交</el-button>
    </div>
  </div>
</template>

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

export default {
  props: {
    activeNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        bindAcctNo: '',
        bindAcctNoAcctNme: ''
      },
      bankList: [],
      rules: {
        bindAcctNo: [{ required: true, message: '请选择要激活的绑定银行卡卡号', trigger: 'blur' }],
        bindAcctNoAcctNme: [{ required: true, message: '请输入要激活的绑定的银行卡名称', trigger: 'blur' }]
      },
      activeBankId: '' // 当前激活的银行卡id
    }
  },
  watch: {
    activeNumber: {
      async handler(val) {
        console.log('activeNumber-------------', val)
        if (val && val !== '') {
          const res = await findAbnormalBindAccountByAccountNumber({ vipAccountNumber: val })

          // this.bankList = res.data

          // if (this.bankList.length === 1) {
          //   this.ruleForm.bindAcctNo = this.bankList[0].bindAcctNo
          //   this.ruleForm.bindAcctNoAcctNme = this.bankList[0].bindAcctNoAcctNme
          //   this.activeBankId = this.bankList[0].id
          // }

          if (res.success) {
            this.ruleForm.bindAcctNo = res.data.bindAcctNo
            this.ruleForm.bindAcctNoAcctNme = res.data.bindAcctNoAcctNme
            this.activeBankId = res.data.id
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    bankNoChange(val) {
      const find = this.bankList.find(item => item.bindAcctNo === val)

      if (find) {
        this.ruleForm.bindAcctNoAcctNme = find.bindAcctNoAcctNme
        this.activeBankId = find.id
      }
    },
    async submitClick() {
      if (this.activeBankId !== '') {
        this.$refs.ruleFormRef.validate(async valid => {
          if (valid) {
            const res = await resetActivateAmount({ id: this.activeBankId })

            if (res.success) {
              this.$message.success('入金激活成功')
              this.$emit('close', true)
              this.$router.go(0)
            }
          }
        })
      }
      // this.$emit('close', true)
      // this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
