<template>
    <PagingTable url="/admin/users" :where="where" ref="table">
        <template #filter>
            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="username" label="经销商名" min-width="120" />
        <ElTableColumn prop="name" label="昵称" min-width="120" />
        <ElTableColumn prop="phone" label="手机" min-width="120" />
        <ElTableColumn prop="createdAt" label="注册时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn prop="invitor" label="上级" />
        <ElTableColumn prop="balance" label="余额" />
        <ElTableColumn prop="rate" label="费率" />
        <ElTableColumn prop="send" label="已发送" />
        <ElTableColumn label="操作" align="center" width="300">
            <template #default="{ row }">
                <ElButton plain @click="recharge(row.id)">余额充值</ElButton>
                <ElButton plain @click="rate(row.id)">修改费率</ElButton>
                <ElButton type="primary" size="small" @click="detail(row)">充值记录</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>
    <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
        <ElFormItem prop="username" label="经销商名">
            <ElInput v-model="model.username" placeholder="请输入经销商名" />
        </ElFormItem>
        <ElFormItem prop="name" label="昵称">
            <ElInput v-model="model.name" placeholder="请输入昵称" />
        </ElFormItem>
        <ElFormItem prop="phone" label="手机">
            <ElInput v-model="model.phone" placeholder="请输入手机" />
        </ElFormItem>
        <ElFormItem prop="password" label="密码">
            <ElInput v-model="model.password" placeholder="请输入密码" />
        </ElFormItem>
    </EditDialog>
    <ElDialog v-model="showDetailDialog" title="详情" width="500px">
        <PagingTable url="/balance/records/" :where="{ userId: (selectedRow || {}).id }" :order="{createdAt:'DESC'}"
                     ref="balanceTable" height="50vh">
            <ElTableColumn prop="id" label="#" width="80" />
            <ElTableColumn prop="amount" label="金额" min-width="120" />
            <ElTableColumn prop="createdAt" label="时间" :formatter="timeFormatter" min-width="120" />
        </PagingTable>
    </ElDialog>
</template>
<script setup>
import { ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import EnumSelect from '@/components/EnumSelect.vue'
import { UserRole } from '@/enums'
import { http } from '@/plugins/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import { useUserStore } from '@/stores/user'

const where = ref({ roles: 'user' })
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const { user } = useUserStore()
const rules = {
    username: [{ required: true, message: '请输入经销商名', trigger: 'blur' }],
    name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    roles: [{ required: true, message: '请选择角色', trigger: 'blur' }]
}
const { showEditDialog, onEdit } = setupEditDialog(model)

async function submit() {
    // 经销商
    model.value.roles = ['user']
    // 上级
    model.value.invitor = user.id
    await http.put('/admin/users', model.value)
    ElMessage.success('保存成功')
}

const recharge = async (userId) => {
    ElMessageBox.prompt('请输入充值金额', '余额充值', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: /^\d+(\.\d{1,2})?$/,
        inputErrorMessage: '金额不能超出俩位小数!'
    }).then(async ({ value }) => {
        console.log(userId)
        console.log(value)
        const url = '/balance/recharge/' + userId + '/' + value
        await http.get(url)
        table.value.refresh()
        ElMessage({
            type: 'success',
            message: `充值成功`
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消充值'
        })
    })
}

const rate = async (userId) => {
    ElMessageBox.prompt('请输入最新费率', '修改费率', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: /^\d+(\.\d{1,2})?$/,
        inputErrorMessage: '金额不能超出俩位小数!'
    }).then(async ({ value }) => {
        console.log(userId)
        console.log(value)
        const url = '/balance/updateRate/' + userId + '/' + value
        await http.get(url)
        table.value.refresh()
        ElMessage({
            type: 'success',
            message: `费率修改成功`
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消费率修改'
        })
    })
}

const selectedRow = ref(null)
const showDetailDialog = ref(false)
const balanceTable = ref(null)

function detail(row) {
    selectedRow.value = row
    showDetailDialog.value = true
}

</script>
