<template>
    <div class="pl-6 pr-6 pb-6">
        <div class="flex justify-between items-center pb-4">
            <h3 class="text-base font-semibold">任务中心</h3>
        </div>

        <div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
            <div v-for="item in taskList" :key="item.id" class="relative flex gap-3 items-start p-3.5
                  rounded-[10px] border border-[#dfeaf6] dark:border-[#2a2a2d] bg-white dark:bg-[#1f1f22] cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d]"
                @click="handleTaskItem(item)">
                <Settings v-if="item.type === 'channel'"
                    class="absolute top-2 right-2 w-4 h-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 cursor-pointer"
                    @click.stop="handleChannelSetting" />

                <div class="w-11 h-11 bg-[#EFF6FF] dark:bg-[#222225] rounded-lg
                    border border-dashed border-[#9fc0e8] dark:border-gray-700
                    flex items-center justify-center
                    text-[#3b82f6] text-[23px]">
                    {{ item.icon }}
                </div>

                <div>
                    <div class="font-semibold dark:text-gray-100">
                        {{ item.title }}
                    </div>
                    <div class="text-[#9aa5b1] dark:text-gray-400 text-[13px] mt-1.5">
                        {{ item.desc }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Settings } from '@lucide/vue'
import { taskCenterList, taskCenterItem } from '@constant/taskCenterList'
import { channels } from '@constant/channel'
import emitter from '@utils/emitter'

const taskList = computed(() => taskCenterList)

// 点击任务项
const handleTaskItem = (item: taskCenterItem) => {
    // 一键打开各渠道
    if (item.type === 'channel') {
        window.api.openChannel(channels.value)
        return
    }

    // 操作房型
    emitter.emit('OPERATION_CHANNEL', item)
}

// 渠道设置
const handleChannelSetting = () => emitter.emit('ADD_CHANNEL')
</script>
