<template>
  <div class="evaluation">
    <div class="ev-header">
      <Header :parentToChild="syllabusTitle" :identityselect="identitydata"></Header>
    </div>
    <div class="ev-body">
      <div class="ev-slide">
        <div class="ev-slide-school"><Icon type="ios-school" size="26" color="#10abe7" style="vertical-align:sub"/> {{schoolInfo.claimName}}</div>
        <div class="ev-slide-header">选择学段及科目</div>
        <div class="ev-slide-select">
          <!-- 学段选择部分 -->
          <Select v-model="evPeriodSelect" @on-change="periodChange" label-in-value>
            <Option v-for="item in evPeriodsList" :value="item.code" :key="item.rowKey">{{ item.name }}</Option>
          </Select>

          <!-- 科目选择部分 -->
          <Select v-model="evSubjectSelect" @on-change="subjectChange" label-in-value>
            <Option v-for="item in evSubjectList" :value="item.code" :key="item.rowKey">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="ev-slide-header ev-slide-select-volumes" style="position:relative">
          <Loading :top="150" :borderWidth="4" v-show="!isLoadingFinish"></Loading>
          <!--<Loading v-show="!isLoadingFinish"></Loading>-->

          <!-- 册别选择部分 -->
          <Select v-model="evVolumeSelect" @on-change="volumeChange" label-in-value placeholder="请选择册别">
            <Option v-for="item in evVolumesList" :value="item.rowKey" :key="item.rowKey">{{ item.gradeName + '' + item.termName }}</Option>
          </Select>
        </div>
        <SyllabusTree :treeDatas="treeData"></SyllabusTree>
      </div>
      <div class="ev-content">
        <router-view />
      </div>
    </div>
    <div class="slide-menu animated">
      <ul>
        <li @click="goRouter('createExercises')">创建习题</li>
        <li @click="goRouter('exercisesList')">我的题库</li>
        <li @click="goRouter('createTest')">创建评测</li>
        <li @click="goRouter('testPaper')">编辑评测</li>
        <li @click="goRouter('testPaperList')">我的评测</li>
      </ul>
      <!--<Icon type="md-list" />-->
    </div>
  </div>

</template>
<script>
  import Header from '@/common/headers.vue'
  import SyllabusTree from '@/components/evaluation/SyllabusTree.vue'
  import Loading from '@/common/Loading.vue'
import { setTimeout } from 'core-js';

  export default {
    components: {
      Header,
      SyllabusTree,
      Loading
    },
    data() {
      return {
        syllabusTitle: " 评测模块",
        identitydata: [
          { "id": 1, "name": '成都紫藤小学', "rolename": '管理员', status: '1' },
          { "id": 2, "name": '成都七中小学', "rolename": '班主任', status: '2' }
        ],
        treeData: [],
        schoolInfo: {},
        evSubjectList: [],
        evPeriodsList: [],
        evVolumesList: [],
        evSubjectSelect:"",
        evPeriodSelect: "",
        evVolumeSelect:"",
        isLoadingFinish:false
      }
    },
    created() {
      this.schoolInfo = JSON.parse(localStorage.getItem('c_role_info')).roleClaim[0].claim[0]; //默认选中第一个学校
      this.findSchoolPeriodsByDict();

    },
    methods: {
      goRouter(name) {
        this.$router.push({
          name:name
        })
      },

      //获取当前学校全部学段
      findSchoolPeriodsByDict() {
        this.$api.FindSchoolPeriodsByDict({SchoolCode: this.schoolInfo.claimCode}).then(res => {
          this.evPeriodsList = res.result.data;
          this.evPeriodSelect = res.result.data[0].code;
          this.findSchoolSubjectsByDict();
        })
      },

      //查找当前学校已有科目
      findSchoolSubjectsByDict() {
        this.$api.FindSchoolSubjectsByDict({ SchoolCode: this.schoolInfo.claimCode,Status:1 }).then(res => {
          this.evSubjectList = res.result.data;
          this.evSubjectSelect = res.result.data[0].code;
          this.findVolumesBySubjectAndPeriod(this.evPeriodSelect, this.evSubjectSelect);
        })
      },

      //根据当前选择的科目及学段获取所有册别
      findVolumesBySubjectAndPeriod(periodCode,subjectCode) {
        let defaultData = {
          SchoolCode: this.schoolInfo.claimCode,
          SubjectCode: subjectCode,
          PeriodCode: periodCode,
          Status:1
        }
        this.$api.FindSchoolVolumesByDict(defaultData).then(res => {
          this.evVolumesList = res.result.data;
          if (res.result.data.length) {
            this.evVolumeSelect = res.result.data[0].rowKey;
            this.findSyllabusByVolumeCode(res.result.data[0].rowKey);
          } else {
            this.evVolumeSelect = "";
            this.treeData = [];
          }
         })
      },

      //根据册别来获取课纲树形结构
      findSyllabusByVolumeCode(volumeCode) {
        this.isLoadingFinish = false;
        this.$api.FindSyllabusByVolumeCode({ VolumeCode: volumeCode, Status: 1 }).then(res => {
          let list = res.result.data;
          list.forEach(item => { item.expand = false });
          this.treeData = list;
          this.isLoadingFinish = true;
        })
      },

      //选择科目变化
      subjectChange(val) {
        this.findVolumesBySubjectAndPeriod(this.evPeriodSelect, val.value);
      },

      //选择学段变化
      periodChange(val) {
        this.findVolumesBySubjectAndPeriod(val.value, this.evSubjectSelect);
      },

      //选择册别变化
      volumeChange(val) {
        this.findSyllabusByVolumeCode(val.value);
      }
    },
    mounted() {
    }

  }
</script>
<style scoped>
  .evaluation {
    background:#eee;
    width:100%;
    min-height:100%;
    padding-bottom:50px;
    position:relative;
  }
  .ev-body {
    width:65%;
    min-width:1200px;
    min-height:700px;
    margin:auto;
    margin-top:15px;
    padding-bottom:50px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
  }
    .ev-body .ev-slide {
      width:20%;
      height:auto;
      padding:0;
      background:#fff;
      border-radius:5px 5px 0 0;
    }

    .ev-body .ev-slide .ev-slide-header{
      width:104%;
      height:45px;
      background:#10abe7;
      text-align:center;
      line-height:45px;
      color:white;
      font-size:16px;
      border-radius:5px;
      margin:20px -5px;
      box-shadow: 0px 1px 8px 5px #dedede;
    }

      .ev-body .ev-slide .ev-slide-select {
        padding:0 10px;
        /*background:#10abe7;*/
      }

      .ev-body .ev-slide .ev-slide-school {
          height:40px;
          line-height:40px;
          text-align:center;
          padding-top:10px;
          font-size:14px;
          font-weight:bold;
          padding-right:5px;
      }

      .ev-slide /deep/ .ev-slide-select .ivu-select-selection {
        margin-top:8px;
        height:40px;
      }

      .ev-slide /deep/ .ev-slide-select .ivu-select-selected-value {
        line-height:40px;
      }

      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-selection {
          background:transparent;
          border:none;
          color:#fff;
          width:140px;
          margin:0 auto;
          padding-right:10px;
          font-size:14px;
      }
      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-arrow {
          color:#fff;
      }

      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-dropdown {
          left:unset !important;
      }
      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-placeholder {
          color:#fff;
          font-size:14px;
      }
      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-selected-value {
          color:#fff;
          font-size:14px;
      }

  .ev-body .ev-content {
      width:79%;
  }


  .slide-menu {
    width:150px;
    background:#bdbcbc;
    position:fixed;
    top:100px;
    left:-140px;
    border-radius: 0 10px 10px 0;
  }

    .slide-menu ul {
      height:100%;
      width:100%;
      padding:20px 0;
    }

      .slide-menu ul li {
        width:100%;
        height:70px;
        font-size:16px;
        text-align:center;
        line-height:70px;
        color:#fff;
        font-weight:bold;
        cursor:pointer;
        z-index: 1;
        position: relative;
        outline: none;
        border: none;
        overflow: hidden;
         transition: color 0.4s ease-in-out;
      }

    .slide-menu .ivu-icon {
      position:absolute;
      top:170px;
      right:-44px;
      color:#477fd8;
      font-size:44px;
    }

      .slide-menu ul li::before {
          content: '';
          z-index: -1;
          position: absolute;
          bottom: 100%;
          right: 100%;
          width: 1em;
          height: 1em;
          border-radius: 50%;
          background:#2cbeff;
          transform-origin: center;
          transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
          transition: transform 0.45s ease-in-out;
        }

        .slide-menu:hover{
          cursor: pointer;
          transform:translate(140px, 0);
          transition:1s  ease  0s;
        }

        .slide-menu ul li:hover::before {
          transform: translate3d(120%, 50%, 0) scale3d(25, 15, 15);
        }



</style>
