<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"> -->
          <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
            <el-tooltip v-if="index == 2" 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 | toThousands }}</p>
              <p class="should">{{ item.shouldKey }}:{{ item.shouldNum | toThousands }}</p>
            </div>
          </div>
        <!-- </div> -->
      </div>
      <div class="date-table">
         <el-tabs class="change-range" v-model="checkRange" type="card" @tab-click="handleCheckRange">
          <el-tab-pane label="累计" name="1"></el-tab-pane>
          <el-tab-pane label="新增" name="2"></el-tab-pane>
        </el-tabs>
        <el-radio-group class="change-date" v-model="checkTime" size="medium" @change="handleCheckTime">
          <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="hospitalCount" label="应参与机构数" align="center"></el-table-column>
          <el-table-column prop="hospitalJoinCount" label="已参与机构数" align="center"></el-table-column>
          <el-table-column prop="doctorCount" label="应参与人数" align="center"></el-table-column>
          <el-table-column prop="doctorJoinCount" label="已参与人数" align="center"></el-table-column>
          <el-table-column prop="finishCount" label="获证人数" align="center"></el-table-column>

          <el-table-column v-if="gradeFlag[0] == true" prop="grade1Count" label="优秀" align="center"></el-table-column>
          <el-table-column v-if="gradeFlag[1] == true" prop="grade2Count" label="良好" align="center"></el-table-column>
          <el-table-column v-if="gradeFlag[2] == true" prop="grade3Count" label="及格" align="center"></el-table-column>
          <el-table-column v-if="gradeFlag[3] == true" prop="grade4Count" label="不及格" align="center"></el-table-column>
          <div slot="empty">
            <div class="table-empty">
              <img src="../../assets/image/noData.png" />
            </div>
          </div>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeDwmy"
            @current-change="handleCurrentDwmy"
            :current-page="formDwmy.pageNo"
            :page-sizes="[20, 30, 100 ,200]"
            :page-size="formDwmy.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
      <div v-if="certFlag != 0">
      <div v-if="downloadId == null">
        <div class="spacing"></div>
        <div class="chart-title">证历分布情况</div>
        <div v-if="showDistributeChart === true" 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 v-if="showDistributeChart === false" class="empty-img">
          <img src="../../assets/image/noData.png" />
        </div>
      </div>
      <div class="spacing"></div>
      <div class="chart-title">证书级别按学历发布情况</div>
      <div v-if="showRecordChart === true" 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" >{{item.label}}：{{item.value}}人</p>
          </div>
        </div>
      </div>
      <div v-if="showRecordChart === false" class="empty-img">
        <img src="../../assets/image/noData.png" />
      </div>
      </div>
      <!-- <div v-if="certFlag != 0"> -->
        <div class="spacing"></div>
        <div class="chart-title-more">
          <p>项目情况排名</p>
          <el-radio-group v-if="showCertificateChart === true"  class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
            <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-group>
        </div>
        <div v-if="showCertificateChart === true" class="overflow-chart">
          <div class="chartCert" id="certificateChart" ref="certificateChart"></div>
        </div>
        <div v-if="showCertificateChart === false" class="empty-img">
          <img src="../../assets/image/noData.png" />
        </div>
        <div class="spacing"></div>
        <div class="chart-title">在线培训完成时长情况</div>
        <div v-if="showDurationChart === true" class="overflow-chart">
          <div class="chartDuration" id="durationChart" ref="durationChart"></div>
        </div>
        <div v-if="showDurationChart === false" class="empty-img">
          <img src="../../assets/image/noData.png" />
        </div>
        <div class="chart-remarks">注：在线培训完成时长=完成项目时间-开始参与项目时间</div>
      </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-card box-card2" v-bind:class="{ 'box-last': index == 1 }">
          <!-- <el-card class="box-card box-card2" v-bind:class="{ 'box-last': index == 1 }"> -->
            <el-tooltip v-if="index == 1" 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 | toThousands }}</p>
              <p class="should">{{ item.shouldKey }}:{{ item.shouldNum | toThousands }}</p>
            </div>
          <!-- </el-card> -->
        </div>
      </div>
      <div class="date-table">
         <el-tabs class="change-range" v-model="checkRange" type="card" @tab-click="handleCheckRange">
          <el-tab-pane label="累计" name="1"></el-tab-pane>
          <el-tab-pane label="新增" name="2"></el-tab-pane>
        </el-tabs>
        <el-radio-group class="change-date" v-model="checkTime" size="medium" @change="handleCheckTime">
          <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="doctorCount" label="应参与人数" align="center"></el-table-column>
          <el-table-column prop="doctorJoinCount" label="已参与人数" align="center"></el-table-column>
          <el-table-column prop="finishCount" label="获证人数" align="center"></el-table-column>

          <el-table-column v-if="gradeFlag[0] == true" prop="grade1Count" label="优秀" align="center"></el-table-column>
          <el-table-column v-if="gradeFlag[1] == true" prop="grade2Count" label="良好" align="center"></el-table-column>
          <el-table-column v-if="gradeFlag[2] == true" prop="grade3Count" label="及格" align="center"></el-table-column>
          <el-table-column v-if="gradeFlag[3] == true" prop="grade4Count" label="不及格" align="center"></el-table-column>
          <div slot="empty">
            <div class="table-empty">
              <img src="../../assets/image/noData.png" />
            </div>
          </div>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeDwmy"
            @current-change="handleCurrentDwmy"
            :current-page="formDwmy.pageNo"
            :page-sizes="[20, 30, 100 ,200]"
            :page-size="formDwmy.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
      <div class="spacing"></div>
      <div class="person">
        <div class="person-title">项目人员情况</div>
        <el-tabs v-if="downloadId == null" class="tabs-person" v-model="tableType" type="card" @tab-click="handlePerson">
          <el-tab-pane label="已获证" name="1"></el-tab-pane>
          <el-tab-pane label="未获证" name="2"></el-tab-pane>
          <el-tab-pane label="未参与" name="3"></el-tab-pane>
        </el-tabs>
        <div v-if="downloadId == null">
          <el-table :data="tableData" class="person-table">
            <el-table-column v-if="tableType == '1'" prop="rankNo" label="排名" align="center"></el-table-column>
            <el-table-column prop="doctorName" label="姓名" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sex  | sexValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="departmentName" label="科室" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.departmentName | departmentNameValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="joinFlag" label="是否参与项目" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.joinFlag  | joinFlagValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="finishFlag" label="是否完成项目" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.finishFlag | finishFlagValue}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="certFlag != 1" prop="certGrade" label="证书级别" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.certGrade | certGradeValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="finishDate" label="完成项目日期" align="center"></el-table-column>
            <el-table-column prop="score" label="成绩" align="center"></el-table-column>
            <el-table-column prop="learnTime" min-width="150" label="学习时长" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.learnTime | learnTimeValue}}</span>
              </template>
            </el-table-column>
            <div slot="empty">
              <div class="table-empty">
                <img src="../../assets/image/noData.png" />
              </div>
            </div>
          </el-table>
        </div>
        <div v-if="downloadId != null" class="front-table">
          <el-table :data="tableData.slice((formTable.pageNo-1)*formTable.pageSize,formTable.pageNo*formTable.pageSize)" class="person-table">
            <el-table-column v-if="tableType == '1'" prop="rankNo" label="排名" align="center"></el-table-column>
            <el-table-column prop="doctorName" label="姓名" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sex  | sexValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="departmentName" label="科室" align="center"></el-table-column>
            <el-table-column prop="joinFlag" label="是否参与项目" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.joinFlag  | joinFlagValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="finishFlag" label="是否完成项目" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.finishFlag | finishFlagValue}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="certFlag != 1" prop="certGrade" label="证书级别" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.certGrade | certGradeValue}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="finishDate" label="完成项目日期" align="center"></el-table-column>
            <el-table-column prop="score" label="成绩" align="center"></el-table-column>
            <el-table-column prop="learnTime" min-width="150" label="学习时长" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.learnTime | learnTimeValue}}</span>
              </template>
            </el-table-column>
            <div slot="empty">
              <div class="table-empty">
                <img src="../../assets/image/noData.png" />
              </div>
            </div>
          </el-table>
        </div>
        <div class="chart-remarks">注：本报表数据来源仅包括有摸底考的课程培训。</div>
        <div class="pagination">
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formTable.pageNo"
            :page-sizes="[20, 30, 100 ,200]"
            :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
    },
    timeInfoData: {
      type: Object
    },
  },
  data() {
    return {
      roleType: "L1",
      projectId: "",
      dataType: 0,
      tableType: "1",
      echartsData: {
        chart0: {},
        chart1: {},
        chart2: {},
        chart3: {}
      },
      distributeList: [],
      recordList: [],
      cardData: [],
      rankType: "1",
      rankOptions: [
        {
          value: 1,
          label: "按获证比例排名"
        },
        {
          value: 2,
          label: "按参与人数排名"
        }
      ],
      tableData: [],
      tableDateTime: [],
      totalRows: 0,
      formDwmy: {
        pageNo: 1,
        pageSize: 20,
      },
      formTable: {
        pageNo: 1,
        pageSize: 20,
      },
      checkRange: "1",
      checkTime: "1",
      totalCount: 0,
      gradeFlag: [false, false, false, false],
      hospitalCnt: '',
      hospitalCutList: [],
      certFlag: 0,
      downloadId: null,
      timeInfoChild: {},

      showDistributeChart: true,
      showRecordChart: true,
      showCertificateChart: true,
      showDurationChart: true,
    };
  },
  watch: {
    timeInfoData: {
      deep: true,
      handler(nv, ov) {
        vm.timeInfoChild = nv;
      }
    }
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
    vm.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
  },
  mounted: function() {
    this.$on("search", () => {
      vm.gethHspitalsCnt();
    });
    this.$on("static", () => {
      vm.getStatic();
    });
  },
  methods: {
    getStatic() {
      // console.log(vm.timeInfoChild.reportParamModel);
      if(vm.timeInfoChild.reportParamModel.hospitalIdList != null && vm.timeInfoChild.reportParamModel.hospitalIdList.length == 1) {
        vm.dataType = 1;
      } else {
        vm.dataType = 0;
      }
      // console.log('展示all类型：',vm.dataType)
      vm.setStatic();
    },
    setStatic() {
      vm.certFlag = vm.timeInfoChild.doctorInfoRep.certFlag;
      vm.searchDwmy();
      vm.initCard(vm.timeInfoChild.genSituationModel.percentData);
      if(vm.dataType == 0) {
        //多个机构
        setTimeout(function(){
          if(vm.certFlag !== 0) {
            vm.setRecordChart(vm.timeInfoChild.genSituationModel.eduData);
          }
          // if(vm.certFlag !== 0) {
          vm.setCertificateChart(vm.timeInfoChild.genSituationModel.studyRankMap[0]);
          vm.setDurationChart(vm.timeInfoChild.genSituationModel.costRank);
          // }
        },20)
      } else {
        //单个几个
        let genSituationModel = vm.timeInfoChild.genSituationModel;
        vm.totalRows = genSituationModel.personData.length;
        vm.tableData = genSituationModel.personData;
      }
    },
    gethHspitalsCnt() {
      let req = {
        projectId: vm.projectId,
        regionId: vm.formInline.region[vm.formInline.region.length - 1]
      };
      vm.GET("stats/region/hospitals/cnt", req).then(res => {
        if (res.code == "000000") {
          vm.hospitalCnt = res.data.hospitalCnt;
          // vm.hospitalCnt = 1;
          if(vm.hospitalCnt == 1) {
            vm.hospitalCutList = res.data.list;
          }
          // vm.searchType();
          vm.getDisplay();
        }
      });
    },
    getDisplay() {
      let reqInfo = {
        projectId: vm.projectId,
      };
      openLoading(vm);
      vm.GET("stats/region/info", reqInfo).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.certFlag = res.data.certFlag;
          // vm.certFlag = 1;
          vm.searchType();
        }
      });
    },
    searchType() {
      if(vm.formInline.organization.length == 1) {
        vm.dataType = 1;
      } else {
        if(vm.hospitalCnt == 1) {
          vm.dataType = 1;
        } else {
          vm.dataType = 0;
        }
      }
      // console.log('vm.hospitalCnt',vm.hospitalCnt);
      if(vm.dataType == 0) {
        vm.checkRange = "1";
        vm.checkTime = "1",
        this.search();
        this.searchDwmy();
      } else {
        this.searchDwmy();
        this.searchPerson();
      }
    },
    searchPerson(type) {
      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 ? 2 : 1,
        regionId: vm.formInline.region[vm.formInline.region.length - 1],
        timeFlag: vm.formInline.timeFlag,
        pageNo: vm.formTable.pageNo,
        pageSize: vm.formTable.pageSize,
      };
      if(req.hospitalIdList.length == 0) {
        req.hospitalIdList = [];
        req.hospitalIdList[0] = vm.hospitalCutList[0].hospitalId;
      }
      openLoading(vm);
      // console.log("0 req", req);
      vm.POST("stats/report/generalPersonal/"+vm.tableType, req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          if(type != 1) {
            vm.initCard(res.data.percentData);
          }
          vm.totalRows = res.data.totalSize;
          vm.tableData = res.data.personData;
        }
      });
    },
    handlePerson(tab, event) {
      vm.tableType = tab.name;
      vm.formTable.pageNo = 1;
      vm.searchPerson(1);
    },
    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 ? 2 : 1,
        regionId: vm.formInline.region[vm.formInline.region.length - 1],
        timeFlag: vm.formInline.timeFlag,
      };
      openLoading(vm);
      // console.log("0 req", req);
      vm.POST("stats/report/general_pc", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.initCard(res.data.percentData);
          if(vm.certFlag !== 0) {
            vm.setDistributeChart(res.data.certData);
            vm.setRecordChart(res.data.eduData);
          }
          // if(vm.certFlag !== 0) {
          vm.setCertificateChart(res.data.studyRank);
          vm.setDurationChart(res.data.costRank);
          // }
        }
      });
    },
    searchDwmy() {
      let req = {};
      if(vm.downloadId == null) {
        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 ? 2 : 1,
          regionId: vm.formInline.region[vm.formInline.region.length - 1],
          timeFlag: vm.formInline.timeFlag,
          timeType: parseInt(vm.checkTime),
          dataType: parseInt(vm.checkRange),
          pageNo: vm.formDwmy.pageNo,
          pageSize: vm.formDwmy.pageSize,
        };
      } else {
        let reportParamModel = vm.timeInfoChild.reportParamModel;
        req = {
          projectId: reportParamModel.projectId,
          beginDate: reportParamModel.beginDate,
          endDate: reportParamModel.endDate,
          hospitalIdList: reportParamModel.hospitalIdList,
          originalFlag: reportParamModel.originalFlag,
          regionId: reportParamModel.regionId,
          timeFlag: reportParamModel.timeFlag,
          timeType: parseInt(vm.checkTime),
          dataType: parseInt(vm.checkRange),
          pageNo: vm.formDwmy.pageNo,
          pageSize: vm.formDwmy.pageSize,
        };
      }
      openLoading(vm);
      if(req.regionId == '000') {
        req.regionId = '0';
      }
      vm.POST("stats/dwmy/", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.tableDateTime = res.data.list;
          vm.totalCount = res.data.totalCount;
          for(let i=0 ; i < res.data.title.length ; i++) {
            vm.gradeFlag[i] = res.data.title[i].show;
          }
        }
      });
    },
    handleCheckRange(tab, event) {
      vm.formDwmy.pageNo = 1;
      vm.checkRange = tab.name;
      vm.searchDwmy();
    },
    handleCheckTime(value) {
      vm.formDwmy.pageNo = 1;
      vm.timeType = value;
      vm.searchDwmy();
    },
    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(data == null) {
        //数据为空
        if(vm.dataType == 0) {
          vm.cardData = cardData;
        } else if(vm.dataType == 1) {
          vm.cardData = cardData.slice(1);
        }
        return;
      }
      cardData[2].title = vm.certFlag == 0 ? '完成率' : '获证率';
      cardData[2].hasKey = vm.certFlag == 0 ? '已经完成人数' : '已获证人数';
      if(vm.certFlag == 0) {
        cardData[2].content = [
          "完成率：已完成人数/应参与人数*100%",
        ]
      } else {
        cardData[2].content = [
          "获证率：已获证人数/应参与人数*100%",
        ]
      }

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

      cardData[2].value = parseFloat((data.certificateRate*100).toFixed(1)) + '%';
      cardData[2].hasNum = data.finishCount;
      cardData[2].shouldNum = data.doctorCount;
      if(vm.dataType == 0) {
        cardData[0].value = parseFloat((data.hospitalRate*100).toFixed(1)) + '%';
        cardData[0].hasNum = data.hospitalJoinCount;
        cardData[0].shouldNum = data.hospitalCount;

        vm.cardData = cardData;
      } else if(vm.dataType == 1) {
        vm.cardData = cardData.slice(1);
      }
    },
    updateResize() {
      // setTimeout(function() {
      //   window.onresize = function() {
      //     vm.echartsData.chart0.resize();
      //     vm.echartsData.chart1.resize();
      //     vm.echartsData.chart2.resize();
      //     vm.echartsData.chart3.resize();
      //   };
      // },100);
    },
    setDistributeChart(data) {
      if(data.length == 0) {
        vm.showDistributeChart = false;
        return;
      } else {
        vm.showDistributeChart = true;
      }
      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;
      setTimeout(function(){ 
        let myChart = echarts.init(vm.$refs.distributeChart);
        let option = chartData.dustributeOption(legendData,seriesData);
        myChart.setOption(option);
        vm.echartsData.chart0 = myChart;
        vm.updateResize();
      },20);
    },
    setRecordChart(data) {
      if(data.length == 0) {
        vm.showRecordChart = false;
        return;
      } else {
        vm.showRecordChart = true;
      }
      let recordList = [
        {
          label: '博士后',
          value: 0,
        },
        {
          label: '博士',
          value: 0,
        },
        {
          label: '硕士',
          value: 0,
        },
        {
          label: '本科',
          value: 0,
        },
        {
          label: '大专',
          value: 0,
        },
        {
          label: '中专及以下',
          value: 0,
        },
        {
          label: '其他',
          value: 0,
        },
      ]
      let keyName = ['未获证人数','获优秀人数','获良好人数','获及格人数','获不及格人数','获证人数'];
      let legendData = [];
      let xAxisData = ["博士后","博士", "硕士", "本科", "大专", "中专及以下", "其他"];
      for(let i = 0; i<data.length; i++) {
        // console.log('data[i]',data[i].certList);
        let certList = data[i].certList;
        legendData.push(keyName[data[i].certId]);
        for(let a = 0; a < certList.length ; a++) {
          recordList[a].value += certList[a].value;
        }
      }
      let seriesData = [];
      let seriesArr = [];
      let seriesName = [];
      let index = 0;
      for(let x = data.length - 1 ; x >= 0 ; x--) {
        let certList = data[x].certList;
        seriesArr[index] = [];
        seriesName.push(keyName[data[x].certId]);
        for(let y = 0; y < certList.length ; y++) {
          seriesArr[index].push(certList[y].value);
        }
        index++;
      }
      for(let z = 0; z < seriesArr.length ; z++) {
        let seriesObj = {
          name: seriesName[z],
          type: "bar",
          stack: "总量",
          barWidth: 18,
          label: {
            normal: {
              show: true,
              rotate: -90,
            }
          },
          data: seriesArr[z],
        };
        seriesData.push(seriesObj);
      }
      // console.log('data',legendData,seriesArr,seriesData);
      vm.recordList = recordList;
      setTimeout(function(){ 
        let myChart = echarts.init(vm.$refs.recordChart);
        let option = chartData.recordOption(legendData, xAxisData, seriesData);
        myChart.setOption(option);
        vm.echartsData.chart1 = myChart;
        vm.updateResize();
      },20);
    },
    changeRank(value) {
      if(vm.downloadId == null) {
        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 ? 2 : 1,
          regionId: vm.formInline.region[vm.formInline.region.length - 1],
          timeFlag: vm.formInline.timeFlag,
        };
        openLoading(vm);
        vm.POST("stats/report/studyRank/"+value, req).then(res => {
          closeLoading(vm);
          vm.setCertificateChart(res.data.studyRank);
        });
      } else {
        let index = parseInt(value) - 1;
        vm.setCertificateChart(vm.timeInfoChild.genSituationModel.studyRankMap[index]);
      }
    },
    setCertificateChart(data) {
      if(data.length == 0) {
        vm.showCertificateChart = false;
        return;
      } else {
        vm.showCertificateChart = true;
      }
      let xAxisData = [];
      let seriesJoin = [];
      let seriesCert = [];
      let seriesRate = [];
      for(let i = 0 ; i < data.length ; i++) {
        xAxisData.push(data[i].subName);
        seriesJoin.push(data[i].joinCount);
        seriesCert.push(data[i].certCount);
        seriesRate.push(parseFloat((data[i].certRate*100).toFixed(1)));
      }
      setTimeout(function(){
        let myChart = echarts.init(vm.$refs.certificateChart);
        let option = chartData.certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate);
        myChart.setOption(option);
        vm.echartsData.chart2 = myChart;
        vm.updateResize();
      },20);
    },
    setDurationChart(data) {
      if(data.length == 0) {
        vm.showDurationChart = false;
        return;
      } else {
        vm.showDurationChart = true;
      }
      let xAxisData = [];
      let seriesData = [];
      for(let i = 0 ; i<data.length ; i++) {
        xAxisData.push(data[i].subName);
        seriesData.push((data[i].costTime).toFixed(1));
      }
      setTimeout(function(){
        let myChart = echarts.init(vm.$refs.durationChart);
        let option = chartData.durationOption(xAxisData, seriesData);
        myChart.setOption(option);
        vm.echartsData.chart3 = myChart;
        vm.updateResize();
      },20);
    },
    //日周月年分页
    handleSizeDwmy(val) {
      console.log(`每页 ${val} 条`);
      vm.formDwmy.pageSize = val;
      vm.formDwmy.pageNo = 1;
      vm.searchDwmy();
    },
    handleCurrentDwmy(val) {
      console.log(`当前页: ${val}`);
      vm.formDwmy.pageNo = val;
      vm.searchDwmy();
    },
    //机构人员分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      vm.formTable.pageSize = val;
      vm.formTable.pageNo = 1;
      if(vm.downloadId == null) {
        vm.searchPerson(1);
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      vm.formTable.pageNo = val;
      if(vm.downloadId == null) {
        vm.searchPerson(1);
      }
    },
  }
};
</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;
  .table-empty {
    img {
      height: 24px;
      width: 106px;
    }
  }
  .box-list {
    position: relative;
    padding: 30px 30px 0 30px;
    height: 136px;
    // .box {
    //   height: 106px;
    // }
    .box-card {
      position: relative;
      background-color: #e3efed;
      color: #449284;
      width: 32%;
      margin-right: 2%;
      height: 106px;
      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: 106px;
        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: 106px;
        text-align: left;
        font-size: 14px;
        padding: 23px 0 0 29px;
        p {
          height: 14px;
          line-height: 14px;
        }
        .should {
          margin-top: 28px;
        }
      }
    }
    .box-card2 {
      width: 49%;
      margin-right: 2%;
    }
    .box-last {
      margin-right: 0;
    }
  }
  .spacing {
    position: relative;
    width: 100%;
    height: 20px;
    background: #f0f2f5;
  }
  .date-table {
    position: relative;
    width: 100%;
    margin-top: 20px;
    padding: 0 30px 0 30px;
    .change-range {
      .el-tabs__header {
        margin-bottom: 0px;
      }
      .el-tabs__nav-scroll {
        margin-left: 0px;
      }
    }
    .change-date {
      position: absolute;
      top: 0px;
      right: 30px;
    }
  }
  .rank-radio {
    position: relative;
  }
  .chart-title {
    position: relative;
    margin-top: 30px;
    margin-left: 30px;
    height: 25px;
    font-size:18px;
    font-weight:600;
    line-height: 25px;
    color: #000000;
  }
  .chart-title-more {
    position: relative;
    width: 100%;
    height: 70px;
    p {
      position: relative;
      float: left;
      width: 400px;
      margin-top: 30px;
      margin-left: 30px;
      height: 25px;
      font-size:18px;
      font-weight:600;
      line-height: 25px;
      color: #000000;
    }
    .rank-radio {
      position: relative;
      margin: 30px 30px 0 0;
      float: right;
      .el-radio-button__inner {
        padding: 7px 11px;
      }
    }
  }
  .chart-remarks {
    position: relative;
    height: 66px;
    padding: 20px 0 30px 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #666666;
  }
  .chartCert {
    position: relative;
    margin: 20px auto 0 auto;
    width: 1064px;
    height: 462px;
  }
  .chartDuration {
    position: relative;
    margin: 20px auto 0 auto;
    width: 1064px;
    height: 380px;
  }
  .chart-distributeChart {
    position: relative;
    margin: 20px auto 0 auto;
    // height: 320px;
    width: 100%;
    overflow-x: hidden;
    .distributeChart {
      position: relative;
      // float: left;
      margin: 0 auto;
      // width: 70%;
      width: 618px;
      height: 320px;
    }
    .data-text {
      position: absolute;
      top: 0;
      right: 0;
      width: 30%;
      height: 320px;
      .content-text {
        position: relative;
        margin-top: 78px;
        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;
    min-width: 1064px;
    overflow-x: hidden;
    .recordChart {
      position: relative;
      float: left;
      // width: 83.5%;
      width: 910px;
      height: 416px;
    }
    .data-text {
      position: relative;
      float: left;
      width: 120px;
      height: 416px;
      .content-text {
        position: relative;
        margin-top: 100px;
        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%;
    .tabs-person {
      margin: 0 auto;
      width: 95%;
      .el-tabs__header {
        margin-bottom: 0px;
      }
      .el-tabs__nav-scroll {
        margin-left: 0px;
      }
    }
    .person-title {
      position: relative;
      margin: 30px 0 25px 30px;
      height: 25px;
      font-size:18px;
      font-weight:600;
      line-height: 25px;
      color: #000000;
    }
    .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;
        }
      }
    }
    .person-table {
      padding: 0;
      width: 95%;
      margin:0 auto 20px auto;
    }
    .pagination {
      margin-top: 30px;
      margin-right: 13px;
    }
  }
}
</style>