<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="date-table">
        <el-radio-group class="change-range" v-model="checkRange">
          <el-radio-button label=1>累计</el-radio-button>
          <el-radio-button label=2>新增</el-radio-button>
        </el-radio-group>
        <el-radio-group class="change-date" v-model="checkTime" size="medium">
          <el-radio-button label=1>日</el-radio-button>
          <el-radio-button label=2>周</el-radio-button>
          <el-radio-button label=3>月</el-radio-button>
          <el-radio-button label=4>年</el-radio-button>
        </el-radio-group>
        <el-table :data="tableDateTime" style="width: 100%">
          <el-table-column prop="date" label="日期" align="center" min-width="100"></el-table-column>
          <el-table-column prop="shouldOrgan" label="应参与机构数" align="center"></el-table-column>
          <el-table-column prop="joinOrgan" label="已参与机构数" align="center"></el-table-column>
          <el-table-column prop="shouldPeople" label="应参与人数" align="center"></el-table-column>
          <el-table-column prop="joinPeople" label="已参与人数" align="center"></el-table-column>
          <el-table-column prop="getPeople" label="获证人数" align="center"></el-table-column>
        </el-table>
        <!-- <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeDate"
            @current-change="handleCurrentDate"
            :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 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" >{{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 * as chartData from "../../utils/learning/chartData";
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: [],
      tableDateTime: [],
      totalRows: 0,
      formTable: {
        pageNo: 1,
        pageSize: 10,
      },
      checkRange: 1,
      checkTime: 1,
    };
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
    // vm.initCard();
    // if(vm.dataType == 0) {
    //   vm.setTableDate();
    //   setTimeout(function() {
    //     vm.setDistributeChart();
    //     vm.setRecordChart();
    //     vm.setDurationChart();
    //     vm.setCertificateChart();
    //   }, 500);
    // } else {
    //   vm.setTable();
    // }
  },
  mounted: function() {
    this.$on("search", () => {
      vm.checkRange = 1;
      vm.checkTime = 1,
      this.search();
    });
  },
  methods: {
    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 = "310";
      }
      // console.log("0 req", req);
      vm.POST("stats/report/general", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.initCard(res.data.percentData);
          vm.setDistributeChart(res.data.certData);
          vm.setRecordChart();
          vm.setDurationChart();
          vm.setCertificateChart();
        }
      });
    },
    initCard(data) {
      let cardData = [
        {
          value: "0%",
          title: "机构参与率",
          hasKey: "已参与机构数",
          hasNum: "0",
          shouldKey: "应参与机构数",
          shouldNum: "0",
          content: [
            "机构参与率：已参与机构数/应参与机构数*100% ",
            "应参与机构数：筛选范围下，所有圈选机构数量，包含白名单反退出来的机构",
            "已参与机构数：筛选范围下，在应参与机构中，机构学员有参与项目行为的机构数量"
          ]
        },
        {
          value: "0%",
          title: "人员参与率",
          hasKey: "已参与人数",
          hasNum: "0",
          shouldKey: "应参与人数",
          shouldNum: "0",
          content: [
            "人员参与率：已参与人数/应参与人数*100%",
            "应参与人数：筛选范围下，所圈选人员数量",
            "已参与人数：筛选范围下，在应参与人员中，有参与项目行为的人员数量"
          ]
        },
        {
          value: "0%",
          title: "获证率",
          hasKey: "已获证人数",
          hasNum: "0",
          shouldKey: "应参与人数",
          shouldNum: "0",
          content: [
            "获证率：已完成人数/应参与人数*100%",
            "应参与人数：筛选范围下，所圈选人员数量",
            "已获证人数：筛选范围下，在应参与人员中，已获证的人员数量"
          ]
        }
      ];

      if(vm.dataType == 0) {
        cardData[0].value = data.hospitalRate*100 + '%';
        cardData[0].hasNum = data.hospitalJoinCount;
        cardData[0].shouldNum = data.hospitalCount;

        cardData[1].value = data.doctorRate*100 + '%';
        cardData[1].hasNum = data.joinCount;
        cardData[1].shouldNum = data.doctorCount;

        cardData[2].value = data.certificateRate*100 + '%';
        cardData[2].hasNum = data.finishCount;
        cardData[2].shouldNum = data.doctorCount;

        vm.cardData = cardData;
      } else if(vm.dataType == 1) {
        vm.cardData = cardData.slice(0,2);
      }
    },
    setTableDate() {
      vm.tableDateTime = [
        {
          date: '2019-11-15',
          shouldOrgan: 7900,
          joinOrgan: 7900,
          shouldPeople: 8000,
          joinPeople: 8000,
          getPeople: 8000,
        }
      ];
    },
    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(data) {
      let keyName = ['未获证人数','获优秀人数','获良好人数','获及格人数','获不及格人数'];
      let keyName2 = ['未获证人数占比','获优秀人数占比','获良好人数占比','获及格人数占比','获不及格人数占比'];
      let distributeList = [];
      let legendData = [];
      let seriesData = [];
      for(let i = 0; i<data.length ; i++) {
        let obj = {
          label: keyName[data[i].certId],
          value: data[i].doneCount,
        };
        distributeList.push(obj);

        legendData.push(keyName2[data[i].certId])
        let objSer = {
          name: keyName2[data[i].certId],
          value: data[i].doneCount,
        }
        seriesData.push(objSer);
      }
      vm.distributeList = distributeList;
      let myChart = echarts.init(this.$refs.distributeChart);
      let option = chartData.dustributeOption(legendData,seriesData);
      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 = chartData.recordOption();
      myChart.setOption(option);
      vm.echartsData.chart1 = myChart;
      vm.updateResize();
    },
    setCertificateChart() {
      let myChart = echarts.init(this.$refs.certificateChart);
      let option = chartData.certificateOption();
      myChart.setOption(option);
      vm.echartsData.chart2 = myChart;
      vm.updateResize();
    },
    setDurationChart() {
      let myChart = echarts.init(this.$refs.durationChart);
      let option = chartData.durationOption();
      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%;
    }
  }
  .date-table {
    position: relative;
    width: 100%;
    margin-top: 20px;
    .change-date {
      position: relative;
      float: right;
      margin-bottom: 5px;
    }
  }
  .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>