<template>
  <div>
    <el-row class="tac">
      <el-col :span="24" id="taclist">
        <el-menu
          class="el-menu-vertical-demo"
          active-text-color="#29A88D"
          background-color="#FFFFFF"
          active-background-color="#52CC60"
          text-color="#333333"
          @open="handleOpen"
          @close="handleClose"
        >
          <div v-for='(item, y) in menuList' :key='y'>
            <el-submenu  :index="item.name" v-if="item.name">
              <template slot="title">
                <span>{{format(item.time,'MM月dd日')}}</span>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item
              v-for='(val, x) in item.list' :key='x'
              :index="val.homeworkId"
                @click="HomeWorkClick(val,y,x)"
              >
                <template slot="title">
                  <span>{{val.name}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-menu-item  :index="item.name" v-else>
              <template slot="title">
                <span>{{item.name}}</span>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </el-col>
      <el-col>
        <ul class="sdudentSlist" @click="listShow">
          <li>学</li>
          <li>生</li>
          <li>列</li>
          <li>表</li>
          <li>>></li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      openeds: ["1"],
      navHeight: 1000,
      menuList: [],
      dataTime: ""
    };
  },
  created() {
    this.NavListShow();
    // this.HomeWorkClick()
  },
  computed: {
    ...mapGetters(["getStudentsList"])
  },
  methods: {
    ...mapActions(["setSetStudentsList","SetSAlltudentsList","setActSubjectIndex","setActVipIndex","setActImageIndex"]),
    listShow() {
      $("#taclist").slideToggle();
    },
    /**
     * 格式化日期
     * @param str 日期字符串 2019-08-03 或 2019-08-03 10:10:10
     * @param fmt
     * @returns {*}
     */
    format(str, fmt) {
      //  debugger
      let date = new Date(str.replace(/-/g, "/"));
      let o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (let k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
    async NavListShow() {
      console.log("哈哈哈哈哈哈哈哈");
      let filter = {
        // accessToken: "D4FA4AB96F7E402FAE406B59153BDEC7"
      };
      let { data } = await this.$dao.jobDao.navhomeWorklist(filter);
      let code = data.code;
      let menuList = data.data.list;
      if (code === "999") {
        this.menuList = menuList;
        this.SetSAlltudentsList(menuList)
        this.setSetStudentsList(menuList[0].list[0]);
        // debugger
      }
      console.log(data);
    },
    // 一级点击
    HomeWorkClick(val,actSubjectIndex,actVipIndex) {
      this.$util.messageMethod("success", "前去作业预览");
      this.setActSubjectIndex(actSubjectIndex)
      this.setActVipIndex(actVipIndex)
      this.setActImageIndex(0)
      // debugger
      this.$router.push({
        path: "/home/homeWork_approval/HomeWorkShow"
      });
      this.setSetStudentsList(val);
    },
    NavClick(item) {
      console.log(item.index);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {}
};
</script>
<style scoped>
.el-menu-item:hover {
  outline: 0 !important;
  color: #52cc60 !important;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #52cc60 !important;
}
.el-submenu__title:hover {
  outline: 0 !important;
  color: #fff !important;
  background: #52cc60 !important;
}
.tac {
  border: 1px solid #e5e7f1;
  border-radius: 15px !important;
  margin-top: 10px;
  position: relative;
  /* margin-right:10px; */
}
.el-submenu__title {
  border-top: 2px solid #fafafa !important;
  background: #52cc60 !important;
}
.sdudentSlist {
  background-color: #52cc60;
  color: #ffff;
  text-align: center;
  border-radius: 0px 10px 10px 0px;
  cursor: pointer;
  position: absolute;
  top: 0;
  /* right:0; */
}
</style>