<template>
    <el-card class="sidebar-card">
        <div class="add-btn" @click="handleAddCategory">
            + 添加
        </div>
        <div class="category-list">
            <div v-for="item in categoryList" :key="item.technicalSolutionTypeId" class="category-item"
                :class="{ active: activeCategory === item.technicalSolutionTypeId }"
                @click="handleCategoryClick(item.technicalSolutionTypeId)">
                <i class="el-icon-folder" style="margin-right: 8px; color: #666;"></i>
                <span class="category-name">{{ item.technicalSolutionName }}</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>
        </div>
        <!-- 添加方案类型弹窗 -->
        <TypeForm ref="typeForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
            @closeDialog="closeDialog" :width="600" />
    </el-card>

</template>
<script>
import TypeForm from './TypeForm.vue'
import { typeListAPI,delTypeDataAPI } from '@/api/enterpriseLibrary/technical/technical'
export default {
    name: 'LeftTypeTechnical',
    components: {
        TypeForm
    },
    props: {
        value: {
            type: [String, Number],
            default: null
        },
        enterpriseId: {
            type: [String, Number],
            default: '0'
        }
    },
    data() {
        return {
            activeCategory: null,
            categoryList: [],
            title: "",
            isflag: false,
            isAdd: '',
            row: {},
        }
    },
    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() {
            typeListAPI({
                enterpriseId: this.enterpriseId
            }).then(res => {
                this.categoryList = res.data;
                if (res.data.length > 0 && !this.activeCategory) {
                    const technicalSolutionTypeId = res.data[0].technicalSolutionTypeId;
                    this.activeCategory = technicalSolutionTypeId
                    this.$emit('change', technicalSolutionTypeId)
                }
            })
        },
        /**新增方案类型 */
        handleAddCategory() {
            this.title = "新增方案类型";
            this.isAdd = 'add';
            this.row = { enterpriseId: this.enterpriseId };
            this.isflag = true;
        },
        handleCategoryClick(id) {
            this.activeCategory = id
            this.$emit('change', id)
            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, enterpriseId: this.enterpriseId };
            this.isflag = true;
        },
        /**删除方案类型 */
        handleDeleteCategory(raw) {
            this.$confirm(`确定要删除方案类型"${raw.technicalSolutionName}"吗？删除后将无法恢复！`, '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
                customClass: 'delete-confirm-dialog'
            }).then(() => {
                delTypeDataAPI({ technicalSolutionTypeId: raw.technicalSolutionTypeId,enterpriseId: this.enterpriseId }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功');
                        this.activeCategory = null;
                       this.handleQuery();
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                }).catch(error => {
                    console.error('删除失败:', error);
                });
            })
        },
        closeDialog() {
            this.isflag = false;
        },
        handleQuery() {
            this.getList();
        },
    }
}
</script>

<style scoped lang="scss">
.sidebar-card {
    height: calc(100vh - 175px);
    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;
    }

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

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

    .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>
