<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] rounded-tl-md rounded-tr-md"
            style="box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2)"
        >
            <view
                class="flex w-full h-[82rpx] bg-[#f0f2f2] rounded-lg text-[#333333]"
            >
                <view class="w-[50%]">
                    <u-button
                        type="primary"
                        :custom-style="{
                            width: '100%',
                            height: '82rpx',
                            fontSize: '30rpx'
                        }"
                    >
                        生成记录
                    </u-button>
                </view>
                <view
                    class="w-[50%] h-[82rpx] flex justify-center items-center"
                    @click="pageIndex = 0"
                >
                    立即生成
                </view>
            </view>
        </view>
    </view>

    <ShareSquare
        v-if="showShare"
        ref="shareRef"
        @close="showShare = false"
    ></ShareSquare>
</template>

<script setup lang="ts">
import { nextTick, onUnmounted, inject, ref, shallowRef } from 'vue'
import { onUnload } from '@dcloudio/uni-app'
import Paging from './paging.vue'
import ShareSquare from '@/packages/pages/drawing/component/component/share-square.vue'
import NoLoginEmpty from '@/packages/static/empty/no_login.png'

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

const showShare = ref<boolean>(false)
const shareRef = shallowRef<any>(null)
const sharedIds = ref<number[]>([])

uni.$on('shareSquare', (param: any) => {
    console.log('emit share')
    onShareSquare(param)
})

const onShareSquare = async (drawing: any) => {
    if (sharedIds.value.includes(drawing.id) || drawing.is_square) {
        const res = await uni.showModal({
            title: '温馨提示',
            content: '该图片已分享过，是否确认重复分享？'
        })
        if (res.cancel) {
            return
        }
    }
    showShare.value = true
    await nextTick()
    setTimeout(() => shareRef.value?.open(drawing), 10)
}

onUnmounted(() => {
    uni.$off('shareSquare')
})

onUnload(() => {
    uni.$off('shareSquare')
})

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</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, white);
            box-shadow: 0 6rpx 12rpx #ebeefd;
            background: var(--color-primary);
        }
    }
}
</style>
