<template>
    <section class="bg-fff round-12 px-12 py-20">
        <div class="flex">
            <div class="w-100 text-right mt-2">主类目：</div>
            <div class="flex flex-wrap gap-12 flex-1">
                <a href="" class="color-888 px-6 h-26 py-2" v-for="(tag, index) in tags" :key="index"
                    :class="tagIndex === index ? ' round-4 active color-main' : ''">{{ tag.name }}</a>
            </div>
            <el-select v-model="typeVal1" placeholder="Select" style="width: 200px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" class="ml-12">保存</el-button>
        </div>
        <el-divider />
        <div class="flex">
            <div class="w-100 text-right mt-2">一级分类：</div>
            <div class="flex flex-wrap gap-12 flex-1">
                <a href="" class="color-888 px-6 py-2" v-for="(tag, index) in displayList" :key="index"
                    :class="tagIndex === index ? ' round-4 active color-main' : ''">{{ tag.name }}</a>
            </div>
            <el-button type="primary" link class="ml-12" @click="isExpanded = !isExpanded">{{ isExpanded ? '收起' : '展开'
                }}</el-button>
        </div>
        <el-divider />
        <div class="flex">
            <div class="w-100 text-right mt-2">二级分类：</div>
            <div class="flex-items-center flex-wrap gap-12 flex-1">
                <el-input placeholder="搜索标签" style="width: 150px;" />
                <a href="" class="color-888 px-6 h-26 py-2" v-for="(tag, index) in tags" :key="index"
                    :class="tagIndex === index ? ' round-4 active color-main' : ''">{{ tag.name }}</a>
            </div>
        </div>
        <el-divider />
        <div class="flex">
            <div class="w-100 text-right mt-2">状态：</div>
            <div class="flex flex-wrap gap-12 flex-1">
                <a href="" class="color-888 px-6 py-2" v-for="(tag, index) in tags" :key="index"
                    :class="tagIndex === index ? ' round-4 active color-main' : ''">{{ tag.name }}</a>
            </div>
        </div>
        <el-divider />
        <div class="flex">
            <div class="w-100 text-right mt-4">高级搜索：</div>
            <div class="flex-items-center flex-wrap gap-10 flex-1">
                <el-select v-model="typeVal1" placeholder="Select" style="width: 200px">
                    <template #prefix>
                        <span class="color-000">排序：</span>
                    </template>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="typeVal1" placeholder="Select" style="width: 200px">
                    <template #prefix>
                        <span class="color-000">广告平台标签：</span>
                    </template>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="typeVal1" placeholder="Select" style="width: 200px">
                    <template #prefix>
                        <span class="color-000">消耗：</span>
                    </template>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input placeholder="请输入内容" style="width: 200px">
                    <template #prefix>
                        <span class="color-000">作者：</span>
                    </template>
                </el-input>
                <el-select v-model="typeVal1" placeholder="Select" style="width: 140px" class="classify">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="w-200 classify">
                    <el-date-picker v-model="datearr" type="daterange" range-separator="To" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </div>
            </div>
            <el-button type="primary" plain class="ml-12">查询</el-button>
            <el-button class="ml-12">重置</el-button>
        </div>
    </section>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const datearr = ref([])

const tagIndex = ref(0);
const typeVal1 = ref(1);
const tags = ref([
    { name: '全部', value: 1 },
    { name: '达人成片', value: 2 },
    { name: '草本初色内衣', value: 3 },
    { name: '短视频推广', value: 4 },
    { name: '直播', value: 5 },
])
const tags2 = ref([
    { name: '全部', value: 1 },
    { name: '达人成片', value: 2 },
    { name: '草本初色内衣', value: 3 },
    { name: '短视频推广', value: 4 },
    { name: '直播', value: 5 },
    { name: '短视频推广', value: 6 },
    { name: '直播', value: 7 },
    { name: '短视频推广', value: 8 },
    { name: '直播', value: 9 },
])

const isExpanded = ref(false)
const displayList = computed(() => {
    return isExpanded.value ? tags2.value : tags2.value.slice(0, 5)
})

const options = ref([
    { value: 1, label: '黄金糕' },
    { value: 2, label: '双皮奶' },
    { value: 3, label: '蚵仔煎' },
    { value: 4, label: '龙须面' },
    { value: 5, label: '北京烤鸭' },
])
</script>

<style scoped lang="scss">
.el-divider--horizontal {
    margin: 14px 0;
    border-color: #f5f5f5;
}

.active {
    background-color: rgba(var(--main-color), 0.1);
}
</style>