<template>
    <div class="account-setting">
        <div class="h-27px"></div>
        <ui-title-devider :title="$t('账号设置')"></ui-title-devider>
        <div class="h-14px"></div>
        <user-account-setting-info-item :label="$t('头像')">
            <div class="pl-20px cursor-pointer" @click="handleUpload">
                <img v-if="userinfo.avatar" :src="userinfo.avatarUrl" class="w-80px h-80px object-cover !rounded-full"/>
                <div v-else class="w-80px h-80px flex  justify-center items-center border-1px !rounded-full">
                    <i class="el-icon-camera-solid text-size-32px text-[#B8B8B8]"></i>
                </div>
            </div>
        </user-account-setting-info-item>
        <user-account-setting-info-item
                :label="$t('昵称')"
                :text="userinfo.nickname"
        ></user-account-setting-info-item>
        <user-account-setting-info-item
                :label="$t('账号')"
                :text="userinfo.email"
        ></user-account-setting-info-item>
        <user-account-setting-info-item
                :label="$t('密码')"
        >
            <div class="pl-20px flex items-center">
                <div class="mr-50px">*********</div>
                <div @click="$router.push(`/change-pass?email=${userinfo.email}`)" class="text-primary cursor-pointer">{{$t('重置密码')}}</div>
            </div>
        </user-account-setting-info-item>
        <user-account-setting-info-item :required="true"
                                        :label="$t('姓名')"
        >
            <ui-input v-model="userinfo.name" class="!w-345px"></ui-input>
        </user-account-setting-info-item>
        <user-account-setting-info-item :required="true"
                                        :label="$t('电话')"
        >
            <ui-input v-model="userinfo.phone" class="!w-345px">
                <div slot="suffix" class="flex items-center h-full">
<!--                    <div class="text-black">+<input v-model="userinfo.areaCode" style="border: none;width: 30px;text-align:left;display: inline-block;" :placeholder="$t('区号')"></input></div>-->
                    <phone-code-selector v-model="userinfo.areaCode"   :placeholder="$t('区号')"></phone-code-selector>

                </div>
            </ui-input
            >
        </user-account-setting-info-item>
        <user-account-setting-info-item :required="true"
                                        :label="$t('性别')"
        >
            <el-radio-group v-model="userinfo.gender">
                <el-radio label="女">{{$t('女')}}</el-radio>
                <el-radio label="男">{{$t('男')}}</el-radio>
            </el-radio-group>
        </user-account-setting-info-item>
        <user-account-setting-info-item
                :label="$t('职业')"
        >
            <ui-input v-model="userinfo.job" class="!w-728px"></ui-input>
        </user-account-setting-info-item>
        <user-account-setting-info-item
                :label="$t('工作单位')"
        >
            <ui-input v-model="userinfo.workOrg" class="!w-728px"></ui-input>
        </user-account-setting-info-item>
        <user-account-setting-info-item
                :label="$t('地址')"
        >
            <ui-input v-model="userinfo.address" class="!w-728px"></ui-input>
        </user-account-setting-info-item>
        <div class="flex justify-center pb-24px">
            <el-button @click="handleConfirm" type="primary ">{{ $t("保存") }}</el-button>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {

                userinfo: {
                    avatarUrl: "",
                    avatar: "",
                    nickname: '',
                    email: '',
                    gender: "",
                    name: "",
                    phone: "",
                    areaCode:"",
                    job: "",
                    workOrg: "",
                    address: "",
                },
                vipSmeals: []
            }
        },
        async created() {
            let resp = await this.$http.post(this.$api.mzUser.userinfo);

            if (resp.data.status === 200) {
                for (let key in this.userinfo){
                    this.userinfo[key] = resp.data.data.mzUser[key];
                }
            }

            let r = await this.$http.post(this.$api.common.vipSmeals);
            if (r.data.status === 200) {
                this.vipSmeals = r.data.data.vipSmeals;
            }
        },
        methods: {
            handleUpload() {

                let input = document.createElement("input")
                input.type = 'file';
                input.onchange = async (e) => {
                    let formData = new FormData();
                    formData.append("file", input.files[0])
                    formData.append("category", 'AVATAR')
                    let resp = await this.$http.post(this.$api.common.uploadFile, formData);
                    if (resp.data.status === 200) {
                        this.userinfo.avatarUrl = resp.data.data.url;
                        this.userinfo.avatar = resp.data.data.code;
                    }
                }
                input.click();

            },
            async handleConfirm(){

                let resp = await this.$http.post(this.$api.mzUser.perfectInfo,this.$qs.stringify(this.userinfo));

                if(resp.data.status === 200){
                    this.$message.success(this.$t('操作成功'));
                }else{
                    this.$message.warning(this.$t(resp.data.desc))
                }


            }
        }
    };
</script>

<style></style>
