<template>
    <view class="h-full flex flex-col">
        <div class="task-lists">
            <div
                v-for="(item, index) in taskLists"
                :key="index"
                class="task-item"
                :class="{
                    'task-item--active': item.value === taskIndex
                }"
                @click="taskIndex = item.value"
            >
                {{ item.name }}
            </div>
        </div>
        <view class="flex-1 min-h-0">
            <view class="h-full relative" v-if="userStore.isLogin">
                <view
                    class="h-full"
                    v-for="(item, index) in taskLists"
                    :key="index"
                    v-show="item.value === taskIndex"
                >
                    <paging
                        :index="item.value"
                        :i="taskIndex"
                        :status="item.value"
                        :setTaskRecordFunc="setTaskRecordFunc"
                    ></paging>
                </view>
            </view>
            <view class="h-full flex justify-center pt-[200rpx]" v-else>
                <router-navigate class="text-center" to="/pages/login/login">
                    <image class="w-[300rpx] h-[300rpx]" :src="NoLoginEmpty"></image>
                    <view class="mt-[20rpx] mb-[50rpx] text-base text-muted">
                        暂无查看权限，请登录账号后查看
                    </view>
                    <u-button
                        type="primary"
                        :custom-style="{
                            width: '345rpx',
                            height: '82rpx',
                            fontSize: '32rpx'
                        }"
                        shape="circle"
                    >
                        点击登录
                    </u-button>
                </router-navigate>
            </view>
        </view>
        <view
            class="p-[20rpx]"
            style="box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2)"
        >
            <view
                class="flex w-full h-[82rpx] bg-[#f0f2f2] rounded-[999px] text-[#333333]"
            >
                <view class="w-[50%]">
                    <u-button
                        type="primary"
                        :custom-style="{
                            width: '100%',
                            height: '82rpx',
                            fontSize: '30rpx'
                        }"
                        shape="circle"
                    >
                        生成记录
                    </u-button>
                </view>
                <view
                    class="w-[50%] h-[82rpx] flex justify-center items-center"
                    @click="pageIndex = 0"
                >
                    立即生成
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import Paging from './paging.vue'
import NoLoginEmpty from '@/packages/static/empty/no_login.png'

import { useUserStore } from '@/stores/user'
import { inject } from 'vue'
const userStore = useUserStore()

const config = inject<Record<string, any>>('config')
const pageIndex = inject<number>('pageIndex')
const taskLists = inject<Record<string, any>>('taskLists')
const taskIndex = inject<number>('taskIndex')
const setTaskRecordFunc = inject<() => {}>('setTaskRecordFunc')
</script>

<style lang="scss" scoped>
.task-lists {
    .task-item {
        display: inline-block !important;
        line-height: 60rpx;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 12rpx #ebeefd;
        text-align: center;
        height: 60rpx;
        width: 160rpx;
        font-size: 28rpx;
        margin: 20rpx 0;
        margin-left: 20rpx;
        color: #888888;
        background: #f0f0f0;
        &--active {
            color: var(--color-btn-text);
            box-shadow: 0 6rpx 12rpx #ebeefd;
            background: var(--color-primary);
        }
    }
}
.safe-area-inset-bottom {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}
</style>
