<template>
  <div class="main">
    <div class="left">
      <chart1/>
      <chart2/>
      <chart3 :arr="arr"/>
    </div>
    <div class="middle">
      <chart4/>
    </div>
    <div class="right">
      <chart5/>
      <chart6/>
      <chart7/>
    </div>
  </div>
</template>

<script>
import chart1 from '@/components/chart/chart1.vue'
import chart2 from '@/components/chart/chart2.vue'
import chart3 from '@/components/chart/chart3.vue'
import chart4 from '@/components/chart/chart4.vue'
import chart5 from '@/components/chart/chart5.vue'
import chart6 from '@/components/chart/chart6.vue'
import chart7 from '@/components/chart/chart7.vue'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    chart1,
    chart2,
    chart3,
    chart4,
    chart5,
    chart6,
    chart7
  },
  data() {
    return {
      longPoll: true,
      // arr: [
      //   { text: '小区门禁开启', num: '13400次', active: false },
      //   { text: '单元门开启', num: '12788次', active: false },
      //   { text: '车辆进入数量', num: '5664辆', active: false },
      //   { text: '咖啡厅销量', num: '3994次', active: false },
      //   { text: '智慧食堂销量', num: '5664人次', active: false },
      //   { text: '健身房健身', num: '1255人次', active: false }
      // ]
    }
  },
  computed: {
    ...mapState('trunkIndex', {
      hardData: item => item.trunkIndex.hardData
    }),
    arr() {
      let num1, num2

      const rawData = !this.hardData ? [] : this.hardData
      rawData.forEach(item => {
        if (item.message === '小区开门次数') {
          num1 = item.count
        } else if (item.message === '单元门开门次数') {
          num2 = item.count
        }
      })

      return [
        { text: '小区门禁开启', num: `${num1}次`, active: false },
        { text: '单元门开启', num: `${num2}次`, active: false },
        { text: '车辆进入数量', num: '5664辆', active: false },
        { text: '咖啡厅销量', num: '3994次', active: false },
        { text: '智慧食堂销量', num: '5664人次', active: false },
        { text: '健身房健身', num: '1255人次', active: false }
      ]
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.longPoll = true
      const foo = () => {
        if (!vm.longPoll) return

        vm.SetUpConnection().then(() => {
          // vm.hardData.forEach(item => {
          //   if (item.message === '小区开门次数') {
          //     vm.arr[0].num = item.count + '次'
          //   } else if (item.message === '单元门开门次数') {
          //     vm.arr[1].num = item.count + '次'
          //   }
          // })
          vm.arr = JSON.parse(JSON.stringify(vm.arr))
          foo()
        }).catch(() => {
          foo()
        })
      }
      foo()
    })
  },
  beforeRouteLeave(to, from, next) {
    this.longPoll = false
    next()
  },
  created() {
    this.GetHardData().then(() => {
      // console.log(this.hardData)
      // this.hardData.forEach(item => {
      //   if (item.message === '小区开门次数') {
      //     this.arr[0].num = item.count + '次'
      //   } else if (item.message === '单元门开门次数') {
      //     this.arr[1].num = item.count + '次'
      //   }
      // })
      // this.arr = JSON.parse(JSON.stringify(this.arr))
    })
  },
  methods: {
    ...mapActions('trunkIndex', [
      'GetHardData',
      'SetUpConnection'
    ])
  }
}

</script>

<style lang="scss" scoped>
.main {
  display: flex;
  height: 920px;
  background: #16191c;
  padding: 8px;
  .left,
  .middle,
  .right {
    flex: 2;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    div {
      flex: 1;
      margin: 8px;
      background: #2c343a;
      border-radius: 5px;
      overflow: hidden;
    }
  }
  .middle {
    flex: 5;
    width: 1022px;
    height: 905px;
  }
}
</style>
