<template>
<Layout-Child>
    <div class=" w-11/12 mx-auto py-6 text-font-white">
        <input type="file" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="fileUpload"/>
        <input type="file" accept="image/*" class=" hidden" ref='fileElem' @change="fileUpload"/>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        <app-cell text='头像' boxType='border' type='image'  :value='avatarImgUrl?avatarImgUrl:this.userInfo.avatar?this.userInfo.avatar : "/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
        <app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu' @click.native="goEdit({type:'nickname',title:'设置昵称'})"></app-cell>
        <app-cell text='手机号' boxType='border' type='click' :value='userInfo.telephone?userInfo.telephone:""' ></app-cell>
        <app-cell text='邮箱绑定' boxType='border' :value='userInfo.email?userInfo.email:""' icon='icon-xiayibu' @click.native="goEdit({type:'email',title:'邮箱绑定'})"></app-cell>
        <app-cell text='个性签名' boxType='border' icon='icon-xiayibu'  @click.native="goEdit({type:'signature',title:'个性签名'})"></app-cell>
        <app-cell text='安全中心' boxType='border' icon='icon-xiayibu' ></app-cell>
         <app-cell text='消息管理' boxType='border' icon='icon-xiayibu' ></app-cell>
    </div>
    <div class="fixed bottom-0 w-full left-0 z-30">
        <app-btn text="退出登录" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-red" border='none'  @btnClicked='toggleDialog' ></app-btn>
    </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
export default Vue.extend({
    data(){
        return{
            userInfo:this.$util.userMsg.getUserMsg(),
            show:false,
            actions: [
                { name: '从图片夹上传',router:'/photoEdit' },
                { name: '拍摄头像',router:'/photo' },
                
            ],
            file:{},
            avatarImgUrl:''
        }
    },
 
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
       'app-cell':()=>import('@/components/common/Cell.vue'),
        'app-btn':()=>import('@/components/common/Btn.vue')
  },
  methods:{
      toggleDialog(){
             this.$dialog.confirm({
                message: '确定要退出登录吗',
            }).then(()=>{
                localStorage.clear();
                this.$router.push({
                    name: 'Login'
                })
            });
      },
      goEdit(item: {type:string,title:string}){
        this.$router.push({name:'Edit', params:{type: item.type,title: item.title}})
      },
      uploadImg(){
        this.show= true
      },
      async fileUpload(event:any){
          this.$toast.loading('头像更新中...')
          this.file = event.target.files[0]
        //   this.$store.commit('app/SET_FILEDATA',event.target.files)
          const upload =  await this.$service.userService.avatarUpload(event.target.files[0])
            if(upload){
                this.avatarImgUrl = (upload as any).avatar
                this.$util.userMsg.updateUserMsg(upload)
                this.$toast.success('头像更新成功')
            }
        //   this.$router.push({name:'PhotoEdit'})
      },
      onSelect(item:any){
        this.show = false;
        let cEl =this.$refs.cameraElem as HTMLInputElement
        let fEl =this.$refs.fileElem as HTMLInputElement
        switch(item.name){
            case '拍摄头像':
                cEl.click();
              break;  
            case '从图片夹上传':
                fEl.click();
              break;
        }
        this.$toast(item.name);
      }
  }
});
</script>
