<template>
  <div class="module-corner gardensMaintain">
    <div style="padding: .05rem 0; overflow:hidden;">
      <div class="col-30" v-for="(value,index) in gardensMaintain" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-gardensMaintain-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 {
      gardensMaintain:[
        {
          title: '养护次数',
          data:{
            id: 'echart-gardensMaintain1',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210], color:'213,50,35'}
            ]
          },
        },
        {
          title: '应急抢救次数',
          data:{
            id: 'echart-gardensMaintain2',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'3,179,177'}
            ]
          }
        },
        {
          title: '防虫害次数',
          data:{
            id: 'echart-gardensMaintain3',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'216,50,218'}
            ]
          },
        },
        {
          title: '养护次数',
          data:{
            id: 'echart-gardensMaintain4',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'242,92,33'}
            ]
          },
        },
        {
          title: '应急抢救次数',
          data:{
            id: 'echart-gardensMaintain5',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'33,140,254'}
            ]
          },
        },
        {
          title: '防虫害次数',
          data:{
            id: 'echart-gardensMaintain6',
            width: 0,
            height: 0,
            xAxisData:["9.24","9.24","9.24","9.24","9.24","9.24","9.24"],
            yAxisData: [
              {name:'总数量',data:[855, 1078, 856, 865, 990, 782, 1210],color:'28,254,0'}
            ]
          },
        }
      ],
    };
  },
  mounted() {
    //工地建设
    this.callEchart("echart-gardensMaintain-box1", this.gardensMaintain[0].data, 2.3);
    this.callEchart("echart-gardensMaintain-box2", this.gardensMaintain[1].data, 2.3);
    this.callEchart("echart-gardensMaintain-box3", this.gardensMaintain[2].data, 2.3);
    this.callEchart("echart-gardensMaintain-box4", this.gardensMaintain[3].data, 2.3);
    this.callEchart("echart-gardensMaintain-box5", this.gardensMaintain[4].data, 2.3);
    this.callEchart("echart-gardensMaintain-box6", this.gardensMaintain[5].data, 2.3);
  },
  methods: {
    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;
}
.gardensMaintain{
  padding: .05rem .02rem;
}
</style>
<style>
.gardensMaintain .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>