<template>
    <el-card class="sidebar-card">
        <div class="header-row">
            <span class="title">标签组列表</span>
            <div class="add-btn" @click="handleAddCategory">+ 新建标签组</div>
        </div>
        <el-input v-model="searchText" placeholder="请输入" clearable size="small" class="search-input">
            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="handleSearch"></i>
        </el-input>
        <div class="category-list">
            <template v-if="categoryList.length > 0">
                <div v-for="item in categoryList" :key="item.labelGroupId" class="category-item"
                    :class="{ active: activeCategory === item.labelGroupId }"
                    @click="handleCategoryClick(item)">
                    <i class="el-icon-folder" style="margin-right: 8px; color: #666;"></i>
                    <span class="category-name">{{ item.labelGroupName }}</span>
                    <el-dropdown trigger="click" @command="handleCategoryCommand">
                        <span class="el-dropdown-link">
                            <i class="el-icon-more"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ type: 'edit', raw: item }">编辑</el-dropdown-item>
                            <el-dropdown-item :command="{ type: 'delete', raw: item }">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </template>
            <el-empty v-else description="无数据" :image-size="80"></el-empty>
        </div>
        <!-- 添加标签组弹窗 -->
        <LabelGroupForm ref="labelGroupForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
            @closeDialog="closeDialog" :width="600" />
    </el-card>

</template>
<script>
import LabelGroupForm from './LabelGroupForm.vue'
import { labelGroupListAPI,delLabelGroupAPI } from '@/api/data/label'
export default {
    name: 'LeftLabelGroup',
    components: {
        LabelGroupForm
    },
    props: {
        value: {
            type: [String, Number],
            default: null
        }
    },
    data() {
        return {
            activeCategory: null,
            activeCategoryName: '',
            categoryList: [],
            title: "",
            isflag: false,
            isAdd: '',
            row: {},
            searchText: '',
        }
    },
    watch: {
        value(newVal) {
            if (newVal) {
                this.activeCategory = parseInt(newVal)
            }
        },
        immediate: true
    },
    mounted() {
        if (this.value) {
            this.activeCategory = parseInt(this.value);
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 初始化列表数据
        getList() {
            labelGroupListAPI({
                labelGroupName: this.searchText
            }).then(res => {
                this.categoryList = res.data;
                if (res.data.length > 0 && !this.activeCategory) {
                    const labelGroupId = res.data[0].labelGroupId;
                    this.activeCategory = labelGroupId
                    this.activeCategoryName = res.data[0].labelGroupName
                    this.$emit('change', labelGroupId, this.activeCategoryName)
                }
            })
        },
        /**新增标签组 */
        handleAddCategory() {
            this.title = "新增标签组";
            this.isAdd = 'add';
            this.row = {};
            this.isflag = true;
        },
        handleCategoryClick(item) {
            this.activeCategory = item.labelGroupId
            this.$emit('change', item.labelGroupId, item.labelGroupName)
            this.handleQuery();
        },
        handleCategoryCommand(command) {
            if (command.type === 'edit') {
                this.handleEditCategory(command.raw)
            } else if (command.type === 'delete') {
                this.handleDeleteCategory(command.raw);
            }
        },
        /**编辑标签组 */
        handleEditCategory(raw) {
            console.log(raw);
            this.title = "编辑标签组";
            this.isAdd = 'edit';
            this.row = { ...raw };
            this.isflag = true;
        },
        /**删除标签组 */
        handleDeleteCategory(raw) {
            this.$confirm(`确定要删除标签组"${raw.labelGroupName}"吗？删除后将无法恢复！`, '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
                customClass: 'delete-confirm-dialog'
            }).then(() => {
                delLabelGroupAPI({ labelGroupId: raw.labelGroupId }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功');
                        this.activeCategory = null;
                        this.$emit('change', null, null)
                       this.handleQuery();
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                }).catch(error => {
                    console.error('删除失败:', error);
                });
            })
        },
        closeDialog() {
            this.isflag = false;
        },
        handleQuery() {
            this.getList();
        },
        handleSearch() {
            this.getList();
        },
    }
}
</script>

<style scoped lang="scss">
.sidebar-card {
    height: calc(100vh - 125px);
    display: flex;
    flex-direction: column;

    ::v-deep .el-card__body {
        height: 100%;
        overflow-y: hidden;
        padding: 20px;
        padding-right: 12px;
        transition: overflow-y 0.3s ease;
    }

    &:hover ::v-deep .el-card__body {
        overflow-y: auto;
    }

    // 自定义滚动条样式
    ::v-deep .el-card__body::-webkit-scrollbar {
        width: 6px;
    }

    ::v-deep .el-card__body::-webkit-scrollbar-track {
        background: transparent;
    }

    ::v-deep .el-card__body::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    ::v-deep .el-card__body::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
    }

    .add-btn {
        width: 100px;
        height: 32px;
        background: #1F72EA;
        box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
        border-radius: 4px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s;

        &:hover {
            background: #4A8BFF;
            box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
        }
    }

    .search-input {
        margin-bottom: 16px;
    }

    .category-list {
        .category-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            margin-bottom: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            background: transparent;

            .category-name {
                flex: 1;
                color: #333;
                font-size: 14px;
                word-break: break-all;
            }

            .el-dropdown-link {
                color: #666;
                cursor: pointer;
                opacity: 0;
                transition: opacity 0.3s;
            }

            &:hover {
                background: #e0e0e0;

                .el-dropdown-link {
                    opacity: 1;
                }
            }

            &.active {
                background: #e3f2fd;

                .category-name {
                    color: #1F72EA;
                    font-weight: 500;
                    word-break: break-all;
                }

                i {
                    color: #1F72EA !important;
                }
            }
        }
    }
}
</style>
