<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'
import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'

definePage({
  style: {
    navigationBarTitleText: '收益',
    navigationStyle: 'custom',
  },
})

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)

// 微信小程序下登录
async function handleLogin() {
  // #ifdef MP-WEIXIN
  // 微信登录
  await tokenStore.wxLogin()

  // #endif
  // #ifndef MP-WEIXIN
  uni.navigateTo({
    url: `${LOGIN_PAGE}`,
  })
  // #endif
}

function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清空用户信息
        useTokenStore().logout()
        // 执行退出登录逻辑
        uni.showToast({
          title: '退出登录成功',
          icon: 'success',
        })
        // #ifdef MP-WEIXIN
        // 微信小程序，去首页
        // uni.reLaunch({ url: '/pages/index/index' })
        // #endif
        // #ifndef MP-WEIXIN
        // 非微信小程序，去登录页
        // uni.navigateTo({ url: LOGIN_PAGE })
        // #endif
      }
    },
  })
}

function menuClick(page: string) {
  uni.navigateTo({
    url: `/pages-A/${page}/index`,
  })
}

const show = ref(false)
const filterValue = ref(Number(new Date()))
function confirm() {
  // 函数实现
  show.value = false
}
function cancel() {
  show.value = false
}
function close() {
  show.value = false
}
function showTimeFilter() {
  show.value = true
}
const wjsList = ref([
  {
    id: 1,
    nickName: '昵称1',
    name: '优惠券1',
    price: 1000,
    date: '2023-08-01 10:00:00',
  },
  {
    id: 2,
    nickName: '昵称2',
    name: '优惠券2',
    price: 1300,
    date: '2023-10-01 10:00:00',
  },
])
const yjsList = ref([
  {
    id: 1,
    nickName: '昵称3',
    name: '优惠券3',
    price: 2300,
    date: '2023-10-01 10:00:00',
  },
  {
    id: 2,
    nickName: '昵称4',
    name: '优惠券4',
    price: 300,
    date: '2023-10-01 10:00:00',
  },
])
const list = ref([])
onLoad(() => {
  list.value = [...wjsList.value]
})
const activeTab = ref('pending')
function changeTab(tab: string) {
    activeTab.value = tab
    if (tab === 'pending') {
        list.value = [...wjsList.value]
    }
    else {
        list.value = [...yjsList.value]
    }
}

function goPage(page: string) {
  uni.navigateTo({
    url: `/pages-A/${page}/index`,
  })
}
</script>

<template>
    <view class="profile-container">
        <!-- 顶部区域 -->
        <view class="income-header" style="background: url('../../static/images/income/income-bg.png') no-repeat center center; background-size: cover;">
            <view class="income-header-avatar-info" :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
                <view class="income-header-balance">
                    当前账户余额（元）
                </view>
                <view class="income-header-balance-num">
                    <view class="income-header-balance-num-amount">
                        7297491.08
                    </view>
                    <view class="income-header-balance-num-btns">
                        <view class="income-header-balance-num-btn js" @click="goPage('unlockRewards')">
                            解锁
                        </view>
                        <view class="income-header-balance-num-btn tx" @click="goPage('withdraw')">
                            提现
                        </view>
                    </view>
                </view>
            </view>
            <view class="income-header-tips">
                <view class="income-header-tips-item">
                    <view class="income-header-tips-item-num">
                        729000.00
                    </view>
                    <view class="income-header-tips-item-des">
                        可提现金额
                    </view>
                </view>
                <view class="income-header-tips-item">
                    <view class="income-header-tips-item-num">
                        1,125
                    </view>
                    <view class="income-header-tips-item-des">
                        未结算金额
                    </view>
                </view>
            </view>
        </view>
        <!-- 公告 -->
        <view class="income-header-notice">
            <view class="income-header-notice-icon">
                <image src="@/static/images/income/notice.png" mode="aspectFit" />
            </view>
            <view class="income-header-notice-content">
                在考核周期内未达标已锁定收益，<text>前往查看~</text>
            </view>
        </view>
        <!-- 菜单 -->
        <view class="income-header-menu">
            <!-- 结算筛选 -->
            <view class="income-header-menu-filter">
                <view class="income-header-menu-filter-item" :class="[activeTab === 'pending' ? 'active' : '']" @click="changeTab('pending')">
                    待结算
                </view>
                <view class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']" @click="changeTab('settled')">
                    已结算
                </view>
            </view>
            <!-- 时间筛选 -->
            <view class="income-menu-time-filter">
                <view class="income-menu-time-filter-text" @click="showTimeFilter">
                    <text>{{ changtime(filterValue) }}</text>
                    <up-icon name="arrow-down" color="#666666" size="14" />
                </view>
                <view>合计：￥4396.00</view>
            </view>
            <!-- 优惠券列表 -->
            <view class="income-header-menu-list">
                <view v-for="item in list" :key="item.id" class="income-header-menu-item">
                    <view class="income-header-menu-icon">
                        <image v-if="activeTab === 'settled'" src="@/static/images/income/hb.png" mode="aspectFit" />
                        <image v-else src="@/static/images/income/djs.png" mode="aspectFit" />
                        <view class="income-header-menu-text">
                            <view class="income-header-menu-text-nickname">
                                {{ item.nickName }}
                            </view>
                            <view>{{ item.name }}</view>
                        </view>
                    </view>
                    <view class="income-header-menu-left">
                        <view class="income-header-menu-left-amount">
                            ￥{{ item.price }}
                        </view>
                        <view class="income-header-menu-left-time">
                            {{ item.date }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <up-datetime-picker
            v-model="filterValue"
            :show="show"
            mode="year-month"
            close-on-click-overlay
            @confirm="confirm"
            @cancel="cancel"
        />
    </view>
</template>

<style lang="scss" scoped>
.profile-container {
  font-family: Alibaba PuHuiTi;
  min-height: 100vh;
  background-color: #f5f5f5;
  line-height: 1;
  .income-header {
    height: 525rpx;
    .income-header-avatar-info {
      display: flex;
      flex-direction: column;
      gap: 30rpx;
      padding: 0 24rpx;
      .income-header-balance {
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffff;
      }
      .income-header-balance-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .income-header-balance-num-amount {
          font-weight: 500;
          font-size: 65rpx;
          color: #ffffff;
        }
        .income-header-balance-num-btns {
          display: flex;
          gap: 15rpx;
          .income-header-balance-num-btn {
            padding: 20rpx 40rpx;
            border-radius: 33rpx;
            font-weight: 400;
            font-size: 26rpx;
            &.js {
              background: #da4c47;
              color: #ffffff;
            }
            &.tx {
              background: #bfbfbf;
              color: #747474;
            }
          }
        }
      }
    }
    .income-header-tips {
      height: 124rpx;
      display: flex;
      background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
      border-radius: 10rpx;
      margin: 47rpx 24rpx 0 24rpx;
      .income-header-tips-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15rpx;
        font-weight: 500;
        font-size: 34rpx;
        color: #ffffff;
        line-height: 1;
        position: relative;
        &:first-child:after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 2px;
          height: 40rpx;
          background: #ffffff;
        }
        .income-header-tips-item-num {
          font-weight: bold;
        }
        .income-header-tips-item-des {
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }

  .income-header-notice {
    margin: -50rpx 24rpx 24rpx 24rpx;
    background: #ffffff;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 28rpx 20rpx;
    .income-header-notice-icon {
      width: 52rpx;
      height: 35rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .income-header-notice-content {
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      text {
        color: #c52d27;
      }
    }
  }

  .income-header-menu {
    // background: #ffffff;
    border-radius: 10rpx 10rpx 0rpx 0rpx;
    margin: 24rpx 24rpx 0;
    .income-header-menu-filter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      height: 90rpx;
      background: #ffffff;
      box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
      border-radius: 10rpx 10rpx 0rpx 0rpx;
      .income-header-menu-filter-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100%;
        &.active {
          color: #ed6b66;
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 67rpx;
            height: 6rpx;
            background: #ed6b66;
            border-radius: 3rpx;
          }
        }
      }
    }
    .income-menu-time-filter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      padding: 50rpx 20rpx 14rpx;
      background: #ffffff;
      margin-top: 4rpx;
      .income-menu-time-filter-text {
        font-weight: 400;
        font-size: 26rpx;
        color: #000000;
        display: flex;
        align-items: center;
        gap: 12rpx;
      }
    }
    .income-header-menu-list {
      background: #ffffff;
      .income-header-menu-item {
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        padding: 32rpx 0 29rpx;
        margin: 0 20rpx;
        &:last-child {
          border-bottom: none;
        }
        .income-header-menu-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 19rpx;
          image {
            width: 60rpx;
            height: 60rpx;
          }
          .income-header-menu-text {
            font-weight: 400;
            font-size: 24rpx;
            color: #888888;
            .income-header-menu-text-nickname {
              font-size: 28rpx;
              color: #222222;
              margin-bottom: 18rpx;
            }
          }
        }
        .income-header-menu-left {
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;
          .income-header-menu-left-amount {
            font-size: 28rpx;
            color: #222222;
            margin-bottom: 18rpx;
          }
        }
      }
    }
  }
}
</style>
