<!--  -->
<template>
  <div class="staff-archives">
    <el-main :loding="true">
      <el-card>
        <query-form @submit="submit"/>
      </el-card>
      <div class="staff-archives-chart">
        <el-card v-if="dataInfo.targetDistribution" >
          <chart-form aId="id1" :dataInfo="dataInfo.targetDistribution" title="绩效目标进度" />
        </el-card>
        <el-card v-if="dataInfo.resultDistribution">
          <chart-form aId="id2" :dataInfo="dataInfo.resultDistribution" title="绩效结果进度" />
        </el-card>
        <el-card v-if="dataInfo.staffDistribution">
          <chart-bar-form aId="id3" :dataInfo="dataInfo.staffDistribution" title="绩效结果分布"/>
        </el-card>
      </div>
    </el-main>
  </div>
</template>


<script>
import chartForm from './componments/chart-form'
import queryForm from './componments/query-form'
import chartBarForm from './componments/chart-bar-form'

import { apiReportChart } from '@/api/api_report'
export default {
  components: {
    chartForm,
    queryForm,
    chartBarForm
  },
  data () {
    return {
      dataInfo: {}
    }
  },
  computed: {},
  beforeMount () { },
  mounted () {
  },
  methods: {
    async handleGetReportChart (data = {}) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let result = await apiReportChart(data)
      setTimeout(() => {
        loading.close()
      }, 500)
      if (result.code === 0) {
        this.dataInfo = result.data
      } else {
        this.$message.error(result.msg)
      }
    },
    submit (data) {
      this.handleGetReportChart(data)
    }
  },
  watch: {}

}
</script>

<style >
.el-card {
  margin: 0 0 7px 0 !important;
}
.staff-archives {
  overflow: hidden;
}
.staff-archives-title {
  font-size: 18px;
  font-weight: 700;
}
.staff-archives-form {
  margin: 20px 0 0 0;
}
</style>
<style lang="scss">
.staff-archives-chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > div {
    width: 49.6%;
  }
}
</style>
