<template>
    <div class="bg-fff round-12 p-16">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-40 h-40 bg-main round-6 mr-10" style="background-color: rgba(var(--main-color), 0.1);"></div>
                <div class="section2-head">
                    <div class="fs-16 fw-700 color-000">全平台资源精准搜索</div>
                    <p class="fs-14 color-666">支持成片、素材、脚本、图片与音频分类检索</p>
                </div>
            </div>
            <div class="flex-items-center color-888 pointer">
                <svg t="1786427654955" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6217" width="16" height="16">
                    <path
                        d="M566.2 166.9c-11.7-11.7-30.8-11.7-42.4 0L509.7 181c-11.7 11.7-11.7 30.8 0 42.4l254.9 254.9c11.7 11.7 11.7 30.8 0 42.4L509.2 776.1c-11.7 11.7-11.7 30.8 0 42.4l14.1 14.1c11.7 11.7 30.8 11.7 42.4 0l311.1-311.1c11.7-11.7 21.1-21.3 21-21.4-0.1-0.1 0-0.4 0.2-0.6 0.2-0.2-9.1-10-20.8-21.6l-311-311z"
                        fill="#888888" p-id="6218"></path>
                    <path
                        d="M769 460c16.5 0 30 13.5 30 30v20c0 16.5-13.5 30-30 30H129c-16.5 0-30-13.5-30-30v-20c0-16.5 13.5-30 30-30h640z"
                        fill="#888888" p-id="6219"></path>
                </svg>
                <span>全部</span>
            </div>
        </div>
        <div class="flex mt-20">
            <el-button v-for="item in buttonList" :key="item.value" class="round-6 px-8"
                :class="tabIndex === item.value ? 'active' : ''" @click="tabIndex = item.value">
                <span>{{ item.label }}</span>
                <span v-if="item.num > 0" class="badge round-100 color-fff px-8 py-2 fs-10 ml-4">
                    {{ item.num }}
                </span>
            </el-button>
        </div>
        <section class="mt-20">
            <div class="round-12 px-12 flex-items-center bg-hh py-10 mt-16 mb-10">
                <div>分类细项：</div>
                <div class="flex-items-center gap-10">
                    <span v-for="item in buttonList" :key="item.value" class="round-100 px-12 py-4 fs-12 bg-eee pointer"
                        :class="tabIndex === item.value ? 'active1' : ''" @click="tabIndex = item.value">{{ item.label
                        }}</span>
                </div>
            </div>
            <div v-for="(item, index) in list" :key="index" class="round-6 p-12 mt-10"
                style="background-color: #88888810;">
                <div class="flex-items-center justify-between">
                    <div class="fs-12">
                        <span class="color-main px-10 py-2 round-10 mr-10"
                            style="background-color: rgba(var(--main-color), 0.1);">上传视频</span>
                        <span class="color-999">2026-03-25 14:25:34</span>
                    </div>
                    <span class="fs-12 px-8 py-2 round-100 bg-eee" style="color: red;">未读</span>
                </div>
                <div class="mt-10 ellipsis">视频《冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染。</div>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tabIndex = ref(1)
const buttonList = [
    { label: '创作', value: 1, num: 6 },
    { label: '卡审', value: 2, num: 3 },
    { label: '审核', value: 3, num: 0 },
    { label: '任务', value: 4, num: 2 },
    { label: '账号', value: 5, num: 0 },
    { label: '导出', value: 6, num: 0 },
]
const list = ref([1, 2, 3])
</script>

<style lang="scss" scoped>
.badge {
    background-color: red;
}

.active {
    background-color: #9022fd;
    color: #fff;

    .badge {
        background-color: #fff;
        color: #9022fd;
    }
}

.active1 {
    background-color: #a865ec;
    color: #fff;

    .badge {
        background-color: #fff;
        color: #9022fd;
    }
}

.bg-hh {
    background: #f4f6f7;
}
</style>