<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入用户ID" />
            <el-input v-model="listQuery.valueId" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品ID" />
            <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">查找</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="download"
                @click="handleDownload">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column align="center" width="100px" label="收藏ID" prop="id" sortable />

            <el-table-column align="center" min-width="100px" label="用户ID" prop="userId" />

            <el-table-column align="center" min-width="100px" label="商品ID" prop="valueId" />

            <el-table-column align="center" min-width="100px" label="添加时间" prop="addTime" />

        </el-table>
        <litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
            @current-change="currentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { listCollect } from '@/services/api/user/user'
import LitemallPage from "@/components/pagination/litemallPage.vue";

let list = ref(null as any)
let total = ref(0)
let listLoading = ref(true)
let listQuery = ref({
    page: 1,
    limit: 10,
    userId: undefined,
    valueId: undefined,
    sort: 'add_time',
    order: 'desc'
})
let downloadLoading = ref(false)

let getList = () => {
    listLoading.value = true
    listCollect(listQuery.value).then((res: any) => {
        list.value = res.data.list
        total.value = res.data.total
        listLoading.value = false
    }).catch(() => {
        list.value = []
        total.value = 0
        listLoading.value = false
    })
}

getList()

let sizeChange = (val: number) => {
    listQuery.value.limit = val
    getList()
}

let currentChange = (val: number) => {
    listQuery.value.page = val
    getList()
}

let handleFilter = () => {
    listQuery.value.page = 1
    getList()
}

let handleDownload = () => {
    // downloadLoading.value = true
    // import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = ['用户ID', '商品ID', '添加时间']
    //     const filterVal = ['userId', 'valueId', 'addTime']
    //     excel.export_json_to_excel2(tHeader, list, filterVal, '用户收藏信息')
    //     downloadLoading.value = false
    // })
}

</script>
