<template>
    <el-dialog
        v-model="visible"
        :title="title"
        width="800px"
        @close="handleClose"
    >
        <div class="modal-content">
            <!-- Product Effect Section -->
            <div class="section">
                <div class="table-wrapper">
                    <el-table :data="productData" border size="small">
                        <el-table-column label="引导商品效果" min-width="200">
                            <template #default="{ row }">
                                <div class="product-info">
                                    <img :src="row.image" class="product-img" />
                                    <div class="product-details">
                                        <div class="name">{{ row.name }}</div>
                                        <div class="meta"
                                            >ISBN: {{ row.isbn }}</div
                                        >
                                        <div class="meta"
                                            >价格: {{ row.price }} 库存:
                                            {{ row.stock }}</div
                                        >
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="visitors"
                            label="带来的访客数"
                            sortable
                            width="120"
                        />
                        <el-table-column
                            prop="views"
                            label="带来的浏览量"
                            sortable
                            width="120"
                        />
                        <el-table-column
                            prop="buyers"
                            label="引导下单买家数"
                            sortable
                            width="140"
                        />
                        <el-table-column
                            prop="conversion"
                            label="引导下单转化率"
                            sortable
                            width="140"
                        />
                    </el-table>

                    <div class="pagination">
                        <el-pagination
                            layout="total, prev, pager, next, jumper"
                            :total="100"
                            small
                        />
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
    import { ref, computed, watch } from 'vue';
    import { Goods } from '@element-plus/icons-vue';

    const props = defineProps({
        modelValue: Boolean,
        rowData: Object
    });

    const emit = defineEmits(['update:modelValue']);

    const visible = ref(false);

    watch(
        () => props.modelValue,
        (val) => {
            visible.value = val;
        }
    );

    const handleClose = () => {
        emit('update:modelValue', false);
    };

    const title = computed(() => {
        return props.rowData
            ? `搜索词详情: ${props.rowData.term} - 商品效果`
            : '商品效果详情';
    });

    // Mock Product Data
    const productData = ref([
        {
            image: 'https://via.placeholder.com/60',
            name: '马克思主义基本原理',
            isbn: '9787123654587',
            price: '22.12',
            stock: 5,
            visitors: 23,
            views: 33,
            buyers: 2,
            conversion: '8.7%'
        },
        {
            image: 'https://via.placeholder.com/60',
            name: '马克思主义基本原理',
            isbn: '9787123654587',
            price: '22.12',
            stock: 5,
            visitors: 23,
            views: 33,
            buyers: 2,
            conversion: '8.7%'
        },
        {
            image: 'https://via.placeholder.com/60',
            name: '马克思主义基本原理',
            isbn: '9787123654587',
            price: '22.12',
            stock: 5,
            visitors: 23,
            views: 33,
            buyers: 2,
            conversion: '8.7%'
        }
    ]);
</script>

<style scoped lang="scss">
    .product-info {
        display: flex;
        align-items: center;

        .product-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            margin-right: 10px;
            border-radius: 4px;
        }

        .product-details {
            .name {
                font-weight: bold;
                color: #333; // Usually green in example but let's stick to standard
                &.green {
                    color: #4caf50;
                } // If needed
                font-size: 14px;
                margin-bottom: 5px;
            }
            .meta {
                font-size: 12px;
                color: #999;
            }
        }
    }

    .pagination {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
    }
</style>
