<style lang="less" scoped>
  @import '../../../../assets/CSS/student-analysis/common.css';
</style>
<template>
  <div class="total-index-container">
    <!-- 全科学情头部区域 -->
    <div class="total-index-header">
      <BaseHeader></BaseHeader>
    </div>

    <div class="total-index-body">
      <!-- 左侧菜单 -->
      <div class="slide-menu">
        <div @click="handleMenuClick('0')" :class="['slide-menu-item','fl-col-center',menuIndex == '0' ? 'slide-menu-active' : '']">
          <Icon type="md-school" />
          <span>校园管理</span>
        </div>
        <div @click="handleMenuClick('1')" :class="['slide-menu-item','fl-col-center',menuIndex == '1' ? 'slide-menu-active' : '']">
          <Icon type="ios-book" />
          <span>课纲与内容</span>
        </div>
        <div @click="handleMenuClick('2')" :class="['slide-menu-item','fl-col-center',menuIndex == '2' ? 'slide-menu-active' : '']">
          <Icon type="md-ribbon" />
          <span>学习活动</span>
        </div>
        <div @click="handleMenuClick('3')" :class="['slide-menu-item','fl-col-center',menuIndex == '3' ? 'slide-menu-active' : '']">
          <Icon type="md-people" />
          <span>班级服务</span>
        </div>
        <Divider />
        <transition name="fade">
          <div v-show="isSubMenuShow" class="slide-sub-menu fl-col-center">
            <Tooltip content="区班校活动和记录簿" placement="right">
              <Icon type="md-browsers" title="" />
            </Tooltip>
            <Tooltip content="亲师生联络簿" placement="right">
              <Icon type="md-happy" title="" />
            </Tooltip>
            <Tooltip content="操行成绩管理" placement="right">
              <Icon type="md-paper" title="" />
            </Tooltip>
            <Tooltip content="成绩总览与登录" placement="right">
              <Icon type="md-contacts" title="" />
            </Tooltip>
            <Tooltip content="学情仪表盘" placement="right">
              <Icon type="md-podium" title="" color="#fff" />
            </Tooltip>
          </div>
        </transition>

      </div>
      <div class="total-index-content" ref="dataContainer">

        <div class="data-container">
          <transition name="fade">
            <router-view />
          </transition>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
  import '@/utils/chalk.js'
  import 'animate.css'
  import BaseHeader from '@/common/BaseHeader.vue'
  import BaseExamList from '@/common/BaseExamList.vue'
  import ExportTables from '@/components/student-analysis/total/ExportTables.vue'
  export default {
    components: {
      BaseHeader, BaseExamList,ExportTables
    },
    data() {
      return {
        searchValue: "",
        contentLoading:false,
        dataSelectIndex: 0 ,
        menuIndex: 0,
        isShowQuestions:false,
        isShowEvaluations:false,
        isSubMenuShow: false,
        isExportTables:false,
        currentExamItem: {},
        subjectSelectVal:0,
        subjectList: [
          {
            name:"语文"
          },
          {
            name:"数学"
          },
          {
            name:"英语"
          },
          {
            name:"生物"
          },
          {
            name:"化学"
          },
        ],
        colorTransfer: {
          '模拟测验':'#fbd103',
          '校内测验':'#baecff',
          '全国测验':'#00ff8a'
        }
      }
    },
    created() {
    },

    methods: {
      //指定容器滚动到指定位置
      scrollToTop(element, to, duration) {
        if (duration <= 0) return;
        const diff = to - element.scrollTop; 
        const perTick = diff / duration * 10;
        this.timer = setTimeout(() => {
          element.scrollTop += perTick;
          if (element.scrollTop === to) return;
          this.scrollToTop(element, to, duration - 10);
        }, 10);
      },

      //选中某次测验
      chooseExam(item) {
        let that = this;
        this.contentLoading = true;
        this.isShowQuestions = false;
        this.isShowEvaluations = false;
        this.currentExamItem = item;
        //this.handleDataSelect(0);
        this.scrollToTop(this.$refs.dataContainer, 0, 100);
        setTimeout(function () {
          that.contentLoading = false;
        },1000)

      },

      //侧边菜单栏点击事件
      handleMenuClick(index) {
        this.isSubMenuShow = false;
        this.menuIndex = index;
        this.isSubMenuShow = true;
      },

      //点击评测标题展示题目列表
      showQuestionList() {
        this.isShowQuestions = true;
        this.$router.push('/total/questionList');
      },

      //点击查看更多展示评测列表
      showEvaluationList() {
        this.isShowQuestions = true;
        this.isShowEvaluations = true;
        this.$router.push('/total/evaluationList');
      },

      //导出表格操作
      handleExportTables() {
        this.isExportTables = true
      },

      //点击搜索或者按下回车键响应
      handleSearch() {
        if (this.searchValue) {
          //console.log(this.searchValue);
        }
      }

    },
    mounted() {
      

    },
    //监听部分路由变化
    watch: {
    //  '$route'(to, from) {
    //    this.scrollToTop(this.$refs.dataContainer, 0, 100);
    //    console.log(to, from);
    //    if (to.path == "/total" && from.path == "/total/evaluationList") {
    //      this.isShowEvaluations = false;
    //      this.isShowQuestions = false;
    //      this.currentExamItem = to.query.item;
    //      this.$refs.examListRef.examIndex = to.query.index;
    //    }
    //}
},
  }
</script>


<style src="./TotalIndex.css" scoped></style>

<style>
   .total-content .basic-tools .ivu-input {
      background: transparent;
      border: 1px solid #595959;
      height: 30px;
      padding-left: 10px;
      font-size: 14px;
      font-weight: bold;
      color: #a2a2a2;
      box-shadow: none;
      border-radius: 5px;
    }

    .total-content .basic-tools .ivu-input::-webkit-input-placeholder {
      color: #616161;
    }

  .export-modal .ivu-modal-header {
    display:none;
  }

    /*全科单科选择部分*/

  .total-content .basic-tools .ivu-select {
      margin: 5px 20px 5px 0;
      height: 30px;
  }

  .total-content .basic-tools .ivu-select-single .ivu-select-selection {
      height: 30px;
      background: transparent;
      border: 1px solid #595959;
      box-shadow: none;
      color:#cecece; 
  }

  .total-content .basic-tools .ivu-select-single .ivu-select-arrow {
      top:76%;
  }

  .total-content .basic-tools .ivu-select-single .ivu-select-placeholder {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
  }

  .total-content .ivu-spin-fix {
    background:rgba(209, 209, 209, 0.51);
  }

  .total-content .ivu-spin-dot {
     width:100px;
     height:100px;
  }

  .export-modal .ivu-modal-content {
    background:#757575;
    color:#fff;
  }

</style>
