<template>
  <view class="page-bank-card-list">
    <view v-if="pageStatus==='list'">
      <!-- 银行卡列表 -->
      <view v-show="dataList&&dataList.length">
        <view class="title">
          我的银行卡
        </view>
        <view class="main">
          <view
            v-for="item in dataList"
            :key="item.id"
            class="bank-card-info"
            @tap="onBankCardClick(item)"
          >
            <bank-card-box :item="item" />
          </view>
        </view>
        <view class="add-bank-card">
          <view
            class="btn"
            @tap="onBindBankCard"
          >
            <text class="txt">
              添加银行卡
            </text>
            <view class="add">
              +
            </view>
          </view>
        </view>
      </view>
      <!-- 列表为空 -->
      <view
        v-show="!(dataList&&dataList.length) && isLoaded"
        class="card-empty"
      >
        <image
          src="../../../static/empty-img/loading-fail.png"
          class="empty-img"
        />
        <view class="empty-tips">
          您还没有添加银行账户哦~
        </view>
        <view
          class="active-btn"
          @tap="onBindBankCard"
        >
          添加银行卡
        </view>
      </view>
    </view>
    <view v-else-if="pageStatus==='unbind'">
      <view class="unbindCard">
        <bankCardBox :item="unbindBandCard" />
      </view>
      <view
        class="active-btn unbind-btn"
        @tap="onUnbindBankCard"
      >
        解除绑定
      </view>
      <view
        class="active-btn unbind-btn refund-btn"
        @tap="onRefund"
      >
        返回
      </view>
    </view>
  </view>
</template>

<script setup>
import bankCardBox from '../../components/bankcard-box'

const isLoaded = ref(false) // 是否加载完成
const dataList = ref([]) // 银行卡信息列表
const pageStatus = ref('list') // list：显示银行卡列表；unbind：解绑银行卡
const unbindBandCard = ref({}) // 解绑的银行卡信息

onMounted(() => {
  uni.setNavigationBarTitle({
    title: '银行卡信息'
  })
  // onGetBankList()
})

/**
   * 生命周期函数--监听页面加载
   */
onLoad(() => {
  pageStatus.value = 'list'
  dataList.value = []
})

onShow(() => {
  onGetBankList()
})

const onGetBankList = () => {
  const data = pageStatus.value === 'list' ? {} : { cardNo: unbindBandCard.value.cardNo }
  const params = {
    url: '/tmerclub_payment/allinpay/member/query_bank_card',
    method: 'GET',
    data
  }
  http.request(params).then(res => {
    isLoaded.value = true
    if (pageStatus.value === 'list') {
      dataList.value = res
    } else if (pageStatus.value === 'unbind') {
      unbindBandCard.value = res[0]
    }
  }).catch(() => {
    isLoaded.value = true
  })
}
// 银行卡点击事件
const onBankCardClick = (item) => {
  pageStatus.value = 'unbind'
  unbindBandCard.value = item
}
// 前往绑定银行卡
const onBindBankCard = () => {
  uni.navigateTo({
    url: '/package-user/pages/bind-bank-card/bind-bank-card'
  })
}
// 解绑银行卡
const onUnbindBankCard = () => {
  const params = {
    url: '/tmerclub_payment/allinpay/member/unbind_bank_card',
    method: 'PUT',
    data: {
      cardNo: unbindBandCard.value.bankCardNo
    }
  }
  http.request(params).then(() => {
    uni.showToast({
      title: '解绑成功',
      icon: 'none'
    })
    pageStatus.value = 'list'
    onGetBankList()
  })
}
const onRefund = () => {
  pageStatus.value = 'list'
}

</script>

<style lang="scss" scoped>
@use "./bank-card-list.scss";
</style>
