<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.name" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入收货人名称" />
            <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="收货人名称" prop="name" />

            <el-table-column align="center" min-width="100px" label="手机号码" prop="tel" />

            <el-table-column align="center" min-width="300px" label="区域地址">
                <template #default="scope">
                    {{ scope.row.province + scope.row.city + scope.row.county }}
                </template>
            </el-table-column>

            <el-table-column align="center" min-width="300px" label="详细地址" prop="addressDetail" />

            <el-table-column align="center" min-width="80px" label="默认" prop="isDefault">
                <template #default="scope">
                    {{ scope.row.isDefault ? '是' : '否' }}
                </template>
            </el-table-column>

        </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 { listAddress } 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,
    name: undefined,
    userId: undefined,
    sort: 'add_time',
    order: 'desc'
})
let downloadLoading = ref(false)

let getList = () => {
    listLoading.value = true
    listAddress(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 = ['id', 'userId', 'name', 'tel', 'province', 'city', 'county', 'addressDetail', 'isDefault']
    //     excel.export_json_to_excel2(tHeader, list, filterVal, '用户地址信息')
    //     downloadLoading.value = false
    //   })
}
</script>
