<template>
  <div class="page">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 个人信息 -->
        {{ $t('about.l14') }}
      </div>
    </van-sticky>
    <div class="container" v-if="userInfo.uid">
      <div class="li flex" @click="changeImgPopShow('head_file')">
        <div>
          <!-- 头像 -->
          {{ $t('about.l15') }}
        </div>
        <div class="right flex">
          <van-image
            width="30"
            height="30"
            round
            fit="cover"
            :src="userInfo.head_file || '/img/home/user.png'"
          />
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
      <div class="li flex" @click="$router.push('/name')">
        <div>
          <!-- 昵称 -->
          {{ $t('about.l16') }}
        </div>
        <div class="right flex">
          <div class="value">{{ userInfo.im_name }}</div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
      <div class="li flex">
        <div>ID</div>
        <div class="right1 flex">
          <div class="value">{{ userInfo.uid }}</div>
          <img class="copy" @click="copyText(userInfo.uid)" src="/img/info/copy.png" alt="极度证券">
        </div>
      </div>
      <div class="li flex" @click="$router.push('/business-card')">
        <div>
          <!-- 二维码名片 -->
          {{ $t('about.l17') }}
        </div>
        <div class="right flex">
          <img class="qr" src="/img/info/qr.png" alt="极度证券">
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
      <div class="li flex" @click="$router.push('/sex')">
        <div>
          <!-- 性别 -->
          {{ $t('about.l18') }}
        </div>
        <div class="right flex">
          <div class="value">{{ sexName[userInfo.sex] || sexName['2'] }}</div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
      <div class="li flex" @click="$router.push('/introduction')">
        <div>
          <!-- 个人简介 -->
          {{ $t('about.l19') }}
        </div>
        <div class="right flex">
          <div class="description">{{ userInfo.description }}</div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
      <div class="li flex" @click="changeImgPopShow('bg_file')">
        <div>
          <!-- 主页背景图 -->
          {{ $t('about.l20') }}
        </div>
        <div class="right flex">
          <img class="bg_img" v-if="userInfo.bg_file" :src="userInfo.bg_file" alt="极度证券">
          <div class="bg" v-else></div>
          <img class="arrow-right" src="/img/my/icon12.png" alt="极度证券">
        </div>
      </div>
    </div>
    <van-popup get-container="body" v-model="changeImgPop" round position="bottom">
      <changeImg v-if="changeImgPop" :changeImgKey="changeImgKey" @cancel="changeImgPop = false" />
    </van-popup>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { copyText } from '@/utils/index'
import changeImg from "./components/changeImg.vue";
export default {
  components: {
    changeImg
  },
  data () {
    return {
      changeImgPop: false,
      changeImgKey: '',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    sexName() {
      return {
        // '0': '男',
        // '1': '女',
        // '2': '保密',
        '0': this.$t('about.l21'),
        '1': this.$t('about.l22'),
        '2': this.$t('about.l23'),
      }
    }
  },
  created () {
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    changeImgPopShow(val) {
      this.changeImgPop = true
      this.changeImgKey = val
    },
    copyText(text) {
      copyText(text)
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
  background-color: #F6FAFE;
}
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.container {
  background-color: var(--bg-);
  padding: 0 18px;
  .li {
    height: 52px;
    border-bottom: 1px solid #EDF2F7;
    line-height: 18px;
    color: var(--color-1-);
    font-size: 16px;
    justify-content: space-between;
    cursor: pointer;
  }
  .arrow-right {
    width: 7px;
  }
  .right {
    column-gap: 10px;
    font-size: 14px;
    color: #A1A1A1;
    flex: 1;
    justify-content: flex-end;
    min-width: 10%;
    max-width: 70%;
  }
  .description {
    max-width: 80%;
    min-width: 10%;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
    text-overflow: ellipsis;
  }
  .right1 {
    column-gap: 6px;
    font-size: 14px;
    color: #A1A1A1;
    flex: 1;
    justify-content: flex-end;
    min-width: 10%;
    max-width: 70%;
  }
  .value {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    text-align: right;
    word-break: break-all;
  }
  .bg_img {
    height: 34px;
  }
  .bg {
    width: 64px;
    height: 34px;
    background-color: var(--color-);
  }
  .qr {
    width: 16px;
  }
  .copy {
    width: 15px;
    cursor: pointer;
  }
}
</style>