<template>
  <div class="evaluation-list-container fl-col-center">
    <Spin fix v-show="contentLoading"></Spin>
    <div class="el-title-wrap">
      <div>
        <span style="width:6px;height:28px;display:inline-block;background:#009dec;margin-bottom:-5px;border-radius: 5px;"></span>
        <span class="el-title">成都新川外国语学校{{$t('totalAnalysis.text1')}}</span>
      </div>
    </div>

    <div class="datas-wrap">
      <div class="datas-item" v-for="item in dataList">
        <p>{{item.name}}{{$t('totalAnalysis.text2')}}</p>
        <div class="datas-val">
          <countTo :startVal='0' :endVal='item.count' :duration='3000'></countTo>
        </div>
      </div>
    </div>

    <div class="el-search-wrap">
      <Input v-model="searchValue"
             :placeholder="$t('totalAnalysis.text4')"
             @on-click="handleSearch"
             @on-change="handleChange"
             @on-enter="handleSearch"
             icon="ios-search"
             style="width:500px">
      </Input>
    </div>

    <Collapse>
      <Panel name="1" hide-arrow>
        <Icon type="ios-funnel" /> {{$t('totalAnalysis.text3')}}
        <div class="el-filter-wrap" slot="content">
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition1')}}:</span>
            <RadioGroup v-model="filterPeriod" type="button" @on-change="filterPeriodChange">
              <Radio v-for="(item,index) in filterData.periodList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition2')}}:</span>
            <RadioGroup v-model="filterGrade" type="button" @on-change="filterGradeChange">
              <Radio v-for="(item,index) in filterData.gradeList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition3')}}:</span>
            <RadioGroup v-model="filterTerm" type="button" @on-change="filterTermChange">
              <Radio v-for="(item,index) in filterData.termList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition4')}}:</span>
            <RadioGroup v-model="filterType" type="button" @on-change="filterTypeChange">
              <Radio v-for="(item,index) in filterData.typeList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition5')}}:</span>
            <RadioGroup v-model="filterArea" type="button" @on-change="filterAreaChange">
              <Radio v-for="(item,index) in filterData.areaList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition6')}}:</span>
            <RadioGroup v-model="filterFeedback" type="button" @on-change="filterFeedbackChange">
              <Radio v-for="(item,index) in filterData.feedbackList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
          <div class="el-filter-item">
            <span class="el-filter-title">{{$t('totalAnalysis.condition7')}}:</span>
            <RadioGroup v-model="filterSubject" type="button" @on-change="filterSubjectChange">
              <Radio v-for="(item,index) in filterData.subjectList" :label="item.name" :key="index">{{item.name}}</Radio>
            </RadioGroup>
          </div>
        </div>
      </Panel>
    </Collapse>



    <div class="el-bread">
      <!--<Icon type="ios-arrow-forward" />-->
      <span>{{$t('totalAnalysis.text5')}}：</span>
      <span v-if="!hasCondition">{{$t('totalAnalysis.text9')}}</span>
      <span v-for="(item,index) in filterList" :key="index" class="filter-item" v-if="item.val">{{item.val}} <Icon type="ios-close" @click="handleRemove(index,item.keyName)" /></span>
      <span class="list-length">{{$t('totalAnalysis.text6')}} : {{examList.length}} </span>
    </div>

    <div class="el-list-wrap">
      <div class="no-data-text" v-if="!examList.length">暂无数据</div>
      <div class="el-item" v-else v-for="(item,index) in examList" @click="handleChooseExam(item,index)">
        <div class="el-item-name">
          <!--<span class="el-item-type">{{item.examType}}</span>-->
          {{item.name}}
          <span class="el-item-area">{{item.examArea}}</span>
          <span class="el-item-subject" v-for="subject in item.subject.split(',')">{{subject}}</span>
        </div>
        <div class="el-item-info">
          <span><Icon type="md-people" />{{$t('totalAnalysis.text7')}}：{{item.joinNum}}</span>
          <span><Icon type="md-time" />{{$t('totalAnalysis.text8')}}：{{item.date}} </span>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: {
      //BaseTestScatter, BaseTable, BaseLineBar
    },
    data() {
      return {
        contentLoading:false,
        questionList: [],
        dataList: [...new Array(6).keys()],
        hasCondition:false,
        examList: [],
        filterList:[],
        filterConditions: {}, //筛选条件
        filterData: {},
        searchValue: "",
        searchList: [],
        filterPeriod: "全部",
        filterGrade: "全部",
        filterTerm: "全部",
        filterType: "全部",
        filterArea: "全部",
        filterFeedback: "全部",
        filterSubject: "全部",
      }
    },
    components: { countTo },
    created() {
      let classList = this.$store.state.totalAnalysis.classList;
      let examList = this.$store.state.totalAnalysis.examList;
      this.filterData = this.$store.state.totalAnalysis.filterData;
      this.examList = examList;
      this.rightTableData = classList;
      this.dataList = this.filterData.typeList.slice(1, 7);
      this.dataList.forEach(item => {
        item.count = Math.floor(Math.random() * 10);
      })

      this.searchList = examList.map(item => item.name);

      //this.examList = this.examList.filter(item => item.period == '初中' && item.grade == '初一');

    },

    methods: {
      handleSearch() {
        let that = this;
        this.contentLoading = true;
        let value = this.searchValue;
        let examList = this.$store.state.totalAnalysis.examList;
        this.examList = examList.filter(item => item.name.indexOf(value) !== -1);
        setTimeout(function () {
          that.contentLoading = false;
        },500)
      },
      handleChange() {
        let that = this;
        let value = this.searchValue;
        let examList = this.$store.state.totalAnalysis.examList;
        this.examList = examList.filter(item => item.name.indexOf(value) !== -1);
      },
      handleAutoSelect(val) {
        let examList = this.$store.state.totalAnalysis.examList;
        this.examList = examList.filter(item => item.name == val);
      },
      //handleFilter(type, val) {

      //},

      handleRemove(index,name) {
        this.filterList.splice(index, 1);
        switch (name) {
          case 'period':
            this.filterPeriod = '全部';
            this.filterConditions.period = null;
            break;
          case 'grade':
            this.filterGrade = '全部';
            this.filterConditions.grade = null;
            break;
          case 'term':
            this.filterTerm = '全部';
            this.filterConditions.term = null;
            break;
          case 'type': 
            this.filterType = '全部';
            this.filterConditions.type = null;
            break;
          case 'area':
            this.filterArea = '全部';
            this.filterConditions.area = null;
            break;
          case 'feedback':
            this.filterFeedback = '全部';
            this.filterConditions.feedback = null;
            break;
          case 'subject':
            this.filterSubject = '全部';
            this.filterConditions.subject = null;
            break;
          default:
            break;
        }

        //console.log(this.filterList);
        this.doFilter();
      },

      filterPeriodChange() {
        this.filterConditions.period = this.filterPeriod == '全部' ? null : this.filterPeriod;
        this.doFilter();
      },
      filterGradeChange() {
        this.filterConditions.grade = this.filterGrade == '全部' ? null : this.filterGrade;
        this.doFilter();
      },
      filterTermChange() {
        this.filterConditions.term = this.filterTerm == '全部' ? null : this.filterTerm;
        this.doFilter();
      },
      filterTypeChange() {
        this.filterConditions.type = this.filterType == '全部' ? null : this.filterType;
        this.doFilter();
      },
      filterAreaChange() {
        this.filterConditions.area = this.filterArea == '全部' ? null : this.filterArea;
        this.doFilter();
      },
      filterFeedbackChange() {
        this.filterConditions.feedback = this.filterFeedback == '全部' ? null : this.filterFeedback;
        this.doFilter();
      },
      filterSubjectChange() {
        this.filterConditions.subject = this.filterSubject == '全部' ? null : this.filterSubject;
        this.doFilter();
      },

      handleExportTables() {

      },

      doFilter() {
        let examList = this.$store.state.totalAnalysis.examList;
        //将条件转换成数组便于渲染
        this.filterList = this.objToArr(this.filterConditions);
        //根据条件过滤所有的测验数据
        this.examList = examList.filter(item => {
          return item.period.indexOf(this.filterConditions.period || '') > -1 &&
            item.grade.indexOf(this.filterConditions.grade || '') > -1 &&
            item.term.indexOf(this.filterConditions.term || '') > -1 &&
            item.examType.indexOf(this.filterConditions.type || '') > -1 &&
            item.examArea.indexOf(this.filterConditions.area || '') > -1 &&
            item.feedback.indexOf(this.filterConditions.feedback || '') > -1 &&
            item.subject.indexOf(this.filterConditions.subject || '') > -1 

        })
      },

      objToArr(obj) {
        var arr = []
        for(var key in obj) {
          arr.push({keyName:key,val:obj[key]})
        }
        return arr;
      },

      handleChooseExam(item, index) {
        this.$router.push({ path: '/total', query: { index: index } });
      }


    },

    mounted() {
      //this.$refs.rightRateTable.$el.childNodes[0].style.borderRight = "0";
    },
    watch: {
      filterList(val) {
        let list = val.map(item => item.val);
        this.hasCondition = list.filter(item => item !== null).length;
      }
    }
  }
</script>


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

<style>

  .total-container .el-tools .ivu-input {
    background: transparent;
    border: 1px solid #a2a2a2;
    height: 32px;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #a2a2a2;
    box-shadow: none;
    border-radius: 5px;
    margin-bottom: 3px;
  }

    .total-container .el-tools .ivu-input::-webkit-input-placeholder {
      color: #a2a2a2;
    }

  .total-container .el-tools .basic-tool-export {
    padding: 7px 15px;
    background: #447a94;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 20px;
    margin-top: 2px;
    display: inline-block;
  }

  .total-content .el-tools .ivu-icon {
    font-size: 18px;
    vertical-align: sub;
  }

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


  .evaluation-list-container .ivu-collapse {
    width:100%;
    background:#404040;
    border:0;
    padding-bottom:18px;
    margin-top:-70px;
    border-radius: 5px;
  }

  .evaluation-list-container .ivu-collapse-item  .ivu-collapse-header{
    color:#e4eadb;
    font-size:14px;
    margin-left:530px;
    display: inline-block;
  }

   .evaluation-list-container .ivu-collapse-item  .ivu-collapse-header .ivu-icon{
     margin-right:3px;
     margin-bottom:3px;
     transition:none;
     transform:none;
   }

  .evaluation-list-container .ivu-collapse > .ivu-collapse-item.ivu-collapse-item-active > .ivu-collapse-header > i {
    transform:none;
  }
  
  .evaluation-list-container .ivu-collapse-content{
    background:#404040;
  }

  .evaluation-list-container .ivu-collapse > .ivu-collapse-item.ivu-collapse-item-active > .ivu-collapse-header {
    border-bottom:none;
  }


  /*搜索框部分样式重写*/

  .evaluation-list-container .el-search-wrap .ivu-input {
    background: #404040;
    height: 40px;
    border-color: #6f6f6f;
    color: #dcdcdc;
    font-size: 14px;
  }

    .evaluation-list-container .el-search-wrap .ivu-input:focus {
      border-color: #6f6f6f;
      box-shadow: none;
    }

  .evaluation-list-container .el-search-wrap .ivu-input-icon {
    line-height: 40px;
  }

  .evaluation-list-container .el-search-wrap .ivu-select-item {
    padding: 15px;
  }

      .evaluation-list-container .ivu-spin-dot {
        width: 120px;
        height: 120px;
        background: #05c9da;
    }

    .no-data-text {
        width: 100%;
        height: 100%;
        font-size: 30px;
        font-weight: bold;
        color: #959595;
        text-align: center;
        padding-top: 30px;
    }
</style>
