<template>
  <div class="container">
    <div class="usertop">
      <div class="usertophead flextwo" @click="changeziliao">
        <div class="usertopheadleft flexone">
          <div class="userimg">
            <img :src="avatar" alt />
          </div>
          <div class="username">{{username==''?'暂无昵称':username}}</div>
        </div>
        <img src="../../../assets/grayrow.png" alt class="yourow" />
      </div>
      <div class="userlsit flexsix">
        <div class="userlistitem flexseven" @click="join(1)">
          <img src="../../../assets/fatiezi.png" alt class="userlistimg" />

          <div class="iserlistname">发帖子</div>
        </div>
        <div class="userlistitem flexseven" @click="join(2)">
          <img src="../../../assets/joinus.png" alt class="userlistimg" />

          <div class="iserlistname">加入我们</div>
        </div>
        <div class="userlistitem flexseven" @click="join(3)">
          <img src="../../../assets/kefu.png" alt class="userlistimg" />

          <div class="iserlistname">客服中心</div>
        </div>
        <div class="userlistitem flexseven" @click="join(4)">
          <img src="../../../assets/jiangquan.png" alt class="userlistimg" />

          <div class="iserlistname">获得奖券</div>
        </div>
        <div class="userlistitem flexseven" @click="join(5)">
          <img src="../../../assets/collect.png" alt class="userlistimg" />

          <div class="iserlistname">我的收藏</div>
        </div>
      </div>
    </div>
    <div class="kaikeitem flextwo" @click="jump(1)">
      <div class="kaikeitemleft flexone">
        <div class="courseimg">
          <img src="../../../assets/kaike.png" alt />
        </div>

        <span class="kaiketext">去开课</span>
      </div>
      <img src="../../../assets/grayrow.png" alt class="yourow" />
    </div>
    <div class="kaikeitem flextwo" @click="jump(2)">
      <div class="kaikeitemleft flexone">
        <div class="courseimg">
          <img src="../../../assets/zuozhan.png" alt />
        </div>

        <span class="kaiketext">作战包</span>
      </div>
      <img src="../../../assets/grayrow.png" alt class="yourow" />
    </div>
    <div class="kaikeitem flextwo" @click="jump(3)">
      <div class="kaikeitemleft flexone">
        <div class="courseimg">
          <img src="../../../assets/sucai.png" alt />
        </div>

        <span class="kaiketext">素材</span>
      </div>
      <img src="../../../assets/grayrow.png" alt class="yourow" />
    </div>
    <tabBar v-bind:active="3" />
  </div>
</template>

<script>
import tabBar from "@/components/views/tabBar.vue";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      selnav: 3,
      username:'',
      avatar:''
    };
  },
  created(){
    this.getuserinfo()
  },
  methods: {
   
    getuserinfo(){
      let that = this;
      var url = "/api/user/index";
      let param = {
        
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.username=res.data.nickname,
          that.avatar=res.data.avatar
         
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    selcourse(e) {
      console.log(37344);
      console.log(e);
      this.selnav = e.currentTarget.dataset.id;
    },
    // 修改资料
    changeziliao() {
      let that=this;
      this.$router.push({
        path: "/changeziliao",
        query: { username: that.username,avatar:that.avatar }
      });
    },
    jump(id) {
      if (id == 1) {
        this.$router.push({
          path: "/opencourse",
          // query: { testId: item.test_student_id }
        });
      } else if (id == 2) {
        this.$router.push({
          path: "/zuozhanbao",
          // query: { testId: item.test_student_id }
        });
      } else if (id == 3) {
        this.$router.push({
          path: "/sucaibao",
          // query: { testId: item.test_student_id }
        });
      }
    },
    // 上面跳转
    join(id) {
      if (id == 1) {
this.$router.push({
        path: "/publish"
        // query: { testId: item.test_student_id }
      });
      } else if (id == 2) {
        this.$router.push({
          path: "/joinus",
          // query: { testId: item.test_student_id }
        });


      } else if (id == 3) {

        this.$router.push({
          path: "/kefucenter",
          // query: { testId: item.test_student_id }
        });
      } else if (id == 4) {
        this.$router.push({
          path: "/coupon",
          // query: { testId: item.test_student_id }
        });
      } else if (id == 5) {
        this.$router.push({
          path: "/mycollect",
          // query: { testId: item.test_student_id }
        });
      }
    }
  }
};
</script>

<style>
@import "../../../style/usercenter.css";
</style>