<template>
  <defaultLayout>
    <div class="container">
      <GuideModal :show="showGuide" :guide-list="content" @close="showGuide = false" />
      <div class="imgwarp">
        <img src="@/static/common/login.png" />
      </div>
      <div class="bankcardwarp">
        <img src="@/static/home/bankcard.png" />
        <view class="cardnum" v-html="formatBankCardNumber(cardinfo?.bankNum)" />
      </div>
      <div class="buynow" @click="handleGetCard">
        {{ !cardinfo?.bankNum ? '启用此卡' : '已启用此卡' }}
      </div>
      <div class="warpcard">
        <div class="title">
          <span class="span1">银行储蓄金:</span>
          <span class="span2">{{ userData.q1 || '0.00' }}元</span>
        </div>
        <div class="btnwarp">
          <van-button class="btn1" @click="gotx(userData.q1, '1', '提现到卡')">提现到卡</van-button>
          <van-button class="btn2" @click="gomx(1)">明细</van-button>
        </div>
      </div>
      <div class="footer">
        <div class="tips">
          网站标识码：bm18000002 京ICP备10036469号
        </div>
        <div class="tips">
          "一带一路"世界银行 版权所有，如需转载，请注明来源
        </div>
        <div class="tips">
          <img src="@/static/my/b1.png" />
          <img src="@/static/my/b2.png" />
        </div>
      </div>
    </div>
  </defaultLayout>
</template>


<script setup>
import { ref } from 'vue'
import GuideModal from '@/components/GuideModal.vue'
import request from '@/utils/request';
import defaultLayout from '@/layout/default.vue'
import { showSuccessToast, showFailToast } from 'vant';
const showGuide = ref(false)
const content = ref([])
const userData = ref({})
const cardinfo = ref([])
async function getUserInfo() {
  try {
    const res = await request.get('/system/user/');
    userData.value = res;
  } catch (error) {
    console.error('Failed to fetch user info:', error);
  } finally {
  }
}

async function getCardList() {
  try {
    const res = await request.get('/ops/bankcard/list?cardtype=2');
    if (res.rows?.length > 0) {
      cardinfo.value = res.rows[0];
    }
  } catch (error) {
    console.error('Failed to fetch card list:', error);
  }
}

async function getNotices() {
  try {
    const res = await request.get('/system/notice/list', {
      noticeType: '',
    })
    content.value = res.rows.filter(item => item.noticeType == 0 || item.noticeType == 1 || item.noticeType == 2)
    if (content.value.length > 0) {
      showGuide.value = true
    }
  } catch (error) {
    console.error('Failed to fetch notices:', error)
  }
}

function formatBankCardNumber(cardNumber) {
  if (!cardNumber) {
    return Array.from({ length: 4 }).fill('****').map(part => `<view style='letter-spacing: 1.5px;margin-right: 10px;'>${part}</view>`).join(' ')
  }
  const cleaned = cardNumber.replace(/\D/g, '')
  const cardParts = cleaned.match(/.{1,4}/g) || []
  const formattedParts = cardParts.map(part => `<view style='letter-spacing: 1.5px;margin-right: 10px;'>${part}</view>`).join(' ')
  return formattedParts
}
const navigateTo = (path) => {
  window.location.href = window.location.origin + path
}
async function handleGetCard() {
  if (userData.value.data !== 'true') {
    showFailToast('请先实名注册后启用此卡');
    navigateTo('/user/shiming.html');
    return;
  }
  if (userData.value.smCount < 3) {
    showFailToast('需邀请3位用户参与一带一路即可启用此卡');
    navigateTo('/user/invite.html');
    return;
  }
  if (cardinfo.value?.bankNum) {
    showFailToast('已启用此卡');
    return;
  }
  try {
    const res = await post('/ops/bankcard/add', { cardtype: 2 });
    if (res.code === 200) {
      showSuccessToast('启用成功');
      await getCardList(); // 刷新卡片列表
    }
  } catch (error) {
    console.error('Failed to enable card:', error);
  }
}

function gotx(balance, type, title) {
  if (userData.value.data != 'true') {
    showFailToast('请先实名注册后启用此卡')
    navigateTo('/user/shiming.html')
    return
  }
  if (userData.value.smCount < 3) {
    showFailToast('需邀请3位用户参与一带一路即可启用此卡')
    navigateTo('/user/invite.html')
    return
  }
  if (balance && balance > 0) {
    navigateTo(`/user/tixian?balance=${balance}&type=${type}&title=${title}`)
  } else {
    showFailToast('余额不足')
  }
}

function gomx(tab) {
  window.location.href = window.location.origin + `/user/zjmx.html?tab=${tab}`
}

// Fetch data on component mount
getUserInfo()
getCardList()
getNotices()
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #fff3e6, #feeac9);
  padding: 20px 0 18px;

  .imgwarp {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 176px;
      height: 105px;
      margin: 0 auto 17px;
    }
  }

  .warpcard {
    margin: 10px 20px 30px;
    border-radius: 12px;
    padding: 20px;
    background: #fff3e6;
    text-align: center;

    .title {
      font-weight: bold;
      font-size: 25px;
      color: #323232;
      line-height: 35px;

      .span2 {
        margin-left: 12px;
      }
    }

    .btnwarp {
      margin-top: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        width: 120px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
      }

      .btn1 {
        background: #ffd128;
        color: #323232;
      }

      .btn2 {
        margin-left: 25px;
        background: #e52c32;
        color: #fff;
      }
    }
  }

  .bankcardwarp {
    border-radius: 10px;
    height: 243px;
    position: relative;

    img {
      width: calc(100% - 40px);
      display: block;
      margin: 20px auto;
      height: 243px;
    }

    .cardnum {
      position: absolute;
      color: #000;
      left: 60px;
      top: 130px;
      font-size: 24px;
    }
  }

  .buynow {
    width: 291px;
    height: 63px;
    background: url('@/static/common/btn.png') no-repeat;
    background-size: 100% 100%;
    font-weight: 500;
    margin: 0 auto;
    margin-top: 6px;
    font-size: 21px;
    color: #fff7e9;
    text-align: center;
    line-height: 46px;
  }

  .footer {
    padding: 0 40px;
    font-size: 12px;

    .tips {
      display: flex;

      img {
        margin-top: 10px;
        width: 24px;
        margin-right: 12px;
      }
    }
  }

  .tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;

    .tabbar-item {
      flex: 1;
      text-align: center;
      padding: 10px;
      color: #333;
    }
  }
}
</style>