<template>
  <div class="ex-list-container">
    <!-- 搜索框区域 -->
    <!--<Input v-model="searchValue" placeholder="请输入测验名称或其他关键字..." />-->

    <!-- 选择器 区域 -->
    <!--<div class="ex-select-wrap">
      <Select v-model="selectPeriod" @on-change="periodChange">
        <Option v-for="(item,index) in periodList" :value="index" :key="index">{{ item }}</Option>
      </Select>
      <Select v-model="selectGrade" @on-change="gradeChange">
        <Option v-for="(item,index) in gradeList" :value="index" :key="index">{{ item }}</Option>
      </Select>
      <Select v-model="selectTerm" @on-change="termChange">
        <Option v-for="(item,index) in termList" :value="index" :key="index">{{ item }}</Option>
      </Select>
      <Select v-model="selectExamType" @on-change="examTypeChange">
        <Option v-for="(item,index) in examTypeList" :value="index" :key="index">{{ item }}</Option>
      </Select>
    </div>-->
    <div class="btn-more" @click="goEvaluationList">
      <span style="font-size:14px"><Icon type="md-list-box" color="#a2a2a2" size="20" style="margin-right:5px;margin-bottom:5px;" />{{$t('totalAnalysis.newest')}}</span>
      <span style="margin-top:2px">{{$t('totalAnalysis.more')}} <Icon type="ios-arrow-dropright" /></span>
    </div>
    <!-- 测验列表展示区域 -->
    <div class="ex-list-wrap scrollstyle">
      <div class="no-data-text" v-if="!examList.length">暂无数据</div>
      <div v-else v-for="(item,index) in examList" :class="['list-item',examIndex == index ? 'list-item-active' : '']" :key="index" @click="handleExamClick(index,item)">
        <p class="list-item-type"><span class="type1" :style="{color:colorTransfer[item.examType],borderColor:colorTransfer[item.examType]}">{{item.examType}}</span></p>
        <span class="list-item-name">{{item.name}}</span>
        <span class="list-item-info">{{item.joinNum}}人 | {{item.date}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import examList from '@/static/examList.json'
  export default {
    name: "headers",
    props: ['getExamIndex'],
    data() {
      return {
        searchValue: "",
        selectPeriod:0,
        selectGrade: 0,
        selectTerm: 0,
        selectExamType: 0,
        periodList: ['所有学段','高中','初中'],
        gradeList: [],
        termList: [],
        examTypeList: ['所有测验类型','区域测验','校内测验','全国测验'],
        examList: [],
        examIndex: 0,
        typesTransfer: {
          'A': '区域测验',
          'B': '校内测验',
          'C': '全国测验'
        },
        colorTransfer: {
          '模拟测验':'#fbd103',
          '诊断测验':'#baecff',
          '全国测验':'#00ff8a'
        }

      }
    },
    created() {
      this.examList = examList;
    },
    methods: {
      handleExamClick(index, item) {
        let that = this;
        this.examIndex = index;
        this.$emit('chooseExam', item);
        that.$router.push({ path: '/total', query: { index:index }});
      },

      //查看更多评测列表
      goEvaluationList() {
        this.$router.push('/totalindex');
      }
    },
    mounted() {
      //this.$emit('chooseExam', this.examList[0]);
    }
  }
</script>

<style scoped>
  .ex-list-container {
    width: 300px;
    height: 100%;
    background: #191919;
    display: flex;
    flex-direction: column;
  }

  .ex-select-wrap {
    padding: 10px 30px;
    border-bottom: 1px solid rgba(128,128,128,.3);
  }

  .ex-list-container .no-data-text {
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        color: #777777;
        text-align: center;
        padding-top: 30px;
  }

  .ex-list-wrap {
    width: 100%;
    overflow-y: auto;
  }

    .ex-list-wrap .list-item {
      width: 100%;
      padding: 20px 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-bottom: 1px solid rgba(113, 113, 113, 0.35);
      cursor: pointer;
    }

    .ex-list-wrap .list-item:hover {
      background: #272727;
    }

    .ex-list-wrap .list-item-active {
      background: #282828;
    }

    .ex-list-wrap .list-item .list-item-type .type1 {
      padding: 2px 10px;
      color: #fbd103;
      border-radius: 10px;
      border: 1px solid #fbd103;
    }


    .ex-list-wrap .list-item .list-item-name {
      font-size: 16px;
      font-weight: 300;
      color: #d0d0d0;
      margin: 10px 0;
    }

    .ex-list-wrap .list-item .list-item-info {
      font-size: 14px;
      color: #a2a2a2;
    }

  .ex-list-container .btn-more {
    width:100%;
    padding:14px 10px 10px 10px;
    color:#a2a2a2;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    cursor:pointer;
    box-shadow: 0px 1px 3px 0px #5a5a5a;
  }

  .ex-list-container .btn-more .ivu-icon {
    font-size:16px;
    margin-left:2px;
    margin-bottom:4px;
    vertical-align:middle;
    }


  /*滚动条样式重写*/
  .scrollstyle::-webkit-scrollbar {
    width: 5px;
    display: none;
  }

  .scrollstyle:hover .scrollstyle::-webkit-scrollbar {
    display: unset;
  }

  .scrollstyle::-webkit-scrollbar-track {
    margin: 6px;
    background: transparent;
    display: none;
  }

  .scrollstyle::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #94998a;
  }

    .scrollstyle::-webkit-scrollbar-thumb:hover {
      /*background: #555;*/
    }

  .scrollstyle::-webkit-scrollbar-button {
    display: none;
  }

  .fl-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fl-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>

<style>

  .ex-list-container .ivu-input {
    border: none;
    background: transparent;
    border-bottom: 1px solid #595959;
    height: 60px;
    padding-left: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #a2a2a2;
    box-shadow: none;
    border-radius: 0;
  }

    .ex-list-container .ivu-input::-webkit-input-placeholder {
      color: #616161;
    }

  .ex-select-wrap .ivu-select {
    margin: 5px 0;
    height: 40px;
    color:#c5c8ce;
  }

  .ex-select-wrap .ivu-select-single .ivu-select-selection {
    height: 40px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .ex-select-wrap .ivu-select-single .ivu-select-dropdown {
    background: #3e3e3e;
  }
  .ex-select-wrap .ivu-select-single .ivu-select-item {
    color:#fff;
  }

    .ex-select-wrap .ivu-select-single .ivu-select-item:hover {
      background:#5f5f5f;
    }
    .ex-select-wrap .ivu-select-single .ivu-select-selected-value {
      font-size:16px;
    }

    .ex-select-wrap .ivu-select-single .ivu-select-item-focus {
      background:transparent;
    }

  .ex-select-wrap .ivu-select-single .ivu-select-placeholder {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
</style>


