<script setup>
import { ref, reactive } from 'vue'
import {apiCustomerUser} from '@/api/customer'

const tableColumns = [
    {
        label:'手机号',
        key:'Mobile',
        sortable:false
    },{
        label:'反馈内容',
        key:'Message',
        sortable:false
    },{
        label:'反馈时间',
        key:'CreatedTime',
        sortable:true
    }
]

const tableQuery = reactive({
    /* keyWord:'', */
    currentPage:1,
    pageSize:10,
    totals:0,
    sortType:''
})
const tableLoading = ref(false)
const tableData = ref([])
function getTableData(){
    tableLoading.value = true
    apiCustomerUser.getFeedbackList({
        PageSize:tableQuery.pageSize,
        CurrentIndex:tableQuery.currentPage,
        SortType:tableQuery.sortType
    }).then(res=>{
        tableLoading.value = false
        if(res.Ret!==200) return 
        tableData.value = res.Data.List||[]
        tableQuery.totals = res.Data.Paging.Totals||0
    })
}
getTableData()
function handlePageChange(page){
    tableQuery.currentPage = page
    getTableData()
}
function handleSortChange({order,prop}){
    tableQuery.sortType = order==='ascending'?'asc':'desc'
    getTableData()
}
</script>

<template>
    <div class="feedback-wrap">
        <div class="table-box">
            <el-table stripe border :data="tableData" @sort-change="handleSortChange" element-loading-text="数据加载中..." v-loading="tableLoading">
                <el-table-column 
                    align="center"
                    v-for="column in tableColumns" :key="column.key"
                    :prop="column.key" :label="column.label" :sortable="column.sortable"/>
            </el-table>
            <el-pagination
                background
                layout="total,prev,pager,next,jumper"
                :current-page="tableQuery.currentPage"
                :page-size="tableQuery.pageSize"
                :total="tableQuery.totals"
                @current-change="handlePageChange"
                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
            />
        </div>
    </div>
</template>

<style scoped lang="scss">
.feedback-wrap{
    height: calc(100vh - 108px);
}
</style>
