<template>
  <div class="n_container">
    <div class="zd-row">
      <div class="zd-col-10 hwpl_wrap_1">
        <div class="zd-row jcflexstart state_wrap">
          <div class="state_icon bg_col_1"></div>
          <div class="state_title">满货位</div>
          <div class="state_icon bg_col_2"></div>
          <div class="state_title">空货位</div>
        </div>
        <div class="zd-row pie_num_wrap">
          <div class="pie_wrap">
            <div class="pie_item">
              <div id="echart_1" style="width: 100%; height: 100%;"></div>
            </div>
            <div class="pie_name">1排</div>
          </div>
          <div class="zd-col-6">
            <div class="zd-row num_wrap num_wrap_1">
              <div class="zd-col-12 num_label">总货位数</div>
              <div class="zd-col-12 num_value">{{detail.sum1}}个</div>
            </div>
            <div class="zd-row num_wrap num_wrap_2">
              <div class="zd-col-12 num_label">已用货位</div>
              <div class="zd-col-12 num_value">{{detail.use1}}个</div>
            </div>
            <div class="zd-row num_wrap num_wrap_3">
              <div class="zd-col-12 num_label">空余货位</div>
              <div class="zd-col-12 num_value">{{detail.empty1}}个</div>
            </div>
          </div>
          <div class="pie_wrap">
            <div class="pie_item">
              <div id="echart_2" style="width: 100%; height: 100%;"></div>
            </div>
            <div class="pie_name">2排</div>
          </div>
          <div class="zd-col-6">
            <div class="zd-row num_wrap num_wrap_1">
              <div class="zd-col-12 num_label">总货位数</div>
              <div class="zd-col-12 num_value">{{detail.sum2}}个</div>
            </div>
            <div class="zd-row num_wrap num_wrap_2">
              <div class="zd-col-12 num_label">已用货位</div>
              <div class="zd-col-12 num_value">{{detail.use2}}个</div>
            </div>
            <div class="zd-row num_wrap num_wrap_3">
              <div class="zd-col-12 num_label">空余货位</div>
              <div class="zd-col-12 num_value">{{detail.empty2}}个</div>
            </div>
          </div>
        </div>
        <div class="zd-row flexWrap hw_wrap">
          <div class="hw_item" v-for="e in point2" :key="e.point_code">
            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
          </div>
        </div>
        <div class="zd-row flexWrap hw_wrap">
          <div class="hw_item" v-for="e in point3" :key="e.point_code">
            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
          </div>
        </div>
        <div class="zd-row flexWrap hw_wrap">
          <div class="hw_item" v-for="e in point4" :key="e.point_code">
            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
          </div>
        </div>
        <div class="zd-row flexWrap hw_wrap">
          <div class="hw_item" v-for="e in point5" :key="e.point_code">
            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
          </div>
        </div>
      </div>
      <div class="zd-col-1 gd_wrap">
        <p class="txt">A<br>G<br>V<br>过<br>道</p>
      </div>
      <div class="zd-col-12 hwpl_wrap_2">
        <div class="zd-row flexWrap">
          <div class="hw_item" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
          </div>
        </div>
      </div>
      <div class="zd-col-1 gd_wrap">
        <p class="txt">人<br>工<br>取<br>货<br>通<br>道</p>
      </div>
    </div>
  </div>
</template>

<script>
import { boardPoint } from '@js/getData2.js'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      ltimer: null,
      point1: [],
      point2: [],
      point3: [],
      point4: [],
      point5: [],
      detail: {sum1: '', sum2: '', empty1: '', empty2: '', use1: '', use2: ''}
    }
  },
  created () {
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.ltimer)
  },
  methods: {
    refresh () {
      this._boardPoint()
      this.ltimer = setInterval(() => {
        this._boardPoint()
      }, this.interTime)
    },
    async _boardPoint () {
      let res = await boardPoint()
      this.detail = res.detail
      this.point1 = [...res.pointList].slice(0, 162)
      this.point2 = [...res.pointList].slice(162, 183)
      this.point3 = [...res.pointList].slice(183, 204)
      this.point4 = [...res.pointList].slice(204, 225)
      this.point5 = [...res.pointList].slice(225, 246)
      this.setEchart1()
      this.setEchart2()
    },
    setEchart1 () {
      let value = Number(this.detail.use1) / Number(this.detail.sum1)
      value = value * 100
      value = value.toFixed(0)
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|${value}}{b|%}`,
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              },
              b: {
                fontSize: 20,
                padding: [9, 0, 0, 3],
                color: '#fff',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '进度',
          type: 'pie',
          radius: ['76%', '100%'],
          center: ['50%', '50%'],
          clockwise: false,
          label: {
            show: false
          },
          data: [{
            name: '已完成',
            value: value,
            itemStyle: {
              decal: {
                color: '#3D92ED',
                backgroundColor: '#1774E8',
                dashArrayX: [1, 0],
                dashArrayY: [1, 4],
                rotation: -Math.PI / 4
              }
            }
          }, {
            name: '未完成',
            value: 100 - value,
            itemStyle: {
              decal: {
                color: '#597491',
                backgroundColor: '#2f5175',
                dashArrayX: [1, 0],
                dashArrayY: [2, 4],
                rotation: -Math.PI / 4
              }
            },
            emphasis: {
              disabled: true
            }
          }]
        }, {
          type: 'pie',
          radius: ['99%', '100%'],
          clockwise: false,
          itemStyle: {
            color: '#45B1F1'
          },
          label: {
            show: false
          },
          data: [1]
        }, {
          type: 'pie',
          radius: ['75%', '76%'],
          clockwise: false,
          itemStyle: {
            color: '#45B1F1'
          },
          label: {
            show: false
          },
          data: [1]
        }]
      }
      if (document.getElementById('echart_1') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('echart_1'))
      let echart = this.$echarts.init(document.getElementById('echart_1'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart2 () {
      let value = Number(this.detail.use2) / Number(this.detail.sum2)
      value = value * 100
      value = value.toFixed(0)
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|${value}}{b|%}`,
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              },
              b: {
                fontSize: 20,
                padding: [9, 0, 0, 3],
                color: '#fff',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '进度',
          type: 'pie',
          radius: ['76%', '100%'],
          center: ['50%', '50%'],
          clockwise: false,
          label: {
            show: false
          },
          data: [{
            name: '已完成',
            value: value,
            itemStyle: {
              decal: {
                color: '#3D92ED',
                backgroundColor: '#1774E8',
                dashArrayX: [1, 0],
                dashArrayY: [1, 4],
                rotation: -Math.PI / 4
              }
            }
          }, {
            name: '未完成',
            value: 100 - value,
            itemStyle: {
              decal: {
                color: '#597491',
                backgroundColor: '#2f5175',
                dashArrayX: [1, 0],
                dashArrayY: [2, 4],
                rotation: -Math.PI / 4
              }
            },
            emphasis: {
              disabled: true
            }
          }]
        }, {
          type: 'pie',
          radius: ['99%', '100%'],
          clockwise: false,
          itemStyle: {
            color: '#45B1F1'
          },
          label: {
            show: false
          },
          data: [1]
        }, {
          type: 'pie',
          radius: ['75%', '76%'],
          clockwise: false,
          itemStyle: {
            color: '#45B1F1'
          },
          label: {
            show: false
          },
          data: [1]
        }]
      }
      if (document.getElementById('echart_2') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('echart_2'))
      let echart = this.$echarts.init(document.getElementById('echart_2'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.n_container
  _wh(100%, 100%)
  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
  padding .25rem 0 .25rem .25rem
.hwpl_wrap_1
  width 4.32rem
.hwpl_wrap_2
  width 5.56rem
.gd_wrap
  width calc(50% - 4.94rem)
.state_wrap
  margin-bottom .38rem
.state_icon
  _wh(.1rem, .1rem)
.state_title
  _font(.2rem, .2rem, #fff,,)
  margin 0 .4rem 0 .1rem
.bg_col_1
  background-color #EF5252
  border-radius 4px
  box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
.bg_col_2
  background-color #8EB5E5
  border-radius 4px
  box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
.pie_num_wrap
  margin-bottom .2rem
.pie_wrap
  width 1.075rem
.pie_item
  position relative
  _wh(1.075rem, 1.075rem)
  padding .14rem .135rem .135rem .14rem
  background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
.pie_name
  _font(.16rem, .16rem, #fff,,center)
.num_wrap
  _wh(100%, .3rem)
  padding .1rem .05rem
  margin-bottom .058rem
.num_wrap_1
  background center / 100% 100% url('../../../images/gl-bg_1.png') no-repeat
.num_wrap_2
  background center / 100% 100% url('../../../images/gl-bg_2.png') no-repeat
.num_wrap_3
  background center / 100% 100% url('../../../images/gl-bg_3.png') no-repeat
.num_label
  _font(.1rem, .1rem, #fff,,left)
.num_value
  _font(.11rem, .1rem, #fff,,right)
  font-family: 'YouSheBiaoTiHei';
.hw_wrap
  margin-bottom .5rem
  &:last-child
    margin-bottom 0
.hw_item
  _wh(.6rem, auto)
  padding .096rem .05rem .05rem .05rem
  margin-bottom .02rem
  background center / 100% 100% url('../../../images/bg-hw.png') no-repeat
.hw_item_active
  background-image url('../../../images/bg-hw_active.png')
  .hw_p1
    color #3CC1FF
.hw_p1
  _font(.1rem, .11rem,#fff,,)
  font-family: 'YouSheBiaoTiHei'
  height .22rem
  overflow hidden
.hw_p2
  _font(.1rem, .1rem, #fff,,center)
  font-family: "SourceHanSansCN-Bold";
  height 0.2rem
  overflow hidden
.txt
  _font(.2rem, .4rem, #fff,,center)
  font-family: "YouSheBiaoTiHei"
</style>
