<template>
    <div>
        <div class="hot-search">
            <div class="hot-search-type">
                <el-button :type="activeType === 'ai' ? 'primary' : 'default'" @click="handleFilter('ai')">AI
                    热榜</el-button>
                <el-button :type="activeType === 'low' ? 'primary' : 'default'"
                    @click="handleFilter('low')">低粉高爆</el-button>
                <el-button :type="activeType === 'create' ? 'primary' : 'default'"
                    @click="handleFilter('create')">创作榜单</el-button>
            </div>
            <div class="hot-search-filter">
                <span>关键词</span>
                <el-input v-model="query.keyword" placeholder="关键词搜索" style="width: 200px;" />
                <span>阅读量</span>
                <el-select v-model="query.readCount" placeholder="请选择阅读量" style="width: 200px;">
                    <el-option label="1000-10000" value="1000-10000"></el-option>
                    <el-option label="10000-100000" value="10000-100000"></el-option>
                    <el-option label="100000-1000000" value="100000-1000000"></el-option>
                </el-select>
                <span>发布时间</span>
                <el-date-picker style="width: 300px;" v-model="date" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
                    @change="handleDateChange" />
                <el-button type="primary" @click="handleFilter">搜索</el-button>
            </div>


        </div>
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="" label="领域" />
            <el-table-column prop="readCount" label="阅读量" />
            <el-table-column prop="publishTime" label="发布时间" />
            <el-table-column prop="action" label="操作" width="150">
                <template #default="scope">
                    <el-link type="primary" @click="handleEdit(scope.row)">AI 改写</el-link>
                    <el-link type="primary" @click="handleEdit(scope.row)">查看原文</el-link>
                    <el-link type="primary" @click="handleEdit(scope.row)">创作灵感</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background v-model:current-page="query.page" v-model:page-size="query.pageSize"
            :page-sizes="[100, 200, 300, 400]" :size="query.pageSize" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const activeType = ref('ai');

const handleFilter = (type) => {
    activeType.value = type;
};

const query = reactive({
    page: 1,
    pageSize: 10,
    keyword: '',
    readCount: '',
    startDate: '',
    endDate: '',
});

const handleDateChange = (value) => {
    query.startDate = value[0];
    query.endDate = value[1];
};

const handleSizeChange = (size) => {
    pageSize.value = size;
};

const handleCurrentChange = (page) => {
    query.page = page;
};

onMounted(() => {
    handleFilter(activeType.value);
});

</script>
<style scoped lang="scss">
.hot-search {

    .hot-search-type {
        margin-bottom: 20px;

    }

    .hot-search-filter {
        line-height: 36px;

        span {
            margin-right: 10px;
            font-size: 14px;
        }

        .el-input {
            margin-right: 10px;
        }

        .el-select {
            margin-right: 10px;
        }

        .el-button {
            margin-left: 10px;
        }
    }
}

.el-table {
    margin-top: 20px;
}

.el-pagination {
    margin-top: 20px;
}

.el-link+ .el-link {
    margin-left: 10px;
}
</style>