<template>
  <div class="about-me">
    <back-bar title="用户信息"></back-bar>
    <div class="pub-user-top" v-if="userInfo">
      <div class="avatar-wrap">
        <img class="user-avatar" v-if="userInfo.cover_photo" :src="userInfo.cover_photo" alt="" @click.stop="$showImgPreview(userInfo.cover_photo)">
        <div v-else class="user-avatar"
        :class="'avatar_bg' + userInfo.user_id % 9"
        :data-name="userInfo.nick_name.slice(0,2).toUpperCase()"
        ></div>
      </div>
      <div class="top-info">
        <div class="name">{{userInfo.nick_name}}</div>
        <div class="code">{{$t('h5.username')}}：@{{userInfo.user_name}}</div>
      </div>
    </div>
    <ul class="pub-account-list" v-if="userInfo">
      <li class="list-item" v-for="(item, key) in userInfo.binds" :key="key">
        <div class="icon-wrap">
          <i :class="`${item.type}-icon`"></i>
        </div>
        <div class="info">
          <div class="title-wrap">
            <h4>{{item.type.toUpperCase()}}</h4>
            <p>{{item.account || $t('h5.notBind')}}</p>
          </div>
          <div class="opetate" v-if="item.account">
            <i :class="item.is_visible === 0 ? 'unopen' : 'open'"></i>
            <p>{{item.is_visible === 0 ? $t('userinfo.private') : $t('userinfo.public')}}</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="pub-bottom-btn ext-send" @click="sendMsg">{{$t('public.sendMessage')}}</div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
// import API from '@/api'
import backBar from '@/components/backBar'
import { otherInfoMixins } from '@/mixins/user'

export default {
  name: 'aboutOther',
  mixins: [otherInfoMixins],
  components: {
    backBar
  },
  data () {
    return {
      userId: this.$route.params.id
    }
  },
  computed: {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>

</style>
