<template>
    <common-table
        ref="pageRef"
        :pageConfig="pageConfig"
        :columns="columns"
        :tools="false"
        :bodyStyle="{ padding: 0 }"
    />
</template>

<script setup>
    import { ref, reactive, watch } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';

    defineOptions({ name: 'SearchLog' });

    const props = defineProps({
        row: {
            type: Object,
            default() {
                return {};
            }
        }
    });
    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        fileName: '搜索记录',
        cacheKey: 'searchLogTable',
        pageUrl: '/shop/shopSearch/searchLog'
    });

    watch(
        () => props.row,
        (row) => {
            if (!row || (row && !row.id)) return;
            pageConfig.pageUrl = `/shop/shopSearch/searchLog?userId=${row.id}`;
            pageRef.value?.reload();
        },
        {
            immediate: true,
            deep: true
        }
    );

    /** 表格列配置 */
    const columns = ref([
        { label: '序号', type: 'index', align: 'center', width: 60 },
        { label: '搜索词', prop: 'searchWord', align: 'center' },
        { label: '点击商品', prop: 'clientBookName', align: 'center' },
        { label: '搜索时间', prop: 'createTime', align: 'center' },
        {
            label: '是否加购',
            prop: 'addCard',
            align: 'center',
            formatter: (row) => (row.addCard === 1 ? '是' : '否')
        },
        {
            label: '是否下单',
            prop: 'addOrder',
            align: 'center',
            formatter: (row) => (row.addOrder === 1 ? '是' : '否')
        }
    ]);

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }
</script>
