<template>
  <div class="part-in">
    <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>
    <!-- <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 {
      // 图表数据
      chartOption: {
        xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"],
        seriesPass: [120, 132, 101, 120, 132, 101],
        seriesJoin: [220, 182, 191, 220, 182, 191]
      },
      // 只有一个机构时显示人员完成情况
      finishDetail: [],
      cardData: [],
      showChart: true,
      showTable: false,
    };
  },
  created() {
    vm = this;
    this.getCardData();
    // this.getRank();
    this.getAgeData();
    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();
      // console.log('optionValue值',optionValue)
      // debugger;
      // myChart.setOption(optionValue);
      debugger;
      let myChart = echarts.init(document.getElementById("rankChart"));
      let data = [22, 50, 350, 80, 95];
      let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
      let colorData = ["#FF9F7F", "#FFDB5C", "#E062AE", "#37A2DA", "#67E0E3"];
      let seriesData = [
        { value: 22, name: "博士" },
        { value: 50, name: "硕士" },
        { value: 350, name: "本科" },
        { value: 80, name: "大专" },
        { value: 95, name: "大专以下" }
      ];
      for (let i = 0; i < data.length; i++) {
        seriesData[i].value = data[i];
      }
      let option = operationData.getPicOption(
        "用户学历分布",
        legendData,
        colorData,
        seriesData
      );
      myChart.setOption(option);
    },
    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: ""
        },
      ];
    },
    getAgeData() {
      let data = [1000, 25000, 15000, 8000, 7000, 500];
      this.ageDivision(data);
    },
    ageDivision(data) {
      let myChart = echarts.init(this.$refs.age);
      let xAxisData = [
        "16-30",
        "30-40",
        "40-50",
        "50-60",
        "60以上",
        "未完善信息"
      ];
      let seriesData = data;
      let option = operationData.getBarOption(xAxisData, seriesData);

      myChart.setOption(option);
    },
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.part-in {
  .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>
