<script setup>
import {reactive, ref, watch} from "vue";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";
import XSelect from "../../../../../components/XSelect/index.vue";

const emits = defineEmits(['success']);
const visible = ref(false);
const detail = reactive({});
const {id} = defineProps({
    id: {
        type: Number,
        default: null,
    }
});

watch(
    () => visible.value,
    (val) => {
        if (val) Api.admin.userDetail(id).then(({data}) => {
            Object.assign(detail, data);
            detail.one_ratio = Number(detail.one_ratio);
            detail.two_ratio = Number(detail.two_ratio);
            detail.three_ratio = Number(detail.three_ratio);
        });
    }
)

const getState = async () => {
    return {
        data: [
            {
                id: 0,
                name: '禁用'
            },
            {
                id: 1,
                name: '可用'
            },
        ]
    }
}

const success = async () => {
    const {msg} = await Api.admin.userEdit(detail);
    Message.success(msg);
    emits('success');
}
</script>

<template>
    <a-link :hoverable="false" @click="visible=true">编辑</a-link>

    <a-modal
        @ok="success"
        ok-text="确定修改"
        title="编辑"
        title-align="start"
        v-model:visible="visible">
        <div class="max-h-[500px] overflow-auto">
            <a-form layout="vertical">
                <a-form-item label="ID">
                    <a-input :model-value="detail.uid" disabled placeholder="ID"></a-input>
                </a-form-item>
                <a-form-item label="昵称">
                    <a-input :model-value="detail.nickname" disabled placeholder="昵称"></a-input>
                </a-form-item>
                <a-form-item label="头像">
                    <div class="flex flex-wrap gap-[12px]">
                        <a-image
                            width="62px"
                            height="62px"
                            :src="detail.avatar">
                        </a-image>
                    </div>
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input v-model:model-value="detail.mobile" placeholder="手机号"></a-input>
                </a-form-item>
                <a-form-item label="微信号">
                    <a-input v-model:model-value="detail.wechat" placeholder="微信号"></a-input>
                </a-form-item>
                <a-form-item label="状态">
                    <x-select v-model:model-value="detail.status" :api="getState" init></x-select>
                </a-form-item>
                <a-form-item label="邀请人">
                    <a-input v-model:model-value="detail.puid" placeholder="邀请人"></a-input>
                </a-form-item>
                <a-form-item label="上上">
                    <a-input :model-value="detail.second_person" disabled placeholder="上上"></a-input>
                </a-form-item>
                <a-form-item label="上上上">
                    <a-input :model-value="detail.three_person" disabled placeholder="上上上"></a-input>
                </a-form-item>
                <a-form-item label="等级">
                    <x-select v-model:model-value="detail.level_id" :api="Api.admin.userLevel"
                              placeholder="等级" init></x-select>
                </a-form-item>
                <a-form-item label="分佣比例">
                    <div class="flex gap-[12px]">
                        <a-input-number v-model:model-value="detail.one_ratio" placeholder="一级" :precision="2">
                            <template #prefix>一级</template>
                            <template #suffix>%</template>
                        </a-input-number>
                        <a-input-number v-model:model-value="detail.two_ratio" placeholder="二级" :precision="2">
                            <template #prefix>二级</template>
                            <template #suffix>%</template>
                        </a-input-number>
                        <a-input-number v-model:model-value="detail.three_ratio" placeholder="三级" :precision="2">
                            <template #prefix>三级</template>
                            <template #suffix>%</template>
                        </a-input-number>
                    </div>
                </a-form-item>
                <a-form-item label="入驻日期">
                    <a-input :model-value="detail.createtime" disabled placeholder="入驻日期"></a-input>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
