<template>
  <div class="part-in">
    <el-card>
      <el-table :data="reportDetail" style="width: 100%">
        <el-table-column prop="coverOrganizationNum" label="项目覆盖机构数" align="center"></el-table-column>
        <el-table-column prop="coverPeopleNum" label="项目覆盖人数" align="center"></el-table-column>
        <el-table-column prop="joinPeopleNum" label="项目参与人数" align="center"></el-table-column>
        <el-table-column prop="finishPeopleNum" label="项目完成人数" align="center"></el-table-column>
        <el-table-column prop="goodPeopleNum" label="成绩优秀人数" align="center"></el-table-column>
        <el-table-column prop="standardPeopleNum" label="成绩合格人数" align="center"></el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有查询到相关结果</p>
          </div>
        </div>
      </el-table>
    </el-card>
    <div class="charts" ref="chartsBox" v-show="isShowEcharts"></div>
    <el-card class="finish-table" v-show="!isShowEcharts">
      <el-table :data="finishDetail" 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"></el-table-column>
        <el-table-column prop="finish" label="是否完成项目" align="center"></el-table-column>
        <el-table-column prop="endTime" label="完成项目日期" align="center"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../utils/utils"
const echarts = require("echarts")

let vm;
export default {
  data() {
    return {
      reportDetail: [
        {
          // 报告详情数据
          coverOrganizationNum:2,
          coverPeopleNum: 0,
          joinPeopleNum: 0,
          finishPeopleNum: 0,
          goodPeopleNum: 0,
          standardPeopleNum: 0
        }
      ],
      // 图表数据
      chartOption: {
        xAxisData:  ["周一", "周二", "周三", "周一", "周二", "周三"],
        seriesPass: [120, 132, 101, 120, 132, 101],
        seriesJoin: [220, 182, 191, 220, 182, 191]
      },
      // 只有一个机构时显示人员完成情况
      finishDetail:[{
        name: '',
        desk: '',
        join: '是',
        finish: '是',
        endTime: '12-12-12'
      }],
    };
  },
  computed: {
    isShowEcharts() {
      return vm.reportDetail[0].coverOrganizationNum > 1
    }
  },
  created() {
    vm = this;
  },
  mounted() {
    vm.initEcharts();
  },
  methods: {
    // 初始化图表
    initEcharts() {
      openLoading(vm);
      let myChart = echarts.init(vm.$refs["chartsBox"])
      myChart.setOption(vm.initEchartOption(vm.chartOption))
      closeLoading(vm)
    },
    // 图表参数
    initEchartOption(params) {
      // 图表相关的数据
      let option = {
        color: ['#1E90FF','#32CD32'],
        title: {
          text: "排行榜",
          x: "left",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 20,
            fontStyle: "normal",
            fontWeight: "normal",
            color: "#000"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["完成人数", "参与人数"],
          bottom: 0
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: params.xAxisData
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "完成人数",
            type: "bar",
            stack: "人数",
            barMaxWidth: "80",
            data: params.seriesPass
          },
          {
            name: "参与人数",
            type: "bar",
            stack: "人数",
            barMaxWidth: "80",
            data: params.seriesJoin
          }
        ]
      }
      return option
    }
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.part-in {
  .charts {
    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;
    margin-top: 50px;
    padding: 20px;
  }
  .finish-table {
    margin-top: 30px;
    background: #fff;
  }
}
</style>
