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


    <div class="total-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>

      <!-- 评测列表展示组件 -->
      <BaseExamList @chooseExam="chooseExam" @showEvaluationList="showEvaluationList" ref="examListRef"></BaseExamList>

      <!-- 右侧数据展示区域 -->
      <div class="total-content" ref="dataContainer">
        <div class="back-to-top fl-col-center" title="返回顶部" v-if="isShowBackToTop" @click="handleBackToTop">
          <Icon type="ios-arrow-up" />
        </div>
        <Spin fix v-show="contentLoading"></Spin>
        <div class="basic-info" v-if="!isShowEvaluations">
          <p>
            <span class="info-type" :style="{color:colorTransfer[currentExamItem.examType] || 'red',borderColor:colorTransfer[currentExamItem.examType]|| 'red'}">{{currentExamItem.examType}}</span>
            <span class="info-name">{{currentExamItem.name}}</span>
            <span class="info-grade">{{currentExamItem.period + currentExamItem.grade}}</span>
            <span class="info-subject" v-for="subject in subjectSplitList">{{subject.substr(0,1)}}</span>
          </p>
          <p class="info-date-person">
            <span class="info-person">{{$t('totalAnalysis.text7')}}：<span style="color:#fff">{{currentExamItem.joinNum}}人</span></span>
            <span class="info-date">{{$t('totalAnalysis.text8')}}：<span style="color:#fff">{{currentExamItem.date}}</span></span>
          </p>
          <div class="basic-tools">
            <span class="basic-tool-export" @click="handleExportTables"> {{$t('totalAnalysis.exportTable')}} <Icon type="md-archive" /></span>
          </div>
        </div>
        <div class="data-select" v-if="!isShowQuestions" ref="dataSelect">
          <div class="data-select-items" style="display:inline-block">
            <span :class="this.$route.path == '/total' || this.$route.path.indexOf('/total/achievement') > -1 ? 'data-select-active' : ''" @click="handleDataSelect('0')">{{$t('totalAnalysis.module1')}}</span>
            <span :class="this.$route.path.indexOf('/total/scatter') > -1 ? 'data-select-active' : ''" @click="handleDataSelect('1')">{{$t('totalAnalysis.module2')}}</span>
            <span :class="this.$route.path.indexOf('/total/test') > -1 ? 'data-select-active' : ''" @click="handleDataSelect('2')">{{$t('totalAnalysis.module3')}}</span>
            <span :class="this.$route.path.indexOf('/total/knowledge') > -1 ? 'data-select-active' : ''" @click="handleDataSelect('3')">{{$t('totalAnalysis.module4')}}</span>
          </div>
          <span style="float:right;margin-bottom:4px;" v-show="dataSelectIndex != 0">
            <span class="select-title">{{$t('totalAnalysis.currentSubject')}}：</span>
            <Select v-model="subjectSelectVal" style="width:150px" @on-change="handleSubjectChange">
              <Option v-for="(item,index) in getSubjectList" :value="index" :key="index" :label="item"></Option>
            </Select>
          </span>
        </div>
        <div class="data-container" style="position:relative" ref="routerView">
          <Loading :top="300" :borderWidth="4" :borderTopWidth="8" v-show="dataLoading"></Loading>
          <transition name="fade">
            <router-view />
          </transition>
        </div>
      </div>
    </div>

    <!-- 导出表格弹窗  -->
    <Modal v-model="isExportTables" width="660" footer-hide class="export-modal">
      <p slot="header" style="text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>导出表格</span>
      </p>
      <ExportTables></ExportTables>
    </Modal>

  </div>
</template>

<script>
  import Loading from '@/common/Loading.vue'
  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,Loading
    },
    data() {
      return {
        searchValue: "",
        contentLoading: false,
        dataLoading:false,
        dataSelectIndex: 0 ,
        menuIndex: 0,
        isShowBackToTop:false,
        isShowQuestions:false,
        isShowEvaluations:false,
        isSubMenuShow: false,
        isExportTables:false,
        currentExamItem: {},
        subjectSelectVal: 0,
        subjectSplitList:[],
        subjectList: [],
        colorTransfer: {
          '模拟测验':'#fbd103',
          '诊断测验':'#baecff',
          '全国测验':'#00ff8a'
        }
      }
    },
    created() {
      this.subjectList = this.$store.state.totalAnalysis.subjectList;
    },

    computed:{
      getSubjectList() {
        let list = this.$store.state.totalAnalysis.subjectList;
        return list.length ? list : this.subjectSplitList;
      }
    },

    methods: {
      //选择查看模块
      handleDataSelect(index) {
        let path = "";
        let that = this;
        this.dataSelectIndex = index;
        this.dataLoading = true;
        switch (Number(index)) {
          case 0:
            path = "/total";
            break;
          case 1:
            path = "/total/scatter";
            break;
          case 2:
            path = "/total/test";
            break;
          case 3:
            path = "/total/knowledge";
            break;
          default:
            break;
        }
        setTimeout(function () {
          that.dataLoading = false;
        }, 1000)
        this.$router.push(path);

      },

      //指定容器滚动到指定位置
      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;
        let percentList = this.$store.state.totalAnalysis.subjectPercent;
        this.contentLoading = true;
        this.isShowQuestions = false;
        this.isShowEvaluations = false;
        this.currentExamItem = item;
        this.subjectSplitList = this.currentExamItem.subject.split(',');
        //this.$store.commit('updateSubjectList', this.subjectSplitList);
        sessionStorage.setItem('c_exam', JSON.stringify(item));
        //this.handleDataSelect(0);
        this.scrollToTop(this.$refs.dataContainer, 0, 100);
        setTimeout(function () {
          //通过VUEX修改存放在store的科目及格率百分比值
            that.$store.commit('updatePercent', percentList);
            that.$store.commit('updateBaseBarData');
            that.$store.commit('updateEntryData',item.joinNum);
            that.$store.commit('updateSubjectPercent', item.subject.split(','));
            that.$store.commit('updateSubjectList', that.subjectSplitList);
            that.contentLoading = false;
        }, 1000)

        this.subjectSelectVal = 0;
        this.handleSubjectChange(0);

      },

      //侧边菜单栏点击事件
      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
      },

      //返回顶部
      handleBackToTop() {
        this.scrollToTop(this.$refs.dataContainer, 0, 200);
      },

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

      //切换科目时更换页面图表数据
      handleSubjectChange(val) {
        if (val == 0 || val == 1) {
          this.$store.commit('updateScatterData',this.$store.state.totalAnalysis.scatter);
          this.$store.commit('updateTestScatterData',this.$store.state.totalAnalysis.testScatter);
          this.$store.commit('updatePieData',val);
          this.$store.commit('updateRadarData');
        }
      },



    },
    mounted() {
      let examIndex = this.$route.query.index;


      this.$refs.dataContainer.addEventListener('scroll', () => {
        this.isShowBackToTop = this.$refs.dataContainer.scrollTop >= 400 ? true : false;
      }, false)



      //如果路由跳转到成绩分析页面带有考试序号参数则跳转到当前考试
      if (examIndex || examIndex == 0) {
        this.currentExamItem = this.$refs.examListRef.examList[this.$route.query.index];
        this.$refs.examListRef.examIndex = this.$route.query.index;
        let percentList = this.$store.state.totalAnalysis.subjectPercent;
        this.subjectSplitList = this.currentExamItem.subject.split(',');
        //修改当前考试的及格率等图表数据
        this.$store.commit('updatePercent', percentList);
        this.$store.commit('updateBaseBarData');
        this.$store.commit('updateSubjectList', this.subjectSplitList);


      } else if (!examIndex && examIndex != 0) {  //如果是首次进入则读取上次考试，如果没有上次考试则默认读取第一个
        let existExam = JSON.parse(sessionStorage.getItem('c_exam'));
        let list = this.$refs.examListRef.examList;
        this.currentExamItem = existExam || this.$refs.examListRef.examList[0]; //如果没有上次考试则默认读取第一个
        this.$refs.examListRef.examIndex = existExam ? list.indexOf(list.filter(item => item.id == existExam.id)[0]) : 0;
      }

      this.subjectSplitList = this.currentExamItem.subject.split(',');
      this.subjectSelectVal = 0;
      this.handleSubjectChange(0);


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


<style src="./index.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 .ivu-select-single .ivu-select-selection {
      height: 30px;
      background: transparent;
      border: 1px solid #595959;
      box-shadow: none;
      color:#cecece; 
  }

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

  .total-content  .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:#fff;
    color:#757575;
  }

</style>
