<!--  -->
<template>
  <div class="nav-bar">
    <van-nav-bar :title="middleText" :fixed="true" z-index="998" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <img class="left-img" :src="currentPerson ? currentPerson.avatar : LeftIcon" alt="" />
      </template>
      <template #right>
        <van-icon :name="RightIcon" dot size="28" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import LeftIcon from '@/assets/icons/1_75.png';
import RightIcon from '@/assets/icons/1_30.png';
import APIHealthUser from '@/api/health-user';
export default {
  components: {},
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: '吕子宣 LV 10'
    }
  },
  data() {
    return {
      LeftIcon,
      RightIcon,
      currentPerson: {}
    };
  },
  computed: {
    middleText() {
      let text = '';
      if (this.currentPerson) {
        text = `${this.currentPerson.nickName || ''}LV${this.currentPerson.level >= 0 ? this.currentPerson.level : ''}`;
      }
      return text;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getPersonInfo();
    })

  },
  methods: {
    onClickLeft(value) {
      this.$emit('on-click-left', value);
    },
    onClickRight(value) {
      this.$emit('on-click-right', value);
    },
    // 根据用户id获取用户信息
    getPersonInfo() {
      let reqParams = {
        personId: this.$store.getters.personId
      };
      APIHealthUser.personInfo(reqParams).then(res => {
        const data = res.data.data;
        if (data) {
          this.currentPerson = { ...data };
          this.$store.commit('uid', data.physicUid)
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.nav-bar {
  position: absolute !important;
  left: 0;
  top: 0;
  height: 100px;
  width: 100%;
}

.left-img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

/* @import url(); 引入css类 */
</style>
