<!--  -->
<template>
  <div class="staff-archives">
    <el-card>
      <query-form @submit="submit" />
    </el-card>
    <el-card>
      <employees-number :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>
  </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 {
      dataInfo: {}
    }
  },
  computed: {},
  beforeMount () { },
  mounted () {
    this.initData()
  },
  methods: {
    async handleGetEmployeessItuation (data = {}) {
      let result = await apiEmployeessItuation(data)
      console.log('result: ', result)
      if (result.code === 0) {
        this.dataInfo = result.data
      } else {
        this.$message.error(result.mgs)
      }
    },
    // 获取页面数据
    async initData () {
      this.handleGetEmployeessItuation()
    },
    submit (data) {
      this.handleGetEmployeessItuation(data)
      console.log('data', 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>
