<template>
    <div class="account-num">
      <input type="file" name="img" @change="change" id="input" style="display:none;">
      <h5-cropper :option="option" hide-input @getFile="getFile" ref="cropper"></h5-cropper>
      <label class="item" for="input">
         <div class="title">头像</div>
         <div class="right">
            <van-image round :src="userIcon" class="desc" fit="contain" width="44px" height="44px"></van-image>
            <common-svg name="jinru" class="icon"></common-svg>
         </div>
       </label>
       <div class="item" @click="$router.push({name:'SetPhone'})">
         <div class="title">{{isPhoneStr}}</div>
         <div class="right">
           <div class="desc">{{userInfo.phone || userInfo.email}}</div>
            <common-svg name="jinru" class="icon"></common-svg>
         </div>
       </div>
       <div class="logout" @click="logout">退出当前账号</div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { namespace } from "vuex-class"
import { Button, Image } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';
import H5Cropper from 'vue-cropper-h5';

const Template = namespace('template');

@Component({
  components: {
    [Button.name]: Button,
    [Image.name]: Image,
    H5Cropper,
  },
})
export default class AccountNum extends Vue {
  @State('userInfo') private userInfo!: any;
  @Getter('isPhone') private isPhone!: boolean;
  @Getter('isPhoneStr') private isPhoneStr!: string;
  @Getter('userIcon') private userIcon!: string;
  @Action('getUserInfo') private getUserInfo!: () => void;
  @Mutation('updateIsLogin') private updateIsLogin!: (isLogin: boolean) => void;
  @Mutation('updateUserInfo') private updateUserInfo!: (userInfo: any) => void;
  @Template.Mutation("clearData") private clearTemplateData!: ()=> void;
  
  private option: any = {
    ceilbutton: true,
    canMoveBox: true,
  };
  private async getFile(file: any) {
    const uploadedFile = await this.$api.file.upload(file);
    await this.$api.user.updateUserInfo(0, { icon : uploadedFile.url });
    await this.getUserInfo();
  }
  private change(e: any) {
    const [ file ] = e.target.files;
    (this.$refs.cropper as any).loadFile(file);
    e.target.value = '';
  }
  private logout() {
    localStorage.removeItem('userInfo');
    this.updateIsLogin(false);
    this.updateUserInfo({});
    this.clearTemplateData();
    this.$router.replace({path: '/'});
  }
}
</script>
<style scoped lang="scss">
  .account-num{
    .item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding:10px 17px;
      background: #FFFFFF;
      .right{
        flex: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .logout{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      line-height: 50px;
      color:#3F79FE;
      font-size: 16px;
      background: #FFFFFF;
    }
  }
</style>