<template>
  <mobile-sub-layout :title="$t('account.header.withdrawalBankTitle')" :lineHeight="4">
    <view class="bank-card-list" :style="{ background: themeStore.lightBgColor }">
      <view
        class="bank-card-item"
        v-for="(item, index) in bankCardList"
        :style="{
          background:
            active == index
              ? themeStore.newBankCard.itemActiveBgColor
              : themeStore.newBankCard.itemBgColor,
          backgroundSize: '100% 100%',
        }"
        @click.stop="checkBankCard(item)"
      >
        <view class="bank-card-item-left">
          <view class="bank-card-logo">
            <theme-image
              :src="item.iconUrl"
              mode="scaleToFill"
              class="bank-card-logo-size"
            />
          </view>
          <view
            class="bank-card-account"
            :style="{ color: themeStore.newBankCard.accNoTextColor }"
          >
						{{ $t("account.bankCard.text.accNo") }}{{ item.withdrawAccount.accountNumber }}
					</view>
        </view>
        <theme-image
          src="@/static/account/edit.png"
          @click.stop="handleEditClick(item)"
          class="edit-iamge"
        ></theme-image>
      </view>
      <view
        class="add-bank-card"
        v-if="isShowAddBtn"
        @click="handleAddClick"
        :style="{
          background: themeStore.newBankCard.addBankCardBg,
          backgroundSize: '100% 100%',
          marginTop: bankCardList.length > 0 ? '57rpx' : '0',
          borderRadius: '20rpx',
        }"
      >
        <theme-image src="@/static/account/add.png" class="add-image"></theme-image>
        <text
          class="add-bank-card-text"
          :style="{ color: themeStore.newBankCard.addBankCardTextColor }"
          >{{ t("account.bankCard.text.addBankCardText") }}</text
        >
      </view>
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import { getProfileApi } from "@/api/account.js";
import { useThemeStore } from "@/store/useThemeStore";
import { ref, onMounted, getCurrentInstance } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
import { useAppStore } from "@/store/useAppStore";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/useUserStore";

const userStore = useUserStore()
const appStore = useAppStore();
const { t } = useI18n();
const themeStore = useThemeStore().theme.account.bankCard;

let active = ref(0);
let isAccountRouter = ref(null);
let bankCardList = ref([]);
let isShowAddBtn = ref(true);
let isChooseAccount = ref(false)

const checkBankCard = (item) => {
	if (isChooseAccount.value) {
		uni.$emit('bankCardDidSelect', item)
		uni.navigateBack()
	}
}

const getProfileData = async () => {
  const { code, data } = await getProfileApi({
    userId: userStore.userInfo.id,
  })
  if (code == 200 && data != null) {
    bankCardList.value = data.withdrawAccounts;
    bankCardList.value.forEach((item) => {
      item.withdrawAccount = JSON.parse(item.withdrawAccount);
      appStore.appConfig.withdrawTypes.forEach((i) => {
        if (item.withdrawTypeId == i.id) {
          item.iconUrl = i.iconUrl;
        }
      });
    });
    isShowAddBtn.value =
      appStore.appConfig.withdrawTypes.length == bankCardList.value.length &&
      bankCardList.value.length != 0
        ? false
        : true;
  } else {
    isShowAddBtn.value = true;
  }
}

onLoad((options) => {
	isChooseAccount.value = options.isChoose ? true : false
})

onShow(() => {
  getProfileData()
})

const handleAddClick = (item) => {
	uni.navigateTo({
		url: `/pages/account/BankCard/BankCard`
	})
}

const handleEditClick = (item) => {
	uni.navigateTo({
		url: `/pages/account/BankCard/BankCard?id=${item.id}`
	})
}
</script>

<style lang="scss" scoped>
.bank-card-list {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 53rpx 30rpx 0 30rpx;
  .bank-card-item {
    width: 100%;
    height: 90rpx;
    margin-bottom: 22rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding-left: 12rpx;
    padding-right: 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bank-card-item-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .bank-card-logo {
        width: 70rpx;
        height: 70rpx;
        border-radius: 10rpx;
        .bank-card-logo-size {
          width: 100%;
          height: 100%;
        }
      }
      .bank-card-account {
        font-weight: normal;
        font-size: 24rpx;
        margin-left: 25rpx;
      }
    }
    .edit-iamge {
      width: 37rpx;
      height: 37rpx;
    }
  }
  .add-bank-card {
    width: 100%;
    height: 90rpx;
    // margin-top: 57rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .add-image {
      width: 40rpx;
      height: 40rpx;
    }
    .add-bank-card-text {
      font-weight: normal;
      font-size: 24rpx;
      line-height: 40rpx;
      margin-left: 20rpx;
    }
  }
}
.service-icon {
  display: none;
}
</style>
