
<template>
    <section class="max-w-xl m-auto">
        <van-nav-bar :title="t('settingsPersonal.title')">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="$router.back" />
            </template>
        </van-nav-bar>
        <div class="m-4">
            <form @submit.prevent="onSubmit">
                <div class="space-y-12">
                    <div class="border-b border-gray-900/10 pb-12">
                        <h2 class="text-base font-semibold leading-7 text-gray-900">{{ t('settingsPersonal.profile') }}</h2>
                        <p class="mt-1 text-sm leading-6 text-gray-600">{{ t('settingsPersonal.p1') }}</p>

                        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                            <div class="col-span-full">
                                <label for="username"
                                    class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.username') }}</label>
                                <div class="mt-2">
                                    <div
                                        class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-[#F96825] ">

                                        <input type="text" name="username" id="username" autocomplete="username"
                                            class="block flex-1 w-full border-0 bg-transparent py-1.5 pl-2 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                                            placeholder="" disabled v-model="fullUsername" readonly />
                                    </div>
                                </div>
                            </div>

                            <div class="col-span-full">
                                <label for="about" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.about') }}</label>
                                <div class="mt-2">
                                    <textarea id="about" name="about" rows="3" v-model="formDate.remark"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
                                         placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                                <p class="mt-3 text-sm leading-6 text-gray-600">{{ t('settingsPersonal.a_1') }}</p>
                            </div>

                            <div class="col-span-full">
                                <label for="photo" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.photo') }}</label>
                                <div class="mt-2 flex items-center gap-x-3">
                                    <SvgIcon name="settings-user-circle" class="w-10 h-10 text-gray-400"
                                        v-if="avatars.length <= 0 && formDate.avatar == ''" />
                                    <img :src="formDate.avatar" alt="" v-if="formDate.avatar" class="w-8 h-8">
                                    <van-uploader v-model="avatars" :max-count="1" @click-upload="onUpload"
                                        :max-size="500 * 500" @oversize="onOversize" :after-read="onAfterRead">
                                        <template>
                                            <div class="preview-cover van-ellipsis rounded-md"></div>
                                        </template>
                                        <button type="button"
                                            class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">{{ t('settingsPersonal.change') }}</button>
                                    </van-uploader>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" border-gray-900/10 pb-4">
                        <h2 class="text-base font-semibold leading-7 text-gray-900">{{ t('settingsPersonal.p_1') }}</h2>
                        <p class="mt-1 text-sm leading-6 text-gray-600">{{ t('settingsPersonal.p_i_1') }}
                        </p>

                        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                            <div class="sm:col-span-3">
                                <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.first_name') }}</label>
                                <div class="mt-2">
                                    <input type="text" name="first-name" id="first-name" autocomplete="given-name"
                                        v-model="formDate.firstName"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset
                                         ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>

                            <div class="sm:col-span-3">
                                <label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.last_name') }}</label>
                                <div class="mt-2">
                                    <input type="text" name="last-name" id="last-name" autocomplete="family-name"
                                        v-model="formDate.lastName"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>

                            <div class="sm:col-span-4">
                                <label for="email" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.email') }}
                                    address</label>
                                <div class="mt-2">
                                    <input id="email" name="email" type="email" autocomplete="email"
                                        v-model="formDate.email"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>

                            <div class="sm:col-span-3">
                                <label for="country"
                                    class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.country') }}</label>
                                <div class="mt-2">
                                    <select id="country" name="country" autocomplete="country-name"
                                        v-model="formDate.country"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:max-w-xs sm:text-sm sm:leading-6">
                                        <option>United States</option>
                                        <option>Canada</option>
                                        <option>Mexico</option>
                                        <option>Brazil</option>
                                        <option>United Kingdom</option>
                                        <option>France</option>
                                        <option>Germany</option>
                                        <option>Italy</option>
                                        <option>Spain</option>
                                        <option>Australia</option>
                                        <option>Other</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-span-full">
                                <label for="street-address" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.street') }}</label>
                                <div class="mt-2">
                                    <input type="text" name="street-address" id="street-address"
                                        autocomplete="street-address" v-model="formDate.streetAddress"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 
                                        shadow-sm ring-1 ring-inset ring-gray-300 
                                        placeholder:text-gray-400 focus:ring-2 
                                        focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>

                            <div class="sm:col-span-2 sm:col-start-1">
                                <label for="city" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.city') }}</label>
                                <div class="mt-2">
                                    <input type="text" name="city" id="city" autocomplete="address-level2"
                                        v-model="formDate.city"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>

                            <div class="sm:col-span-2">
                                <label for="region" class="block text-sm font-medium leading-6 text-gray-900">{{ t('settingsPersonal.state') }}</label>
                                <div class="mt-2">
                                    <input type="text" name="region" id="region" autocomplete="address-level1"
                                        v-model="formDate.state"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>

                            <div class="sm:col-span-2">
                                <label for="postal-code" class="block text-sm font-medium leading-6 text-gray-900">ZIP /
                                    {{ t('settingsPersonal.postal') }}</label>
                                <div class="mt-2">
                                    <input type="text" name="postal-code" id="postal-code" autocomplete="postal-code"
                                        v-model="formDate.postalCode"
                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-end gap-x-6">
                    <button type="submit"
                        class="rounded-md w-full bg-[#F96825] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-[#F96825] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">{{ t('settingsPersonal.save') }}</button>
                </div>
            </form>
        </div>
    </section>
    <Dialog ref="dialogRef" />
    <Success ref="successRef" />
</template>
  
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { getUserExtension, updateUserExtension, uploadAvatar } from '@/api/settings'
import Success from '@/components/Success.vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n()

const dialogRef = ref()
const avatars = ref([])
const fullUsername = ref('')
const successRef = ref()

const formDate = ref({
    username: '',
    countryCode: '',
    nickname: '',
    city: '',
    remark: '',
    avatar: '',
    firstName: '',
    lastName: '',
    email: '',
    country: '',
    streetAddress: '',
    state: '',
    postalCode: '',
})

const onUpload = () => {
}
const onOversize = () => {
    dialogRef.value.open({
        type: 'waring',
        content: t('settingsPersonal.upload_error_1'),
        showCancelButton: false
    })
}

const onAfterRead = async (file: any) => {
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
    if (!validImageTypes.includes(file.file.type)) {
        avatars.value = []
        dialogRef.value.open({
            type: 'warning',
            content: t('settingsPersonal.upload_error_2'),
            showCancelButton: false
        })
        return false;
    }

    formDate.value.avatar = ''
    const data = {
        name: file.file.name,
        content: file.content,
        type: file.file.type
    }
    const res = await uploadAvatar(data) as any
    if (res.code === 0) {
        formDate.value.avatar = res.data
    } else {
        dialogRef.value.open({
            type: 'warning',
            content: t('settingsPersonal.upload_error_3'),
            showCancelButton: false
        })
    }
}

const onSubmit = async () => {
    await updateUserExtension(formDate.value)
    successRef.value.open()
}

const getUserExtensionInfo = async () => {
    const res = await getUserExtension()
    formDate.value = res
    fullUsername.value = '(+' + formDate.value.countryCode + ') ' + formDate.value.username
}

onMounted(async () => {
    await getUserExtensionInfo()
})

</script>