<template>
  <div class="ev-list-container">
    <div class="ev-header">
      <Icon type="md-bookmarks" size="30" color="rgb(16, 171, 231)" />
      <span class="ev-title">我的评测</span>
      <span class="ev-length">共 {{list.length}} 道题</span>
    </div>
    <!-- 筛选部分 -->
    <div class="filter-wrap">
      <div class="filter-item">
        <span class="filter-title">测试用途:</span>
        <RadioGroup v-model="testAttr.testType" type="button" @on-change="filterTypeChange">
          <Radio label="0">正式考试</Radio>
          <Radio label="1">普通测试</Radio>
          <Radio label="2">统计</Radio>
        </RadioGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">测试情景:</span>
        <RadioGroup v-model="testAttr.testScene" type="button" @on-change="filterSceneChange">
          <Radio label="0">模拟</Radio>
          <Radio label="1">段考</Radio>
          <Radio label="2">周考</Radio>
          <Radio label="3">小考</Radio>
          <Radio label="4">自定义</Radio>
        </RadioGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">测试对象:</span>
        <RadioGroup v-model="testAttr.testTarget" type="button" @on-change="filterTargetChange">
          <Radio label="0">同年级</Radio>
          <Radio label="1">跨年级</Radio>
          <Radio label="2">跨学校</Radio>
        </RadioGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">创建方式:</span>
        <RadioGroup v-model="testAttr.createType" type="button" @on-change="filterCreateChange">
          <Radio label="0">自动组题</Radio>
          <Radio label="1">批量导入</Radio>
          <Radio label="2">题库挑选</Radio>
        </RadioGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">排序方式:</span>
        <RadioGroup v-model="filterSort" type="button" @on-change="filterSortChange">
          <Radio label="0">新增时间<Icon type="md-arrow-round-down" /></Radio>
          <Radio label="1">使用次数<Icon type="md-arrow-round-down" /></Radio>
        </RadioGroup>
      </div>
    </div>
    <!-- 题目列表部分 -->
    <div v-if="list.length == 0">暂无数据</div>
    <div class="content-wrap" v-else>
      <div class="exercise-item" v-for="(item,index) of list">
        <img class="icon-paper" src="../../../assets/icon/icon_paper.png" />
        <div class="paper-content">
          <p class="paper-title" v-html="item.type"></p>
          <p class="paper-info">
            <span style="margin-left:0"><Icon type="md-clock" />修改时间：2019-06-26</span>
            <span><Icon type="md-eye" />使用次数：8</span>
            <span><Icon type="md-document" />类型：期末考试</span>
          </p>
        </div>
        <div class="paper-operation">
          <Button type="primary" icon="ios-download-outline">推送</Button>
          <Button type="success" icon="ios-download-outline">下载</Button>
        </div>
      </div>

    </div>
    <Page :total="totalNum"
          show-sizer
          @on-page-size-change="pageSizeChange"
          @on-change="pageChange"
          :page-size-opts="[5,10,15,20]" />
    <Button type="success" @click="backToAdd" style="margin:10px;">返回</Button>
    <Button type="success" @click="backToPaper" style="margin:10px;">试卷</Button>

  </div>
</template>
<script>
  import IconText from '@/components/evaluation/IconText.vue'
  import questions from './list.json'
import { setTimeout } from 'core-js';
  export default {
    components: {
      IconText
    },
    data() {
      return {
        list: [],
        searchWord: '',
        pointListLoading:true,
        schoolInfo: {},
        bindPointModal: false,
        exersicesType: {
          single: "单选",
          multiple: "多选",
          judge: "判断",
          complete: "填空",
          subjective:"问答"
        },
        exersicesDiff: ["容易", "较易", "一般", "较难", "困难"],
        diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
        testAttr: {
          testScene: '0',
          testType: '0',
          testTarget: '0',
          testMode: '0',
          createType: '0',
          questionFilter:[]
        }, 
        filterSort: "0",
        pageSize: 5,
        pageNum: 1,
        totalNum: 100,
        allList: questions.result.data,
        knowPointList: [],
        schoolPointList: [],
        allPointList:[],
        checkedPointList: []
      }
    },
    created() {
      this.schoolInfo = JSON.parse(localStorage.getItem('c_role_info')).roleClaim[0];
      this.list = questions.result.data;
      this.totalNum = questions.result.data.length;
      if (this.$route.params.exerciseItem) {
        this.list.unshift(this.$route.params.exerciseItem);
      }
    },
    methods: {

      //筛选题型
      filterTypeChange(val) {
        if (val == "all") {
          this.list = questions.result.data;
        } else {
          this.list = questions.result.data.filter(item => item.type == val);
        }
      },

      //筛选难度
      filterDiffChange(val) {
         if (val == "all") {
          this.list = questions.result.data;
         } else {
           this.list = questions.result.data.filter(item => item.difficulty == val);
        }
      },

      //排序条件更换
      filterSortChange(val) {
        console.log(val);
      },

      //展开与收起答案
      showAnswer(e, type) {
        let el = e.currentTarget;
        let isShow = e.currentTarget.nextElementSibling.style.display||"none";
        setTimeout(function () {
          if (type == "explain") {
            el.nextElementSibling.style.display = isShow == "none" ? "block" : "none";
            el.innerHTML = isShow == "none" ? "解析：点击收起解析详情" : "解析：点击展开解析详情";
          } else {
            el.nextElementSibling.style.display = isShow == "none" ? "block" : "none";
            el.innerHTML = isShow == "none" ? "答案：点击收起答案详情" : "答案：点击展开答案详情";
          }

        },100)
      },

      backToAdd() {
        this.$router.push({
            path: '/createExercises',//或者路径跳转path: '/addCreditCards',
          })
      },

      backToPaper() {
        this.$router.push({
            path: '/testPaper',//或者路径跳转path: '/addCreditCards',
          })
      },

      //切换页码
      pageChange(page) {
        let start = this.pageSize * (page - 1);
        let end = this.pageSize * page;
        let list = questions.result.data;
        this.list = list.slice(start, end);
        window.scroll(0, 0);
      },

      //切换分页Size
      pageSizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },

      //编辑习题
      handleEdit(item) {
        this.$router.push({
            name: 'createExercises',
            params:{
              item: item,
            }
          })
      },

      //绑定知识点操作
      handleBindPoint() {

        this.bindPointModal = true;
        this.checkedPointList = [];
        this.knowPointList = this.schoolPointList;
      },

      //获取标准知识块数据
      getStandardList() {
        let data = {
          periods: ["Period_21"],
          pointParams: {
              SubjectCode: "Subject_Chinese",
              PartitionKey: "zh-CN",
            }
        }
        //this.$api.FindKnowledgeBlockAndPointByDict(data).then(res => {

        //})
      },

      //获取标准知识点仓库数据
      getAllPoints() {
         let data = {
          pointParams: {
              SubjectCode: "Subject_Chinese",
              PartitionKey: "zh-CN",
            }
        }
        this.$api.FindKnowledgePointByDict(data).then(res => {
          let list = res.result.data;
          this.allPointList = list;
          this.pointListLoading = false;
        })
      },

       //获取学校知识点仓库数据
      getSchoolPoints() {
         let data = {
              SubjectCode: "Subject_Chinese",
              PartitionKey: "zh-CN",
              SchoolCode: this.schoolInfo.claim[0].claimCode,
              Status:1
        }
        this.$api.FindSchoolPointByDict(data).then(res => {
          let list = res.result.data;
          this.schoolPointList = list;
          this.pointListLoading = false;
        })
      },

      //确认编辑知识块
      handleTransferBlock() {
        
      },

      //知识点绑定选中事件
      pointTreeCheck(val, data) {
        let points = val.filter(item => item.children.length == 0);
        if (points.length > 5) {
          this.checkedPointList = points.slice(0, 5);
          this.$Message.warning("最多绑定5个知识点！");
        } else {
          this.checkedPointList = points;
        }
        console.log(val, data);
      },

      //知识点树形结构渲染
       renderContent(h, { root, node, data }) {
        return h(
          "span",
          {
            domProps: {
              className: "singleClass"
            },
            on: {
              click: () => {
                this.titleClick(root, node, data, event);
              }
            }
          },[
            h("span", [
              h("Icon", {
                props: {
                  type:
                    data.children && data.children.length > 0
                      ? "md-albums"
                      : "ios-paper-outline"
                },
                style: {
                  marginRight: "5px",
                }
              }),
              h("span", data.name),
              h('span',{
                domProps: {
                  className: this.checkedPointList.indexOf(data) > -1 ? "point-checkbox point-checked" : "point-checkbox point-unchecked"
                },
                style: {
                  display: data.children && data.children.length > 0
                      ? "none"
                    : "inline-block"
                },
                on: {
                  click: () => {
                    if (this.checkedPointList.indexOf(data) == -1) {
                      if (this.checkedPointList.length < 5) {
                        this.checkedPointList.push(data);
                      } else {
                        this.$Message.warning("最多绑定5个知识点！");
                      }
                    } else {
                      this.checkedPointList.splice(this.checkedPointList.indexOf(data), 1);
                    }
                  }
                }
            })
            ])
          ]
        );
      },
       // 标题点击收缩展开
      titleClick(root, node, data, event) {
        data.expand = !data.expand;
      },

      handleClearChecked() {
        console.log(this.$refs.pointTree.getCheckedNodes());
        //this.$refs.pointTree.getSelectedNodes() = [];
        this.checkedPointList = [];
      },

      deleteCheckedPoint(item) {
        this.checkedPointList.splice(this.checkedPointList.indexOf(item), 1);
      },

      //知识点筛选功能
      filterChange() {
        this.knowPointList = !this.searchWord ? this.schoolPointList : this.schoolPointList.filter(item => item.name.toUpperCase().indexOf(this.searchWord.toUpperCase()) > -1)
      },

      //测试用途
      filterTypeChange(val) {

      },

      //测试情景
      filterSceneChange(val) {

      },

      //测试对象
      filterTargetChange(val) {

      },

      //创建方式
      filterCreateChange(val) {
          
      },

    },
    mounted() {
        //this.getStandardList();
        this.getSchoolPoints();
        //this.getAllPoints();
    }
  }
</script>
<style src="../index/TestPaperList.css" scoped>
</style>
