<template>
  <div class="user-index">
    <div class="topTitle" v-show="isLogin && !userInfo.auth_suc">
      <span>认证后免费赠送10次存证</span>
      <router-link tag="div" class="btn" role="button" :to="{name:'Auth'}">去认证</router-link>
    </div>
    <header>
      <van-image width="55" round height="55" :src="userIcon" class="left"></van-image>
      <div>
          <div v-if="isLogin">{{userInfo.phone? userInfo.phone : userInfo.email}}</div>
          <div v-else style="color:#353535;font-size: 20px;font-weight: 500;" @click="toLogin">立即登录</div>
      </div>
      <div>
          <common-svg :name="authIcon" style="width:120px;height:40px;" v-if="isLogin"></common-svg>
          <div style="color:#B6B5BA;font-size: 12px;" v-else>登录建立{{isSy ? '存证溯源': '慈善记录'}}</div>
      </div>
      <common-svg name="shezhi" class="right" v-if="isLogin" width="20px" height="20px" @click.native="go('AccountNum')" style="margin: 5px;"></common-svg>
    </header>
    <section class="asset" style="margin-top:10px;">
        <div>剩余次数</div>
        <div style="font-size:30px;font-weight:500;">{{chainTimes}}</div>
        <!-- <div tag="div" class="btn" role="button" @click="$toast('此功能暂未开放')">去充值</div> -->
        <router-link tag="div" class="btn" role="button" :to="{name:'Recharge'}">去充值</router-link>
    </section>
    <ul style="margin-top:30px;">
      <li v-for="({ icon, title, label, to}, index) in datas" :key="index" class="item" @click="go(to)">
        <common-svg :name="icon" style="margin-right:10px;" width="22px" height="22px"></common-svg>
        <div class="title">{{title}}</div>
        <div class="label">{{label }}</div>
        <common-svg name="jinru" style="margin-left:10px;"></common-svg>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Inject } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, Uploader } from 'vant';
import { Getter, State, Action } from 'vuex-class';
import { AuthStatus } from '@/const/enum';
const authTypeObj: any = {
  0: 'Auth',
  1: 'Personal',
  2: 'Enterprise',
};
const authSucStr: any = {
  0: '未认证',
  1: '已认证',
};
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [Uploader.name]: Uploader,
  },
})
export default class Index extends Vue {
  @Inject('isSy') private isSy!: boolean;
  @State('userInfo') private userInfo!: any;
  @State('isSetPwd') private isSetPassWd!: number;
  @State('isLogin') private isLogin!: boolean;
  @State('authInfo') private authInfo!: any;
  @Getter('userIcon') private userIcon!: string;
  @Action('isSetPwd') private isSetPwd!: () => void;
  @Action('getAuthInfo') private getAuthInfo!: () => void;
  @Action('getCompanyAuthInfo') private getCompanyAuthInfo!: () => void;
  @Action('getUserInfo') private getUserInfo!: () => void;

  private chainTimes: number = 0;
  private readonly authStatusStr: any = {
    [AuthStatus.Unverified]: '未认证',
    [AuthStatus.Authenticating]: '认证中',
    [AuthStatus.Unverified]: '已认证',
    [AuthStatus.AuthFailure]: '认证失败',
  };
  get authIcon() {
    const { auth_suc } = this.userInfo;
    return auth_suc ? 'yirenzheng' : 'weirenzheng';
  }
  get datas() {
    const { auth_type, auth_suc } = this.userInfo;
    const { isSetPassWd } = this;
    return [
      {
        title: '账号信息',
        label: '',
        icon: 'wodezhanghu2x',
        to: 'AccountNum',
      },
      {
        title: '回收站',
        label: '',
        icon: 'huishouzhan',
        to: 'RecycleList',
      },
      {
        title: '实名认证',
        label: authSucStr[auth_suc],
        icon: 'shimingrenzheng',
        to: authTypeObj[auth_type],
      },
      {
        title: '设置密码',
        label: isSetPassWd ? `已设置` : '未设置',
        icon: 'shezhimima',
        to: 'SetPasswd',
      },
    ];
  }
  private mounted() {
    this.getUserInfo();
  }
  @Watch('isLogin', { immediate: true })
  private async  onIsLoginChange(newVal: boolean) {
    if (newVal) {
      this.isSetPwd();
      this.getAuthInfo();
      this.getCompanyAuthInfo();
      const { chain_times } = await this.$api.assets.get();
      this.chainTimes = chain_times;
    }
  }
  private go(routerName: any) {
    // if (!this.isLogin ) {
    //   return this.toLogin();
    // }
    this.$router.push({name: routerName});
  }
  private toLogin() {
    this.$router.push({ name: 'Login',
                        query: {
                          redirect: this.$router.currentRoute.fullPath,
                        }});
  }
}
</script>
<style scoped lang="scss">
  .user-index{
    padding: 17px;
    .topTitle {
      width: 100vw;
      margin-top: -17px;
      margin-left: -17px;
      height: 35px;
      background: #FEF1E1;
      text-align: left;
      margin-bottom: 22px;
      color: #F59A23;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      letter-spacing: 1px;
      span {
        margin-left: 21px;
      }
      .btn{
        width:60px;
        height:25px;
        margin-right: 13px;
        line-height: 25px;
        background:#F59A23;
        border-radius:3px;
        color: #FFFFFF;
        text-align: center;
      }
    }
    header{
      display: grid;
      grid-template-rows: repeat(2, 30px);
      grid-template-columns: 55px auto 30px;
      grid-auto-flow: column dense;
      place-items: center start;
      column-gap: 10px;
      .left,.right{
        grid-row: span 2;
        align-self: center;
      }
    }
    .asset{
      display: grid;
      grid-template-columns: auto 90px;
      grid-template-rows: 30px 30px;
      grid-auto-flow: column;
      place-items: center start;
      padding: 12px 25px;
      font-size: 14px;
      color: #FFFFFF;
      background:linear-gradient(180deg,rgba(108,122,254,1) 0%,rgba(93,123,246,1) 100%);
      box-shadow:0px 5px 20px 0px rgba(63,121,254,0.34);
      border-radius:4px 30px 4px 4px;
      .btn{
        grid-row: 1 / span 2;
        align-self: center;
        width:80px;
        height:30px;
        line-height: 30px;
        background:rgba(118,136,255,1);
        border-radius:15px;
        &:active{
          background: darken(rgba(118,136,255,1), 10%);
        }
      }
    }
    ::v-deep .van-cell__title{
      text-align: left;
    }
    .item{
      display: flex;
      align-items: center;
      height: 55px;
      padding: 0 11px;
      margin-top: 9px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 10px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      .title,label{
        flex: auto;
      }
      .title{
        text-align: left;
        font-size: 14px;
      }
      .label{
        text-align: right;
        font-size: 14px;
        color:#9DA5B3;
      }
    }
  }
</style>