<template>
  <div class="data-all-wrap">
    <div class="box-list">
      <div v-for="(item , index) in cardData" :key="index" class="box">
        <el-card class="box-card">
          <div slot="header" class="header">
            <p class="value">{{ item.value }}</p>
            <p class="title">{{ item.title }}</p>
            <el-tooltip class="item" effect="dark" placement="bottom-end">
              <div slot="content">
                <p v-for="text in item.content">{{ text }}</p>
              </div>
              <i class="el-icon-question notice"></i>
            </el-tooltip>
          </div>
          <div class="box-content">
            <span>{{ item.hasKey }}</span>
            <span>{{ item.hasNum }}</span>
            <span class="should-key">{{ item.shouldKey }}</span>
            <span>{{ item.shouldNum }}</span>
          </div>
        </el-card>
        <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
      </div>
    </div>
    <div class="chart" id="distributeChart" ref="distributeChart"></div>
    <div class="chart" id="recordChart" ref="recordChart"></div>
    <el-select class="chart-select" v-model="rankType" placeholder="请选择">
      <el-option v-for="item in rankOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div class="chart" id="certificateChart" ref="certificateChart"></div>
    <div class="chart" id="durationChart" ref="durationChart"></div>
  </div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
export default {
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    },
    organizationNum: {
      type: Number
    },
    organizationList: {
      type: Array
    }
  },
  data() {
    return {
      roleType: "L1",
      projectId: "",
      echartsData: {
        chart0: {},
        chart1: {},
        chart2: {},
        chart3: {}
      },
      cardData: [],
      rankType: 1,
      rankOptions: [
        {
          value: 1,
          label: '按获证比例排名',
        },
        {
          value: 2,
          label: '按参与人数排名',
        },
      ]
    };
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
    vm.initCard();
    setTimeout(function() {
      vm.setDistributeChart();
      vm.setRecordChart();
      vm.setDurationChart();
      vm.setCertificateChart();
    }, 20);
  },
  mounted: function() {},
  methods: {
    initCard() {
      vm.cardData = [
        {
          value: "45%",
          title: "机构参与率",
          hasKey: "已参与机构数",
          hasNum: "318535",
          shouldKey: "应参与机构数",
          shouldNum: "78534",
          content: [
            "机构参与率：已参与机构数/应参与机构数*100% ",
            "应参与机构数：筛选范围下，所有圈选机构数量，包含白名单反退出来的机构",
            "已参与机构数：筛选范围下，在应参与机构中，机构学员有参与项目行为的机构数量"
          ]
        },
        {
          value: "78%",
          title: "人员参与率",
          hasKey: "已参与人数",
          hasNum: "878534",
          shouldKey: "应参与人数",
          shouldNum: "674343",
          content: [
            "人员参与率：已参与人数/应参与人数*100%",
            "应参与人数：筛选范围下，所圈选人员数量",
            "已参与人数：筛选范围下，在应参与人员中，有参与项目行为的人员数量"
          ]
        },
        {
          value: "71%",
          title: "获证率",
          hasKey: "已获证人数",
          hasNum: "567",
          shouldKey: "应参与人数",
          shouldNum: "78534",
          content: [
            "获证率：已完成人数/应参与人数*100%",
            "应参与人数：筛选范围下，所圈选人员数量",
            "已获证人数：筛选范围下，在应参与人员中，已获证的人员数量"
          ]
        }
      ];
    },
    updateResize() {
      this.$nextTick(function() {
        window.onresize = function() {
          vm.echartsData.chart0.resize();
          vm.echartsData.chart1.resize();
          vm.echartsData.chart2.resize();
          vm.echartsData.chart3.resize();
        };
      });
    },
    setDistributeChart() {
      let myChart = echarts.init(this.$refs.distributeChart);
      let option = {
        title: {
          text: "证书分布情况",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        label: {
          formatter: "{d}%"
        },
        legend: {
          orient: "horizontal",
          top: "",
          data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: [
              { value: 2200, name: "未获证人数占比" },
              { value: 1900, name: "获优秀人数占比" },
              { value: 1500, name: "获及格人数占比" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart0 = myChart;
      vm.updateResize();
    },
    setRecordChart() {
      let myChart = echarts.init(this.$refs.recordChart);
      let option = {
        title: {
          text: "证书级别按学历发布情况",
          x: "left"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            let relVal = params[0].name + "人数：";
            let value = 0;
            for (let i = 0, l = params.length; i < l; i++) {
              value += params[i].value;
            }
            relVal += value + "人";
            for (let j = 0, l = params.length; j < l; j++) {
              relVal +=
                "<br/>" +
                params[j].seriesName +
                "占比： " +
                (
                  (100 * parseFloat(params[j].value)) /
                  parseFloat(value)
                ).toFixed(2) +
                "%";
            }
            return relVal;
          }
        },
        legend: {
          data: ["未获证人数", "获优秀人数", "获及格人数"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["博士", "硕士", "本科", "大专", "中专及以下", "其他"]
        },
        yAxis: {
          type: "value",
          name: "人数 (个)"
        },
        series: [
          {
            name: "未获证人数",
            type: "bar",
            stack: "总量",
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: [1, 302, 301, 334, 390, 330]
          },
          {
            name: "获优秀人数",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: "获及格人数",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: [220, 182, 191, 234, 290, 330]
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart1 = myChart;
      vm.updateResize();
    },
    setCertificateChart() {
      let myChart = echarts.init(this.$refs.certificateChart);
      let option = {
        title: {
          text: "培训情况排名",
          x: "left"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          },
          formatter: function(params) {
            let relVal = "";
            for (let j = 0, l = params.length; j < l; j++) {
              relVal += params[j].seriesName + "： " + params[j].value;
              if (j === 2) {
                relVal += "%";
              } else {
                relVal += "<br/>";
              }
            }
            return relVal;
          }
        },
        dataZoom: {
          show: true,
          start: 0,
          end: 30
        },
        legend: {
          data: ["参与人数", "完成人数", "完成比例"]
        },
        xAxis: [
          {
            axisLabel: {
              interval: 0,
              rotate: 45
            },
            type: "category",
            data: [
              "北京市",
              "天津市",
              "河北省",
              "山西省",
              "内蒙古自治区",
              "辽宁省",
              "吉林省",
              "黑龙江省",
              "上海市",
              "江苏省",
              "浙江省",
              "安徽省",
              "福建省",
              "江西省",
              "山东省",
              "河南省",
              "湖北省",
              "湖南省",
              "广东省",
              "广西壮族自治区",
              "海南省",
              "重庆市",
              "四川省",
              "贵州省",
              "云南省",
              "西藏自治区",
              "陕西省",
              "甘肃省",
              "青海省",
              "宁夏回族自治区",
              "新疆维吾尔自治区"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "人数（个）",
            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            type: "value",
            name: "比例",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "参与人数",
            type: "bar",
            data: [
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390
            ],
            label: {
              show: true,
              position: "top",
              formatter: "{c}" //这是关键，在需要的地方加上就行了
            }
          },
          {
            name: "完成人数",
            type: "bar",
            data: [9, 8, 100, 200, 200, 55, 10],
            label: {
              show: true,
              position: "top",
              formatter: "{c}" //这是关键，在需要的地方加上就行了
            }
          },
          {
            name: "完成比例",
            type: "line",
            yAxisIndex: 1,
            data: [
              2,
              22,
              32,
              41,
              61,
              10,
              20,
              23,
              55,
              67,
              91,
              6,
              2,
              22,
              32,
              41,
              61,
              10,
              20,
              23,
              55,
              67,
              91,
              6
            ],
            label: {
              show: true,
              position: "top",
              formatter: "{c}%" //这是关键，在需要的地方加上就行了
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart2 = myChart;
      vm.updateResize();
    },
    setDurationChart() {
      let myChart = echarts.init(this.$refs.durationChart);
      let option = {
        title: {
          text: "在线培训完成时长情况",
          x: "left"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        dataZoom: {
          show: true,
          start: 0,
          end: 30
        },
        xAxis: [
          {
            axisLabel: {
              interval: 0,
              rotate: 45
            },
            type: "category",
            data: [
              "北京市",
              "天津市",
              "河北省",
              "山西省",
              "内蒙古自治区",
              "辽宁省",
              "吉林省",
              "黑龙江省",
              "上海市",
              "江苏省",
              "浙江省",
              "安徽省",
              "福建省",
              "江西省",
              "山东省",
              "河南省",
              "湖北省",
              "湖南省",
              "广东省",
              "广西壮族自治区",
              "海南省",
              "重庆市",
              "四川省",
              "贵州省",
              "云南省",
              "西藏自治区",
              "陕西省",
              "甘肃省",
              "青海省",
              "宁夏回族自治区",
              "新疆维吾尔自治区"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "完成时长 (天)"
          }
        ],
        series: [
          {
            name: "时长",
            type: "bar",
            barWidth: "60%",
            data: [
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390
            ],
            label: {
              show: true,
              position: "top",
              formatter: "{c}" //这是关键，在需要的地方加上就行了
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart3 = myChart;
      vm.updateResize();
    }
  }
};
</script>
<style lang="scss">
.data-all-wrap {
  background: #fff;
  overflow: hidden;
  padding: 10px;
  .el-tooltip__popper {
  }
  .box-list {
    position: relative;
    // width: 100%;
    height: 150px;
    .box-card {
      position: relative;
      background-color: #d8d8d8;
      width: 31%;
      margin-right: 2%;
      height: 150px;
      float: left;
      .el-card__header {
        border-bottom-width: 0;
      }
      .header {
        position: relative;
        text-align: left;
        .value {
          font-size: 20px;
          font-weight: 700;
        }
        .title {
          font-size: 12px;
        }
        .notice {
          position: absolute;
          top: -5px;
          right: -5px;
        }
      }
      .box-content {
        text-align: left;
        height: 15px;
        font-size: 12px;
        .should-key {
          margin-left: 10px;
        }
      }
    }
  }
  .chart-select {
    position: relative;
  }
  .chart {
    position: relative;
    margin: 20px auto 0 auto;
    width: 100%;
    height: 350px;
    border: 1px solid #dedede;
  }
}
</style>