<template>
    <div class="file-group-container">
        <!-- <el-tabs v-model="materialType" class="file-picker-tabs">
      <el-tab-pane label="图片" name="1"></el-tab-pane>
      <el-tab-pane label="视频" name="2"></el-tab-pane>
    </el-tabs> -->

        <div
            v-for="item in groupData"
            :key="item.id"
            class="file-group-item"
            :class="{ 'file-group-item-selected': selectedId === item.id }"
            @click="handleGroupSelect(item)"
        >
            <img
                src="/ele-file-list/ic_file_folder.png"
                class="file-group-icon"
            />
            <span class="file-group-label" :title="item.name">
                {{ item.name }}
            </span>
        </div>
    </div>
</template>

<script setup>
    import { ref, watch, onMounted, getCurrentInstance } from 'vue';
    const { proxy } = getCurrentInstance();

    const props = defineProps({
        /** 选中的分组ID */
        selectedId: {
            type: [String, Number],
            default: '-1'
        },
        /** 素材类型 */
        sourceType: {
            type: [String, Number],
            default: 1
        }
    });

    const materialType = ref(1);
    watch(
        () => props.sourceType,
        (newVal) => {
            materialType.value = newVal;
        }
    );

    const groupData = ref([]);
    //获取分组数据
    const getGroupData = () => {
        proxy.$http.get(`/system/dict/data/type/material_file`).then((res) => {
            if (res.data.code === 200) {
                groupData.value = res.data.data.map((item) => ({
                    ...item,
                    name: item.dictLabel,
                    id: item.dictValue
                }));
            }
        });
    };

    const emit = defineEmits(['groupSelect', 'hideGroupCtxMenu']);

    /** 分组选中事件 */
    const handleGroupSelect = (item) => {
        emit('groupSelect', { ...item, sourceType: materialType.value });
    };

    onMounted(() => {
        getGroupData();
    });

    defineExpose({});
</script>

<style scoped>
    .file-group-container {
        display: flex;
        flex-direction: column;
        width: 200px;
        padding-right: 10px;
        border-right: 1px solid #e5e5e5;
    }

    .file-group-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .file-group-item:hover {
        background-color: #f5f7fa;
    }

    .file-group-item-selected {
        background-color: #ecf5ff;
        color: #409eff;
        font-weight: 500;
    }

    .file-group-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }

    .file-group-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
