<template>
  <div class="personal">
    <div class="h-34px"></div>
    <ui-title-devider :title="$t('个人信息')"></ui-title-devider>
    <div class="h-22.5px"></div>
    <div class="flex flex-wrap items-center pl-40px">
      <div class="info-item">
        <div class="info-item-label">{{$t('头像')}}：</div>
        <img v-if="userinfo.avatar" class="w-80px h-80px rounded-full object-cover" :src="userinfo.avatarUrl" />
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('昵称')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.nickname}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('账号')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.email}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('密码')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.password}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('姓名')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.name}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('电话')}}：</div>
        <div class="text-size-16px text-black mr-20px"> ({{userinfo.areaCode ? userinfo.areaCode : '86'}}) {{userinfo.phone}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('性别')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.gender}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('职业')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.job}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">{{$t('工作单位')}}：</div>
        <div class="text-size-16px text-black mr-20px">{{userinfo.workOrg}}</div>
      </div>
      <div class="!w-full info-item">
        <div class="info-item-label">{{$t('地址')}}：</div>
        <div class="text-size-16px text-black mr-20px">
        {{userinfo.address}}
        </div>
      </div>
    </div>
    <ui-title-devider :title="$t('会员服务')"></ui-title-devider>
    <div class="h-26px"></div>
    <div class="flex justify-around">
      <ui-vip-preset @choose="handleChoose(vipSmeal)" v-for="vipSmeal in vipSmeals" :item="vipSmeal"></ui-vip-preset>
    </div>
    <div class="h-111px"></div>
    <div class="flex justify-center pb-24px">
      <el-button @click="handleLogout" type="primary ">{{ $t("退出登录") }}</el-button>
    </div>
  </div>
</template>

<script>

    export default {
        data(){
            return {
                userinfo:{},
                vipSmeals:[]
            }
        },
        methods:{
            async handleChoose(vipSmeal) {

                let resp = await this.$http.post(this.$api.mzUser.createVipOrder,this.$qs.stringify({vipCode:vipSmeal.code}))
                if(resp.data.status === 200){
                  this.$store.dispatch('SHOW_PAY_BOX',{type:'vip',vipPayData:resp.data.data.vipSmOrder});
                  this.close();
                    // await this.$confirm('请在弹出的窗口完成付款操作?', '提示', {
                    //     confirmButtonText: '已完成付款',
                    //     cancelButtonText: '取消',
                    //     type: 'warning'
                    // })
                    // resp = await this.$http.post(this.$api.mzUser.confirmVipOrder,this.$qs.stringify({orderCode:resp.data.data.vipSmOrder.code}))
                    //
                    // if(resp.data.status === 200){
                    //      this.$message.success("开通成功");
                    //      this.loadData();
                    // }

                }



            },
            async loadData(){
                let resp = await this.$http.post(this.$api.mzUser.userinfo);

                if(resp.data.status === 200){
                    this.userinfo = resp.data.data.mzUser;
                    this.$store.commit('UPDATE_LOGIN_INFO',resp.data.data.mzUser)
                }
            },
            async handleLogout(){
              await this.$confirm(this.$t('您现在正在进行退出登录, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              });

              let resp = await  this.$http.post(this.$api.mzUser.logout);
              this.$store.commit('UPDATE_LOGIN_INFO','')
              if(resp.data.status === 200){
                this.$router.push('/');
              }
            }
        },
        async created() {

            this.loadData();

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

        }
    }

</script>

<style scoped>
.info-item {
  @apply flex w-1/2 items-center mb-33px;
}
.info-item-label {
  @apply text-size-16px text-[#686868] mr-20px whitespace-nowrap;
}
</style>
