<template>
  <div class="part-in-wrap">
     <div v-show="!showData" class="empty">
      <p>"没有相关数据，请重新选择查询范围"</p>
    </div>
    <div v-for="(item , index) in cardData" :key="index" class>
      <el-card class="box-card">
        <div slot="header" class="title">
          <span class="weight">{{ item.title }}</span>
        </div>
        <div class="box-content">
          <span class="weight">{{ item.num }}</span>
        </div>
      </el-card>
      <div class="line"></div>
    </div>
    <div v-if="showChart" class="charts" id="rankChart" ref="rankChart"></div>
    <!-- <div class="charts" id="age" ref="age"></div> -->
    <el-table
      v-if="showTable"
      v-show="organizationNum < 2"
      :data="finishDetail"
      class="project-table"
      style="width: 100%;margin-bottom: 30px;"
      border
    >
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="departmentName" label="科室" align="center"></el-table-column>
      <el-table-column prop="joinStatus" label="是否参与项目" align="center">
        <template slot-scope="scope">{{ scope.row.joinStatus | partJoin }}</template>
      </el-table-column>
      <el-table-column prop="projectStatus" label="是否完成项目" align="center">
        <template slot-scope="scope">{{ scope.row.projectStatus | partFinish }}</template>
      </el-table-column>
      <el-table-column prop="finishTime" label="完成项目日期" align="center">
        <template slot-scope="scope">{{ scope.row.finishTime }}</template>
      </el-table-column>
      <div slot="empty">
        <div class="table-empty">
          <img src="../../assets/image/no-content1.png">
          <p>没有相关数据，请重新选择查询范围</p>
        </div>
      </div>
    </el-table>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../utils-o/utils";
import * as commonUtil from "../../utils-o/utils";
import * as operationData from "../../utils-o/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 {
      // 只有一个机构时显示人员完成情况
      projectId: "",
      finishDetail: [],
      cardData: [],
      showChart: false,
      showTable: false,
      showData: false,
    };
  },
  created() {
    vm = this;
    this.projectId = vm.getUrlSearch(window.location.href, "id");
  },
  mounted: function() {
    // commonUtil.resizeHeight();
    this.$on("search", () => {
      this.search();
    });
    this.$on("init", () => {
      this.$nextTick(function() {
        if (vm.formInline.region.length != 0) {
          this.search();
        }
      });
    });
    this.$on("reset", () => {
      this.showData = false;
      this.showChart = false;
      this.showTable = false;
      this.finishDetail = [];
      this.cardData = [];
    });
    // if (this.activeName == "first") {
    //   this.updateResize();
    // }
  },
  methods: {
    
    search() {
      if (vm.formInline.region.length == 0) {
        const h = this.$createElement;
        vm.$message({
          message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
        });
        return;
      }
      let checkAll = operationData.hasAll(vm.formInline.organization)
      console.log(vm.formInline,checkAll,vm.organizationList);
      let req = {
        projectId: vm.projectId,
        ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
        type: operationData.getSearchType(vm.formInline,checkAll),
        originalFlag: vm.formInline.checked == false ? 0 : 1
      };
      console.log("1 req", req);
      openLoading(vm);
      vm.reportGET("report/portal/getParticipateInfo", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          this.getCardData(res.data);
          vm.showData = true;
          if(res.data.participateHospitalCount == 0 && res.data.participatePeopleCount == 0) {
            vm.$message("没有相关数据，请重新选择查询范围");
          }
        } else {
          vm.$message(res.message);
        }
      });
      vm.reportGET("report/portal/top", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          this.getRank(res.data);
          this.getTableData(res.data);
        }
      });
    },
    updateResize() {
      this.$nextTick(function() {
        let chartRank = echarts.init(document.getElementById("rankChart"));
        window.onresize = function() {
          chartRank.resize();
        };
      });
    },
    getTableData(data) {
      if (vm.formInline.region.length >= 3 && vm.organizationNum == 1) {
        vm.showTable = true;
        vm.finishDetail = data.hospitalPeopleList;
      } else {
        vm.showTable = false;
      }
    },
    getRank(data) {
      let xAxisData = [];
      let seriesData = [];
      for (let i = 0; i < data.top.length; i++) {
        xAxisData[i] = data.top[i].name;
        seriesData[i] = data.top[i].percentage;
      }
      if(vm.organizationNum == 1 || xAxisData.length <= 1) {
        vm.showChart = false;
      }
      if (xAxisData.length > 1 && vm.organizationNum !=1) {
        vm.showChart = true;
        setTimeout(function() {
          let myChart = echarts.init(vm.$refs.rankChart);
          let optionValue = operationData.getRank(xAxisData, seriesData);
          myChart.setOption(optionValue);
          vm.updateResize();
        }, 200);
      }
    },

    getCardData(data) {
      vm.cardData = [
        {
          title: "应参与机构数",
          num: data.participateHospitalCount,
        },
        {
          title: "已参与机构数",
          num: data.hasParticipateHospitalCount,
        },
        {
          title: "应参与人数",
          num: data.participatePeopleCount,
        },
        {
          title: "已参与人数",
          num: data.hasParticipatePeopleCount,
        },
        {
          title: data.type == 1 ? "项目完成人数" : "项目获证人数",
          num: data.acquireCertificatePeopleCount,
        },
      ];
      if(data.manyCertificate != null) {
        for(let i=0;i<data.manyCertificate.length;i++) {
          let obj = {
            title: data.manyCertificate[i].name,
            num: data.manyCertificate[i].value,
          }
          if(obj.title != null) {
            vm.cardData.push(obj);
          }
        }
      }
      // vm.cardData[0].num = data.participateHospitalCount;
      // vm.cardData[1].num = data.participatePeopleCount;
      // vm.cardData[2].num = data.hasParticipatePeopleCount;
      // vm.cardData[3].num = data.acquireCertificatePeopleCount;
    },
  }
};
</script>

<style lang='scss'>
.part-in-wrap {
  background: #fff;
  overflow: hidden;
  // padding: 10px;
  .empty {
    height: 300px;
    line-height: 300px;
    color: #FF3399;
    text-align: center;
  }
  .el-card {
    border-width: 0px;
  }
  .el-card.is-always-shadow {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  .line {
    background: #e4e4e4;
    height: 80px;
    width: 1px;
    float: left;
    margin-top: 20px;
  }
  .box-card {
    width: 13%;
    margin-right: 1%;
    font-size: 14px;
    float: left;
    .el-card__header {
      border-bottom-width: 0;
    }
    .title {
      text-align: center;
    }
    .box-content {
      text-align: center;
      height: 40px;
      font-size: 15px;
    }
  }
  .charts {
    top: 20px;
    margin-left: 10%;
    width: 80%;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 600px;
    background: #fff;
    padding: 20px;
  }
  .project-table {
    top: 15px;
    background: #fff;
  }
}
</style>
