<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入用户名" />
            <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入用户Id" />
            <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入手机号" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-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" label="用户昵称" prop="nickname" />

            <el-table-column align="center" label="用户头像" width="80">
                <template #default="scope">
                    <el-avatar :src="scope.row.avatar" />
                </template>
            </el-table-column>

            <el-table-column align="center" label="手机号码" prop="mobile" />

            <el-table-column align="center" label="性别" prop="gender">
                <template #default="scope">
                    <el-tag>{{ genderDic[scope.row.gender] }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="生日" prop="birthday" />

            <el-table-column align="center" label="用户等级" prop="userLevel">
                <template #default="scope">
                    <el-tag>{{ levelDic[scope.row.userLevel] }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="状态" prop="status">
                <template #default="scope">
                    <el-tag>{{ statusDic[scope.row.status] }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleDetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" /> -->
        <!-- 用户编辑对话框 -->
        <el-dialog :visible.sync="userDialogVisible" title="用户编辑">
            <el-form ref="userDetail" :model="userDetail" status-icon label-position="left" label-width="100px"
                style="width: 400px; margin-left:50px;">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="userDetail.username" :disabled="true" />
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickname">
                    <el-input v-model="userDetail.nickname" />
                </el-form-item>
                <el-form-item label="用户手机" prop="mobile">
                    <el-input v-model="userDetail.mobile" />
                </el-form-item>
                <el-form-item label="用户性别" prop="gender">
                    <el-select v-model="userDetail.gender" placeholder="请选择">
                        <el-option v-for="(item, index) in genderDic" :key="index" :label="item" :value="index" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户等级" prop="userLevel">
                    <el-select v-model="userDetail.userLevel" placeholder="请选择">
                        <el-option v-for="(item, index) in levelDic" :key="index" :label="item" :value="index" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="userDetail.status" placeholder="请选择">
                        <el-option v-for="(item, index) in statusDic" :key="index" :label="item" :value="index" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer class="dialog-footer">
                <el-button @click="userDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleUserUpdate">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { fetchList, userDetails, updateUser } from '@/services/api/user/user'

let list = ref(null as any)
let total = ref(0)
let listLoading = ref(true)
let listQuery = reactive({
    page: 1,
    limit: 20,
    username: undefined,
    mobile: undefined,
    userId: undefined,
    sort: 'add_time',
    order: 'desc'
})

let downloadLoading = ref(false)
let genderDic = ref(['未知', '男', '女'])
let levelDic: ['普通用户', 'VIP用户', '高级VIP用户']
let statusDic = ref(['可用', '禁用', '注销'])
let userDialogVisible = ref(false)
let userDetail = reactive({
    // username: '',
    // nickname: '',
    // mobile: '',
    // gender: '',
    // userLevel: '',
    // status: ''
} as any)

let handleFilter = () => {
    listQuery.page = 1
    getList()
}
let handleDownload = () => {
    //   downloadLoading.value = true
    //   import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = ['用户名', '手机号码', '性别', '生日', '状态']
    //     const filterVal = ['username', 'mobile', 'gender', 'birthday', 'status']
    //     excel.export_json_to_excel2(tHeader, list, filterVal, '用户信息')
    //     downloadLoading.value = false
    //   })
}
let handleDetails = (row: any) => {
    userDetail = row
    userDialogVisible.value = true
}
let handleUserUpdate = () => {
    updateUser(userDetail)
        .then((res: any) => {
            userDialogVisible.value = false
            ElMessage({
                type: 'success',
                message: '更新用户成功'
            })
        })
        .catch((res: any) => {
            ElMessage({
                type: 'error',
                message: res.data.errmsg
            })
        })
}

let getList = () => {
    listLoading.value = true
    if (listQuery.userId) {
        userDetails(listQuery.userId).then(res => {
            list.value = [];
            if (res.data.data) {
                list.value.push(res.data.data)
                total.value = 1
                listLoading.value = false
            } else {
                list.value = []
                total.value = 0
                listLoading.value = false
            }
        }).catch(() => {
            list.value = []
            total.value = 0
            listLoading.value = false
        })
    } else {
        fetchList(listQuery).then((res: any) => {
            list = res.data.data.list
            total = res.data.data.total
            console.log(res);
            
            listLoading.value = false
        }).catch(() => {
            list.value = []
            total.value = 0
            listLoading.value = false
        })
    }
}

getList()
</script>

<style lang="scss" scoped>
</style>


