<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'

definePage({
  style: {
    navigationBarTitleText: '发券人申请',
  },
})

const list = ref([{
  bankName: '建设银行',
  bankLogo: '/static/images/income/y-1.png',
  bankNumber: '6228 **** **** *** 000',
  bankShortName: 'jh',
}, {
  bankName: '中国银行',
  bankLogo: '/static/images/income/y-1.png',
  bankNumber: '6228 **** **** *** 000',
  bankShortName: 'zh',
}, {
  bankName: '农业银行',
  bankLogo: '/static/images/income/y-1.png',
  bankNumber: '6228 **** **** *** 000',
  bankShortName: 'nh',
}, {
  bankName: '工商银行',
  bankLogo: '/static/images/income/y-1.png',
  bankNumber: '6228 **** **** *** 000',
  bankShortName: 'gh',
}])
function bindBank() {
    uni.navigateTo({
        url: '/pages-A/bindBankForm/index',
    })
}
</script>

<template>
    <view class="profile-container">
        <view class="bank-list">
            <template v-if="list.length">
                <view
                    v-for="item in list"
                    :key="item.bankName"
                    class="bank-list-item-container"
                    :class="item.bankShortName"
                >
                    <view class="bank-list-item">
                        <view class="bank-list-item-left">
                            <view class="bank-list-item-left-hanke">
                                <image :src="`/static/images/income/logo-${item.bankShortName}.png`" class="bank-list-item-left-hanke-logo" />
                                <view class="bank-list-item-left-hanke-text">
                                    {{ item.bankName }}
                                </view>
                            </view>
                            <view class="bank-list-item-left-number">
                                {{ item.bankNumber }}
                            </view>
                        </view>
                        <view class="bank-list-item-right">
                            <view style="margin-top: 9rpx;">
                                储蓄卡 4427
                            </view>
                            <text class="bank-list-item-right-full-number">
                                完整卡号
                            </text>
                        </view>
                    </view>
                    <image :src="`/static/images/income/logo${item.bankShortName}.png`" class="bank-list-item-right-logo" />
                </view>
            </template>
            <view v-else class="bank-list-empty-container">
                <image src="/static/images/income/emptyBank.png" class="bank-list-empty" />
                <view class="bank-list-empty-text">
                    暂无银行卡~
                </view>
            </view>
        </view>
        <view class="submit-btn" @click="bindBank">
            添加银行卡
        </view>
    </view>
</template>

<style lang="scss" scoped>
.profile-container {
  font-family: Alibaba PuHuiTi;
  min-height: 100vh;
  background-color: #f5f5f5;
  line-height: 1;
  padding: 20rpx;
}
.bank-list {
  padding: 0 20rpx;
  border-radius: 10rpx;
  .bank-list-item-container {
    position: relative;
    &.jh {
      background: linear-gradient(270deg, #3571fe 0%, #5386ff 100%);
    }
    &.gh {
      background: linear-gradient(270deg, #ff3137 0%, #ff7278 100%);
    }
    &.zh {
      background: linear-gradient(270deg, #c80c31 0%, #bd445c 100%);
    }
    &.nh {
      background: linear-gradient(270deg, #009981 0%, #00b699 100%);
    }
    .bank-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 27rpx 40rpx 30rpx;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      color: #fff;
      position: relative;
      z-index: 1;

      .bank-list-item-left {
        display: flex;
        flex-direction: column;
        gap: 38rpx;
        .bank-list-item-left-hanke {
          display: flex;
          align-items: center;
          gap: 14rpx;
          font-weight: 400;
          font-size: 30rpx;
          image.bank-list-item-left-hanke-logo {
            width: 40rpx;
            height: 40rpx;
          }
          .bank-list-item-left-hanke-text {
            font-weight: 400;
            font-size: 30rpx;
          }
        }
      }
      .bank-list-item-right {
        display: flex;
        flex-direction: column;
        gap: 41rpx;
        font-size: 24rpx;
        position: relative;
        .bank-list-item-right-full-number {
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          background: rgba(#001649, 0.21);
          border-radius: 10rpx;
          padding: 7rpx 15rpx;
        }
      }
    }
    .bank-list-item-right-logo {
      width: 115rpx;
      height: 122rpx;
      position: absolute;
      bottom: 11rpx;
      right: 53rpx;
    }
  }
  .bank-list-empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 57rpx;
    .bank-list-empty {
      width: 358rpx;
      height: 246rpx;
      margin-top: 181rpx;
    }
    .bank-list-empty-text {
      font-weight: 400;
      font-size: 30rpx;
      color: #888888;
    }
  }
}
.submit-btn {
  width: 600rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
  border-radius: 10rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
  position: fixed;
  bottom: 52rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
