<template>
    <section class="section2-card round-12 p-16 bg-fff">
        <div class="section2-head mb-24">
            <div class="fs-20 fw-700 color-000">全平台资源精准搜索</div>
            <p class="fs-14 color-666">支持成片、素材、脚本、图片与音频分类检索</p>
        </div>
        <div class="search-row flex items-center gap-12 mb-18">
            <el-input v-model="keyword" placeholder="搜成片、搜素材、搜脚本、搜图片、搜音频" class="w-full input-with-select" clearable
                @keyup.enter="onSearch">
                <template #prepend>
                    <el-select v-model="typeVal" placeholder="Select" style="width: 100px">
                        <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>
            </el-input>
            <el-button type="primary" class="fs-16 px-24 h-48" @click="onSearch">搜索成片</el-button>
        </div>
        <div class="hot-keywords flex flex-wrap gap-12 items-center">
            <span class="color-666">热搜词：</span>
            <span class="keyword-tag round-4 px-10 py-2 bg-eee">美妆KOC口播</span>
            <span class="keyword-tag round-4 px-10 py-2 bg-eee">高转化服装Lookbook</span>
            <span class="keyword-tag round-4 px-10 py-2 bg-eee">智能抠水印示范</span>
            <span class="keyword-tag round-4 px-10 py-2 bg-eee">3D数码特效</span>
            <span class="keyword-tag round-4 px-10 py-2 bg-eee">爆款短视频裂变</span>
            <span class="keyword-tag round-4 px-10 py-2 bg-eee">数码产品细节特写</span>
        </div>
    </section>
</template>

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

const keyword = ref('');
const typeVal = ref(1);
const options = ref([
    { value: 1, label: '成片' },
    { value: 2, label: '素材' },
    { value: 3, label: '脚本' },
    { value: 4, label: '图片' },
    { value: 5, label: '音频' },
]);

function onSearch() {
    console.log('搜索关键词:', keyword.value);
}

</script>

<style lang="scss" scoped>
.search-row :deep(.el-input__inner) {
    border-radius: 16px;
    font-size: 14px;
}

:deep(.input-with-select) {
    .el-input-group__prepend {
        background-color: #fff;
    }
}
:deep(.el-select__wrapper) {
    height: 48px;
}

.search-row :deep(.el-input__inner::placeholder) {
    color: #9fa6b8;
}

.keyword-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
</style>
