<template>
  <div class="account-details">
    <!-- 基础信息 -->
    <base-info
      ref="baseInfoRef"
      :details-info="baseInfo"
      client-type="C"
      :disabled="true"
      :page-type="$route.query.type"
    />
    <!-- 查看页面资金信息 | B端也有 -->
    <fund-info ref="fundInfoRef" :details-info="fundInfo" :disabled="true" />
    <!-- 付款方账户信息 | 静默户账户信息 -->
    <payment-account ref="paymentRef" :details-info="paymentList" client-type="C" :disabled="true" />
    <!-- 绑卡信息 -->
    <bind-card :details-info="bindCardInfo" :disabled="true" />

    <div class="submit-btn">
      <el-button
        @click="
          () => {
            $router.go(-1)
          }
        "
      >取消</el-button>
    </div>
  </div>
</template>

<script>
import { queryMemberDetails } from '@/api/accountCenter/cyAccountManage'

export default {
  name: 'CyAccountaccountDetails',
  components: {
    BaseInfo: () => import('./components/BaseInfo.vue'),
    FundInfo: () => import('./components/FundInfo.vue'),
    PaymentAccount: () => import('./components/PaymentAccount.vue'),
    BindCard: () => import('./components/BindCard.vue')
  },

  data() {
    return {
      baseInfo: {
        customerNumber: '',
        customerName: '',
        customerType: '',
        accountName: '',
        accountNumber: '',
        accountAlias: '',
        socialCreditCode: '',
        accountStatus: '',
        authorizationStatus: '',
        channel: '',
        customerSource: ''
      },
      fundInfo: {
        accountBalance: '',
        availableBalance: '',
        freezeAmount: '',
        currency: ''
      },
      paymentList: [],
      bindCardInfo: []
    }
  },
  watch: {
    $route: {
      handler(val) {
        if (val.query.id) {
          queryMemberDetails({ id: val.query.id }).then((res) => {
            const data = res.data
            if (data) {
              Object.keys(this.baseInfo).forEach(key => {
                this.$set(this.baseInfo, key, data[key])
              })
              this.baseInfo.channel = '交通银行'
              Object.keys(this.fundInfo).forEach(key => {
                this.$set(this.fundInfo, key, data[key])
              })

              this.bindCardInfo = data.bindAccountInfoList
              this.paymentList = data.silentAccountInfoList
            }
          })
        }
      },
      immediate: true
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped></style>
