<template>
  <div class="fund-info">
    <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="账户余额">
        <cy-amount-input
          v-model="ruleForm.accountBalance"
          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="冻结金额">
        <cy-amount-input
          v-model="ruleForm.freezeAmount"
          placeholder="请输入冻结金额"
          disabled
        />
      </el-form-item>
      <el-form-item label="币种">
        <el-input
          v-model="ruleForm.currency"
          placeholder="请输入币种"
          disabled
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    detailsInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      ruleForm: {
        accountBalance: '',
        availableBalance: '',
        freezeAmount: '',
        currency: ''
      },
      rules: {}
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (Object.keys(val).length) {
          const { accountBalance, availableBalance, freezeAmount, currency } = val
          this.ruleForm = {
            accountBalance,
            availableBalance,
            freezeAmount,
            currency
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
