<template>
    <ele-page>
        <ele-card :body-style="{ padding: '20px' }">
            <!-- Search Filter Bar -->
            <div class="filter-container">
                <el-select
                    v-model="searchType"
                    placeholder="搜索词分类"
                    style="width: 120px; margin-right: 15px"
                >
                    <el-option label="搜索词分类" value="category" />
                </el-select>

                <div class="date-ranges">
                    <el-button-group>
                        <el-button type="primary">实时</el-button>
                        <el-button>昨日</el-button>
                        <el-button>7日</el-button>
                        <el-button>15日</el-button>
                        <el-button>30日</el-button>
                    </el-button-group>
                </div>

                <div class="date-picker-wrapper">
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="选择时间"
                        end-placeholder="选择时间"
                        size="default"
                    />
                </div>

                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
            </div>

            <!-- Overview Stats -->
            <search-overview />

            <!-- Data Table -->
            <search-table
                :table-data="tableData"
                @view-trend="handleViewTrend"
                @view-effect="handleViewEffect"
            />

            <!-- Trend Modal -->
            <search-trend-modal
                v-model="trendModalVisible"
                :row-data="currentRow"
            />

            <!-- Effect Modal -->
            <search-effect-modal
                v-model="effectModalVisible"
                :row-data="currentRow"
            />
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import SearchOverview from './components/SearchOverview.vue';
    import SearchTable from './components/SearchTable.vue';
    import SearchTrendModal from './components/SearchTrendModal.vue';
    import SearchEffectModal from './components/SearchEffectModal.vue';

    const searchType = ref('category');
    const dateRange = ref([]);

    const trendModalVisible = ref(false);
    const effectModalVisible = ref(false);
    const currentRow = ref(null);

    const tableData = ref([
        {
            term: '中医基础理论',
            searchCount: 23,
            cartCount: 5,
            favCount: 0,
            payCount: 2,
            conversionRate: '8.70%'
        },
        {
            term: '大学语文',
            searchCount: 6,
            cartCount: 3,
            favCount: 1,
            payCount: 0,
            conversionRate: '0.00%'
        },
        {
            term: '马克思主义发展史',
            searchCount: 6,
            cartCount: 3,
            favCount: 0,
            payCount: 3,
            conversionRate: '50.00%'
        },
        {
            term: '高等数学',
            searchCount: 15,
            cartCount: 8,
            favCount: 2,
            payCount: 5,
            conversionRate: '33.33%'
        },
        {
            term: 'Python编程',
            searchCount: 12,
            cartCount: 4,
            favCount: 3,
            payCount: 1,
            conversionRate: '8.33%'
        }
    ]);

    const handleViewTrend = (row) => {
        currentRow.value = row;
        trendModalVisible.value = true;
    };

    const handleViewEffect = (row) => {
        currentRow.value = row;
        effectModalVisible.value = true;
    };
</script>

<style scoped lang="scss">
    .filter-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .date-ranges {
            margin-right: 15px;
        }

        .date-picker-wrapper {
            margin-right: 15px;
        }
    }
</style>
