<template>
    <div class="container">
        <Breadcrumb :items="['网站管理', '用户管理']" />

        <a-card title="用户管理">
            <a-row>
                <a-col :flex="1">
                    <a-form :model="queryData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="left">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                <a-form-item field="user_uuid" label="UUID">
                                    <a-input v-model="queryData.user_uuid" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="email" label="用户邮箱">
                                    <a-input v-model="queryData.email" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="username" label="用户名">
                                    <a-input v-model="queryData.username" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="nickname" label="昵称">
                                    <a-input v-model="queryData.nickname" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
                <a-divider style="height: 84px" direction="vertical" />
                <a-col :flex="'86px'" style="text-align: right">
                    <a-space direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon>
                                <icon-search />
                            </template>
                            搜索
                        </a-button>
                        <a-button @click="reset">
                            <template #icon>
                                <icon-refresh />
                            </template>
                            重置
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>

            <a-table :data="data" :bordered="false" hoverable column-resizable class="table" :loading="loading"
                :columns="columns" :pagination="{
                    showPageSize: true,
                    showJumper: true,
                    showTotal: true,
                    pageSize: pagination.pagesize,
                    current: pagination.current,
                    total: pagination.total
                }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
                <template #username="{ record }">
                    <a-avatar :size="35">
                        <img :alt="record.username ?? ''"
                            :src="record.avatar ?? 'https://lepao-cloud.xxoo365.top/view.php/25aa126dc406974ff3579a99a2c6501a.png'" />
                    </a-avatar>
                    {{ record.username }}
                </template>
                <template #registTime="{ record }">
                    {{ stramptoTime(record.registTime) }}
                </template>
                <template #lastTime="{ record }">
                    {{ stramptoTime(record.lastTime ?? record.registTime) }}
                </template>
                <template #optional="{ record }">
                    <a-button @click="changeCount(record)">更改次数</a-button>
                </template>
            </a-table>
        </a-card>
    </div>

    <a-modal v-model:visible="visible" title="编辑账号" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
        :ok-loading="ok_loading" esc-to-close closable>
        <a-form :model="change_lepao_count">
            <a-form-item field="userid" label="用户UUID">
                <a-input v-model="change_lepao_count.userid" disabled />
            </a-form-item>
            <a-form-item field="lepao_count" label="乐跑次数">
                <a-input-number v-model="change_lepao_count.lepao_count" :step="1" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { adminGetUserList, adminChangeLepaoCount } from '@/api/user'
import { Notification, Message } from '@arco-design/web-vue'

const visible = ref(false)
const ok_loading = ref(false)
const change_lepao_count = reactive({
    userid: '',
    lepao_count: 0
})

const queryData = reactive({
    user_uuid: '',
    email: '',
    username: '',
    nickname: '',
})

const pagination = reactive({
    total: 0,
    current: 1, // 默认从第1页开始
    pagesize: 20
})

const loading = ref(false)
const data = ref([])

const columns = [

    {
        title: 'UUID',
        dataIndex: 'uuid',
    }, {
        title: '用户名',
        slotName: 'username',
    }, {
        title: '昵称',
        dataIndex: 'nickname',
    }, {
        title: '邮箱',
        dataIndex: 'email',
    },
    {
        title: '登陆方式',
        dataIndex: 'social_type',
    }, {
        title: '注册时间',
        slotName: 'registTime'
    }, {
        title: '上次登录时间',
        slotName: 'lastTime'
    }, {
        title: '剩余乐跑次数',
        dataIndex: 'lepao_count',
    }, {
        title: '操作',
        slotName: 'optional'
    }]

const search = () => {
    pagination.current = 1
    getUserList()
}

const reset = () => {
    queryData.user_uuid = ''
    queryData.email = ''
    queryData.username = ''
    queryData.nickname = ''
    getUserList()
}

const getUserList = async () => {
    try {
        loading.value = true
        const reqData = {
            ...queryData,
            pagesize: pagination.pagesize,
            current: pagination.current
        }
        const res = await adminGetUserList(reqData)
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取路径数据失败！',
                content: res?.msg ?? '请稍后再试'
            })

        data.value = res.data
        pagination.total = res.pagination.total
    } catch (error) {
        Notification.error({
            title: '获取路径数据失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

const changeCount = (item) => {
    if (item) {
        change_lepao_count.userid = item.uuid
        change_lepao_count.lepao_count = item.lepao_count
    }
    else return
    visible.value = true
}

const handleBeforeOk = async (done) => {
    try {
        ok_loading.value = true

        let data = {
            ...change_lepao_count
        }

        const res = await adminChangeLepaoCount(data)
        if (!res || res.code !== 0) {
            Notification.error({
                title: '保存乐跑账号失败！',
                content: res?.msg ?? '请稍后再试'
            })
            return false
        }

        Message.success('保存成功！')
        done()
        getUserList()
    } catch (error) {
        Notification.error({
            title: '保存乐跑账号失败！',
            content: error.message || '请稍后再试'
        })
        return false
    } finally {
        ok_loading.value = false
    }
}

const handleCancel = () => {
    visible.value = false;
}

// 分页 - 页码变化
const handlePageChange = (page) => {
    pagination.current = page
    getUserList()
}

// 分页 - 每页条数变化
const handlePageSizeChange = (size) => {
    pagination.pagesize = size
    pagination.current = 1 // 页大小变化后回到第一页
    getUserList()
}

onMounted(() => {
    getUserList()
})

const stramptoTime = (time) => {
    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

</script>

<style scoped>
.container {
    padding: 0 20px 20px 20px;
}

.table {
    margin-top: 15px;
}
</style>