<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-#50D0FF border-1 border-solid items-center justify-center h-32 w-100 btn-gradient rounded-full text-center text-14 text-white"
        @click="handleSignIn"
      >
        <image class="w-30 h-26 mt-5" src="@/static/images/my/sign-icon.png" mode="widthFix" />
        <view class="ml-5">签到</view>
      </view>
    </view>

    <view class="grid grid-cols-2 gap-10 px-15 mt-15">
      <view class="px-15 py-10 rounded-10 bg-#FFFFFF33" @click="handleAsset(0)">
        <view class="flex text-white text-12">我的余额</view>
        <view class="text-20 text-gradient font-bold">{{ userStore.userInfo?.money }}</view>
        <view
          class="btn-gradient w-fit rounded-full text-center text-12 text-white py-2 px-15 mt-8"
          @click.stop="handleWithdrawal"
        >
          提现
        </view>
      </view>
      <view class="px-15 py-10 rounded-10 bg-#FFFFFF33" @click="handleAsset(2)">
        <view class="flex text-white text-12">养老金余额</view>
        <view class="text-20 text-gradient font-bold">{{ userStore.userInfo?.moneyold }}</view>
        <view
          class="btn-gradient w-fit rounded-full text-center text-12 text-white py-2 px-15 mt-8"
          @click.stop="handleConvert(0)"
        >
          转至我的余额
        </view>
      </view>
      <view class="px-15 py-10 rounded-10 bg-#FFFFFF33" @click="handleAsset(1)">
        <view class="flex text-white text-12">社保金余额</view>
        <view class="text-20 text-gradient font-bold">{{ userStore.userInfo?.moneyjiu }}</view>
      </view>
      <view class="px-15 py-10 rounded-10 bg-#FFFFFF33" @click="handleAsset(3)">
        <view class="flex text-white text-12">团队佣金</view>
        <view class="text-20 text-gradient font-bold">{{ userStore.userInfo?.moneyyong }}</view>
        <view
          class="btn-gradient w-fit rounded-full text-center text-12 text-white py-2 px-15 mt-8"
          @click.stop="handleConvert(1)"
        >
          转至养老金
        </view>
      </view>
    </view>

    <view class="mt-15 rounded-30 bg-white p-15">
      <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,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF 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'
import CommonIcon5 from '@/static/images/my/common-icon-5.png'
import CommonIcon6 from '@/static/images/my/common-icon-6.png'
import CommonIcon7 from '@/static/images/my/common-icon-7.png'
import CommonIcon8 from '@/static/images/my/common-icon-8.png'
import CommonIcon9 from '@/static/images/my/common-icon-9.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 () => {
  await getSignInAPI()
  const { data } = await getCommunityInviteFirstAPI()
  if (data.qiandaojiang) {
    showModal('签到成功，获得' + data.qiandaojiang + '元社保金')
  } else {
    showModal('签到成功')
  }
  userStore.loadUserInfo()
}

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

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

const commonList = [
  {
    title: '投保记录',
    icon: CommonIcon5,
    handle: handleInvestDetail,
  },
  {
    title: '资金明细',
    icon: CommonIcon6,
    handle: () => handleAsset(0),
  },
  {
    title: '申请理赔',
    icon: CommonIcon7,
    handle: handleKefu,
  },
  {
    title: '我的社区',
    icon: CommonIcon4,
    handle: handleInvite,
  },
  {
    title: '在线客服',
    icon: CommonIcon9,
    handle: handleKefu,
  },
  {
    title: 'APP下载',
    icon: CommonIcon3,
    handle: downloadAppAPI,
  },
  {
    title: '官方群聊',
    icon: CommonIcon1,
    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: cover;
}
</style>
