<template>
    <app-view class="credit-signin">
        <template #header>
            <app-navbar title="我的任务" @ready="onReady" />
        </template>
        <div ref="headerRef" class="credit-signin__header">
            <div class="credit-signin__header-wrapper">
                <div class="integral">
                    <div class="integral-title">
                        <app-iconfont icon="icon-jifenyue">积分余额</app-iconfont>
                    </div>
                    <div class="integral-balance">
                        {{ userAccount.curscore ?? 0 }}
                    </div>
                </div>
                <div class="iconbar">
                    <ul>
                        <li @click="userSignin">
                            <app-iconfont icon="icon-qiandao" label-direction="bottom">
                                <span v-if="userAccount.issigned">已签到</span>
                                <span v-else>签到</span>
                            </app-iconfont>
                        </li>
                        <li>
                            <app-iconfont icon="icon-jifenchoujiang" label-direction="bottom"
                                @click="routerTo('credit-lottery')">积分红包</app-iconfont>
                        </li>
                        <li>
                            <app-iconfont icon="icon-jifenliushui" label-direction="bottom"
                                @click="routerTo('credit-statement')">积分流水</app-iconfont>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="credit-signin__task">
            <dl class="list">
                <dt class="list-title">积分任务</dt>
                <dd class="list-item">
                    <div class="list-item__title">
                        <app-iconfont class="icon-title" icon="icon-meiriqiandao">每日签到</app-iconfont>
                        <app-iconfont class="icon-score" icon="icon-jifenyue">+20</app-iconfont>
                    </div>
                    <!-- <div class="list-item__button">
                        <Button type="primary" v-if="userAccount.issigned" round>已完成</Button>
                    </div> -->
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <app-iconfont class="icon-title" icon="icon-yaoqingxinrenzhuce">邀请新人注册</app-iconfont>
                        <app-iconfont class="icon-score" icon="icon-jifenyue">+50</app-iconfont>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" @click="routerTo('mine-generalize')" round>去完成</Button>
                    </div>
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <app-iconfont class="icon-title" icon="icon-haoyouxiadan">好友下单每次</app-iconfont>
                        <app-iconfont class="icon-score" icon="icon-jifenyue">+200</app-iconfont>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" round>去完成</Button>
                    </div>
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <app-iconfont class="icon-title" icon="icon-caigouxiadan">采购下单每次</app-iconfont>
                        <app-iconfont class="icon-score" icon="icon-jifenyue">+100</app-iconfont>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" round>去完成</Button>
                    </div>
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <app-iconfont class="icon-title" icon="icon-gongqiuxiadan">供求下单每次</app-iconfont>
                        <app-iconfont class="icon-score" icon="icon-jifenyue">+100</app-iconfont>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" round>去完成</Button>
                    </div>
                </dd>
            </dl>
        </div>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Toast, Button } from 'vant'
import { fullloading } from '@/utils/vant'
import { useLoginStore } from '@/stores'
import { queryUserAccount } from '@/services/api/account'
import { signin } from '@/services/api/common'
import { useNavigation } from '@/hooks/navigation'
import AppIconfont from '@mobile/components/base/iconfont/index.vue'

const { getUserId } = useLoginStore()
const { routerTo } = useNavigation()
const userAccount = shallowRef<Partial<Model.UserAccount>>({})
const headerRef = shallowRef<HTMLDivElement>()

const onReady = (el: HTMLDivElement) => {
    // 设置背景图位置
    headerRef.value?.style.setProperty('background-position', `0 -${el.clientHeight}px`)
}

const userSignin = () => {
    fullloading(() => {
        signin({
            data: {
                userid: getUserId()
            },
            success: (res) => {
                if (res.data.signinstatus === 1) {
                    getUserAccount()
                    Toast.success('签到成功')
                } else {
                    Toast.fail('今日已签到')
                }
            },
            fail: () => {
                Toast.fail('签到失败')
            },
        })
    }, '签到中...')
}

const getUserAccount = () => {
    queryUserAccount({
        data: {
            userID: getUserId()
        },
        success: (res) => {
            userAccount.value = res.data
        }
    })
}

getUserAccount()
</script>

<style lang="less">
@import './index.less';
</style>