<!--  -->
<template>
  <div class="staff-archives">
    <el-main :loding="true">
      <el-card>
        <query-form @submit="submit" />
      </el-card>
      <el-card>
        <employees-number :monthLetter="monthLetter" :dataInfo="dataInfo" />
      </el-card>
      <div class="staff-archives-chart">
        <el-card v-if="dataInfo.genderDistribution">
          <chart-form :dataInfo="dataInfo.genderDistribution" title="性别分布" />
        </el-card>
        <el-card v-if="dataInfo.ageDistribution">
          <chart-form :dataInfo="dataInfo.ageDistribution" title="年龄分布" />
        </el-card>
        <el-card v-if="dataInfo.jobSeniorityDistribution">
          <chart-form :dataInfo="dataInfo.jobSeniorityDistribution" title="岗位工龄分布" />
        </el-card>
        <el-card v-if="dataInfo.educationDistribution">
          <chart-form :dataInfo="dataInfo.educationDistribution" title="学历分布" />
        </el-card>
      </div>
    </el-main>
  </div>
</template>


<script>
import chartForm from './componments/chart-form'
import queryForm from './componments/query-form'
import employeesNumber from './componments/employees-number'

import { apiEmployeessItuation } from '@/api/api_staff'
export default {
  components: {
    chartForm,
    queryForm,
    employeesNumber
  },
  data () {
    return {
      monthLetter: {},
      dataInfo: {}
    }
  },
  computed: {},
  beforeMount () { },
  mounted () {
  },
  methods: {
    async handleGetEmployeessItuation (data = {}) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let result = await apiEmployeessItuation(data)
      setTimeout(() => {
        loading.close()
      }, 500)
      if (result.code === 0) {
        this.dataInfo = result.data
      } else {
        this.$message.error(result.mgs)
      }
    },
    submit (data, monthLetter) {
      this.monthLetter = monthLetter
      this.handleGetEmployeessItuation(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>
