<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-7-3', '是'], ['外墙', '周云方', '2024-7-3', '是'], ['力工', '陈宝玉', '2024-7-3', '是'], ['外墙', '孙全', '2024-7-3', '是'], ['外墙', '徐利', '2024-7-3', '是'], ['外墙', '曹伟东', '2024-7-3', '是'], ['外墙', '刁贵', '2024-7-3', '是'], ['外墙', '吕正辉', '2024-7-3', '是'], ['外墙', '胡东生', '2024-7-3', '是'], ['外墙', '关海成', '2024-7-3', '是'], ['外墙', '何宪波', '2024-7-3', '是'], ['外墙', '何宪龙', '2024-7-3', '是'], ['外墙', '梁淑霞', '2024-7-3', '是'], ['外墙', '姚淑兰', '2024-7-3', '是'], ['外墙', '杜兴利', '2024-7-3', '是'], ['外墙', '贾洪振', '2024-7-3', '是'], ['外墙', '李云龙', '2024-7-3', '是'], ['外墙', '王艳军', '2024-7-3', '是'], ['外墙', '金丙玖', '2024-7-3', '是'], ['外墙', '张兴国', '2024-7-3', '是'], ['外墙', '岳磊', '2024-7-3', '是'], ['外墙', '高彬', '2024-7-3', '是'], ['外墙', '杨忠辉', '2024-7-3', '是'], ['外墙', '段洪吉', '2024-7-3', '是'], ['外墙', '葛云亮', '2024-7-3', '否'], ['外墙', '杨凤录', '2024-7-3', '是'], ['外墙', '夏重成', '2024-7-3', '否'], ['外墙', '由相春', '2024-7-3', '是'], ['外墙', '高金宝', '2024-7-3', '是'], ['外墙', '张庆生', '2024-7-3', '是'], ['力工', '范玉民', '2024-7-3', '是'], ['外墙', '王波', '2024-7-3', '是'], ['外墙', '闫永超', '2024-7-3', '是'], ['外墙', '程海英', '2024-7-3', '是'], ['外墙', '王永生', '2024-7-3', '是'], ['外墙', '于雷', '2024-7-3', '是'], ['外墙', '李国兴', '2024-7-3', '是'], ['外墙', '顾国玉', '2024-7-3', '是'], ['外墙', '王金双', '2024-7-3', '是'], ['力工', '张彦城', '2024-7-3', '是'], ['力工', '何富春', '2024-7-3', '是'], ['外墙', '王世忠', '2024-7-3', '是'], ['外墙', '刘玉震', '2024-7-3', '否'], ['油工', '刘洪岩', '2024-7-3', '是'], ['力工', '王万财', '2024-7-3', '是'], ['保温', '李国东', '2024-7-3', '是'], ['保温', '郭恒彬', '2024-7-3', '是'], ['外墙', '刘志君', '2024-7-3', '是'], ['外墙', '徐东', '2024-7-3', '是'], ['外墙', '闫春生', '2024-7-3', '是'], ['外墙', '王晓丰', '2024-7-3', '是'], ['外墙', '周年福', '2024-7-3', '是'], ['力工', '苑丽双', '2024-7-3', '是'], ['防水', '丁志贵', '2024-7-3', '是'], ['防水', '张丽娟', '2024-7-3', '是'], ['防水', '柴立东', '2024-7-3', '是'], ['防水', '张艳', '2024-7-3', '是'], ['力工', '张桂侠', '2024-7-3', '是']
        ]
      },

      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 (let i = 4; i > 0; i--) {
        this.yonggongjihua_config.header.push(dayjs().subtract(i, 'day').format('MM-DD'))
      }
      dayjs().format('YYYY-MM-DD');
      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: ['6月', '7月'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: [45, 48],
            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>
