<template>
  <div class="part-in-wrap">
    <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>
          {{ item.unit }}
        </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%"
      border
    >
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="desk" label="科室" align="center"></el-table-column>
      <el-table-column prop="join" label="是否参与项目" align="center">
        <template slot-scope="scope">{{ scope.row.join | partJoin }}</template>
      </el-table-column>
      <el-table-column prop="finish" label="是否完成项目" align="center">
        <template slot-scope="scope">{{ scope.row.finish | partFinish }}</template>
      </el-table-column>
      <el-table-column prop="endTime" label="完成项目日期" align="center">
        <template slot-scope="scope">{{ scope.row.endTime | liveDateFilter }}</template>
      </el-table-column>
    </el-table>
  </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 {
      // 只有一个机构时显示人员完成情况
      projectId: "",
      finishDetail: [],
      cardData: [
        {
          title: "应参与机构数",
          num: 0,
          unit: ""
        },
        {
          title: "应参与人数",
          num: 0,
          unit: ""
        },
        {
          title: "已参与人数",
          num: 0,
          unit: ""
        },
        {
          title: "项目获证人数",
          num: 0,
          unit: ""
        },
        {
          title: "优秀证书人数",
          num: 0,
          unit: ""
        },
        {
          title: "合格证书人数",
          num: 0,
          unit: ""
        }
      ],
      showChart: false,
      showTable: 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();
        }
      });
    });
    // if (this.activeName == "first") {
    //   this.updateResize();
    // }
  },
  methods: {
    
    search() {
      if (vm.formInline.region.length == 0) {
        vm.$message("请选择地区");
        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),
        originalFlag: vm.formInline.checked == false ? 0 : 1
      };
      console.log("1 req", req);
      openLoading(vm);
      vm.GET("report/portal/getParticipateInfo", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          this.getCardData(res.data);
          // this.getRank(res.data);
          this.getTableData();
        }
      });
      vm.GET("report/portal/top", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          this.getRank(res.data);
        }
      });
    },
    updateResize() {
      this.$nextTick(function() {
        let chartRank = echarts.init(document.getElementById("rankChart"));
        window.onresize = function() {
          chartRank.resize();
        };
      });
    },
    getTableData() {
      if (vm.formInline.region.length == 3 && vm.organizationNum == 1) {
        vm.showTable = true;
        vm.finishDetail = [
          {
            name: "张三",
            desk: "神经内科",
            join: 1,
            finish: 1,
            endTime: 1561707567000
          }
        ];
      }
    },
    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].value;
      }
      if(vm.organizationNum == 1) {
        vm.showChart = false;
      }
      if (xAxisData.length > 0 && 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) {
      //this.cardData = [];
      vm.cardData[0].num = data.participateHospitalCount;
      vm.cardData[1].num = data.participatePeopleCount;
      vm.cardData[2].num = data.hasParticipatePeopleCount;
      vm.cardData[3].num = data.acquireCertificatePeopleCount;
      vm.cardData[4].num = data.excellentCertificateCount.value;
      vm.cardData[5].num = data.qualifiedCertificateCount.value;
    }
  }
};
</script>

<style lang='scss'>
.part-in-wrap {
  .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: 15%;
    margin-right: 1%;
    float: left;
    .el-card__header {
      border-bottom-width: 0;
    }
    .title {
      text-align: center;
    }
    .box-content {
      text-align: center;
      height: 40px;
    }
  }
  .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>
