<template>
    <div class="search-table">
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="term" label="搜索词" />
            <el-table-column prop="searchCount" label="搜索次数" sortable />
            <el-table-column prop="cartCount" label="加购人数" sortable />
            <el-table-column prop="favCount" label="商品收藏人数" sortable />
            <el-table-column prop="payCount" label="支付买家数" sortable />
            <el-table-column
                prop="conversionRate"
                label="支付转化率"
                sortable
            />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button
                        link
                        type="primary"
                        @click="$emit('view-trend', scope.row)"
                        >[趋势]</el-button
                    >
                    <el-button
                        link
                        type="warning"
                        @click="$emit('view-effect', scope.row)"
                        >[商品效果]</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
    defineProps({
        tableData: {
            type: Array,
            default: () => []
        }
    });

    defineEmits(['view-trend', 'view-effect']);
</script>

<style scoped>
    .search-table {
        margin-top: 20px;
    }
</style>
