<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 class="charts" id="rankChart" ref="rankChart"></div>
    <!-- <div class="charts" id="age" ref="age"></div> -->
    <el-table 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";
let vm = null;
export default {
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    },
    organizationNum: {
      type: Number
    },
  },
  data() {
    return {
      // 只有一个机构时显示人员完成情况
      finishDetail: [],
      cardData: [],
      showChart: true,
      showTable: false,
    };
  },
  created() {
    vm = this;
    this.$nextTick(function() {
      this.getCardData();
      this.getRank();
      this.getTableData();
    });
  },
  mounted: function() {
    commonUtil.resizeHeight();
    this.$on('search',()=>{
      console.log(this.formInline,this.organizationNum);
      if(this.organizationNum > 1) {
        this.getCardData();
      } else {
        this.getTableData();
      }
    });
    if (this.activeName == "first") {
      this.updateResize();
    }
  },
  methods: {
    updateResize() {
      this.$nextTick(function() {
        let chartRank = echarts.init(document.getElementById("rankChart"))
        window.onresize = function() {
          chartRank.resize();
        }
      });
    },
    getTableData() {
      vm.finishDetail = [
        {
          name: "张三",
          desk: "神经内科",
          join: 1,
          finish: 1,
          endTime: 1561707567000,
        }
      ];
    },
    getRank() {
      let myChart = echarts.init(this.$refs.rankChart);
      let optionValue = operationData.getRank();
      myChart.setOption(optionValue);
    },
    getCardData() {
      this.cardData = [
        {
          title: "应参与机构数",
          num: 10290,
          unit: ""
        },
        {
          title: "应参与人数",
          num: 59287,
          unit: ""
        },
        {
          title: "已参与人数",
          num: 47262,
          unit: ""
        },
        {
          title: "项目获证人数",
          num: 47262,
          unit: ""
        },
        {
          title: "优秀证书人数",
          num: 47262,
          unit: ""
        },
        {
          title: "合格证书人数",
          num: 47262,
          unit: ""
        },
      ];
    },
  }
};
</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,.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>
