<template>
  <div class="learning-effect">
    <div class="box-list">
      <div v-for="(item , index) in cardData" :key="index" class="box">
        <el-card class="box-card">
          <el-tooltip class="item-tool" placement="bottom-end" effect="light">
            <div slot="content">
              <p v-for="text in item.content">{{ text }}</p>
            </div>
            <i class="el-icon-question notice"></i>
          </el-tooltip>
          <div class="left-content">
            <p class="title">{{ item.title }}</p>
            <p class="value">{{ item.value }}</p>
          </div>
          <!-- <div class="vertical"></div>
          <div class="right-content">
            <p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p>
            <p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p>
          </div>-->
        </el-card>
      </div>
    </div>
    <div class="chart" ref="education"></div>
    <div class="chart" ref="learning"></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
    }
  },
  data() {
    return {
      cardData: [],
      echartsData: {
        chart1: {},
        chart2: {}
      }
    };
  },
  created() {
    vm = this;
  },
  mounted() {
    commonUtil.resizeHeight();
    this.$on("search", () => {
      this.search();
    });
  },
  methods: {
    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();
            vm.setLearning();
          }, 20);
        }
      });
    },
    initCard(data) {
      let cardData = [
        {
          value: "0%",
          title: "培训前总正确率"
        },
        {
          value: "0%",
          title: "培训前后正确率"
        }
      ];
      cardData[0] = data.befortRate + "%";
      cardData[1] = data.afterRate + "%";
    },
    setEducation() {
      let myChart = echarts.init(this.$refs.education);
      let option = {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ["#5D7092", "#FFB01B"],
        legend: {
          data: ["项目前总正确率", "项目后总正确率"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["本科", "大专", "中专及以下", "硕士", "博士", "其他"]
        },
        yAxis: {
          min: 0,
          max: 100,
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: [
          {
            name: "项目前总正确率",
            type: "bar",
            barWidth: 10,
            data: [45, 45, 34, 34, 4, 8]
          },
          {
            name: "项目后总正确率",
            type: "bar",
            barWidth: 10,
            data: [70, 66, 67, 67, 24, 24]
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart1 = myChart;
      vm.updateResize();
    },
    setLearning() {
      let myChart = echarts.init(this.$refs.learning);
      let option = {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ["#5D7092", "#FFB01B"],
        legend: {
          data: ["培训前正确率", "培训后正确率"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          type: "category",
          data: ["推荐联合用药方案"]
        },
        yAxis: {
          min: 0,
          max: 100,
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: [
          {
            name: "培训前正确率",
            type: "bar",
            barWidth: 10,
            data: [45]
          },
          {
            name: "培训后正确率",
            type: "bar",
            barWidth: 10,
            data: [81]
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart2 = myChart;
      vm.updateResize();
    }
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.learning-effect {
  background: #fff;
  overflow: hidden;
  padding: 10px;
  .chart {
    position: relative;
    margin: 20px auto 0 auto;
    // width: 100%;
    width: 860px;
    height: 350px;
  }
}
</style>
