<template>
  <ui-page-layout :title="$t('设置个人信息')">
    <ui-scroll-view>
      <div class="account-setting">


        <div class="h-14rem"></div>


        <user-account-setting-info-item label="头像">
          <img @click="handleUpload" v-if="userinfo.avatar" :src="userinfo.avatarUrl" class="w-80rem h-80rem !rounded-full" />
        </user-account-setting-info-item>
        <user-account-setting-info-item :value="userinfo.nickname" label="昵称" text="cyt"></user-account-setting-info-item>
        <user-account-setting-info-item :value="userinfo.email" label="账号" text="15486323563@qq.com">
        </user-account-setting-info-item>
        <user-account-setting-info-item label="密码">
          <div class=" flex items-center">
            <div class="mr-50rem">*********</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 v-model="userinfo.name" label="姓名">

        </user-account-setting-info-item>
        <user-account-setting-info-item v-model="userinfo.phone" label="电话">

        </user-account-setting-info-item>
        <user-account-setting-info-item label="性别">
          <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 v-model="userinfo.job" label="职业">

        </user-account-setting-info-item>
        <user-account-setting-info-item v-model="userinfo.workOrg" label="工作单位">

        </user-account-setting-info-item>
        <user-account-setting-info-item v-model="userinfo.address" label="地址">

        </user-account-setting-info-item>
      </div>

      <div class="flex justify-center mt-80rem">
        <div type="primary" @click="handleConfirm"  class="h-60rem w-280rem bg-primary flex justify-center items-center rounded-full text-white">{{$t('保存信息')}}</div>
      </div>

    </ui-scroll-view>
  </ui-page-layout>
</template>

<script>

  export default {
    data() {
      return {

        userinfo: {
          avatarUrl: "",
          avatar: "",
          nickname: '',
          email: '',
          gender: "",
          name: "",
          phone: "",
          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.$toast(this.$t('操作成功'));
        }else{
          this.$toast(this.$t(resp.data.desc))
        }


      }
    }
  };
</script>

<style>

</style>
