<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="yifadot" v-if="msg_count != 0">{{ msg_count }}</div>

          <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>

    <div class="kaikeitem flextwo" @click="jump(4)">
      <div class="kaikeitemleft flexone">
        <div class="courseimg">
          <img src="../../../assets/qufatie.png" alt />
        </div>

        <span class="kaiketext">去发帖</span>
      </div>
      <img src="../../../assets/grayrow.png" alt class="yourow" />
    </div>

    <div class="kaikeitem flextwo" @click="jump(5)">
      <div class="kaikeitemleft flexone">
        <div class="courseimg">
          <img src="../../../assets/zuozhanbao.png" alt />
        </div>

        <span class="kaiketext">作战包历史</span>
      </div>
      <img src="../../../assets/grayrow.png" alt class="yourow" />
    </div>
    <!-- 底部显示 -->
    <div class="bottmvideo flextwo" v-if="showpage">
      <div class="bottomleft flexone">
        <img
          src="../../../assets/chahao.png"
          alt
          class="closevideo"
          @click="hidezhibo"
        />
        <div class="zhiboimgimg">
          <img :src="lesson.image" alt />
        </div>
      </div>
      <div class="enterzhibo" @click="enterzhibo(lesson.id, lesson)">
        {{ lesson.type == 1 ? "进入直播间" : "进入录播间" }}
      </div>
    </div>

    <tabBar v-bind:active="3" />
  </div>
</template>

<script>
import tabBar from "@/components/views/tabBar.vue";
import { Toast } from "vant";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      selnav: 3,
      username: "",
      avatar: "",
      showpage: false,
      lesson: "",
      group_id: "",
      msg_count: ""
    };
  },
  created() {
    document.body.style.backgroundColor = "#f9f9f9";
    document.title = "唐元集公众号";
    this.getuserinfo();
  },
  methods: {
    sel(e) {
      console.log(e);
    },
    test() {
      alert(1111);
    },

    hidezhibo() {
      this.showpage = false;
    },
    // 获取用户信息
    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;
          that.lesson = res.data.lesson;
          that.group_id = res.data.group_id;
          that.msg_count = res.data.msg_count;
          if (that.lesson != null) {
            that.showpage = true;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 进入直播
    enterzhibo(id, lesson) {
      console.log(id);
      console.log(this.lesson.type);
      if (this.lesson.type == 1) {
        this.$router.push({
          path: "/userzhibo",
          query: {
            id: id
          }
        });
        localStorage.setItem("coursename", lesson.title);
      } else if (this.lesson.type == 2) {
        this.$router.push({
          path: "/userlubo",
          query: {
            id: id
          }
        });
      }
    },

    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) {
        if (this.group_id == 0) {
          Toast("暂无开课权限");
        } else {
          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 }
        });
      } else if (id == 4) {
        this.$router.push({
          path: "/publish"
        });
      } else if (id == 5) {
        this.$router.push({
          path: "/zuozhanbaolishi"
        });
      }
    },
    // 上面跳转
    join(id) {
      if (id == 1) {
        this.$router.push({
          path: "/tiezilist"
          // 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) {
        localStorage.setItem("selnav", "");
        this.$router.push({
          path: "/mycollect"
          // query: { testId: item.test_student_id }
        });
      }
    }
  }
};
</script>

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