<!--  -->
<template>
  <div>
    <div class="staff-archives-title">员工数量</div>
    <div class="staff-archives-content">
      截至
      <span class="staff-archives-yellow">{{dataInfo.endDate.split("-")[0]}}</span>年
      <span class="staff-archives-yellow">{{dataInfo.endDate.split("-")[1]}}</span>月
      <span class="staff-archives-yellow">{{dataInfo.endDate.split("-")[2]}}</span>日，
      <span class="staff-archives-yellow">{{dataInfo.departmentName}}</span>在职员工总数为
      <span class="staff-archives-bule">{{dataInfo.totalStaffCount}}</span>人，其中管理人员
      <span class="staff-archives-bule">{{dataInfo.managementCount}}</span>人，占比
      <span class="staff-archives-bule">{{dataInfo.managementRate}}%。</span>
    </div>
    <div class="staff-archives-content">
      <span class="staff-archives-yellow" v-if="monthLetter.index">{{monthLetter.title}}</span>新入职员工
      <span class="staff-archives-bule">{{dataInfo.newStaffCount}}</span>人，离职员工
      <span class="staff-archives-bule">{{dataInfo.leaveStaffCount}}</span>人，离职率为
      <span class="staff-archives-bule">{{dataInfo.leaveRate}}%。</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    monthLetter: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {

    }
  },
  computed: {},
  beforeMount () { },
  mounted () {
    setTimeout(() => {
    }, 1000)
  },
  methods: {},
  watch: {}

}
</script>

<style lang='scss'>
.staff-archives {
  &-content {
    font-weight: 400;
    font-size: 16px;
  }
  &-yellow {
    color: #ed7d31;
  }
  &-bule {
    font-weight: 700;
    color: #1890ff;
    font-size: 28px;
  }
}
</style>