<template>
  <div class="module-corner row teachingResour">
    <div>
      <div class="col-30" v-for="(value,index) in teachingResour" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-teachingResour-box'+(index+1)">
            <EchartLineNoY
              :id="value.data.id" 
              :width="value.data.width" 
              :height="value.data.height"
              :legend="value.data.legend"
              :xAxisData="value.data.xAxisData"
              :yAxisData="value.data.yAxisData"
            />
          </div>
        </div>
      </div>
    </div>
    <Corner2 />
  </div>
</template>
<script>
import Corner2 from "@/components/Corner2"
import LitterTitle from "@/components/title/LitterTitle"
import EchartLineNoY from '@/components/echart/EchartLineNoY'
export default {
  components:{
    Corner2,
    LitterTitle,
    EchartLineNoY
  },
  data() {
    return {
      color:['213,50,35','3,179,177','216,50,218','242,92,33','33,140,254','28,254,0'],
      teachingResour:[
        {
          title: '教案使用次数',
          data:{
            id: 'echart-teachingResour1',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210], color:'213,50,35'}
            ]
          },
        },
        {
          title: '学习材料使用次数',
          data:{
            id: 'echart-teachingResour2',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'3,179,177'}
            ]
          }
        },
        {
          title: '专家辅导使用次数',
          data:{
            id: 'echart-teachingResour3',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'216,50,218'}
            ]
          },
        },
        {
          title: '教案使用次数',
          data:{
            id: 'echart-teachingResour4',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'242,92,33'}
            ]
          },
        },
        {
          title: '学习材料使用次数',
          data:{
            id: 'echart-teachingResour5',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'33,140,254'}
            ]
          },
        },
        {
          title: '专家辅导使用次数',
          data:{
            id: 'echart-teachingResour6',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'28,254,0'}
            ]
          },
        }
      ],
    };
  },
  mounted() {
    this.getTeaching();
  },
  methods: {
    // 获取教学资源
    getTeaching(){
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1079'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params,
      }).then(res => {
        if (res.ret_code == 200) {
          let xAxisData = [];
          let data = [
            {title:'教材资源', data:[]},
            {title:'试题资源', data:[]},
            {title:'微课资源', data:[]},
          ]
          for(let i=0;i<res.data.length;i++){
            let index = xAxisData.indexOf(res.data[i].SJ);
            if(index<0){
              xAxisData.push(res.data[i].SJ);
              data[0].data.push(Number(res.data[i].JCZY))
              data[1].data.push(Number(res.data[i].STZY))
              data[2].data.push(Number(res.data[i].WKZY))
            }else{
              data[0].data[index] += Number(res.data[i].JCZY)
              data[1].data[index] += Number(res.data[i].STZY)
              data[2].data[index] += Number(res.data[i].WKZY)
            }
          };
          this.teachingResour = [];
          data.forEach((item,index)=>{
            this.teachingResour.push(
              {
                title: item.title,
                data:{
                  id: 'echart-teachingResour'+(index+1),
                  width: 0,
                  height: 0,
                  xAxisData: xAxisData,
                  yAxisData: [
                    {name:'总数量',data:item.data,color:this.color[index]}
                  ]
                },
              }
            )
          })
          setTimeout(() => {
            this.callEchart("echart-teachingResour-box1", this.teachingResour[0].data, 2.3);
            this.callEchart("echart-teachingResour-box2", this.teachingResour[1].data, 2.3);
            this.callEchart("echart-teachingResour-box3", this.teachingResour[2].data, 2.3);
          }, 200);
        }
      })
    },
    callEchart(idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth;
      this.$set(data,'width',_width);
      this.$set(data,'height', _width/offset);
    },
  }
};
</script>

<style scoped>
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.col-30{
  width: 33%; 
  float: left;
}
.teachingResour{
  padding: .05rem .02rem;
}

</style>
<style>
.teachingResour .litter-title{
  margin-bottom: .05rem;
}
.teachingResour .litter-title img{
  height:.06rem;
}
</style>