<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">
        <template v-slot:header>
          <div class="title">
            <span class="weight">{{ item.title }}</span>
          </div>
        </template>
        <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 v-slot="scope">{{
          $filters.partJoin(scope.row.joinStatus)
        }}</template>
      </el-table-column>
      <el-table-column prop="projectStatus" label="是否完成项目" align="center">
        <template v-slot="scope">{{
          $filters.partFinish(scope.row.projectStatus)
        }}</template>
      </el-table-column>
      <el-table-column prop="finishTime" label="完成项目日期" align="center">
        <template v-slot="scope">{{ scope.row.finishTime }}</template>
      </el-table-column>
      <template v-slot:empty>
        <div>
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png" />
            <p>没有相关数据，请重新选择查询范围</p>
          </div>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
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();
    $on(this, 'search', () => {
      this.search()
    })
    $on(this, 'init', () => {
      this.$nextTick(function () {
        if (vm.formInline.region.length != 0) {
          this.search()
        }
      })
    })
    $on(this, '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;
  .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>
