<script setup>
import ICON from "../../../../assets/images/avatar.png";
import {onMounted, reactive, ref} from "vue";
import Api from "../../../../api/index.js";
import {baseImage} from "../../../../utils/index.js";
import {Message} from "@arco-design/web-vue";
import {useUserStore} from "../../../../pinia/UserStore/index.js";
import VerificationCode from "../../../../components/VerificationCode/index.vue";
import UploadSlot from "../../../../components/upload/UploadSlot.vue";

const UserStore = useUserStore();
const activeKey = ref('1');
const vo = reactive({
    avatar: null,
    nickname: null,
    wechat: null,
    mobile: null,
    uid: null,
    invite: null,
    password: null,
});
const form = reactive({
    avatar: null,
    nickname: null,
    wechat: null,
    mobile: null,
    uid: null,
    invite: null,
    captcha: null,
    password: null,
    old_mobile: null,
    new_mobile: null,
    old_captcha: null,
    new_captcha: null,
});

const getData = async () => {
    const {data} = await Api.merchant.getBusinessInfo();
    Object.assign(vo, data);
    Object.assign(UserStore.userInfo, vo);
    form.old_mobile = vo.mobile;
    form.mobile = vo.mobile;
    vo.password = '********';
}

const saveNickname = async () => {
    if (!form.nickname || form.nickname === '') {
        Message.warning('昵称不能为空');
        return;
    }
    if (form.nickname.length > 20) {
        Message.warning('昵称非法，请重新输入');
        return;
    }
    const {msg} = await Api.merchant.saveNickname({
        nickname: form.nickname,
    });
    form.nickname = null;
    Message.success(msg);
    await getData();
}

const saveMobile = async () => {
    if (!form.new_mobile || form.new_mobile === '') {
        Message.warning('新手机号不能为空');
        return;
    }
    if (!form.old_captcha || form.old_captcha === '') {
        Message.warning('原手机验证码不能为空');
        return;
    }
    if (!form.new_captcha || form.new_captcha === '') {
        Message.warning('新手机验证码不能为空');
        return;
    }
    const {msg} = await Api.merchant.saveMobile({
        old_mobile: form.old_mobile,
        new_mobile: form.new_mobile,
        old_captcha: form.old_captcha,
        new_captcha: form.new_captcha,
    });
    form.old_mobile = null;
    form.new_mobile = null;
    form.old_captcha = null;
    form.new_captcha = null;
    Message.success(msg);
    await getData();
}

const savePassword = async () => {
    if (!form.captcha || form.captcha === '') {
        Message.warning('验证码不能为空');
        return;
    }
    if (!form.password || form.password === '') {
        Message.warning('请输入新密码');
        return;
    }
    const {msg} = await Api.merchant.savePassword({
        mobile: form.mobile,
        captcha: form.captcha,
        password: form.password,
    });
    form.mobile = null;
    form.captcha = null;
    form.password = null;
    Message.success(msg);
    await getData();
}

const saveWechat = async () => {
    if (!form.wechat || form.wechat === '') {
        Message.warning('微信号不能为空');
        return;
    }
    if (/[^a-zA-Z0-9_-]/.test(form.wechat)) {
        Message.warning('微信号非法，请重新输入');
        return;
    }
    const {msg} = await Api.merchant.saveWechat({
        wechat: form.wechat
    });
    form.wechat = null;
    Message.success(msg);
    await getData();
}

const updateAvatar = async (url) => {
    const {msg} = await Api.merchant.saveAvatar({
        avatar: url,
    });
    Message.success(msg);
    await getData();
}

onMounted(() => {
    getData();
})
</script>

<template>
    <!-- 账号设置 -->
    <div class="mb-[20px]">
        <a-breadcrumb
            :routes="[{path: '/home/personal-center', label: '个人中心'}, {path: '/', label: '账号设置'},]">
        </a-breadcrumb>
    </div>

    <div class="mock-card mb-[20px] py-[30px] flex items-center gap-[60px]">
        <div class="w-[100px] h-[100px] rounded-[50%] relative">
            <div class="!size-full rounded-[50%] overflow-hidden cursor-pointer">
                <a-image width="100%" height="100%" :src="baseImage(vo.avatar)"></a-image>
            </div>
            <UploadSlot @success="updateAvatar">
                <img class="!size-[30px] absolute right-0 bottom-0 cursor-pointer" :src="ICON" alt=""/>
            </UploadSlot>
        </div>

        <a-descriptions align="right" id="descriptions">
            <a-descriptions-item label="昵称" :span="1">
                {{ vo.nickname }}
                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='1'">更改</a-link>
            </a-descriptions-item>
            <a-descriptions-item label="微信号" :span="2">
                {{ vo.wechat }}
                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='4'">更改</a-link>
            </a-descriptions-item>
            <a-descriptions-item label="手机绑定" :span="1">
                {{ vo.mobile }}
                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='2'">更改</a-link>
            </a-descriptions-item>
            <a-descriptions-item label="ID" :span="2">
                {{ vo.uid }}
                <a-link :hoverable="false" class="ml-[20px]">复制</a-link>
            </a-descriptions-item>
            <a-descriptions-item label="账号密码" :span="1">
                {{ vo.password }}
                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='3'">更改</a-link>
            </a-descriptions-item>
            <a-descriptions-item label="邀请码" :span="2">
                {{ vo.invite }}
                <a-link :hoverable="false" class="ml-[20px]">复制</a-link>
            </a-descriptions-item>
        </a-descriptions>
    </div>

    <a-card>
        <a-form
            :label-col-props="{span: 3}"
            :wrapper-col-props="{span: 8, offset: 1}">
            <a-tabs
                v-model:active-key="activeKey"
                type="rounded">
                <a-tab-pane title="更改昵称" key="1">
                    <a-form-item label="新昵称">
                        <a-input v-model:model-value="form.nickname" placeholder="请输入新昵称"></a-input>
                    </a-form-item>
                    <a-form-item class="mt-[40px]">
                        <a-button type="primary" @click="saveNickname">确认更改</a-button>
                    </a-form-item>
                </a-tab-pane>

                <a-tab-pane title="手机绑定" key="2">
                    <a-form-item label="原手机号">
                        <a-input v-model:model-value="form.old_mobile" placeholder="请输入原手机号" disabled></a-input>
                    </a-form-item>
                    <a-form-item label="验证码">
                        <VerificationCode
                            :type="4"
                            :api="Api.merchant.sendSms"
                            :mobile="form.old_mobile"
                            v-model:verification-code="form.old_captcha">
                        </VerificationCode>
                    </a-form-item>
                    <a-form-item label="新手机号">
                        <a-input v-model:model-value="form.new_mobile" placeholder="请输入新手机号"></a-input>
                    </a-form-item>
                    <a-form-item label="验证码">
                        <VerificationCode
                            :type="5"
                            :api="Api.merchant.sendSms"
                            :mobile="form.new_mobile"
                            v-model:verification-code="form.new_captcha">
                        </VerificationCode>
                    </a-form-item>
                    <a-form-item class="mt-[40px]">
                        <a-button type="primary" @click="saveMobile">确认更改</a-button>
                    </a-form-item>
                </a-tab-pane>

                <a-tab-pane title="账号密码" key="3">
                    <a-form-item label="手机号">
                        <a-input v-model:model-value="form.mobile" disabled placeholder="请输入手机号"></a-input>
                    </a-form-item>
                    <a-form-item label="验证码">
                        <VerificationCode
                            :type="3"
                            :api="Api.merchant.sendSms"
                            :mobile="form.mobile"
                            v-model:verification-code="form.captcha">
                        </VerificationCode>
                    </a-form-item>
                    <a-form-item label="新密码">
                        <a-input v-model:model-value="form.password" placeholder="请输入新密码"></a-input>
                    </a-form-item>
                    <a-form-item class="mt-[40px]">
                        <a-button type="primary" @click="savePassword">确认更改</a-button>
                    </a-form-item>
                </a-tab-pane>

                <a-tab-pane title="微信号" key="4">
                    <a-form-item label="微信号">
                        <a-input v-model:model-value="form.wechat" placeholder="请输入微信号"></a-input>
                    </a-form-item>
                    <a-form-item class="mt-[40px]">
                        <a-button type="primary" @click="saveWechat">确认更改</a-button>
                    </a-form-item>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </a-card>
</template>

<style lang="scss" scoped>
#descriptions {
    :deep(.arco-descriptions-row) {
        td:nth-child(3) {
            padding-left: 100px;
        }
    }
}
</style>
