<template>
    <el-card shadow="never" class="!border-none">
        <div class="w-[88px]">
            <categoryForm @refresh="getLists" type="primary" btnText="新增分类" />
        </div>
        <div>
            <el-table
                ref="tableRef"
                :data="tableData"
                size="large"
                row-key="id"
                :indent="20"
                :tree-props="{ children: 'sons' }"
            >
                <el-table-column label="分类名称" show-overflow-tooltip min-width="190">
                    <template #default="{ row }">
                        {{ row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="分类图片" min-width="140">
                    <template #default="scope">
                        <el-image
                            style="width: 40px; height: 40px"
                            :src="scope.row.image"
                            :preview-src-list="[scope.row.image]"
                            :hide-on-click-modal="true"
                            :preview-teleported="true"
                            fit="cover"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><Warning /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column property="address" label="状态" min-width="140">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.isShow"
                            :active-value="1"
                            :inactive-value="0"
                            @change="handleStatusChange($event, scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column property="isRecommendName" label="首页推荐" min-width="157">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.isRecommend == 0">不推荐</el-tag>
                        <el-tag type="success" v-if="scope.row.isRecommend == 1">推荐</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="sort" label="排序" min-width="140" />
                <el-table-column property="createTime" label="添加时间" min-width="180" />
                <el-table-column label="操作" min-width="182" fixed="right">
                    <template #default="scope">
                        <div class="flex items-center">
                            <categoryForm
                                :id="scope.row.id"
                                type="text"
                                btnText="编辑"
                                @refresh="getLists"
                            />
                            <el-link
                                class="ml-4"
                                type="danger"
                                :underline="false"
                                @click="handleDelete(scope.row.id)"
                            >
                                删除
                            </el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div> -->
    </el-card>
</template>

<script lang="ts" setup>
import { apiCategoryLists, apiCategoryDel, apiCategoryStatusEdit } from '@/api/service/category'
import { onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import categoryForm from './components/category-form.vue'
import feedback from '@/utils/feedback'
import type { ElTable } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'

const tableRef = shallowRef<InstanceType<typeof ElTable>>()

const tableData = ref([])

// const { pager, getLists, resetPage, resetParams } = usePaging({
//     fetchFun: apiCategoryLists
// })

const getLists = async () => {
    const res = await apiCategoryLists('')
    tableData.value = res.lists
    console.log('tableData', tableData.value)
}

// 删除分类
const handleDelete = async (id: number): Promise<void> => {
    await feedback.confirm('确认删除？请谨慎操作。')
    await apiCategoryDel({ id })
    feedback.msgSuccess('操作成功')
    getLists()
}

// 状态修改
const handleStatusChange = async (event: Event, id: number) => {
    await apiCategoryStatusEdit({ isShow: event, id })
    feedback.msgSuccess('操作成功')
    getLists()
}

onMounted(() => {
    getLists()
})
</script>

<style lang="scss">
.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}
.image-slot .el-icon {
    font-size: 30px;
}
</style>
