<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '个人中心',
  },
}
</route>

<template>
  <view class="my-page">
    <NavBar />
    <view class="flex mt-50 text-white px-15 items-center">
      <!-- <Avatar class="w-60 h-60" :src="getImageUrl(userStore.userInfo?.avatar)" /> -->
      <Avatar class="w-60 h-60" />
      <view class="ml-15 flex-1">
        <view class="text-16">
          {{ userStore.userInfo?.realname ?? userStore.userInfo?.nickname }}
        </view>
        <view class="text-12 mt-8">账号：{{ userStore.userInfo?.username }}</view>
      </view>
      <view
        class="flex border-#FFDD99 border-1 border-solid items-center justify-center h-32 w-100 btn-gradient rounded-full text-center text-14 text-white"
        @click="handleSignIn"
      >
        <view class="ml-5">签到</view>
      </view>
    </view>

    <view class="mt-15 rounded-t-30 bg-white p-15 min-h-90vh">
      <image
        class="w-345 h-146 mx-auto block"
        src="@/static/images/my/recommend.jpg"
        mode="widthFix"
        @click="handleInvite"
      />

      <view class="mt-15 grid grid-cols-2 gap-10">
        <view
          @click="item.handle"
          class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#FFDD9933,#EFB85A33)] p-15 border border-#EFB85A33 border-solid"
          v-for="item in commonList"
          :key="item.title"
        >
          <image class="w-24 h-24" :src="item.icon" mode="aspectFit" />
          <view class="text-14 text-#333 ml-10">{{ item.title }}</view>
        </view>
      </view>

      <view
        class="mt-50 mx-auto w-294 btn-gradient rounded-full text-center text-14 text-white py-15 mt-15"
        @click="handleLogout"
      >
        退出登录
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Avatar from '@/components/Avatar.vue'
import NavBar from '@/components/NavBar.vue'
import { loginRoute } from '@/interceptors/route'
import { downloadAppAPI, getCommunityInviteFirstAPI, getSignInAPI } from '@/service'
import { useUserStore } from '@/store/user'
import { getImageUrl, showModal } from '@/utils'

import CommonIcon1 from '@/static/images/my/common-icon-1.png'
import CommonIcon2 from '@/static/images/my/common-icon-2.png'
import CommonIcon3 from '@/static/images/my/common-icon-3.png'
import CommonIcon4 from '@/static/images/my/common-icon-4.png'

const userStore = useUserStore()

const handleLogout = () => {
  userStore.logout()
  uni.reLaunch({
    url: loginRoute,
  })
}
const handleWithdrawalDetail = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal-detail/index',
  })
}

const handleWithdrawal = () => {
  return showModal('暂未开放')
  // uni.navigateTo({
  //   url: '/pages-sub/withdrawal/index',
  // })
}

const handleTeam = () => {
  uni.navigateTo({
    url: '/pages-sub/team/index',
  })
}

const handleRealName = () => {
  uni.navigateTo({
    url: '/pages-sub/realname/index',
  })
}

const handleAsset = (index = 0) => {
  uni.navigateTo({
    url: `/pages-sub/asset/index?tabIndex=${index}`,
  })
}

const handleBankCard = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal-type/index',
  })
}

const handleInvite = () => {
  uni.switchTab({
    url: '/pages/invite/index',
  })
}

const handleConvert = (type) => {
  if (type === 0) {
    return showModal('提前申请领取养老金')
  }
  uni.navigateTo({
    url: `/pages-sub/convert/index?type=${type}`,
  })
}

const handleSignIn = async () => {
  const res = await getSignInAPI()
  if (res.msg) {
    showModal(res.msg.replace('元', '') + '元')
  } else {
    showModal('签到成功')
  }
  userStore.loadUserInfo()
}

const handleKefu = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal-type/index',
  })
}

const handleInvestDetail = () => {
  uni.navigateTo({
    url: '/pages-sub/invest-detail/index',
  })
}

const commonList = [
  {
    title: '资金明细',
    icon: CommonIcon1,
    handle: () => handleAsset(0),
  },
  {
    title: '提现明细',
    icon: CommonIcon2,
    handle: handleWithdrawalDetail,
  },
  // {
  //   title: '修改密码',
  //   icon: CommonIcon3,
  //   // handle: handleChangePassword,
  // },
  {
    title: '银行卡',
    icon: CommonIcon4,
    handle: handleKefu,
  },
]
</script>

<style lang="scss" scoped>
.my-page {
  min-height: 100vh;
  background-image: url('@/static/images/my/my-bg.jpg');
  background-position: top -40px center;
  background-size: 100%;
}
</style>
