<template>
  <dv-loading v-if="!showPage" style="width: 100%; height: 100%" class="the-loading">Loading...</dv-loading>
  <div v-else class="security">
    <div>
      <item-title title="材料计划"></item-title>
      <div class="table-rank">
        <dv-scroll-board :config="yongliaojihua_config" style="width: 100%; height: 100%" />
      </div>
    </div>
    <div>
      <div class="block">
        <item-title title="入库材料占比"></item-title>
        <div class="box" ref="chart1"></div>
      </div>
      <div class="block" style="display: flex; justify-content: space-between; align-items: center">
        <div style="width: 50%; height: 100%">
          <div class="box" ref="chart2"></div>
        </div>
        <div style="width: 50%; height: 100%">
          <div class="box" ref="chart3"></div>
        </div>
      </div>
    </div>
    <div>
      <div class="block">
        <item-title title="材料入库记录"></item-title>
        <div class="table-rank">
          <dv-scroll-board :config="ruku_config" style="width: 100%; height: 100%" />
        </div>
      </div>

      <div class="block">
        <item-title title="材料出库记录"></item-title>
        <div class="table-rank">
          <dv-scroll-board :config="chuku_config" style="width: 100%; height: 100%" />
        </div>
      </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: 'security',
  components: {
    ItemTitle
  },
  data() {
    return {
      showPage: true,
      yongliaojihua_config: {
        oddRowBGC: 'rgba(3, 23, 44,0.9)',
        evenRowBGC: 'rgba(3, 23, 44,0.9)',
        waitTime: 2000,
        rowNum: 10,
        align: ['center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['材料名称', '规格', '单位', '数量'],
        data: [
          ['C35', '早强', '桩基础', '15'],
          ['C30', '', '桩基础', '126'],
          ['C35', '早强', '桩基础', '5'],
          ['C30', '', '桩基础、塔吊基础垫层', '283'],
          ['C35', '早强', '桩基础', '5'],
          ['C30', '', '桩基础', '279'],
          ['C40', '早强', '塔吊基础', '21'],
          ['C35', '早强', '桩基础', '5'],
          ['C30', '', '桩基础', '260'],
          ['C30', '', '桩基础', '115'],
          ['C15', '', '基础垫层', '40'],
          ['C35', '早强防冻-10℃', '1-K轴～2-E轴交1/01-1轴～1-8轴一层柱', '45'],
          ['C30', '早强防冻-10℃', '1-K轴～2-E轴交1/01-1轴～1-8轴一层顶梁板、楼梯', '129'],
          ['C35', '早强防冻-5℃', '1-1轴～1-8轴交1-A轴～1-J轴一层柱', '81'],
          ['C30', '早强防冻-5℃', '1-1轴～1-8轴外延2.25m交1-A轴～1-J轴一层顶梁板、楼梯', '188'],
          ['C35', '早强防冻-5℃', '二层柱', '7'],
          ['C30', '早强防冻-5℃', '1-K轴～2-E轴交1/01-1轴～1-8轴二层柱、顶梁板、楼梯', '183'],
          ['C35', '早强防冻-5℃', '1-1轴～1-8轴交1-A轴～1-J轴二层柱', '5'],
          ['C30', '早强防冻-5℃', '1-1轴～1-8轴交1-A轴～1-J轴二层柱、顶梁板、楼梯', '266'],
          ['C30', 'P10 早强防冻-5℃', '1-K轴～2-E轴交1/01-1轴～1-8轴三层顶梁板', '50'],
          ['C30', '早强防冻-5℃', '1-K轴～2-E轴交1/01-1轴～1-8轴三层柱、顶梁板', '156'],
          ['C20', '0.5细石早强防冻-5℃', '地下室顶板防水保护层', '18'],
          ['C30', 'P10 早强防冻-5℃', '地下室东侧防爆波电缆井剪力墙及顶板', '6'],
          ['C20', '0.5细石早强防冻-5℃', '地下室顶板防水保护层', '14'],
          ['主体框架样板', '', '组', '1'],
          ['砌体抹灰样板', '', '组', '1'],
          ['楼梯样板', '', '组', '1'],
          ['屋面样板', '', '组', '1'],
          ['水电井样板', '', '组', '1'],
          ['外墙装饰样板', '', '组', '1'],
          ['卫生间样板', '', '组', '1'],
          ['椅子', '', '把', '10'],
          ['办公桌', '1.2米', '张', '6']
        ]
      },
      ruku_config: {
        oddRowBGC: 'rgba(3, 23, 44,0.9)',
        evenRowBGC: 'rgba(3, 23, 44,0.9)',
        waitTime: 2000,
        rowNum: 5,
        align: ['center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['材料名称', '规格型号', '单位', '数量'],
        data: [
          ['C35', '早强', '桩基础', '15'],
          ['C30', '', '桩基础', '126'],
          ['C35', '早强', '桩基础', '5'],
          ['C30', '', '桩基础、塔吊基础垫层', '283'],
          ['C35', '早强', '桩基础', '5'],
          ['C30', '', '桩基础', '279'],
          ['C40', '早强', '塔吊基础', '21'],
          ['C35', '早强', '桩基础', '5'],
          ['C30', '', '桩基础', '260'],
          ['C30', '', '桩基础', '115'],
          ['C15', '', '基础垫层', '40'],
          ['C35', '早强防冻-10℃', '1-K轴～2-E轴交1/01-1轴～1-8轴一层柱', '45'],
          ['C30', '早强防冻-10℃', '1-K轴～2-E轴交1/01-1轴～1-8轴一层顶梁板、楼梯', '129'],
          ['C35', '早强防冻-5℃', '1-1轴～1-8轴交1-A轴～1-J轴一层柱', '81'],
          ['C30', '早强防冻-5℃', '1-1轴～1-8轴外延2.25m交1-A轴～1-J轴一层顶梁板、楼梯', '188'],
          ['C35', '早强防冻-5℃', '二层柱', '7'],
          ['C30', '早强防冻-5℃', '1-K轴～2-E轴交1/01-1轴～1-8轴二层柱、顶梁板、楼梯', '183'],
          ['C35', '早强防冻-5℃', '1-1轴～1-8轴交1-A轴～1-J轴二层柱', '5'],
          ['C30', '早强防冻-5℃', '1-1轴～1-8轴交1-A轴～1-J轴二层柱、顶梁板、楼梯', '266'],
          ['C30', 'P10 早强防冻-5℃', '1-K轴～2-E轴交1/01-1轴～1-8轴三层顶梁板', '50'],
          ['C30', '早强防冻-5℃', '1-K轴～2-E轴交1/01-1轴～1-8轴三层柱、顶梁板', '156'],
          ['C20', '0.5细石早强防冻-5℃', '地下室顶板防水保护层', '18'],
          ['C30', 'P10 早强防冻-5℃', '地下室东侧防爆波电缆井剪力墙及顶板', '6'],
          ['C20', '0.5细石早强防冻-5℃', '地下室顶板防水保护层', '14'],
          ['主体框架样板', '', '组', '1'],
          ['砌体抹灰样板', '', '组', '1'],
          ['楼梯样板', '', '组', '1'],
          ['屋面样板', '', '组', '1'],
          ['水电井样板', '', '组', '1'],
          ['外墙装饰样板', '', '组', '1'],
          ['卫生间样板', '', '组', '1'],
          ['椅子', '', '把', '10'],
          ['办公桌', '1.2米', '张', '6']
        ]
      },
      chuku_config: {
        oddRowBGC: 'rgba(3, 23, 44,0.9)',
        evenRowBGC: 'rgba(3, 23, 44,0.9)',
        waitTime: 2000,
        rowNum: 5,
        align: ['center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['材料名称', '规格型号', '单位', '数量'],
        data: [
          ['主体框架样板', '', '组', '1'],
          ['砌体抹灰样板', '', '组', '1'],
          ['楼梯样板', '', '组', '1'],
          ['屋面样板', '', '组', '1'],
          ['水电井样板', '', '组', '1'],
          ['外墙装饰样板', '', '组', '1'],
          ['卫生间样板', '', '组', '1'],
          ['椅子', '', '把', '10'],
          ['办公桌', '1.2米', '张', '6']
        ]
      }
    }
  },

  methods: {
    initChart() {
      const ruku_data = this.ruku_config.data
      const xlabel = []
      const data = []
      let total = 0

      var data2 = []
      for (let i = 0; i < ruku_data.length; i++) {
        xlabel.push(ruku_data[i][0])
        total += parseInt(ruku_data[i][3])
        data2.push({ value: parseInt(ruku_data[i][3]), name: ruku_data[i][0] })
      }
      for (let i = 0; i < ruku_data.length; i++) {
        data.push(parseInt(ruku_data[i][3]) / total)
      }
      const chuku_data = this.chuku_config.data
      var data3 = []
      for (let i = 0; i < chuku_data.length; i++) {
        data3.push({ value: parseInt(chuku_data[i][3]), name: chuku_data[i][0] })
      }
      const option = {
        xAxis: {
          type: 'category',
          data: xlabel,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: data,
            type: 'bar'
          }
        ]
      }
      const chart1 = echarts.init(this.$refs.chart1)
      window.onresize = chart1.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart1.setOption(option)

      const option2 = {
        title: {
          text: '入库数据对比',
          left: '0',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          type: 'scroll',
          textStyle: {
            color: '#fff'
          },
          pageIconColor: '#fff', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: {
            // 图例页信息的文字样式
            color: '#cbcbcb'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: data2,
            top: '10%',
            bottom: '5%',
            label: {
              formatter: '{c}'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const chart2 = echarts.init(this.$refs.chart2)
      window.onresize = chart2.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart2.setOption(option2)

      const option3 = {
        title: {
          text: '出库数据对比',
          left: '0',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          type: 'scroll',
          textStyle: {
            color: '#fff'
          },
          pageIconColor: '#fff', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: {
            // 图例页信息的文字样式
            color: '#cbcbcb'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: data3,
            top: '10%',
            bottom: '5%',
            label: {
              formatter: '{c}'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const chart3 = echarts.init(this.$refs.chart3)
      window.onresize = chart3.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart3.setOption(option3)
    }
  },

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

<style lang="scss" scoped>
.security {
  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;
}
.table-rank {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(50)});

  ::v-deep .row-item {
    cursor: pointer;
  }
}
.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>
