<template>
    <el-card class="!border-none" shadow="never">
        <el-form class="ls-form" :model="formData" inline>
            <el-form-item label="分类名称">
                <el-input class="ls-input" v-model="formData.name" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="显示状态">
                <el-select v-model="formData.isShow" class="ls-input">
                    <el-option label="全部" value />
                    <el-option label="显示" value="1" />
                    <el-option label="隐藏" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="首页推荐">
                <el-select v-model="formData.isRecommend" class="ls-input">
                    <el-option label="全部" value />
                    <el-option label="推荐" value="1" />
                    <el-option label="不推荐" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="flex">
                    <el-button type="primary" @click="getLists">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never" class="mt-4 !border-none">
        <div class="w-[88px] flex mb-5">
            <categoryForm
                v-perms="['category:add']"
                @refresh="getLists"
                type="primary"
                btnText="新增分类"
            />

            <el-button @click="onToggle">展开/收起</el-button>
        </div>
        <div>
            <el-table
                ref="tableRef"
                :data="categoryList"
                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-perms="['category:status']"
                            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
                                v-perms="['category:edit', 'category:detail']"
                                :id="scope.row.id"
                                type="text"
                                btnText="编辑"
                                @refresh="getLists"
                            />
                            <el-link
                                v-perms="['category:del']"
                                class="ml-4"
                                type="danger"
                                :underline="false"
                                @click="handleDelete(scope.row.id)"
                            >
                                删除
                            </el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { apiCategoryLists, apiCategoryDel, apiCategoryStatusEdit } from '@/api/service/category'
import { onMounted } from 'vue'
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 formData = ref<any>({
    name: '',
    isShow: '',
    isRecommend: ''
})
const isExpansion = ref(false)

const categoryList = ref([])
const getLists = async () => {
    categoryList.value = await apiCategoryLists(formData.value)
}
const handleReset = () => {
    Object.keys(formData.value).forEach((key) => (formData.value[key] = ''))
    getLists()
}

// 删除分类
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()
}

// 展开/收起
const onToggle = () => {
    isExpansion.value = !isExpansion.value
    toggleRowExpansionAll(categoryList.value, isExpansion.value)
}
const toggleRowExpansionAll = (data: Record<string, any>[], isExpansion: boolean) => {
    data.forEach((element) => {
        tableRef.value?.toggleRowExpansion(element, isExpansion)
        if (element.children !== undefined && element.children !== null) {
            toggleRowExpansionAll(element.children, isExpansion)
        }
    })
}

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

<style lang="scss" scoped>
.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;
}
.ls-input {
    width: 280px;
}
</style>
