<script setup>
import {ref} from "vue";

const visible = ref(false);
</script>

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

    <a-modal
        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 placeholder="ID"></a-input>
                </a-form-item>
                <a-form-item label="昵称">
                    <a-input placeholder="昵称"></a-input>
                </a-form-item>
                <a-form-item label="头像">
                    <div class="flex flex-wrap gap-[12px]">
                        <a-image
                            width="62px"
                            height="62px"
                            src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp">
                        </a-image>
                        <a-image
                            width="62px"
                            height="62px"
                            src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp">
                        </a-image>
                    </div>
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input placeholder="手机号"></a-input>
                </a-form-item>
                <a-form-item label="微信号">
                    <a-input placeholder="微信号"></a-input>
                </a-form-item>
                <a-form-item label="状态">
                    <a-input placeholder="状态"></a-input>
                </a-form-item>
                <a-form-item label="邀请人">
                    <a-input placeholder="邀请人"></a-input>
                </a-form-item>
                <a-form-item label="上上">
                    <a-input placeholder="上上"></a-input>
                </a-form-item>
                <a-form-item label="上上上">
                    <a-input placeholder="上上上"></a-input>
                </a-form-item>
                <a-form-item label="等级">
                    <a-input placeholder="等级"></a-input>
                </a-form-item>
                <a-form-item label="分佣比例">
                    <div class="flex gap-[12px]">
                        <a-input placeholder="一级">
                            <template #prefix>一级</template>
                        </a-input>
                        <a-input placeholder="二级">
                            <template #prefix>一级</template>
                        </a-input>
                        <a-input placeholder="三级">
                            <template #prefix>一级</template>
                        </a-input>
                    </div>
                </a-form-item>
                <a-form-item label="入驻日期">
                    <a-date-picker show-time></a-date-picker>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
