<template>
  <div id="index2">
    <containerCmp v-if="agencies" :titHeader="agencies.name" :index="2" :visitBoMenu="false">
      <div class="centerCmp">
        <!-- <threeMap></threeMap> -->
        <!-- <mapScene></mapScene> -->
        <mapCmp mapIndex="2" :zoom="13" :agencies="agencies" :residentials="residentials"></mapCmp>
      </div>
      <div class="centerTop">
        <headerData :agencyStatistic="agencyStatistic"></headerData>
      </div>
      <div  v-if="userInfo" class="centerBottom" style="height: 30%;">
        <ammeterStat></ammeterStat>
      </div>
      <div  v-if="!userInfo" class="centerBottom" style="height: 20%;">
        <dv-border-box-4>
          <bottomCharts :agencyStatistic="agencyStatistic"></bottomCharts>
        </dv-border-box-4>
      </div>
      <div class="leftCmp">
        <dv-border-box-12 class="leftCmp-1">
          <people-scroll-board v-if="!userInfo" showType="1" @onEmit="handleClick"></people-scroll-board>
          <!-- <flow-scroll-board v-if="userInfo" @onEmit="handleClick"></flow-scroll-board> -->
          <carCapture v-if="userInfo" showType="3" @onEmit="handleClick"></carCapture>
        </dv-border-box-12>
          <dv-border-box-12 class="leftCmp-1">
            <alarmScrollBoard v-if="!userInfo" showType="1" listRowNum="5" @onEmit="handleClick"></alarmScrollBoard>
            <peopleThermometry v-if="userInfo" @onEmit="handleClick"></peopleThermometry>
          </dv-border-box-12>
          <dv-border-box-12 class="leftCmp-1">
            <room-scroll-board v-if="!userInfo" showType="1"  @onEmit="handleClick"></room-scroll-board>
            <matter-scroll-board v-if="userInfo" showType="1"  @onEmit="handleClick"></matter-scroll-board>
          </dv-border-box-12>
      </div>
      <div class="rightCmp">
        <dv-border-box-6 class="rightCmp-1">
          <topBar></topBar>
        </dv-border-box-6>
        <dv-border-box-6 class="rightCmp-1">
          <moreCmp showType="1"></moreCmp>
          <!-- <TopMiddleCmp :option="option" title="人员通行量趋势" path="/smartapplication/capturerecord"></TopMiddleCmp> -->
        </dv-border-box-6>
        <dv-border-box-6 class="rightCmp-1" :reverse="true">
          <moreCmp2 showType="1"></moreCmp2>
          <!-- <TopRightCmp v-if="!userInfo" :option="option1" title="车辆通行量趋势" path="/community/carenterrecord"></TopRightCmp> -->
          <!-- <TopRightCmp v-if="userInfo" :option="option2" title="车辆通行量趋势" path="/community/carenterrecord"></TopRightCmp> -->
        </dv-border-box-6>
      </div>
    </containerCmp>
  </div>
</template>

<script>
  import moreCmp from "./components/moreCmp.vue"
  import moreCmp2 from "./components/moreCmp2.vue"
  import containerCmp from "./common/containerCmp.vue"
import alarmScrollBoard from './components/alarmScrollBoard'
import TopMiddleCmp from './components/TopMiddleCmp'
import TopRightCmp from './components/TopRightCmp'
import headerData from './components/headerData'
import topBar from './components/topBar.vue'
import bottomCharts from './components/bottomCharts.vue'
import mapCmp from './components/map.vue'
import {getCommunityDetail} from "../../api/grid/index"
import  carCapture from "./components/carCapture.vue"
import peopleScrollBoard from "./components/peopleScrollBoard.vue"
import roomScrollBoard  from "./components/roomScrollBoard.vue"
import matterScrollBoard from "./components/matterScrollBoard.vue"
import flowScrollBoard from "./components/flowScrollBoard.vue"
import ammeterStat from "./components/ammeterStat.vue"
import peopleThermometry from './components/peopleThermometry.vue'
import {getUserInfo} from "../../util/util.js"
import mapScene from "../../components/3DScene/3DScene.vue"
import threeMap from "../../components/3DMap/Map3D.vue"
export default {
  name: 'index2',
  components: {
    threeMap,
    mapScene,
    containerCmp,
    alarmScrollBoard,
    peopleScrollBoard,
    roomScrollBoard,
    matterScrollBoard,
    flowScrollBoard,
    TopMiddleCmp,
    TopRightCmp,
    topBar,
    bottomCharts,
    mapCmp,
    carCapture,
    headerData,
    ammeterStat,
    peopleThermometry,
    moreCmp,
    moreCmp2
  },
  data () {
    return {
      option1: {
        legend: {
          data: [
            {
              name: '车辆通行量趋势',
              color: '#00baff'
            },

          ],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: [
            '2021/02/21', '2021/02/22', '2021/02/23', '2021/02/24', '2021/02/25',
          ],
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999',
              interval:0,
              rotate:20
            },

          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            name: '车辆通行量趋势',
            data: [
              150, 100, 160,200,150
            ],
            type: 'bar',
            barStyle: {
              fill: 'rgba(0, 186, 255, 0.4)'
            },
            barWidth:20
          },

        ]
      },
       option2: {
              legend: {
                data: [
                  {
                    name: '车辆通行量趋势',
                    color: '#00baff'
                  },

                ],
                textStyle: {
                  fill: '#fff'
                }
              },
              xAxis: {
                data: [
                  '2021/02/21', '2021/02/22', '2021/02/23', '2021/02/24', '2021/02/25',
                ],
                axisLine: {
                  style: {
                    stroke: '#999'
                  }
                },
                axisLabel: {
                  style: {
                    fill: '#999',
                    interval:0,
                    rotate:20
                  },

                },
                axisTick: {
                  show: false
                }
              },
              yAxis: {
                data: 'value',
                splitLine: {
                  show: false
                },
                axisLine: {
                  style: {
                    stroke: '#999'
                  }
                },
                axisLabel: {
                  style: {
                    fill: '#999'
                  }
                },
                axisTick: {
                  show: false
                },
              },
              series: [
                {
                  name: '车辆通行量趋势',
                  data: [
                    140, 130, 100,120,110
                  ],
                  type: 'bar',
                  barStyle: {
                    fill: 'rgba(0, 186, 255, 0.4)'
                  },
                  barWidth:20
                },

              ]
            },
       option: {
              legend: {
                data: ['人员趋势'],
                textStyle: {
                  fill: '#fff'
                }
              },
              xAxis: {
                data: [
                  '2021/02/21', '2021/02/22', '2021/02/23', '2021/02/24', '2021/02/25',
                ],
                boundaryGap: false,
                axisLine: {
                  style: {
                    stroke: '#999'
                  }
                },
                axisLabel: {
                  style: {
                    fill: '#999'
                  }
                },
                axisTick: {
                  show: false
                }
              },
              yAxis: {
                data: 'value',
                splitLine: {
                  show: false
                },
                axisLine: {
                  style: {
                    stroke: '#999'
                  }
                },
                axisLabel: {
                  style: {
                    fill: '#999'
                  },
                },
                axisTick: {
                  show: false
                },
              },
              series: [
                {
                  data: [
                    90, 180, 100,90,195
                  ],
                  type: 'line',
                  name: '人员趋势',
                  smooth: true,
                  lineArea: {
                    show: true,
                    gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                  },
                  linePoint: {
                    radius: 4,
                    style: {
                      fill: '#00db95'
                    }
                  }
                }
              ]
            },
            agencies:null,
            residentials:[],
            userInfo:false,
            agencyStatistic:null
    }
  },
  mounted() {
    this.agencies = JSON.parse(localStorage.getItem('agencies1'))
    this.userInfo = getUserInfo()
    if(getUserInfo()){
      this.config2 = this.config6
    }
    this.getCommunityDetailData();
  },
  methods:{
    handleClick(row,params){
      this.$datavAlert({
        title:params.title,
        showType:params.type,
        detailData:row
      })
    },
    getCommunityDetailData(){
      var _this = this
      getCommunityDetail(this.agencies.id).then((res)=>{
        let data = res.data;
          _this.agencyStatistic= data
          _this.residentials = data.residentials
      }).catch((err)=>{

      })
    }
  }
}
</script>

<style lang="less">
#index2 {
  .leftCmp-1,.rightCmp-1{
    height:33.33%
  }
}
</style>
