<template>
  <div class="learning-effect">
    <div class="box-list">
      <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 1 }">
        <!-- <el-card class="box-card" v-bind:class="{ 'box-last': index == 1 }"> -->
          <p class="value">{{ item.value }}</p>
          <p class="title">{{ item.title }}</p>
        <!-- </el-card> -->
      </div>
    </div>
    <div class="spacing"></div>
    <div class="chart-title">不同学历完成项目前后正确率对比</div>
    <div class="chartEdu" ref="education"></div>
    <div class="chart-remarks">注：本报表数据来源仅仅统计同时包含摸底考和正式考的课程培训。</div>
    <div class="spacing"></div>
    <div class="chart-title">培训前后知识点掌握情况</div>
    <div class="chartLearn" ref="learning"></div>
    <div class="chart-remarks">注：本报表数据来源仅包括有摸底考的课程培训。</div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import * as chartData from "../../utils/learning/chartData";
import echarts from "echarts";
let vm = null;
export default {
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    },
    timeInfoData: {
      type: Object
    },
  },
  data() {
    return {
      cardData: [],
      echartsData: {
        chart1: {},
        chart2: {}
      },
      timeInfoChild: {},
    };
  },
  watch: {
    timeInfoData: {
      deep: true,
      handler(nv, ov) {
        vm.timeInfoChild = nv;
      }
    }
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
  },
  mounted() {
    commonUtil.resizeHeight();
    this.$on("search", () => {
      this.search();
    });
    this.$on("static", () => {
      vm.getStatic();
    });
  },
  methods: {
    getStatic() {
      let studyEffectDto = vm.timeInfoChild.studyEffectAnalysisModel.studyEffectDto;
      vm.initCard(studyEffectDto);
      vm.setEducation(studyEffectDto.educationEffectList);
      vm.setLearning(studyEffectDto.knowledgeEffectList);
    },
    updateResize() {
      this.$nextTick(function() {
        window.onresize = function() {
          vm.echartsData.chart1.resize();
          vm.echartsData.chart2.resize();
        };
      });
    },
    search() {
      let req = {
        projectId: vm.projectId,
        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
        hospitalIdList: vm.formInline.organization,
        originalFlag: vm.formInline.checked == false ? 0 : 1,
        regionId: vm.formInline.region[vm.formInline.region.length - 1],
        timeFlag: vm.formInline.timeFlag
      };
      openLoading(vm);
      // if(req.regionId == "000") {
      //   req.regionId = "000";
      // }
      // console.log("0 req", req);
      vm.POST("stats/report/studyEffect", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.initCard(res.data);
          setTimeout(function() {
            vm.setEducation(res.data.educationEffectList);
            vm.setLearning(res.data.knowledgeEffectList);
          }, 20);
        }
      });
    },
    initCard(data) {
      let cardData = [
        {
          value: "0%",
          title: "培训前总正确率"
        },
        {
          value: "0%",
          title: "培训前后正确率"
        }
      ];
      cardData[0].value = (data.beforeRate*100).toFixed(2) + "%";
      cardData[1].value = (data.afterRate*100).toFixed(2) + "%";
      vm.cardData = cardData;
    },
    setEducation(data) {
      let myChart = echarts.init(this.$refs.education);
      let xAxisData = [];
      let seriesBefore = [];
      let seriesAfter = [];
      for(let i = 0; i < data.length ; i++) {
        xAxisData.push(data[i].classifyName);
        seriesBefore.push((data[i].beforeRate*100).toFixed(2));
        seriesAfter.push((data[i].afterRate*100).toFixed(2));
      }
      let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
      myChart.setOption(option);
      vm.echartsData.chart1 = myChart;
      vm.updateResize();
    },
    setLearning(data) {
      let myChart = echarts.init(this.$refs.learning);
      let xAxisData = [];
      let seriesBefore = [];
      let seriesAfter = [];
      for(let i = 0; i < data.length ; i++) {
        xAxisData.push(data[i].classifyName);
        seriesBefore.push((data[i].beforeRate*100).toFixed(2));
        seriesAfter.push((data[i].afterRate*100).toFixed(2));
      }
      let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
      myChart.setOption(option);
      vm.echartsData.chart2 = myChart;
      vm.updateResize();
    }
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.learning-effect {
  background: #fff;
  overflow: hidden;
  // padding: 10px;
  .spacing {
    position: relative;
    width: 100%;
    height: 20px;
    background: #f0f2f5;
  }
  .box-list {
    position: relative;
    height: 110px;
    background: #f0f2f5;
    .box-card {
      position: relative;
      background-color: #ffffff;
      width: 49%;
      margin-right: 2%;
      height: 120px;
      float: left;
      .el-card__header {
        border-bottom-width: 0;
      }
      .el-card__body {
        padding: 0px;
      }
      .value {
        color: #373839;
        text-align: center;
        margin-top: 24px;
        margin-bottom: 8px;
        height: 45px;
        line-height: 45px;
        font-size: 32px;
        font-weight: 500;
      }
      .title {
        color: #666666;
        text-align: center;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
      }
    }
    .box-last {
      margin-right: 0%;
    }
  }
  .chart-title {
    position: relative;
    margin-top: 30px;
    margin-left: 30px;
    height: 25px;
    font-size:18px;
    font-weight:600;
    line-height: 25px;
    color: #000000;
  }
  .chartEdu {
    position: relative;
    margin: 20px auto 0 auto;
    width: 1064px;
    height: 380px;
  }
  .chartLearn {
    position: relative;
    margin: 20px auto 0 auto;
    width: 1064px;
    height: 462px;
  }
  .chart-remarks {
    position: relative;
    height: 66px;
    padding: 20px 0 30px 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #666666;
  }
}
</style>
