<template>
    <!-- 使用el-tabs组件创建选项卡，通过v-model双向绑定activeTab来控制当前选中的选项卡，监听tab-click事件，触发handleTabClick方法 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 图片素材选项卡面板，标签显示为“图片素材（数量）”，数量通过assetsCount.imageCount动态获取，设置name属性为“image”，采用懒加载模式 -->
        <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
            <!-- 引入自定义组件material-file，设置其fileType属性为“image”，用于展示和管理图片素材相关功能，同时监听其@change事件，触发materialCount方法 -->
            <material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
        </el-tab-pane>
        <!-- 语音素材选项卡面板，标签显示为“语音素材（数量）”，数量通过assetsCount.voiceCount动态获取，设置name属性为“voice”，采用懒加载模式 -->
        <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
            <!-- 引入自定义组件material-file，设置其fileType属性为“voice”，用于展示和管理语音素材相关功能，同时监听其@change事件，触发materialCount方法 -->
            <material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
        </el-tab-pane>
        <!-- 视频素材选项卡面板，标签显示为“视频素材（数量）”，数量通过assetsCount.videoCount动态获取，设置name属性为“video”，采用懒加载模式 -->
        <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
            <!-- 引入自定义组件material-file，设置其fileType属性为“video”，用于展示和管理视频素材相关功能，同时监听其@change事件，触发materialCount方法 -->
            <material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
        </el-tab-pane>
        <!-- 图文素材选项卡面板，标签显示为“图文素材（数量）”，数量通过assetsCount.newsCount动态获取，设置name属性为“news”，采用懒加载模式 -->
        <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
            <!-- 引入自定义组件material-news，用于展示和管理图文素材相关功能，同时监听其@change事件，触发materialCount方法 -->
            <material-news ref="newsPanel" @change="materialCount"></material-news>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    data() {
        return {
            // 用于双向绑定el-tabs组件中当前选中的选项卡名称，初始值为“image”，表示默认选中图片素材选项卡
            activeTab: 'image',
            assetsCount: {
                // 图片素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
                imageCount: '..',
                // 视频素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
                videoCount: '..',
                // 语音素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
                voiceCount: '..',
                // 图文素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
                newsCount: '..'
            }
        };
    },
    components: {
        // 动态导入自定义组件material-file，用于处理不同类型的素材文件（图片、语音、视频）相关功能
        MaterialFile: () => import('./assets/material-file'),
        // 动态导入自定义组件material-news，用于处理图文素材相关功能
        MaterialNews: () => import('./assets/material-news')
    },
    mounted() {
        // 组件挂载完成后，调用materialCount方法，用于获取各类素材的数量信息
        this.materialCount();
    },
    methods: {
        handleTabClick(tab, event) {
            // 在下次DOM更新循环后执行以下代码，确保操作的元素已经渲染完成
            this.$nextTick(() => {
                // 通过ref获取对应选项卡面板的组件实例，并调用其init方法进行初始化操作（不同组件的init方法可能有不同的初始化逻辑）
                this.$refs[tab.name + 'Panel'].init();
            });
        },
        materialCount() {
            // 发起HTTP请求，获取素材数量信息，对请求的URL进行了装饰处理（可能是统一处理请求相关的配置，比如添加前缀、处理参数等）
            this.$http({
                url: this.$http.adornUrl('/manage/wxAssets/materialCount')
            }).then(({ data }) => {
                // 根据返回数据的状态码判断请求是否成功
                if (data && data.code == 200) {
                    // 如果成功，将返回数据中的素材数量信息更新到assetsCount对象中，用于在选项卡标签等处显示准确的数量
                    this.assetsCount = data.data;
                } else {
                    // 如果请求失败，弹出错误提示信息，显示接口返回的错误消息内容
                    this.$message.error(data.msg);
                }
            });
        }

    }
};
</script>