<template>
    <el-dialog v-model="showDialog" title="添加会员" top="10vh" @closed="resetHandle">
        <div class="height_auto" style="height: 400px;">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
                <el-form-item label="用户头像">
                    <UploadImg ref="UploadImgRef" @success="e => form.headImg = e" />
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入电话号码"
                        @input="phoneInput($event, 'phone')"></el-input>
                </el-form-item>
                <el-form-item label="会员生日">
                    <el-date-picker v-model="form.birthDay" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        placeholder="请选择会员生日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.sex">
                        <el-radio-button label="男" :value="1"></el-radio-button>
                        <el-radio-button label="女" :value="0"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="账户积分">
                    <el-input v-model="form.accountPoints" placeholder="请输入账户积分"
                        @input="phoneInput($event, 'accountPoints')"></el-input>
                </el-form-item>
                <el-form-item label="钱包余额">
                    <el-input v-model="form.amount" placeholder="请输入钱包余额"
                        @input="phoneInput($event, 'amount')"></el-input>
                </el-form-item>
                <el-form-item label="是否会员">
                    <el-radio-group v-model="form.isVip">
                        <el-radio-button label="否" :value="0"></el-radio-button>
                        <el-radio-button label="是" :value="1"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="footer">
            <div class="btn">
                <el-button style="width: 100%;" @click="closeHandle">取消</el-button>
            </div>
            <div class="btn">
                <el-button type="primary" style="width: 100%;" @click="confirmHandle">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import UploadImg from '@/components/uploadImg.vue'
import { addShopUser } from '@/api/account.js'
import { ElMessage } from 'element-plus'
import { inputFilterInt, regPhone, inputFilterFloat } from '@/utils/index.js'

const emits = defineEmits(['success'])

const UploadImgRef = ref(null)
const showDialog = ref(false)
const formRef = ref(null)

const form = ref({
    headImg: '', // 用户头像
    nickName: '', // 用户昵称
    phone: '', // 电话号码
    birthDay: '', // 会员生日
    sex: '', // 0-女 1男
    accountPoints: '', // 账户积分
    amount: '', // 钱包余额
    isVip: 0, // 是否会员
})

const rules = ref({
    nickName: [
        {
            required: true,
            message: '请输入用户昵称',
            trigger: 'blur',
        }
    ],
    phone: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入电话号码'))
                } else if (!regPhone(value)) {
                    return callback(new Error('请输入正确的电话号码'))
                } else {
                    callback()
                }
            },
            trigger: 'blur',
        }
    ]
})

const resetForm = ref({})

function phoneInput(e, key) {
    if (key == 'amount') {
        setTimeout(() => {
            form.value[key] = inputFilterFloat(e)
        }, 50)
    } else {
        setTimeout(() => {
            form.value[key] = inputFilterInt(e)
        }, 50)
    }
}

// 提交
function confirmHandle() {
    formRef.value.validate(async valid => {
        try {
            if (valid) {
                await addShopUser(form.value)
                ElMessage.success('添加成功')
                closeHandle()
                emits('success')
            }
        } catch (error) {
            console.log(error);
        }
    })
}

function closeHandle() {
    showDialog.value = false
}

function resetHandle() {
    form.value = { ...resetForm.value }
}

function show() {
    showDialog.value = true

    setTimeout(() => {
        UploadImgRef.value.init()
    }, 50)
}

defineExpose({
    show
})

onMounted(() => {
    resetForm.value = { ...form.value }
})
</script>

<style scoped lang="scss">
.footer {
    display: flex;
    gap: var(--el-font-size-base);
    padding-top: var(--el-font-size-base);

    .btn {
        flex: 1;
    }
}
</style>