<script setup>
import XNav from "../../components/XNav.vue";
import XFormItem from "../../components/XFormItem.vue";
import XForm from "../../components/XForm.vue";
import XSelect from "../../components/XSelect.vue";
import Api from "../../api/index.js";
import XInput from "../../components/XInput.vue";
import XUpload from "../../components/XUpload.vue";
import { reactive, watch } from "vue";
import { backPage, showToast } from "../../utils/uils.js";
import { onLoad } from "@dcloudio/uni-app";
import XDateTime from "../../components/XDateTime.vue";
import { useSystemStore } from "../../pinia/SystemStore/index.js";
import XImage from "../../components/XImage.vue";
import XLink from "../../components/XLink.vue";

const SystemStore = useSystemStore();

const form = reactive({
    status: null,
    qrcode: [],
    abnormaltime: null,
    nickname: null,
    account: null,
    pid: null,
    homepage: [],
});

const success = async () => {
    if (!form.id) {
        const { msg } = await Api.system.addAccount({
            ...form,
            homepage: form.homepage[0],
            qrcode: form.qrcode[0]
        });
        showToast(msg);
    } else {
        const { msg } = await Api.system.editAccount({
            ...form,
            homepage: form.homepage[0],
            qrcode: form.qrcode[0]
        });
        showToast(msg);
    }
    backPage();
}

onLoad((options) => {
    const { id } = options;
    if (id) Api.system.getAccountInfo(id).then(({ data }) => {
        data.homepage = [data.homepage];
        data.qrcode = [data.qrcode];
        Object.assign(form, data);
    });
    if (SystemStore.accountManagementPo.pid) form.pid = Number(SystemStore.accountManagementPo.pid);
})

const getSelect = async () => {
    const { data } = await Api.system.getPlatform();
    data.shift();
    return {
        data: data,
    }
}
const ZYObj = reactive({
    images1: [],
    images2: [],
});
const changeP = async () => {
    const { data } = await Api.system.getPlatformImages({ id: form.pid });
    Object.assign(ZYObj, data);
}

watch(
    () => form.pid,
    (val) => {
        if (val) changeP();
    },
    { deep: true, immediate: true }
)
</script>

<template>
    <!--添加账号-->
    <x-nav></x-nav>

    <view class="min-h-[calc(100vh-100rpx)] bg-[#fff] px-[30rpx] py-[25rpx]">
        <x-form>
            <x-form-item label="宣发平台">
                <x-select v-model:model-value="form.pid" :api="getSelect" @change="changeP"></x-select>
            </x-form-item>
            <x-form-item label="账号">
                <x-input v-model:model-value="form.account" height="80rpx" placeholder="请输入帐号"></x-input>
            </x-form-item>
            <x-form-item label="昵称">
                <x-input v-model:model-value="form.nickname" height="80rpx" placeholder="请输入昵称"></x-input>
            </x-form-item>
            <x-form-item label="恢复时间" v-if="form.status === 2">
                <x-date-time :type="1" v-model:model-value="form.abnormaltime"></x-date-time>
            </x-form-item>
            <x-form-item label="主页截图">
                <template v-slot:label>
                    <view class="!flex justify-between">
                        <view>主页截图</view>
                        <x-image v-if="form.pid && ZYObj.images1.length > 0" :src="ZYObj.images1[0]"
                            :list="ZYObj.images1">
                            <x-link>查看指引</x-link>
                        </x-image>
                    </view>
                </template>
                <x-upload v-model:files="form.homepage" del single></x-upload>
            </x-form-item>
            <x-form-item label="主页二维码">
                <template v-slot:label>
                    <view class="!flex justify-between">
                        <view>主页二维码</view>
                        <x-image v-if="form.pid && ZYObj.images2.length > 0" :src="ZYObj.images2[0]"
                            :list="ZYObj.images2">
                            <x-link>查看指引</x-link>
                        </x-image>
                    </view>
                </template>
                <x-upload v-model:files="form.qrcode" del single></x-upload>
            </x-form-item>
        </x-form>

        <tui-button @click="success" class="!fixed bottom-[30rpx] left-0 !mx-[30rpx] !w-[calc(100vw-60rpx)]">确认提交
        </tui-button>
    </view>
</template>

<style lang="scss">
.x-form-item-label {
    font-size: 28rpx;
    color: #4E5969 !important;
}
</style>
