<template>
  <div class="data-all-wrap">
    <div v-if="dataType == 0" class="data-chart">
      <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 v-if="index+1 !== cardData.length" class="line"></div> -->
        </div>
      </div>
      <div class="chart-title">证历分布情况</div>
      <div class="chart-distributeChart">
        <div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
        <div class="data-text">
          <div class="content-text">
            <p v-for="item in distributeList" :key="item.value">{{item.label}}：{{item.value}}人</p>
          </div>
        </div>
      </div>
      <div class="chart-title">证书级别按学历发布情况</div>
      <div class="chart-recordChart">
        <div class="recordChart" id="recordChart" ref="recordChart"></div>
        <div class="data-text">
          <div class="content-text">
            <p v-for="item in recordList" :key="item.value">{{item.label}}：{{item.value}}人</p>
          </div>
        </div>
      </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-title">培训情况排名</div>
      <div class="chart" id="certificateChart" ref="certificateChart"></div>
      <div class="chart-title">在线培训完成时长情况</div>
      <div class="chart" id="durationChart" ref="durationChart"></div>
    </div>
    <div v-if="dataType == 1" class="data-table">
      <div class="box-list">
        <div v-for="(item , index) in cardData" :key="index" class="box">
          <el-card class="box-card box-card2">
            <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 v-if="index+1 !== cardData.length" class="line"></div> -->
        </div>
      </div>
      <div class="person">
        <div class="person-title">项目人员情况</div>
        <!-- <el-radio-group class="person-radio" v-model="tableType" @change="change">
          <el-radio-button label="0">已获证</el-radio-button>
          <el-radio-button label="1">未获证</el-radio-button>
          <el-radio-button label="2">未参与</el-radio-button>
        </el-radio-group> -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="rank" label="排名" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="sex" label="性别" align="center"></el-table-column>
          <el-table-column prop="department" label="科室" align="center"></el-table-column>
          <el-table-column prop="join" label="是否参与项目" align="center"></el-table-column>
          <el-table-column prop="complete" label="是否完成项目" align="center"></el-table-column>
          <el-table-column prop="grade" label="证书级别" align="center"></el-table-column>
          <el-table-column prop="certificateDate" label="获证日期" align="center"></el-table-column>
          <el-table-column prop="record" label="成绩" align="center"></el-table-column>
          <el-table-column prop="learnTime" label="学习时长" align="center"></el-table-column>
        </el-table>
        <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formTable.pageNo"
          :page-sizes="[10, 20, 30, 100]"
          :page-size="formTable.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
      </div>
    </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: "",
      dataType: 0,
      tableType: "0",
      echartsData: {
        chart0: {},
        chart1: {},
        chart2: {},
        chart3: {}
      },
      distributeList: [],
      recordList: [],
      cardData: [],
      rankType: 1,
      rankOptions: [
        {
          value: 1,
          label: "按获证比例排名"
        },
        {
          value: 2,
          label: "按参与人数排名"
        }
      ],
      tableData: [],
      totalRows: 0,
      formTable: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
    vm.initCard();
    if(vm.dataType == 0) {
      // vm.setInitWidth();
      setTimeout(function() {
      // vm.$nextTick(() => {
        vm.setDistributeChart();
        vm.setRecordChart();
        vm.setDurationChart();
        vm.setCertificateChart();
      // });
      }, 500);
    } else {
      vm.setTable();
    }
  },
  mounted: function() {},
  methods: {
    initCard() {
      let 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%",
            "应参与人数：筛选范围下，所圈选人员数量",
            "已获证人数：筛选范围下，在应参与人员中，已获证的人员数量"
          ]
        }
      ];
      if(vm.dataType == 0) {
        vm.cardData = cardData;
      } else if(vm.dataType == 1) {
        vm.cardData = cardData.slice(0,2);
      }
    },
    updateResize() {
      setTimeout(function() {
        window.onresize = function() {
          vm.echartsData.chart0.resize();
          vm.echartsData.chart1.resize();
          vm.echartsData.chart2.resize();
          vm.echartsData.chart3.resize();
        };
      },100);
    },
    setInitWidth() {
    },
    setDistributeChart() {
      vm.distributeList = [
        {
          label: '未获证人数',
          value: 2290,
        },
        {
          label: '获优秀人数',
          value: 1900,
        },
        {
          label: '获及格人数',
          value: 150,
        },
      ]
      let myChart = echarts.init(this.$refs.distributeChart);
      let option = {
        title: {
          text: "",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        label: {
          formatter: "{d}%"
        },
        color: ['#FF9A4B','#39AF9A', '#FFB01B'],
        legend: {
          orient: "horizontal",
          top: "",
          left: "40%",
          data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["65%", "50%"],
            data: [
              { value: 3000, name: "未获证人数占比" },
              { value: 6800, name: "获优秀人数占比" },
              { value: 3200, name: "获及格人数占比" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart0 = myChart;
      vm.updateResize();
    },
    setRecordChart() {
      vm.recordList = [
        {
          label: '博士',
          value: 50,
        },
        {
          label: '硕士',
          value: 90,
        },
        {
          label: '本科',
          value: 700,
        },
        {
          label: '大专',
          value: 20428,
        },
        {
          label: '中专及以下',
          value: 34234,
        },
        {
          label: '其他',
          value: 2345,
        },
      ]
      let myChart = echarts.init(this.$refs.recordChart);
      let option = {
        title: {
          text: "",
          x: "left"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              shadowColor: '#E3EFED',
              width: 36,
            },
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          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 + "人";
            let divList = [];
            divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
            divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
            divList[2] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
            for (let j = params.length - 1 ; j >= 0; j--) {
              relVal += 
                "<br/>" + divList[j] +
                params[j].seriesName +
                "占比： " +
                (
                  (100 * parseFloat(params[j].value)) /
                  parseFloat(value)
                ).toFixed(2) +
                "%";
            }
            return relVal;
          }
        },
        color: ['#FFB01B','#39AF9A', '#5D7092'],
        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: 18,
            label: {
              normal: {
                show: true,
                rotate: -90,
              }
            },
            data: [220, 182, 191, 234, 290, 330]
          },
          {
            name: "获优秀人数",
            type: "bar",
            stack: "总量",
            barWidth: 18,
            label: {
              normal: {
                show: true,
                rotate: -90,
              }
            },
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: "未获证人数",
            type: "bar",
            stack: "总量",
            barWidth: 18,
            label: {
              normal: {
                show: true,
                rotate: -90,
              }
            },
            data: [1, 302, 301, 334, 390, 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"
            }
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          formatter: function(params) {
            let relVal = "";
            let divList = [];
            divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
            divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
            divList[2] = "<div style='background: #559A99;height: 12px;width: 12px;margin: 5px 5px 0 5px;float: left;border-radius:50%;'></div>";
            for (let j = 0, l = params.length; j < l; j++) {
              relVal += divList[j] + params[j].seriesName + "： " + params[j].value;
              if (j === 2) {
                relVal += "%";
              } else {
                relVal += "<br/>";
              }
            }
            return relVal;
          }
        },
        color: ['#5D7092','#FFB01B', '#559A99'],
        dataZoom: {
          show: true,
          start: 0,
          end: 60
        },
        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: "参与人数",
            barWidth: 10,
            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}", //这是关键，在需要的地方加上就行了
              rotate: -90,
              offset: [-5, -15]
            }
          },
          {
            name: "获证人数",
            barWidth: 10,
            type: "bar",
            data: [9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10],
            label: {
              show: true,
              position: "top",
              formatter: "{c}", //这是关键，在需要的地方加上就行了
              rotate: -90,
              offset: [-5, -15]
            }
          },
          {
            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'
          }
        },
        color: ['#449284'],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        dataZoom: {
          show: true,
          start: 0,
          end: 66
        },
        xAxis: [
          {
            axisLabel: {
              interval: 0,
              rotate: 35
            },
            type: "category",
            data: [
              "北京市",
              "天津市",
              "河北省",
              "山西省",
              "内蒙古自治区",
              "辽宁省",
              "吉林省",
              "黑龙江省",
              "上海市",
              "江苏省",
              "浙江省",
              "安徽省",
              "福建省",
              "江西省",
              "山东省",
              "河南省",
              "湖北省",
              "湖南省",
              "广东省",
              "广西壮族自治区",
              "海南省",
              "重庆市",
              "四川省",
              "贵州省",
              "云南省",
              "西藏自治区",
              "陕西省",
              "甘肃省",
              "青海省",
              "宁夏回族自治区",
              "新疆维吾尔自治区"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "完成时长 (天)"
          }
        ],
        series: [
          {
            name: "时长",
            type: "bar",
            barWidth: 17,
            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}", //这是关键，在需要的地方加上就行了
              rotate: -90,
              offset: [-5, -15]
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart3 = myChart;
      vm.updateResize();
    },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      vm.formTable.pageSize = val;
      vm.formTable.pageNo = 1;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      vm.formTable.pageNo = val;
    },
    setTable() {
      vm.tableData = [
        {
          id: 1,
          rank: 1,
          name: '伊娟',
          sex: '女',
          department: '内科',
          join: 1,
          complete: 1,
          grade: '1级',
          certificateDate: '2019-10-11',
          record: 100,
          learnTime: '4小时23分34秒',
        }
      ];
    }
  }
};
</script>
<style lang="scss">
.el-tooltip__popper.is-light[x-placement^=bottom-end] {
  width: 330px;
  background-color: #449284;
  border-color: #449284;
  color: #ffffff;
  .popper__arrow::after {
    border-bottom-color: #449284;
  }
  .popper__arrow {
    border-bottom-color: #449284;
  }
}
.data-all-wrap {
  background: #fff;
  overflow: hidden;
  padding: 10px;
  .box-list {
    position: relative;
    // width: 100%;
    height: 110px;
    .box-card {
      position: relative;
      background-color: #e3efed;
      color: #449284;
      width: 31%;
      margin-right: 2%;
      height: 110px;
      float: left;
      .notice {
        position: absolute;
        z-index: 999;
        top: 21px;
        right: 14px;
        width: 16px;
        height: 16px;
      }
      .el-card__header {
        border-bottom-width: 0;
      }
      .el-card__body {
        padding: 0px;
      }
      .left-content {
        position: relative;
        float: left;
        width: 33%;
        height: 110px;
        text-align: left;
        padding: 23px 0 0 20px;
        .title {
          font-size: 14px;
          height: 14px;
          line-height: 14px;
        }
        .value {
          margin-top: 20px;
          height: 22px;
          font-size: 30px;
          line-height: 22px;
          font-weight: 500;
        }
      }
      .vertical {
        position: absolute;
        left: 34%;
        float: left;
        margin-top: 23px;
        width:1px;
        height:57px;
        background-color: #C1D8D4;
      }
      .right-content {
        position: relative;
        float: left;
        width: 64%;
        height: 110px;
        text-align: left;
        font-size: 14px;
        padding: 23px 0 0 29px;
        p {
          height: 14px;
          line-height: 14px;
        }
        .should {
          margin-top: 28px;
        }
      }
    }
    .box-card2 {
      width: 48%;
      margin-right: 1%;
    }
  }
  .chart-select {
    position: relative;
  }
  .chart-title {
    position: relative;
    margin-top: 17px;
    width: 100%;
    height: 60px;
    font-size:18px;
    font-weight:600;
    line-height: 60px;
    color: #000000;
    border-bottom: 1px solid #E4E7ED;
  }
  .chart {
    position: relative;
    margin: 20px auto 0 auto;
    // width: 100%;
    width: 860px;
    height: 350px;
  }
  .chart-distributeChart {
    position: relative;
    margin: 20px auto 0 auto;
    height: 350px;
    width: 100%;
    overflow-x: hidden;
    .distributeChart {
      position: relative;
      float: left;
      // width: 70%;
      width: 600px;
      height: 350px;
    }
    .data-text {
      position: relative;
      float: left;
      width: 30%;
      height: 350px;
      .content-text {
        position: relative;
        margin-top: 135px;
        margin-left: 35%;
        text-align: left;
        p {
          margin-top: 20px;
          height:12px;
          font-size:12px;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:12px;
        }
      }
    }
  }
  .chart-recordChart {
    position: relative;
    margin: 20px auto 0 auto;
    height: 350px;
    width: 100%;
    overflow-x: hidden;
    .recordChart {
      position: relative;
      float: left;
      // width: 83.5%;
      width: 700px;
      height: 350px;
    }
    .data-text {
      position: relative;
      float: left;
      width: 16%;
      height: 350px;
      .content-text {
        position: relative;
        margin-top: 100px;
        margin-left: 16%;
        text-align: left;
        p {
          margin-top: 20px;
          height:12px;
          font-size:12px;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:12px;
        }
      }
    }
  }
  .person {
    position: relative;
    margin-top: 20px;
    width: 100%;
    .person-title {
      font-size:18px;
      font-weight:700;
      margin-bottom: 20px;
    }
    .person-radio {
      margin-top: 10px;
      .el-radio-button {
        .el-radio-button__inner {
          border:0 solid #666666 !important;
          box-shadow: 0;
        }
      }
      .is-active {
        border-radius: 10px 10px 0px 0px;
        border-bottom: 2px solid #666666 !important;
        .el-radio-button__inner{
          border-radius:10px 10px 0px 0px;
          background:#DFDFDF !important;
          border:0 solid #666666 !important;
          box-shadow: 0;
        }
      }
    }
  }
}
</style>