<template>
  <div class="pb_content">
    <div class="my_head">
      <div class="head_position" @click="goTo('/my/myDetail')">
        <div class="li_head_portal">
          <img
            v-lazy="
              smailheadportrait
                ? smailheadportrait
                : require('../../assets/icon/portal.png')
            "
            alt=""
          />
        </div>
        <div class="my_userName">
          <span>{{ name ? name : "用户" }}</span
          ><span>{{ this.$store.state.userInfo.classnameA }}</span>
        </div>
        <van-icon name="arrow" color="#fff" size="1.2rem" class="my_info" />
      </div>
      <div class="my_panel">
        <div @click="goTo('/my/myClass')">
          <div>
            <span>{{ NumList ? NumList.courseNum : 0 }}</span>
          </div>
          <div><span>课程</span></div>
        </div>
        <div class="van-hairline--left my_border_left"></div>
        <div @click="goTo('/my/myWorks')">
          <div>
            <span>{{ NumList ? NumList.workNum : 0 }}</span>
          </div>
          <div><span>作品</span></div>
        </div>
      </div>
    </div>
    <div class="my_nav">
      <van-row>
        <van-col span="8" @click="goTo('/my/myClass')"
          ><div class="my_nav_panel">
            <div class="my_c_green my_c">
              <img src="../../assets/icon/wodekecheng.png" alt="" />
            </div>
            <div>我的课程</div>
          </div></van-col
        >
        <van-col span="8" @click="goTo('/my/myWorks')"
          ><div class="my_nav_panel">
            <div class="my_c_orange my_c">
              <img src="../../assets/icon/wodzuoping.png" />
            </div>
            <div>我的作品</div>
          </div></van-col
        >
        <!-- <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_blue my_c">
              <img src="../../assets/icon/xuexishuju.png" />
            </div>
            <div>学习数据</div>
          </div></van-col
        > -->
        <!-- <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_orange my_c">
              <img src="../../assets/icon/shoucang.png" />
            </div>
            <div>收藏</div>
          </div></van-col
        > -->
        <van-col span="8" @click="goTo('/my/Notice')"
          ><div class="my_nav_panel">
            <div class="noticeBox">
              <span v-if="this.$store.state.nCount != 0"></span>
              <div class="my_c_blue my_c">
                <img src="../../assets/icon/xiaoxitongzhi.png" />
              </div>
            </div>
            <div>消息通知</div>
          </div></van-col
        >
        <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_green my_c" @click="goTo('/my/homeSchool')">
              <img src="../../assets/icon/jiaxioashe.png" />
            </div>
            <div>家校区</div>
          </div></van-col
        >
        <!-- <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_purple my_c" @click="goTo('/my/quality')">
              <img src="../../assets/icon/quality.png" />
            </div>
            <div>素质综合评价</div>
          </div></van-col
        >-->
        <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_purple my_c" @click="goTo('/my/studentE')">
              <img src="../../assets/icon/studentEve.png" />
            </div>
            <div>学生评价</div>
          </div></van-col
        >
        <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_red my_c" @click="goTo('/my/medal')">
              <img src="../../assets/icon/medal.png" />
            </div>
            <div>勋章与荣誉</div>
          </div></van-col
        >
        <van-col span="8"
          ><div class="my_nav_panel">
            <div class="my_c_yellow my_c" @click="goTo('/my/ask')">
              <img src="../../assets/icon/ask.png" />
            </div>
            <div>问卷调查</div>
          </div></van-col
        >
      </van-row>
    </div>
    <div>
      <van-cell-group>
        <van-cell
          title="系统设置"
          size="large"
          is-link
          @click="goTo('/my/system')"
        />
        <van-cell
          title="关于"
          size="large"
          is-link
          @click="goTo('/my/about')"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  // name:"main-keep-alive",
  data() {
    return {
      smailheadportrait: this.$store.state.userInfo.smailheadportrait,
      name: this.$store.state.userInfo.name,
      NumList: [],
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    getNum() {
      let params = { uid: this.$store.state.userInfo.userid };
      this.ajax
        .get(this.$store.state.api + "getNum", params)
        .then((res) => {
          this.NumList = res.data[0][0];
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.getNum();
  },
};
</script>

<style scoped>
.my_head {
  height: 7rem;
  background-image: url("../../assets/icon/wode.png");
  background-size: 100% 100%;
  text-align: center;
  /* line-height: 6rem; */
  color: #fff;
  font-size: 0.9rem;
  /* position: fixed; */
  z-index: 9999;
  width: 100%;
  padding: 1rem 0 0 0;
}
.head_position {
  display: flex;
  justify-content: start;
  align-items: center;
  /* margin: 1rem 0 0 0; */
  position: relative;
}
.li_head_portal {
  height: 3rem;
  width: 3rem;
  overflow: hidden;
  border-radius: 10rem;
  margin: 0 0 0 1rem;
}
.li_head_portal img {
  width: inherit;
  height: inherit;
}
.my_userName {
  display: flex;
  justify-content: center;
  /* margin: 0 0 1rem 0.8rem; */
  margin-left: 1rem;
  align-items: center;
}
.my_userName span:first-child {
  font-size: 0.85rem;
}
.my_userName span:last-child {
  font-size: 0.7rem;
  margin-left: 0.5rem;
}
.my_info {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);
}
.my_panel {
  height: 3.5rem;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  width: 85%;
  left: 50%;
  transform: translate(-50%, 35%);
  color: #383838;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  box-shadow: #c8c8c8 0px 0px 10px 0px;
}
.my_border_left {
  height: 70%;
  width: 1.5px;
  margin: 0 3.5rem;
}
.van-hairline--left::after {
  border-left-width: 3px;
}
.my_nav {
  background: #fff;
  width: 100%;
  margin: 1.5rem 0 0.7rem;
  padding: 0.5rem 0 1rem;
}
.my_nav_panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: #383838;
}
.my_nav_panel div:nth-child(2) {
  margin: 0.3rem 0;
}
.my_c {
  height: 2.2rem;
  width: 2.2rem;
  overflow: hidden;
  border-radius: 10rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my_c img {
  width: 60%;
  width: 60%;
}
.my_c_yellow {
  background: rgb(245, 223, 119);
}
.my_c_green {
  background: rgb(140, 229, 163);
}
.my_c_orange {
  background: rgb(247, 166, 82);
}
.my_c_blue {
  background: rgb(135, 197, 254);
}
.my_c_purple {
  background: rgb(236, 135, 254);
}
.my_c_red {
  background: rgb(245, 119, 119);
}

.noticeBox {
  position: relative;
  /* margin-right: 10px; */
  height: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noticeBox span {
  position: absolute;
  background: red;
  width: 5px;
  height: 5px;
  border-radius: 30px;
  top: -3px;
  right: -3px;
}
</style>
