<template>
    <div class="w1200px bg-white mt-20px px-100px pb-100px">
        <div class="h-33px"></div>
        <ui-title-devider :title="$t('请设置个人相关信息后进入')"></ui-title-devider>
        <div class="h-14px"></div>
        <user-account-setting-info-item label="头像">
            <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="昵称"
                :text="userinfo.nickname"
        ></user-account-setting-info-item>
        <user-account-setting-info-item
                label="账号"
                :text="userinfo.email"
        ></user-account-setting-info-item>
        <user-account-setting-info-item label="密码">
            <div class="pl-20px flex items-center">
                <div v-if="!showPass" class="mr-50px">*********</div>
                <div v-else class="mr-50px">{{userinfo.password}}</div>
                <div @click="showPass = !showPass">
                    <img
                            v-if="!showPass"
                            src="/imgs/eye_icon.png"
                            class="w-30px h-auto cursor-pointer"
                    />
                    <img
                            v-else
                            src="/imgs/eye_close_icon.png"
                            class="w-30px h-auto cursor-pointer"
                    />
                </div>
            </div>
        </user-account-setting-info-item>
        <user-account-setting-info-item :required="true" label="姓名">
            <ui-input v-model="userinfo.name" placeholder="请输入姓名" class="!w-345px"></ui-input>
        </user-account-setting-info-item>
        <user-account-setting-info-item :required="true" label="电话">
            <ui-input v-model="userinfo.phone" placeholder="请输入电话" class="!w-345px">
                <div slot="suffix" class="flex items-center h-full">
                    <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="性别">
            <el-radio-group v-model="userinfo.gender">
                <el-radio label="女">女</el-radio>
                <el-radio label="男">男</el-radio>
            </el-radio-group>
        </user-account-setting-info-item>
        <user-account-setting-info-item label="职业">
            <ui-input v-model="userinfo.job" placeholder="请输入职业" class="!w-728px"></ui-input>
        </user-account-setting-info-item>
        <user-account-setting-info-item label="工作单位">
            <ui-input v-model="userinfo.workOrg" placeholder="请输入工作单位" class="!w-728px"></ui-input>
        </user-account-setting-info-item>
        <user-account-setting-info-item label="地址">
            <ui-input v-model="userinfo.address" placeholder="请输入地址" class="!w-728px"></ui-input>
        </user-account-setting-info-item>
        <div class="flex justify-center">
            <el-button @click="handleConfirm" type="primary ">{{ $t("确定") }}</el-button>
        </div>
    </div>
</template>

<script>
    import {} from "element-ui";

    export default {
        data() {
            return {

                userinfo:{
                    avatarUrl:"",
                    avatar:"",
                    nickname:'',
                    email:'',
                    gender: "",
                    name: "",
                    phone: "",
                    areaCode: "86",
                    job: "",
                    workOrg: "",
                    address: "",
                },
                showPass: false
            };
        },
        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];
                }
            }


            if(!this.userinfo["areaCode"]){
                this.userinfo["areaCode"] = "86"
            }

        },
        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('操作成功'));
                    this.$router.push('/home')
                }else{
                    this.$message.warning(this.$t(resp.data.desc))
                }


            }
        }
    };
</script>

<style></style>
