<template>
  <div class="full row">
      <!--左视图-->
     <dv-border-box-12 ref="border1" :color="['#053629','#04a878']" style="width: 30%;height: 100%;">
        <div style="height: 2%"></div>
        <div  style="width: 95%;height: 58%;overflow-y: scroll;margin: auto">
          <dv-border-box-7 backgroundColor="rgba(81,140,130,0.2)"  :color="['rgba(81,140,130,0)','#b1b1b1']" v-for="(item,index) of userInfo.grid" style="width: 95%;height: 200px;margin: 10px auto;">
            <div class="full center" style="flex-direction: column">
              <div style="height: 50px;width: 100%;font-weight: bold;justify-content: left;text-indent: 20px;font-size: 20px" class="center green">网格{{index+1+': '+item.gridName}}</div>
              <div style="height: 150px;width: 100%;flex-wrap: wrap;justify-content: left" class="center">
                <div v-for="(item,index) of gridList" class="center" style="width: 200px;height: 50px">
                  <div style="width: 40px;height: 40px;border-radius: 50%" :style="{
                    background: 'url('+item.icon+') no-repeat center/70%  '
                  }"></div>
                  <div style="width: 90px;height: 100%;color: #dddddd;font-size: 20px;text-indent: 5px;justify-content: left" class="center">{{item.name}} </div>
                  <div style="width: 60px;height: 100%;color: #c49f30;font-size: 23px;font-style: italic" class="center">
                    {{ item.num }} </div>
                </div>
              </div>
            </div>
          </dv-border-box-7>
        </div>
        <dv-border-box-6 ref="border3" :color="['#058e77','#053630']" style="width: 95%;height: 38%;margin: auto;">
          <div class="full center" >
            <dv-scroll-board  ref="border8" v-if="config.data.length>0" style="height: 85%;width: 94%" :config="config" />
            <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
          </div>
        </dv-border-box-6>
      </dv-border-box-12>
      <!--中部视图-->
      <div style="width: 40%;height: 100%;">
        <dv-border-box-13 ref="border9" :color="['#053629','#058e64']" style="width: 100%;height: 30%;" >
          <div class="full center" style="padding: 10px">
            <div class="row full" style="flex-wrap: wrap;">
              <div style="width: 33.3%;height: 40%" class=" center" v-for="(item,index) of data['communityCounts']" :key="item">
                <div class="data1 center green">
                  <div class="full">
                    <div class="center" style="margin: auto;height: 40%;">{{item.name}}</div>
                    <div class="center" style="font-size: 28px;color: #00f9cf">{{item.value}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </dv-border-box-13>
        <dv-border-box-7 ref="border10" :color="['#053629','#058e64']" style="width: 100%;height: 40%;">
          <div class="full center"><div style="width: 99%;height: 99%" id="map"></div></div>
        </dv-border-box-7>
        <div class="full">
          <dv-decoration-11 ref="border11"  :color="['#053629','#058e64']" style="width: 100%;height: 30%;">
            <div class="full center">
              <div style="width: 95%;height: 85%;" class="center">
                <div id="charts1" :option="roundConfig" style="width:50%;height:100%"></div>
                <div id="charts4" :option="roundConfig" style="width:50%;height:100%"></div>
              </div>
            </div>
          </dv-decoration-11>
        </div>
      </div>
      <!--右视图-->
      <dv-border-box-12 ref="border12"  :color="['#053629','#04a878']"  style="width: 30%;height: 100%;">
        <div style="height: 2%"></div>
<!--        <dv-border-box-1 ref="border13" :reverse="true" :color="['#058e77','#053630']" style="width: 95%;height: 58%;margin: auto;">-->
<!--          <div class="green"  style="width: 100%;height: 40px;display: flex;align-items: center;text-indent: 2em">车辆概况</div>-->
<!--          <dv-decoration-6 ref="border14" :color="['#058e77','#053630']" style="margin: auto;width:90%;height:5px;" />-->
<!--          <div style="height: 5px"></div>-->
<!--          <dv-border-box-2 ref="border15" :color="['#929292','#038fa1']" style="margin: auto;width:90%;height:50%;">-->
<!--            <div class="full center">-->
<!--              <div style="width: 95%;height: 94%;margin: auto" class="bg-grid">-->
<!--                <div class="full" id="charts3"></div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </dv-border-box-2>-->
<!--          <div style="height: 10px"></div>-->
<!--          <div style="margin: auto;width: 90%;height: 35%;flex-wrap: wrap;overflow-y: scroll" class="row ">-->
<!--            <div style="width: 50%;height: 50px;color: #bababa" class="center">-->
<!--              <dv-decoration-11 :color="['#053630','rgba(0, 186, 189, 1)']" style="width: 80%;height: 100%">车辆数量： 0</dv-decoration-11>-->
<!--            </div>-->
<!--            <div style="width: 50%;height: 50px;color: #bababa" class="center">-->
<!--              <dv-decoration-11 :color="['#053630','rgba(0, 186, 189, 1)']" style="width: 80%;height: 100%">抓拍数量： 0</dv-decoration-11>-->
<!--            </div>-->
<!--            <div style="width: 50%;height: 50px;color: #bababa" class="center">-->
<!--              <dv-decoration-11 :color="['#053630','rgba(0, 186, 189, 1)']" style="width: 80%;height: 100%">停车位： 0</dv-decoration-11>-->
<!--            </div>-->
<!--            <div style="width: 50%;height: 50px;color: #bababa" class="center">-->
<!--              <dv-decoration-11 :color="['#053630','rgba(0, 186, 189, 1)']" style="width: 80%;height: 100%">地磁： 0</dv-decoration-11>-->
<!--            </div>-->
<!--            <div style="width: 50%;height: 50px;color: #bababa" class="center">-->
<!--              <dv-decoration-11 :color="['#053630','rgba(0, 186, 189, 1)']" style="width: 80%;height: 100%">空闲车位： 0</dv-decoration-11>-->
<!--            </div>-->
<!--            <div style="width: 50%;height: 50px;color: #bababa" class="center">-->
<!--              <dv-decoration-11 :color="['#053630','rgba(0, 186, 189, 1)']" style="width: 80%;height: 100%">车辆道闸： 0</dv-decoration-11>-->
<!--            </div>-->
<!--          </div>-->
<!--        </dv-border-box-1>-->
        <dv-border-box-1 ref="border2" :color="['#058e77','#053630']" style="width: 95%;height: 58%;margin: auto;">
          <div class="green center"  style="width: 100%;height: 40px;display: flex;align-items: center;text-indent: 2em">设备概况</div>
          <dv-decoration-6 :color="['#058e77','#053630']" style="margin: auto;width:90%;height:5px;" />
          <div style="width: 90%;margin: auto;height: 30%;" class="center">
            <div class="left" @click="changeCurrenDeviceIndex(-1)" ></div>
            <div class="data2 green" style="width: 40%;height: 100%;">
              <div class="device-title">{{device.dictValue}}</div>
            </div>
            <div class="right" style="width: 30%;height: 100%" @click="changeCurrenDeviceIndex(1)"></div>
          </div>
          <dv-border-box-2 ref="border4" :color="['#929292','#038fa1']" backgroundColor="rgba(0, 166, 128, 0.02)"  style="margin: auto;width:90%;height:55%;" >
            <div class="full center">
              <div class="row bg-grid" style="width: 96%;height: 94%">
                <div class="center" style="width: 50%;height: 100%;flex-direction: column">
                  <div class="green">设备总数</div>
                  <div class="device-total-num green center" style="font-size: 24px;font-style: italic" >{{deviceData.count}}
                  </div>
                </div>
                <div style="width: 50%;height: 100%;flex-direction: column" class="center ">
                  <dv-border-box-7 ref="border5" style="width: 85%;height: 40px;margin: 5px">
                    <div class="full center" style="color: #dddddd">设备正常： {{deviceData.normalCount}}</div>
                  </dv-border-box-7>
                  <dv-border-box-7 ref="border6" style="width: 85%;height: 40px;margin: 5px">
                    <div class="full center" style="color: #820923">设备异常： {{deviceData.exceptionCount}}</div>
                  </dv-border-box-7>
                  <dv-border-box-7 ref="border7" style="width: 85%;height: 40px;margin: 5px">
                    <div class="full center" style="color: #3f8209">设备运作： {{deviceData.normalCount}}</div>
                  </dv-border-box-7>

                </div>
              </div>
            </div>
          </dv-border-box-2>
        </dv-border-box-1>
        <dv-border-box-6 ref="border16" :color="['#058e77','#053630']" style="width: 95%;height: 38%;margin: auto;">
          <div class="full center" style="flex-direction: column">
            <div class="tendency" id="charts2" style="height: 85%;width: 94%;"  >
            </div>
          </div>
        </dv-border-box-6>
      </dv-border-box-12>

    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
    import {
      getAgencyListForCustom,
      getAgencysByAreaCode,
      getDetail,
      getList,
      getStaticData,
      smartDeviceStatic
    } from "../../api/grid/grid";

    export default {
      async mounted() {
        const that = this
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
          })()
        }
        // this.initCharts('charts3','car');
        this.initCharts('charts1','round1');
        this.initCharts('charts4','round2');
        this.initCharts('charts2','tendency');
        await this.onLoad(this.$route.query['id']);
      },
      name: "viewpanel",
      watch:{
        screenWidth(){
          this.resize();
        },
        $route(){
          if(this.$route.path == '/grid/viewpanel'){
            this.resize()
            this.map.resize()
            this.$store.commit('SET_TAG_INDEX',0);
          }
          if(this.$route.query.refresh){
            this.onLoad(this.$route.query.id)
          }
        },
        currentDeviceIndex(){
          this.device = this.currentDeviceIndex>=0?
            this.data['deviceType'][this.currentDeviceIndex%this.data['deviceType'].length] :
            this.data['deviceType'][this.data['deviceType'].length+this.currentDeviceIndex%this.data['deviceType'].length]
        }
      },
      computed: {
        ...mapGetters(["userInfo","currentGrid"]),
      },
      methods: {
        async initData(id){
          this.data = (await getStaticData({id})).data.data;
          this.device = this.data['deviceType'][this.currentDeviceIndex%this.data['deviceType'].length]
           await this.getDeviceStatic();

          this.setTendencyOption(this.data['agencyPerson']);
          this.setConfig(this.data['deviceJobList']);
          this.setRound([],[]);
          this.setRound([],[]);
          // this.setCar([]);
        },
        async getDeviceStatic(){
          this.deviceData = (await smartDeviceStatic({id:this.currentGrid.id,deviceType: this.device.dictKey})).data.data;
          console.log(this.deviceData,88833)
          },
        handleScreen() {
          fullscreenToggel();
        },
        changeCurrenDeviceIndex(num){
          this.currentDeviceIndex = this.currentDeviceIndex+num;
          this.getDeviceStatic();
        },
        setRound(list1,list2){
          this.round1.setOption({
            title: {
              show: true,
              text: '人员分布',
              offset: [40,-40],
              style: {
                fill: '#085865',
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
              }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                type: 'pie',
                radius: ['20%', '70%'],
                insideLabel:{
                  show: true,
                  style: {
                    fontSize: 10,
                    fill: '#fff',
                    textAlign: 'center',
                    textBaseline: 'middle'
                  }
                },
                outsideLabel: {
                  show: true ,
                  labelLineEndLength:15
                },
                animationFrame: 60,
                data: [
                  {value: 1048, name: '社区人员'},
                  {value: 735, name: '重点人员'},
                  {value: 580, name: '老人'},
                  {value: 484, name: '前科人员'},
                  {value: 300, name: '流动人员'}
                ]
              }
            ]
          });
          this.round2.setOption({
            title: {
              show: true,
              text: '年龄分布',
              offset: [40,-40],
              style: {
                fill: '#085865',
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
              }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                type: 'pie',
                radius: ['20%', '70%'],
                insideLabel:{
                  show: true,
                  style: {
                    fontSize: 10,
                    fill: '#fff',
                    textAlign: 'center',
                    textBaseline: 'middle'
                  }
                },
                outsideLabel: {
                  show: true ,
                  labelLineEndLength:15
                },
                animationFrame: 60,
                data: [
                  {value: 1048, name: '>20'},
                  {value: 735, name: '20~40'},
                  {value: 580, name: '40~60'},
                  {value: 484, name: '<70'},
                ]
              }
            ]
          });
        },
        setCar(list){
          this.car.setOption({
            radar: {
              indicator: [
                { name: '车辆', max: 300 },
                { name: '抓拍', max: 300 },
                { name: '停车位', max: 300 },
                { name: '地磁', max: 300 },
                { name: '车辆道闸', max: 300 },
              ],
              axisLabel: {
                color: ['rgb(0,157,189)']
              },
            },
            series: [
              {
                type: 'radar',
                data: [0, 0, 0, 0,0],
                point: {
                  style: {
                    fill: '#989010',
                  }
                },

              }
            ]
          })
        },
        setTendencyOption(list){
          const _this =this;
          let nameList = [];
          let valueList = [];
          list.forEach(item => {
            nameList.push(item.agencyName);
            valueList.push(item.personNum);
          })
          this.tendency.setOption({
            title: {
              text: '社区人口数量',
              style: {
                fill: '#083a29',
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
                textBaseline: 'bottom'
              }
            },
            xAxis: {
              name: '社区名称',
              data: nameList ,
              nameTextStyle: {
                fill: '#b9b9ba',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#33b0dd',
                  fontSize: 15
                }
              }
            },
            yAxis: {
              name: '人口数',
              data: 'value',
              nameTextStyle: {
                fill: '#b9b9ba',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#33b0dd',
                  fontSize: 12
                }}
            },
            legend: {
              show:true
            },
            series: [
              {
                data: valueList,
                type: 'bar'
              }
            ]
          });
        },
        setConfig(list){
          let data = {
            oddRowBGC: '#052c22',
            evenRowBGC: '#10504f',
            waitTime: 3000,
            data: []
          };
          list.forEach(item=> {
            data.data.push([item.alarmContent,item.alarmPosition,item.alarmTime])
          })
          this.config= data
        },
        async getMap(){
          let _this = this;
          return  new Promise((resolve,reject) => {
            // this.$AMap1.load({
            this.$AMap.load({
              key:'cbb265e2a60bbbc04a52eec4eecdeb12',
              version:'2.0',
              resizeEnable: true,
              plugins:['AMap.DistrictSearch','AMap.Object3DLayer','AMap.MouseTool','AMap.PolyEditor']
            }).then((AMap)=>{
              let map = new AMap.Map('map',{
                zoom:11,
                pitch:50,
                viewMode:'3D',
                skyColor: '#053629',
                roofColor: '#38665c',
                wallColor: '#385b54',
                showLabel: true,
                doubleClickZoom: false,
                mapStyle: 'amap://styles/dark'
              });
              _this.AMap = AMap;
              _this.map = map;
              resolve();
            })
          })
        },
        async getBounds(code,config){
          const _this =this;
          return new Promise((resolve,reject) => {
            let districtSearch = new _this.AMap.DistrictSearch(config);
            districtSearch.search(code, (x, y) => {
              resolve(y.districtList[0].boundaries);
            });
          })
        },
        async initGrid(grid){
          this.map.setCenter(JSON.parse(grid.center));
          this.map.setZoom(grid.zoom);
          let data = JSON.parse(grid.bounds);
          let paths =  (grid.boundsType == 'system' ? await this.getBounds(data["search"],data["config"]):[data]);
          this.currentGridPolygon = paths;
          for(let item of paths){
            let polyline = new this.AMap.Polyline({
              strokeColor: grid.gridColor,
              borderWeight: 100,
              strokeWeight: 6,
              path:  item,
            });
            this.map.add(polyline);
          }
        },
        resize(){
          this.tendency.resize();
          this.rendIndex++;
          this.car.resize();
          this.round1.resize();
          this.round2.resize();
          for(let i=1;i<17;i++){
            if(typeof this.$refs['border'+i] != 'undefined'){
              this.$refs['border'+i].initWH();
            }
          }
        },
        async initAgencyList(list){
          const _this = this;
          list.forEach((item,index)=>{
            if(item['longitude']!=''&&item['latitude']!=''){
              let marker = new AMap.Marker({
                position: new AMap.LngLat(item['longitude'],item['latitude']),
                offset: new AMap.Pixel(-10, -10),
                label: {
                  direction: 'top',
                  content: item.agencyName,
                },
              });
              _this.map.add(marker);
            }
          })
        },
        async initSubGridBounds(list){
          const _this = this;
          if(list.length==0){
            this.map.setZoom(17);
            let agencyList = _this.currentGrid.boundsType == 'system' ?
              (await getAgencysByAreaCode({areaCode: _this.currentGrid.areaCode})).data.data:
              (await getAgencyListForCustom({gridId: _this.currentGrid.id})).data.data;
            await _this.initAgencyList(agencyList);
            return ;
          }

          let polygons = [];
          for ( let item of list){
            let data = JSON.parse(item.bounds);
            item.bounds = item.boundsType== 'system'? await this.getBounds(data["search"],data["config"]) : [data];
            let marker = new _this.AMap.Marker({
              position: JSON.parse(item.center),
              content:  "<div style='color: #dddddd;font-family:Arial,Helvetica,sans-serif'>"+item.gridName+"</div>",
            });
            _this.map.add(marker);
            for (let ele of item.bounds) {
              //生成行政区划polygon
              let polygon = new _this.AMap.Polygon({
                strokeWeight: 1,
                path: ele,
                fillOpacity: 0.4,
                fillColor: item.gridColor,
                strokeColor: item.gridColor,
                extData: {
                  grid: item
                }
              });
              // polygon.on('click',(e) => {
              //   _this.showGridDetail(polygon.getExtData().grid)
              // })
              polygon.on('mouseover', () => {
                polygon.setOptions({
                  fillOpacity: 0.7,
                })
              })
              polygon.on('dblclick', () => {
                this.onLoad(polygon.getExtData().grid.id)
              })
              polygon.on('mouseout', () => {
                polygon.setOptions({
                  fillOpacity: 0.3,
                })
              })

              polygons.push(polygon);
            }
          }
          _this.map.add(polygons)
          _this.map.setFitView(polygons);
        },//渲染当前网格下的所有子网格
        initCharts(id,ele){
          const container = document.getElementById(id)
          let myChart = new Charts(container);
          this[ele] = myChart;
        },
        async onLoad(id){
          this.$store.commit('SET_LOADING',true);
          changeDefaultConfig('color',['rgba(0, 186, 189, 1)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
          let grids = (await getList(1,100,{userCode: this.userInfo['user_id']})).data.data.records;
          this.userInfo.grid = grids;
          this.$store.commit('SET_USER_INFO', this.userInfo);
          await this.getMap();
          const grid = typeof id == 'undefined' ? this.userInfo.grid[this.currentGridIndex] : (await getDetail({"id": id})).data.data;
          this.grid = grid;
          this.$store.commit('SET_CURRENT_GRID',grid);
          await this.initGrid(grid);
          await this.initData(this.grid.id);
          const gridList = (await getList(1,100,{pid : grid.id})).data.data.records;
          this.subGridList = await this.initSubGridBounds(gridList);
           this.$store.commit('SET_LOADING',false);
        },
      },
      data() {
        return {
          gridList: [
            {icon: '/grid/wangge.png',name: '网格',num: 1},
            {icon: '/grid/loudong.png',name: '楼栋房屋',num: 25},
            {icon: '/grid/huxing.png',name: '户室',num: 25},
            {icon: '/grid/renkou.png',name: '人口',num: 25},
            {icon: '/grid/renyuan.png',name: '特殊人群',num: 0},
            {icon: '/grid/zhongdian.png',name: '重点人员',num: 0},
            {icon: '/grid/faren.png',name: '法人',num: 0},
          ],
          screenWidth: {},
          data: {},
          config: {data: []},
          round1: {},
          round2: {},
          tendency: {},
          car: {},
          deviceData: {},
          menuActive: 0,
          currentGridIndex: 0,
          fullscreen: false,
          device: {},
          currentDeviceIndex: 0,
          AMap: {},
          map: {},
          grid: {},
        }
      },
    }
</script>

<style scoped>
  .click:hover{
    cursor: pointer;
    transform: translate(2px,2px);
  }
  .device-title{
    font-style: italic;font-size: 28px;text-align: center;line-height: 100px;letter-spacing: 2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
    animation: suofang 5s linear infinite reverse;
  }
  .center{display: flex;justify-content: center;align-items: center;}
  .logo-info{width: 60%;height: 100%;background: url('/data/bg-top.png') no-repeat center/100% 90%;}
  .time-info{width: 40%;height: 100%;background: url('/data/bg-time.png') no-repeat center/100% 90%;}
  .ele1{
    width: 40px;
    height: 40px;
    background: url('/data/ele1.png') no-repeat center/contain ;
    animation: round 2s infinite linear;
  }
  .white{
    color: #dddddd;
  }
  .data2{
    background: url('/data/data-bg-3.png') no-repeat center/80% ;
  }
  .row{
    display: flex;
    flex-direction: row;
  }
  .green{
    color: rgba(0, 186, 189, 1);
  }
  .font-20{
    font-size: 20px;
  }
  .full{
    width: 100%;
    height: 100%;
  }
  .main-container{
    width: 100%;
    height: calc(100% - 125px);
  }
  .big:hover{
    font-size: 20px;
  }
  .tag-bar{
    margin: 5px;
    width: calc(100% - 10px);
    height: 40px;
    background: white;
  }
  .tendency{
    background: url('/data/bg-grid.png') no-repeat center/cover ;
  }
  .left{
    width: 30%;height: 100%;background: url('/data/left.png') no-repeat center;
    background-size: 20%;
  }
  .right{
    width: 30%;height: 100%;background: url('/data/right.png') no-repeat center;
    background-size: 20%;
  }
  .left:hover{
    cursor: pointer;
    background-size: 25%;
  }
  .right:hover{
    cursor: pointer;
    background-size: 25%;
  }
  .data1{
    width: 300px;height: 100px;
    background: url('/data/data-bg-1.png') no-repeat center/contain ;
  }
  @keyframes round {
    from { transform: rotate(0deg) }
    to {
      transform: rotate(360deg)
    }
  }
  .message{
    animation: translation 10s infinite linear
  }
  @keyframes translation {
    from { transform: translateX(-200%) }
    to {
      transform: translateX(200%)
    }
  }
  @keyframes suofang {
    from { transform: rotateY(0deg)}
    to {
      transform: rotateY(360deg)
    }
  }
  .tag-button{
    width: 100px;
    height: 30px;
    cursor: pointer;
    margin-left: 20px;
    background: url('/data/bg-grid.png') no-repeat center/cover;
  }
  .down{
    margin-left: 8px;
    width: 12px;
    height: 12px;
    background: url('/data/down.png') no-repeat center/contain ;
    display: inline-block;
  }
  .device-total-num{
    width: 170px;
    height: 170px;
    background: url('/data/data-bg-4.png') no-repeat 15px 60%/contain;
  }
  .right-bg-1{
    background: url('/data/data-bg-2.png') no-repeat center/90% ;
  }
  .bg-grid{
    background: url('/data/bg-grid.png') no-repeat center/cover;
  }
  .actvieBorder{
    border: solid 2px #22ddda;
  }

</style>
