<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-popup v-model="popup" position="left" :style="{ width: '100%' }">
      <div class="popup">
        <div class="top">
          <div class="header">
            <div class="back">
              <backIcon/>
            </div>
            <!-- 个人中心 -->
            {{ $t('home.l18') }}
          </div>
          <div class="user-box flex">
            <van-image
              width="60"
              height="60"
              round
              fit="cover"
              :src="userInfo.head_file || '/img/home/nav/user.png'"
            />
            <div>
              <div class="name" v-if="userInfo.im_name">{{ userInfo.im_name }}</div>
              <div class="name" @click="$router.replace('/login')" v-else>
                <!-- 请登录 -->
                {{ $t('home.l19') }}
              </div>
              <div class="uid" v-if="userInfo.uid">UID:{{ userInfo.uid }}</div>
            </div>
            <img class="edit" @click="$router.replace('/name')" v-if="isLogin" src="/img/home/nav/edit.png" alt="极度证券">
          </div>
        </div>
        <div class="list list1">
          <div class="li flex" @click="$router.replace('/account-records/1')">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon1.png" alt="极度证券">
              <div>
                <!-- 资金明细 -->
                {{ $t('home.l20') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="li flex" @click="$router.replace('/account')">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon2.png" alt="极度证券">
              <div>
                <!-- 账户总览 -->
                {{ $t('home.l21') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="list">
          <div class="li flex" @click="toAuth">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon3.png" alt="极度证券">
              <div>
                <!-- 身份认证 -->
                {{ $t('home.l22') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="li flex" @click="$router.replace('/setting')">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon4.png" alt="极度证券">
              <div>
                <!-- 安全设置 -->
                {{ $t('home.l23') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="li flex" @click="languagePop = true">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon5.png" alt="极度证券">
              <div>
                <!-- 语言 -->
                {{ $t('home.l24') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="list">
          <div class="li flex" @click="$router.replace('/inform')">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon6.png" alt="极度证券">
              <div>
                <!-- 通知中心 -->
                {{ $t('home.l25') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="list">
          <div class="li flex" @click="$router.replace('/help')">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon7.png" alt="极度证券">
              <div>
                <!-- 帮助中心 -->
                {{ $t('home.l26') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="li flex" @click="$router.replace('/feedback')">
            <div class="flex">
              <img class="icon" src="/img/home/nav/icon8.png" alt="极度证券">
              <div>
                <!-- 用户反馈 -->
                {{ $t('home.l27') }}
              </div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="btn-box">
          <div class="btn" v-if="isLogin" @click="logOutPop = true">
            <!-- 安全退出 -->
            {{ $t('home.l28') }}
          </div>
          <div class="btn" v-if="!isLogin" @click="$router.replace('/login')">
            <!-- 登录 -->
            {{ $t('login.l') }}
          </div>
        </div>
        <van-popup get-container="body" v-model="logOutPop" round position="bottom">
          <logout @cancel="logOutPop = false" @success="logout"/>
        </van-popup>
        <van-popup get-container="body" v-model="languagePop" position="right" :style="{ width: '100%' }">
          <language @cancel="languagePop = false" />
        </van-popup>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { logOut } from '@/api/login'
import { mapGetters } from 'vuex'
import logout from "./components/logout.vue";
import bus from '@/utils/bus'
import language from "@/components/language";
export default {
  components: {
    logout,
    language
  },
  data () {
    return {
      popup: false,
      logOutPop: false,
      languagePop: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    '$route'() {
      if (this.$route.name == 'navView') {
        this.popup = true
      } else {
        this.popup = false
      }
    }
  },
  beforeDestroy() {
    this.popup = false
    this.logOutPop = false
    this.languagePop = false
  },
  deactivated() {
    this.popup = false
    this.logOutPop = false
    this.languagePop = false
  },
  activated() {
    if (this.$route.name == 'navView') {
      this.popup = true
    } else {
      this.popup = false
    }
    this.logOutPop = false
    this.languagePop = false
  },
  mounted() {
    this.popup = true
  },
  methods: {
    toAuth() {
      if (!this.isLogin) {
        this.$router.replace('/auth')
        return
      }
      this.fullscreenLoading = true
      this.$store.dispatch('getUserInfo').then(() => {
      }).finally(() => {
        this.fullscreenLoading = false;
        if (this.userInfo.identity_status == 1) {
          this.$router.replace('/auth-success')
          return
        }
        if (this.userInfo.identity_status == 4) {
          this.$router.replace('/auth-fail')
          return
        }
        this.$router.replace('/auth')
      })
    },
    logout() {
      // logOut().then(() => {
      // }).catch(() => {}).finally(() => {
      // });
      this.$notify({
        // message: '退出成功',
        message: this.$t('home.l29'),
        type: 'success'
      });
      this.logOutPop = false
      this.$store.commit('SET_LOGIN', false)
      this.$store.commit('setAccountList', [])
      this.$store.commit('setCashInfo', {})
      this.$store.dispatch('getProductUserList')
      bus.$emit('socketInit')
    }
  }
}
</script>
<style lang="less" scoped>
.popup {
  min-height: 100vh;
}
.header {
  text-align: center;
  color: #000;
  font-weight: 600;
  font-size: 18px;
  position: relative;
  padding-top: 15px;
  padding-bottom: 14px;
  .back {
    position: absolute;
    top: 11px;
    left: 9px;
  }
}
.top {
  background-image: url('@/assets/img/nav/bg2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #fff;
  position: sticky;
  z-index: 3;
  top: 0;
}
.user-box {
  padding: 35px 0 57px 9.066vw;
  background-image: url('@/assets/img/nav/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  column-gap: 9px;
  color: var(--bg-);
  .img {
    width: 60px;
  }
  .name {
    font-size: 24px;
    font-weight: 600;
  }
  .uid {
    margin-top: 10px;
  }
  .edit {
    position: absolute;
    top: 24px;
    right: 6.9333vw;
    cursor: pointer;
    width: 14px;
  }
}
.list1 {
  margin-top: -14px;
}
.list {
  border-bottom: 1px solid #F5F5F5;
  .li {
    padding: 0 14px 0 16px;
    cursor: pointer;
    justify-content: space-between;
    height: 54px;
    color: #171717;
    font-size: 17px;
  }
  .icon {
    width: 25px;
    margin-right: 8px;
  }
  .el-icon-arrow-right {
    color: #646464;
    font-size: 17px;
    font-weight: 600;
  }
}
.btn-box {
  padding: 65px 18px 42px;
  .btn {
    cursor: pointer;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    background-color: #F4F7FA;
    font-size: 16px;
    color: #2A2A2A;
  }
}
</style>