<template>
  <dv-loading v-if="!showPage" style="width: 100%; height: 100%" class="the-loading">Loading...</dv-loading>
  <div v-else class="personnel">
    <div>
      <div class="block">
        <item-title title="人数统计"></item-title>
        <div class="table-rank">
          <dv-scroll-board :config="renshu_config" style="width: 100%; height: 100%" />
        </div>
      </div>

      <div class="block">
        <item-title title="月用工统计"></item-title>
        <div class="box" ref="chart1"></div>
      </div>
    </div>
    <div>
      <div class="block">
        <item-title title="每日用工数量"></item-title>
        <div class="box" ref="chart2"></div>
      </div>
      <div class="block">
        <item-title title="用工计划"></item-title>
        <div class="table-rank">
          <dv-scroll-board :config="yonggongjihua_config" style="width: 100%; height: 100%" />
        </div>
      </div>
    </div>
    <div>
      <item-title title="劳务人员花名册"></item-title>
      <div class="table-rank">
        <dv-scroll-board :config="huamingce_config" style="width: 100%; height: 100%" />
      </div>
    </div>
  </div>
</template>

<script>
import ItemTitle from '@/components/ItemTitle.vue'

import * as echarts from 'echarts'
import { RandomNumBoth } from '@/utils'

import dayjs from 'dayjs'
export default {
  name: 'personnel',
  components: {
    ItemTitle
  },
  data() {
    return {
      showPage: true,
      renshu_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 2000,
        rowNum: 5,
        align: ['center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['工种', '人数', '备注'],
        data: []
      },
      huamingce_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 2000,
        rowNum: 10,
        align: ['center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['职务', '姓名', '进场日期', '是否在场'],
        data: [
          ['力工', '林德刚', '2024-1-24', '否'],
          ['力工', '陈金良', '2024-1-22', '否'],
          ['力工', '林德平', '2024-1-20', '否'],
          ['力工', '林武祥', '2024-1-20', '否'],
          ['力工', '杜喜海', '2024-1-20', '否'],
          ['架子工', '何敬发', '2024-2-6', '否'],
          ['架子工', '田有', '2024-2-6', '否'],
          ['架子工', '尹景成', '2024-2-6', '否'],
          ['架子工', '李万山', '2024-2-6', '否'],
          ['架子工', '宋振东', '2024-2-6', '否'],
          ['架子工', '苗辉', '2024-2-6', '否'],
          ['力工', '贾琼', '2024-3-1', '否'],
          ['力工', '张永才', '2024-3-1', '否'],
          ['电焊工', '孙洪飞', '2024-3-2', '否'],
          ['电焊工', '李彦伟', '2024-3-4', '否'],
          ['电焊工', '陈立春', '2024-3-4', '否'],
          ['电焊工', '刘凤彬', '2024-3-4', '否'],
          ['电焊工', '李海福', '2024-3-19', '否'],
          ['电焊工', '刘国举', '2024-3-19', '否'],
          ['力工', '刘国剑', '2024-3-19', '否'],
          ['力工', '李桂峰', '2024-4-6', '否'],
          ['力工', '于英立', '2024-4-6', '否'],
          ['力工', '姜洪军', '2024-4-6', '否'],
          ['弱电', '李春阳', '2024-4-9', '否'],
          ['弱电', '田祥玉', '2024-4-9', '否'],
          ['电工', '康启楠', '2024-4-15', '否'],
          ['油工', '邵福有', '2024-4-15', '否'],
          ['油工', '李吉顺', '2024-4-15', '否'],
          ['油工', '陈成', '2024-4-15', '是'],
          ['油工', '李金剑', '2024-4-15', '否'],
          ['油工', '徐建飞', '2024-4-15', '否'],
          ['油工', '耿红', '2024-4-15', '是'],
          ['油工', '刘玉波', '2024-4-15', '是'],
          ['弱电', '潘云东', '2024-4-18', '否'],
          ['弱电', '闫福国', '2024-4-18', '否'],
          ['弱电', '杨明', '2024-4-22', '否'],
          ['强电', '陈革新', '2024-4-28', '否'],
          ['强电', '帅洪君', '2024-4-28', '否'],
          ['油工', '胡宝银', '2024-4-28', '否'],
          ['油工', '陈亮', '2024-4-28', '否'],
          ['油工', '杨彪', '2024-4-28', '否'],
          ['水暖', '瞿春生', '2024-4-29', '否'],
          ['水暖', '王庆亮', '2024-4-29', '否'],
          ['水暖', '董立秋', '2024-4-29', '否'],
          ['水暖', '杨成福', '2024-4-29', '否'],
          ['弱电', '杜大伟', '2024-4-30', '否'],
          ['弱电', '沈文革', '2024-4-30', '否'],
          ['弱电', '姜海瑞', '2024-4-30', '否']
        ]
      },

      yonggongjihua_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 2000,
        rowNum: 5,
        align: ['center', 'center', 'center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['工种', '市政工程', '新训练馆', '比赛馆', '老训练馆施'],
        data: []
      }
    }
  },

  methods: {
    getRenShu() {
      const tempObj = {}
      const hData = this.huamingce_config.data
      for (const item of hData) {
        if (item) {
          if (tempObj[item[0]]) {
            tempObj[item[0]]++
          } else {
            tempObj[item[0]] = 1
          }
        }
      }
      var data = []
      var data1 = []
      for (const key of Object.keys(tempObj)) {
        data.push([key, tempObj[key], '-'])
        var max = tempObj[key]
        var min = 1
        if (max > 20) {
          min = max - 20
        }
        data1.push([key, RandomNumBoth(min, max), RandomNumBoth(min, max), RandomNumBoth(min, max), RandomNumBoth(min, max)])
      }
      this.renshu_config.data = data

      this.yonggongjihua_config.data = data1
    },
    initChart() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['3月', '4月', '5月'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: [20, 48, 45],
            type: 'bar'
          }
        ]
      }
      const chart1 = echarts.init(this.$refs.chart1)
      window.onresize = chart1.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart1.setOption(option)

      var riqi = []
      var data2 = []
      for (var i = 10; i >= 0; i--) {
        var r = dayjs().subtract(i, 'day')
        var rStr = r.format('MM-DD')
        riqi.push(rStr)
        var d = r.format('M')
        if (d > 4) {
          data2.push(45)
        } else {
          data2.push(48)
        }
      }
      const option2 = {
        xAxis: {
          type: 'category',
          data: riqi,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: data2,
            type: 'bar'
          }
        ]
      }
      const chart2 = echarts.init(this.$refs.chart2)
      window.onresize = chart2.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart2.setOption(option2)
    }
  },

  mounted() {
    this.getRenShu()
    this.initChart()
  }
}
</script>

<style lang="scss" scoped>
.personnel {
  margin-top: px2rem(20);

  height: calc(100% - #{px2rem(58+78 + 20)});
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: px2rem(30);
  padding: 10px 20px;
}
.item-box {
  padding: px2rem(20);
}
.table-rank {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(50)});
}
.block {
  height: calc(50% - #{px2rem(15)});
  &:first-child {
    margin-bottom: px2rem(30);
  }
}
.box {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(50)});
}
</style>
