<template>
    <ion-page>
        <ion-content class="mine" :fullscreen="true">
            <img src="@/assets/png-wode-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
            <div class="mine-content">
                <div class="title p-[18px] text-white text-[26px] AlimamaShuHeiTi">{{ $t('mine.mine') }}</div>

                <div class="user-box flex px-[18px] pb-[28px]">
                    <van-image :src="defaultImg" width="60" height="60" type="contain" />
                    <div class="user-info ml-[12px]">
                        <div class="text-[20px] text-white">{{ user ? user.username : $t('mine.notLogin') }}</div>
                        <div class="text-xs text-white" v-if="user">{{ $t('mine.id') }}:{{ user.id }}</div>
                    </div>
                </div>

                <div class="wallet px-[16px] relative">
                    <img src="@/assets/png-jindou-bg.png" alt="" class="wallet-img w-full h-[258px]" />

                    <div class="wallet-content absolute w-full h-full left-0 top-0 px-[36px] pt-[23px]">
                        <div class="wallet-title flex items-center">
                            <img src="@/assets/icon_jindou.png" class="w-[18px] h-[18px]" alt="" />
                            <span>{{ $t('mine.money') }}</span>
                        </div>

                        <div class="wallet-val flex items-center">
                            <div class="wallet-money">{{ amount }}</div>
                            <div @click="buy" class="wallet-btn">
                                <img src="@/assets/icon-anniu.png" alt="" />
                                <span>{{ $t('mine.buy') }}</span>
                            </div>
                        </div>

                        <div class="sign-box">
                            <div class="sign-list">
                                <sign-info v-for="(item, index) in signInfos" :info="item" :key="index"></sign-info>
                            </div>
                            <div class="sign-btn w-[220px] mx-auto">
                                <van-button
                                    round
                                    block
                                    size="small"
                                    color="linear-gradient(180deg, #FF8D63 , #FF7459 )"
                                    v-if="todayInfo && todayInfo.isSigned"
                                    >今日已簽到</van-button
                                >
                                <van-button
                                    round
                                    block
                                    size="small"
                                    @click="sign"
                                    v-else
                                    color="linear-gradient(180deg, #FF7340 , #FF3E3E )"
                                >
                                    {{ $t('mine.sign') }}</van-button
                                >
                            </div>
                        </div>
                    </div>
                </div>

                <div class="menu">
                    <van-cell-group>
                        <van-cell :title="$t('mine.share')" @click="share" is-link>
                            <template #icon>
                                <img src="@/assets/icon_yaoqinghaoyou.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
                            </template>
                            <!-- <template #right-icon>
                        <img src="@/assets/icon_inter.png" class="w-[24px] h-[24px]" alt="" />
                    </template> -->
                        </van-cell>
                        <van-cell :title="$t('mine.history')" :to="{ path: '/history' }" is-link>
                            <template #icon>
                                <img src="@/assets/icon_guankanjilu.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
                            </template>
                            <!-- <template #right-icon>
                        <img src="@/assets/icon_inter.png" class="w-[24px] h-[24px]" alt="" />
                    </template> -->
                        </van-cell>
                        <van-cell :title="$t('mine.wallet')" :to="{ path: '/wallet' }" is-link>
                            <template #icon>
                                <img src="@/assets/icon_jindoujilu.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
                            </template>
                        </van-cell>
                        <van-cell :title="$t('mine.record')" :to="{ path: '/record' }" is-link>
                            <template #icon>
                                <img src="@/assets/icon_xiaofeijilu.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
                            </template>
                        </van-cell>
                        <van-cell :title="$t('mine.connect')" @click="connect" is-link>
                            <template #icon>
                                <img src="@/assets/icon_kefu.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </div>
            </div>

            <buy-page ref="buyPageRef"></buy-page>

            <connect-page ref="connectPageRef"></connect-page>

            <poster-page ref="posterRef"></poster-page>
        </ion-content>
    </ion-page>
</template>

<script setup>
import defaultImg from '@/assets/png-touxiang.png'
import SignInfo from '@/components/SignInfo.vue'
import BuyPage from '@/components/BuyPage.vue'
import ConnectPage from '@/components/ConnectPage.vue'
import PosterPage from '@/components/PosterPage.vue'
import { ref, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { http } from '@/plugins/http'
import { showNotify } from 'vant'
import { useI18n } from 'vue-i18n'
import { isSameDay } from 'date-fns'
import toast from '@/utils/toast'

const buyPageRef = ref(null)
function buy() {
    toast('敬請期待')
    // buyPageRef.value.changeShow(true)
}

const connectPageRef = ref(null)
function connect() {
    connectPageRef.value.changeShow(true)
}

const { user } = useUserStore()

onMounted(() => {
    if (user) {
        getSign()
        getAmount()
    }
})

const signInfos = ref([])
const todayInfo = ref({})
function getSign() {
    http.get('/api/signInRecords').then(res => {
        signInfos.value = res
        todayInfo.value = res.find(item => {
            return isSameDay(new Date(item.date), new Date())
        })
    })
}

const amount = ref(0)
function getAmount() {
    http.get('/api/userBalances/' + user.id).then(res => {
        if (Number(res.balance) > 10000) {
            amount.value = (Number(res.balance) / 10000).toFixed(2) + '万'
        } else {
            amount.value = res.balance
        }
    })
}

const { t } = useI18n()
function sign() {
    http.post('/api/signInRecords')
        .then(res => {
            getSign()
            toast.success('签到成功')
        })
        .catch(e => {
            if (e && e.message) {
                toast(e.message)
            }
        })
}

const posterRef = ref(null)
function share() {
    posterRef.value.onOpenInviteModal()
}
</script>

<style lang="less" scoped>
.mine-content {
    position: relative;
    z-index: 1;
}

.wallet {
    .wallet-content {
        box-sizing: border-box;
        .wallet-title {
            span {
                font-size: 14px;
                font-weight: bold;
                color: #fff;
                line-height: 18px;
                margin-left: 4px;
                // -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
            }
        }

        .wallet-val {
            margin-top: 6px;
            .wallet-money {
                font-size: 40px;
                font-family: Arial, Arial;
                font-weight: 900;
                color: #b25600;
                line-height: 40px;
                text-shadow: 0px 2px 1px #d8800020;
                background: linear-gradient(134deg, #fffded 0%, #ffeb77 49%, #fffded 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                box-sizing: border-box;
            }
            .wallet-btn {
                position: relative;
                margin-left: 15px;
                img {
                    display: block;
                    width: auto;
                    height: 30px;
                }

                span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 12px;
                    font-weight: bold;
                    color: #ffffdd;
                    line-height: 18px;
                    white-space: nowrap;
                }
            }
        }
    }

    .sign-box {
        height: 137px;
        background: linear-gradient(180deg, #fff3e3 0%, #ffe9cc 100%);
        box-shadow: 0px 1px 2px 0px #e69301, inset 1px 2px 5px 0px #ffbb5e;
        border-radius: 12px;
        border: 2px solid #ffefad;
        margin-top: 16px;

        .sign-list {
            display: flex;
            justify-content: space-between;
            padding: 14px;
        }
    }
}

.menu {
    margin: 18px;
    .van-cell-group {
        padding: 10px 0;
        --van-cell-group-background: #20223c;
        border-radius: 8px;
    }
    .van-cell {
        --van-cell-background: #20223c;
        --van-cell-active-color: #1b1d34;
        --van-cell-border-color: transparent;
        --van-cell-text-color: #bdb4ff;
        --van-cell-right-icon-color: #bdb4ff;
        --van-cell-vertical-padding: 12px;
    }
}
</style>
