<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="header">
      <div class="top">
        <div class="title">
          <!-- 我的 -->
          {{ $t('tab.tab5') }}
        </div>
        <div class="right">
          <van-icon @click="$router.push('/fit')" size="22" name="setting-o" />
        </div>
      </div>
      <div class="info-box flex" @click="$router.push('/info')">
        <van-image
          width="58"
          height="58"
          round
          fit="cover"
          :src="userInfo.head_file || '/img/home/user.png'"
        />
        <div class="info">
          <div class="name flex" v-if="userInfo.im_name">
            <div class="im">{{ userInfo.im_name }}</div>
            <div class="tag-box flex" v-if="false">
              <img class="img" src="/img/vip/img.png" alt="极度证券">
              <div>
                <!-- 极度会员 -->
                {{ $t('my.l') }}
              </div>
            </div>
          </div>
          <div class="name" v-else>
            <!-- 登录/注册 -->
            {{ $t('my.l1') }}
          </div>
          <div class="uid" v-if="userInfo.description">
            {{ userInfo.description }}
          </div>
          <div class="uid" v-else>
            <!-- 一键登陆享专业融资融券服务 -->
            {{ $t('my.l3') }}
          </div>
          <img class="arrow-right" v-if="userInfo.uid" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
      <div class="vip-box flex" @click="$router.push('/vip')" v-if="false">
        <div class="left">
          <div class="title">
            <!-- 尊享VIP特权 -->
            {{ $t('my.l4') }}
          </div>
          <div class="tip">
            <!-- 多重豪礼随心领 -->
            {{ $t('my.l5') }}
          </div>
        </div>
        <div class="right flex">
          <div class="to">
            <!-- VIP详情 -->
            {{ $t('my.l6') }}
          </div>
          <img class="img" src="/img/my/to.png" alt="极度证券">
        </div>
      </div>
      <div class="bottom flex">
        <div class="item" @click="$router.push('/setting')">
          <img class="icon" src="/img/my/icon1.png" alt="极度证券">
          <div>
            <!-- 安全设置 -->
            {{ $t('home.l23') }}
          </div>
        </div>
        <div class="item" @click="toAuth">
          <img class="icon" src="/img/my/icon2.png" alt="极度证券">
          <div>
            <!-- 身份认证 -->
            {{ $t('home.l22') }}
          </div>
        </div>
        <div class="item" @click="$router.push('/account-records/1')">
          <img class="icon" src="/img/my/icon3.png" alt="极度证券">
          <div>
            <!-- 资金记录 -->
            {{ $t('account.l9') }}
          </div>
        </div>
        <div class="item" @click="$router.replace('/account')">
          <img class="icon" src="/img/my/icon4.png" alt="极度证券">
          <div>
            <!-- 账户总览 -->
            {{ $t('home.l21') }}
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="li" @click="toJoin">
        <img class="icon" src="/img/my/icon6.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 合伙人计划 -->
            {{ $t('join.l') }}
          </div>
          <div class="right flex">
            <div>
              <!-- 加入我们,畅享业内最高返佣 -->
              {{ $t('my.l7') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
    </div>
    <div class="box" v-if="isLogin">
      <div class="share-box">
        <div class="left">
          <div class="item">
            <div class="lab">
              <!-- 邀请分享,赢取高达 -->
              {{ $t('my.l8') }}
            </div>
            <div>10000 USD</div>
          </div>
          <div class="item">
            <div class="lab">
              <!-- 您的邀请码 -->
              {{ $t('my.l9') }}
            </div>
            <div class="flex">
              <div>{{ userInfo.uid }}</div>
              <img class="copy" @click="copyText(userInfo.uid)" src="/img/icon/copy.png" alt="极度证券">
            </div>
          </div>
        </div>
        <div class="right">
          <img class="img" src="/img/my/img1.png" alt="极度证券">
          <div class="flex">
            <div class="btn" @click="$router.push('/share')">
              <!-- 立即邀请 -->
              {{ $t('my.l10') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="li" @click="$router.push('/coupon-center')">
        <img class="icon" src="/img/my/icon15.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 卡券中心 -->
            {{ $t('share.l10') }}
          </div>
          <div class="right flex">
            <div>
              <!-- 折扣福利，尽在卡里 -->
              {{ $t('my.l21') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
      <div class="li" @click="$router.push('/activities')">
        <img class="icon" src="/img/my/icon7.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 活动中心 -->
            {{ $t('tab.tab6') }}
          </div>
          <div class="right flex">
            <div>
              <!-- 各种优惠好礼 -->
              {{ $t('my.l11') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
      <!-- <div class="li" @click="$router.push('/bull-information/1')">
        <img class="icon" src="/img/my/icon13.png" alt="极度证券">
        <div class="content flex">
          <div>牛股情报</div>
          <div class="right flex">
            <div>最牛的股票最新的情报</div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div> -->
      <div class="li" @click="$router.push('/help')">
        <img class="icon" src="/img/my/icon8.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 帮助中心 -->
            {{ $t('home.l26') }}
          </div>
          <div class="right flex">
            <div>
              <!-- 存取款,交易疑问,看这里 -->
              {{ $t('my.l12') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
      <div class="li" @click="$router.push('/chat')">
        <img class="icon" src="/img/my/icon9.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 客服和支持 -->
            {{ $t('my.l13') }}
          </div>
          <div class="right flex">
            <div>
              <!-- 24/7在线响应 -->
              {{ $t('my.l14') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
      <div class="li" @click="languagePop = true">
        <img class="icon" src="/img/my/icon10.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 语言设置 -->
            {{ $t('my.l15') }}
          </div>
          <div class="right flex">
            <div>{{ languageText[language] }}</div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
      <div class="li" @click="$router.push('/feedback')">
        <img class="icon" src="/img/my/icon11.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 意见反馈 -->
            {{ $t('my.l16') }}
          </div>
          <div class="right flex">
            <div>
              <!-- 帮极度变的更优秀 -->
              {{ $t('my.l17') }}
            </div>
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
      <div class="li" @click="$router.push('/fit')">
        <img class="icon" src="/img/my/icon14.png" alt="极度证券">
        <div class="content flex">
          <div>
            <!-- 设置 -->
            {{ $t('setting.btn3') }}
          </div>
          <div class="right flex">
            <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="languagePop" position="right" :style="{ width: '100%' }">
      <language @cancel="languagePop = false" />
    </van-popup>
  </div>
</template>
<script>
import { copyText } from '@/utils/index'
import language from "@/components/language";
import { mapGetters } from "vuex";
export default {
  components: {
    language
  },
  data () {
    return {
      languagePop: false,
    }
  },
  beforeDestroy() {
    this.languagePop = false
  },
  activated() {
    this.languagePop = false
  },
  computed: {
    ...mapGetters(['userInfo']),
    languageText() {
      return {
        'zh-CN': '简体中文',
        'zh-TW': '繁体中文',
        'en': 'English',
        'ru': 'Русский',
        'th': 'แบบไทย',
        'vi': 'Tiếng Việt',
      }
    }
  },
  methods: {
    toAuth() {
      if (!this.isLogin) {
        this.$router.push('/auth')
        return
      }
      this.fullscreenLoading = true
      this.$store.dispatch('getUserInfo').then(() => {
      }).finally(() => {
        this.fullscreenLoading = false
        if (this.userInfo.identity_status == 1) {
          this.$router.push('/auth-success')
          return
        }
        if (this.userInfo.identity_status == 4) {
          this.$router.push('/auth-fail')
          return
        }
        this.$router.push('/auth')
      })
    },
    toJoin() {
      if (!this.isLogin) {
        this.$router.push('/login')
        return
      }
      this.$router.push('/join/' + this.userInfo.uid)
    },
    copyText(text) {
      copyText(text)
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  height: calc(100vh - 61px);
  overflow-y: auto;
  background-color: var(--bg2-);
  padding-bottom: 9px;
}
.header {
  margin-bottom: 6px;
  background-color: var(--bg-);
  padding: 0 17px;
  .top {
    padding: 18px 0;
    position: relative;
    .title {
      font-size: 17px;
      font-weight: 600;
      text-align: center;
    }
    .right {
      position: absolute;
      top: 9px;
      right: 0;
    }
    .van-icon {
      // font-weight: 600;
    }
  }
  .info-box {
    padding: 21px 0 8px;
    cursor: pointer;
    .info {
      flex: 1;
      min-width: 10%;
      max-width: 100%;
      padding-left: 15px;
      position: relative;
    }
    .arrow-right {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
    }
    .name {
      font-size: 24px;
      font-weight: 600;
      line-height: 26px;
    }
    .im {
      min-width: 10%;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
    }
    .uid {
      color: #767676;
      line-height: 16px;
      margin-top: 10px;
    }
    .tag-box {
      background: linear-gradient(180deg, #FFFAF6 0%, #FFF2EA 100%);
      border-radius: 4px;
      border: 1px solid #FFDAC9;
      margin-left: 5px;
      padding: 4px 3px;
      font-size: 11px;
      color: var(--color-);
      line-height: 1;
      font-weight: 400;
      .img {
        width: 17px;
        margin-right: 1px;
      }
    }
  }
  .vip-box {
    background-image: url('@/assets/img/my_top_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 12px 15px 13px 81px;
    color: #fff;
    .left {
      flex: 1;
      min-width: 10%;
      max-width: 100%;
    }
    .title {
      font-weight: 600;
      font-size: 18px;
    }
    .tip {
      margin-top: 6px;
      font-size: 13px;
    }
    .to {
      font-size: 12px;
    }
    .img {
      width: 15px;
      margin-left: 2px;
    }
  }
  .bottom {
    padding: 16px 15px 15px;
    font-size: 12px;
    align-items: flex-start;
    justify-content: space-between;
    .item {
      cursor: pointer;
      text-align: center;
    }
    .icon {
      width: 46px;
      margin: 0 auto 8px;
      display: block;
    }
  }
}
.wrapper {
  padding: 0 18px;
  background-color: var(--bg-);
  .li {
    padding-left: 34px;
    position: relative;
    font-size: 17px;
    .content {
      justify-content: space-between;
      padding: 18px 0;
      cursor: pointer;
      column-gap: 6px;
    }
    &+.li {
      .content {
        border-top: 1px solid var(--border-);
      }
    }
    .icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
    }
    .right {
      color: #A3A3A3;
      font-size: 13px;
      flex: 1;
      min-width: 1%;
      max-width: 100%;
      justify-content: flex-end;
    }
    .van-icon-point-gift-o {
      margin-right: 4px;
    }
    .arrow-right {
      width: 8px;
      margin-left: 7px;
    }
    .el-icon-arrow-right {
      color: #C3C3C3;
      font-size: 20px;
    }
  }
}
.box {
  padding: 7px 18px;
  background-color: #fff;
}
.share-box {
  position: relative;
  background: #F7FAFE;
  padding: 3px 12px 3px 14px;
  border-radius: 6px;
  border: 1px solid #EFF3F8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 12px;
  .item {
    padding: 14px 0;
    font-size: 20px;
    font-weight: 600;
    &+.item {
      border-top: 1px solid #EEF1F6;
    }
  }
  .left {
    flex: 1;
    min-width: 0px;
  }
  .lab {
    color: #A0A0A0;
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 14px;
  }
  .right {
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .img {
      display: block;
      width: 96px;
      margin-bottom: 9px;
    }
  }
  .copy {
    width: 17px;
    cursor: pointer;
    margin-left: 7px;
  }
  .btn {
    text-align: center;
    background-color: var(--color-);
    border-radius: 6px;
    line-height: 36px;
    min-width: 95px;
    color: #FEFFFF;
    font-size: 16px;
    padding: 0 6px;
    font-weight: 600;
    cursor: pointer;
  }
}
</style>