<template>
  <div class="module-corner communityEquipment">
    <div style="padding: .05rem 0; overflow:hidden;">
      <div class="col-30" v-for="(value,index) in communityEquipment" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-communityEquipment-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 {
      color:['213,50,35','3,179,177','216,50,218','242,92,33','33,140,254','28,254,0'],
      communityEquipment:[
        // {
        //   title: '楼宇对讲机',
        //   data:{
        //     id: 'echart-communityEquipment1',
        //     width: 0,
        //     height: 0,
        //     xAxisData:["区域一","区域二","区域三","区域四","区域五","区域六"],
        //     yAxisData: [
        //       {name:'总数量',data:[855, 2278, 856, 1865, 990, 1782], color:'213,50,35'}
        //     ]
        //   },
        // },
      ],
    };
  },
  mounted() {
    this.getCommunityEquipment(); 
  },
  methods: {
    getCommunityEquipment(){
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1088'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params,
      }).then(res => {
        // AJS = [],  // 楼宇对讲机
        // BJQ = [],  // 报警器
        // DZXG = [], // 电子巡更
        // GGGB = [], // 公共广播
        // SPJK = [], // 视频监控
        // TCDX = [], // 停车道匣
        // WLWDT = []; // 物联网电梯
        let xAxisData = [];
        let data = [
          {title:'楼宇对讲机', data:[]},
          {title:'报警器', data:[]},
          {title:'电子巡更', data:[]},
          {title:'公共广播', data:[]},
          {title:'视频监控', data:[]},
          {title:'物联网电梯', data:[]},
          // {title:'停车道匣', data:[]},
        ]
        for(let i=0;i<res.data.length;i++){
          xAxisData.push(res.data[i].QY);
          data[0].data.push(res.data[i].AJS)
          data[1].data.push(res.data[i].BJQ)
          data[2].data.push(res.data[i].DZXG)
          data[3].data.push(res.data[i].GGGB)
          data[4].data.push(res.data[i].SPJK)
          data[5].data.push(res.data[i].WLWDT)
          // data[6].data.push(res.data[i].TCDX)
          
        };
        this.communityEquipment = [];
        data.forEach((item,index)=>{
          this.communityEquipment.push(
            {
              title: item.title,
              data:{
                id: 'echart-communityEquipment'+(index+1),
                width: 0,
                height: 0,
                xAxisData: xAxisData,
                yAxisData: [
                  {name:'总数量',data:item.data,color:this.color[index]}
                ]
              },
            }
          )
        })
        // 用户活跃度
        setTimeout(() => {
          this.callEchart("echart-communityEquipment-box1", this.communityEquipment[0].data, 2.3);
          this.callEchart("echart-communityEquipment-box2", this.communityEquipment[1].data, 2.3);
          this.callEchart("echart-communityEquipment-box3", this.communityEquipment[2].data, 2.3);
          this.callEchart("echart-communityEquipment-box4", this.communityEquipment[3].data, 2.3);
          this.callEchart("echart-communityEquipment-box5", this.communityEquipment[4].data, 2.3);
          this.callEchart("echart-communityEquipment-box6", this.communityEquipment[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;
}
.communityEquipment{
  padding: .03rem .02rem;
}
</style>
<style>
.communityEquipment .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>