<template>
  <div class="module-corner userActive">
    <div style="padding: .05rem 0; overflow:hidden;">
      <div class="col-30" v-for="(value,index) in userActive" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-userActive-box'+(index+1)">
            <EchartLineNoY
              :id="value.data.id"
              :width="value.data.width"
              :height="value.data.height"
              :legend="value.data.legend"
              :xAxisData="value.data.xAxisData"
              :yAxisData="value.data.yAxisData"
            />
          </div>
        </div>
      </div>
    </div>
    <Corner2 />
  </div>
</template>
<script>
import Corner2 from '@/components/Corner2'
import LitterTitle from '@/components/title/LitterTitle'
import EchartLineNoY from '@/components/echart/EchartLineNoY'
export default {
  components: {
    Corner2,
    LitterTitle,
    EchartLineNoY
  },
  data () {
    return {
      userActive: [
        {
          title: '楼宇对讲机',
          data: {
            id: 'echart-userActive1',
            width: 0,
            height: 0,
            xAxisData: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'],
            yAxisData: [
              {name: '总数量', data: [855, 2278, 856, 1865, 990, 1782], color: '213,50,35'}
            ]
          }
        },
        {
          title: '停车道闸',
          data: {
            id: 'echart-userActive2',
            width: 0,
            height: 0,
            xAxisData: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'],
            yAxisData: [
              {name: '总数量', data: [855, 2278, 856, 1865, 990, 1782], color: '3,179,177'}
            ]
          }
        },
        {
          title: '电子巡更',
          data: {
            id: 'echart-userActive3',
            width: 0,
            height: 0,
            xAxisData: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'],
            yAxisData: [
              {name: '总数量', data: [855, 2278, 856, 1865, 990, 1782], color: '216,50,218'}
            ]
          }
        },
        {
          title: '视频监控',
          data: {
            id: 'echart-userActive4',
            width: 0,
            height: 0,
            xAxisData: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'],
            yAxisData: [
              {name: '总数量', data: [855, 2278, 856, 1865, 990, 1782], color: '242,92,33'}
            ]
          }
        },
        {
          title: '公共广播',
          data: {
            id: 'echart-userActive5',
            width: 0,
            height: 0,
            xAxisData: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'],
            yAxisData: [
              {name: '总数量', data: [855, 2278, 856, 1865, 990, 1782], color: '33,140,254'}
            ]
          }
        },
        {
          title: '物联网电梯',
          data: {
            id: 'echart-userActive6',
            width: 0,
            height: 0,
            xAxisData: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'],
            yAxisData: [
              {name: '总数量', data: [855, 2278, 856, 1865, 990, 1782], color: '28,254,0'}
            ]
          }
        }
      ]
    }
  },
  mounted () {
    // 用户活跃度
    // this.UserActive()
    this.callEchart('echart-userActive-box1', this.userActive[0].data, 2.3)
    this.callEchart('echart-userActive-box2', this.userActive[1].data, 2.3)
    this.callEchart('echart-userActive-box3', this.userActive[2].data, 2.3)
    this.callEchart('echart-userActive-box4', this.userActive[3].data, 2.3)
    this.callEchart('echart-userActive-box5', this.userActive[4].data, 2.3)
    this.callEchart('echart-userActive-box6', this.userActive[5].data, 2.3)
  },
  methods: {
    UserActive () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1071'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        this.workflow = []
        res.data.forEach((item, index) => {
          this.workflow.push(
            {
              title: item.LX,
              data: {
                id: 'echart-workflow' + (index + 1),
                width: 0,
                height: 0,
                xAxisData: ['审批中', '不通过', '已通过'],
                yAxisData: [
                  {name: '总数量', data: [item.SPZSL, item.BTGSL, item.YTGSL], color: this.color[index]}
                ]
              }
            }
          )
        })
        // 用户活跃度
        setTimeout(() => {
          this.callEchart('echart-userActive-box1', this.userActive[0].data, 2.3)
          this.callEchart('echart-userActive-box2', this.userActive[1].data, 2.3)
          this.callEchart('echart-userActive-box3', this.userActive[2].data, 2.3)
          this.callEchart('echart-userActive-box4', this.userActive[3].data, 2.3)
          this.callEchart('echart-userActive-box5', this.userActive[4].data, 2.3)
          this.callEchart('echart-userActive-box6', this.userActive[5].data, 2.3)
        }, 200)
      })
    },
    callEchart (idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width)
      this.$set(data, 'height', _width / offset)
    }
  }
}
</script>

<style scoped>
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.col-30{
  width: 33%;
  float: left;
}
.userActive{
  padding: .03rem .02rem;
}
</style>
<style>
.userActive .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>