<template>
  <button @click="toggleSlide" class="toggle">{{ slideText }}</button>
  <div class="grid2_8">
    <div :class="['slide-content left', { active: showSlide }]">
      <div class="wrap flex-between">
        <div class="search">
          <div class="search-mobile">
            <h2>조건검색</h2>
            <div class="box grid gap05 bg-gray">
              <div class="titleBar">
                <h3>지역설정</h3>
                <hr />
              </div>
              <DongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true" :open_layers="this.$refs.open_layers"
                @siDoGunGuSelectF="dongSelectF" @dongSelectF="dongSelectF" @nodeSelectF="dongSelectF" ref="dongSelecter">
              </DongSelectList>
            </div>
            <div class="box">
              <div class="titleBar">
                <h3>조건 설정</h3>
                <hr />
              </div>

              <div class="flex-between m-b">
                <input class="m-r cbox_1" type="checkbox" v-model="condition['wtrms']" /><label for="">무단횡단</label>
                <input class="m-r cbox_1" type="checkbox" v-model="condition['signExtn']" /><label for="">신호연장</label>
                <input class="m-r cbox_1" type="checkbox" v-model="condition['rittrnVhcle']" /><label for="">신호위반</label>
                <input class="m-r cbox_1" type="checkbox" v-model="condition['eqpmnTrobl']" /><label for="">장애발생</label>
              </div>
              <!--
            <div class="grid3_7 m-b">
              <label for="date-input">일자</label>
              <input class="date-input" id="date-input" type="date" v-model="condition['date']" />      
            </div>
            <div class="grid3_7 m-b3">
              <label for="time-input">시간대</label>
              <div class="flex-between gap">
                <input
                  class="time-input"
                  id="time-input"
                  type="time"
                  v-model="condition['start_time']"
                />~<input
                  class="time-input"
                  id="time-input"
                  type="time"
                  v-model="condition['end_time']"
                />
              </div>
            </div> -->
              <button class="btn-l gr-btn search-btn" @click="statusSearch()" style="padding: 0.5rem 0">
                검색하기
              </button>
            </div>
          </div>
          <div class="live-mobile">
            <h2>실시간 발생 현황</h2>
            <div class="box bg-white tab-buttons" style="height: calc(100% - 50rem)">
              <div class="btn_set flex-center gap">
                <button class="m-r flex-between gray-btn" v-for="tab in tabs" :key="tab.id"
                  :class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
                  {{ tab.title }}
                  <img v-if="tab.id === 2 && troubleOccurrenceStatusList.length > 0"
                    src="../../../resources/images/warning.png" alt="" />
                </button>
              </div>
              <div class="ulbox">
                <div class="tab-content" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
                  <ul v-show="tab.content1">
                    <li v-for="(item, idx) in situationOccurrenceStatusList" :key="idx">
                      <p class="" style="color: #9bbb8d; ">상황명: {{ item.sn }}</p>
                      <p class="" style="color: #474747; font-size: 14px;"><img
                          src="../../../resources/images/icon/map.png" alt=""> {{ item.node_name }} {{ item.crslk_az }}쪽횡단보도
                      </p>
                      <p class="m-b" style="color: #767677; font-size: 13px;">발생일시: {{ item.ocrn_dt }}</p>
                    </li>
                  </ul>
                  <ul v-show="tab.content2">
                    <li v-for="(item, idx) in troubleOccurrenceStatusList" :key=idx @click="troblCcrnLocation(item)">
                      <p class="m-b" style="color: #9bbb8d; ">장애명: {{ item.trobl_nm }}</p>
                      <p class="m-b" style="color: #474747; font-size: 14px;"><img
                          src="../../../resources/images/icon/map.png" alt=""> {{ item.node_name }} {{ item.crslk_az
                          }}쪽횡단보도 </p>
                      <p class="m-b">발생일시: {{ item.ocrn_dt }}</p>
                      <p class="m-b">담당자: {{ item.mngr_nm }}</p>
                      <p class="m-b">연락처: {{ item.mngr_telno }}</p>
                      <p class="">복구여부: {{ item.recovery_yn }}</p>
                    </li>
                  </ul>

                </div>
              </div>
              <div v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
                <PaginationButton v-show="tab.content1" v-if="situationOccurrenceStatusListCount > 0"
                  v-model:currentPage="situationOccurrenceStatusListSearch.currentPage"
                  :per-page="situationOccurrenceStatusListSearch.perPage"
                  :total-count="situationOccurrenceStatusListCount" :max-range="5"
                  :click="situationOccurrenceStatusSearch" />
                <PaginationButton v-show="tab.content2" v-if="troubleOccurrenceStatusListCount > 0"
                  v-model:currentPage="troubleOccurrenceStatusListSearch.currentPage"
                  :per-page="troubleOccurrenceStatusListSearch.perPage" :total-count="troubleOccurrenceStatusListCount"
                  :max-range="5" :click="troubleOccurrenceStatusSearch" />
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <ul class="flex-end">
          <li>
            <p class="flex-center gap">
              <img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자
            </p>
            <h3>
              <em class="green2 m-r">{{ comma(statusControlCountList.pdstrnCount) }}</em>명
            </h3>
          </li>
          <li class="br"></li>
          <li>
            <p class="flex-center gap">
              <img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생
            </p>
            <h3>
              <em class="green2 m-r">{{ comma(statusControlCountList.wtrmsCount) }}</em>회
            </h3>
          </li>
          <li class="br"></li>
          <li>
            <p class="flex-center gap">
              <img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 발생
            </p>
            <h3>
              <em class="green2 m-r">{{ comma(statusControlCountList.signExtnCount) }}</em>회
            </h3>
          </li>
          <li class="br"></li>
          <li>
            <p class="flex-center gap">
              <img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 시간
            </p>
            <h3>
              <em class="green2 m-r">{{ comma(statusControlCountList.signExtnTime) }}</em>초
            </h3>
          </li>
          <li class="br"></li>
          <li>
            <p class="flex-center gap">
              <img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 차량 신호위반 발생
            </p>
            <h3>
              <em class="green2 m-r">{{ comma(statusControlCountList.rittrnVioltVhcleCount) }}</em>회
            </h3>
          </li>
          <li class="br"></li>
          <li>
            <p class="flex-center gap">
              <img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 장애 발생
            </p>
            <h3>
              <em class="green2 m-r">{{ comma(statusControlCountList.troblOcrnCount) }}</em>회
            </h3>
          </li>
        </ul>
      </div>
      <OpenLayers ref="open_layers" />
      <!-- Popup container -->
      <div v-if="isPopupVisible" class="popup-container">
        <!-- Popup content -->
        <div class="popup-content">
          <!-- Add your popup content here -->
          <h2>{{ popupStatus.type }} 발생</h2>
          <ul>
            <li>
              <p class="m-b">발생일시: {{ popupStatus.ocrn_dt }}</p>
              <p class="">발생장소: {{ popupStatus.crslk_nm }} 횡단보도</p>
            </li>
          </ul>
          <button @click="hidePopup(popupStatus.node_id)" class="s-btn gr-btn">확인</button>
        </div>
      </div>
    </div>
    <div class="chart grid gap">
      <div class="bg-white2 b-r b-shadow">
        <h2 style="font-size: 1.3rem">
          금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)
        </h2>
        <div class="box">
          <div style="width: 100%; height: 100%" id="chartdivWrap1">
            <div ref="chartdiv1" id="chartdiv1" style="width: 100%; height: 90%"></div>
          </div>
        </div>
      </div>
      <div class="bg-white2 b-r b-shadow">
        <h2 style="font-size: 1.3rem">
          금일 횡단보도 별 신호연장 발생 건수 (상위10개소)
        </h2>
        <div class="box">
          <div style="width: 100%; height: 100%" id="chartdivWrap2">
            <div ref="chartdiv2" id="chartdiv2" style="width: 100%; height: 90%"></div>
          </div>
        </div>
      </div>
      <div class="bg-white2 b-r b-shadow">
        <h2 style="font-size: 1.3rem">
          금일 횡단보도 별 우회전 위반 발생 건수 (상위5개소)
        </h2>
        <div class="box">
          <div style="width: 100%; height: 100%" id="chartdivWrap3">
            <div ref="chartdiv3" id="chartdiv3" style="width: 100%; height: 90%"></div>
          </div>
        </div>
      </div>
      <div class="bg-white2 b-r b-shadow">
        <h2 style="font-size: 1.3rem">
          금일 횡단보도 별 장비장애 발생 건수 (상위5개소)
        </h2>
        <div class="box">
          <div style="width: 100%; height: 100%" id="chartdivWrap4">
            <div ref="chartdiv4" id="chartdiv4" style="width: 100%; height: 90%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 팝업 -->
    <div class="modal-wrap" v-if="modal_event_detail_list == true">
      <div class="modal-bg"></div>
      <div class="modal_base">
        <h2>
          <span>{{ eventListSearch.eventType }} 발생 정보</span>
          <button type="button" class="gray-btn modal_base_close" @click="modal_event_detail_list = false">
            <img src="../../../resources/images/close.png" alt="" />
          </button>
        </h2>
        <div class="modal_base_body">
          <div class="de_Search">
            <!--<table class="troubleTable">             
              <tbody>        
                  <tr>                     
                    <th>검색</th>               
                    <td colspan="7" >     
                      <select name="" id="">
                        <option value="">검색조건</option>
                        <option value="">이름</option>
                        <option value="">소속정보</option>
                      </select>
                      <input type="text" placeholder="검색어를 입력 해주세요." style="width: 76%;" />
                      <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" >검색</button>
                    </td>  
                  </tr>
              </tbody>
            </table>-->
          </div>
          <table>
            <thead>
              <tr>
                <td>동이름</td>
                <td>횡단보도명</td>
                <td>상황명</td>
                <td>발생시간</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idx) in  eventList" :key="idx">
                <td data-title="교차로명">{{ item.dong_nm }}</td>
                <td data-title="횡단보도명"> {{ item.crslk_nm }} 쪽횡단보도</td>
                <td data-title="상황명">{{ item.type }}</td>
                <td data-title="발생시간">{{ item.ocrn_dt }}</td>
              </tr>
              <tr>
                <td class="exception" colspan="4" v-if="eventList.length < 1">조회된 데이터가 없습니다</td>
              </tr>
            </tbody>
          </table>
          <PaginationButton v-model:currentPage="eventListSearch.currentPage" :per-page="eventListSearch.perPage"
            :total-count="eventListCount" :max-range="5" :click="eventSelectList" />
        </div>
        <div class="modal_base_bottom gap">
          <button type="button" class="btn-2 gray-btn wrem_10 mrg_5p" @click="modal_event_detail_list = false">닫기</button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import OpenLayers from "../../component/OpenLayers_dev.vue";
import {
  vworldBaseLayer,
  vworldGrayLayer,
  vworldMidnightLayer,
  vworldHybridLayer,
  vworldSatelliteLayer,
} from "../../component/OpenLayersMap.vue";
import COMMON_CHART from "../../common/common.js";
import Overlay from "ol/Overlay"
import { baseStyles } from "../../component/OpenLayersStyle.vue";
import axios from "axios";
import DongSelectList from "../../component/dongSelectList.vue";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import COMMON_UTIL from '../../../resources/js/commonUtil.ts';

export default {
  data() {
    return {
      address: {

      },
      troubleOccurrenceStatusListSearch: {
        currentPage: 1,
        perPage: 10,
        orderByType: 'DESC',
      },
      situationOccurrenceStatusListSearch: {

        currentPage: 1,
        perPage: 10,
        orderByType: 'DESC',
      },

      eventListSearch: {
        currentPage: 1,
        perPage: 10,
        startDate: null,
        endDate: null,
        eventType: null,
        sigungu_cd: null,
        dong_cd: null,
        dong_dong_cd: null,
        node_id: null,
        crslk_az: null
      },
      situationOccurrenceStatusList: [],
      situationOccurrenceStatusListCount: 0,
      troubleOccurrenceStatusList: [],
      troubleOccurrenceStatusListCount: 0,
      eventListCount: 0,
      eventList: [],
      eventIdx: 0,
      isPopupVisible: false,
      showSlide: false,
      slideText: "검색하기",
      address: {},
      //조건설정
      condition: {
        //체크박스
        signExtn: true,
        wtrms: true,
        rittrnVhcle: true,
        eqpmnTrobl: true,
        //일자
        date: null,
        start_date: null,
        end_date: null,
        //시간대
        start_time: null,
        end_time: null,

        // 신규데이터 비교  시간대 
        currentTimestamp: null,
        popuptitle: "무단횡단 발생목록"
      },
      ck: true,
      tabs: [
        {
          id: 1,
          title: "상황발생현황",
          content1: "This is the content for Tab 1",
        },
        {
          id: 2,
          title: "장애발생현황",
          content2: "This is the content for Tab 2",
        },
      ],
      activeTab: 1,
      activeTab2: 1,
      chart1: {},
      chart2: {},
      chart3: {},
      chart4: {},
      chartData: {
        wtrms: [],
        signExtn: [],
        rittrnVioltVhcle: [],
        troblOcrn: [],
      },
      data1: [],
      statusControlCountList: {
        pdstrnCount: 0,
        wtrmsCount: 0,
        signExtnCount: 0,
        signExtnTime: 0,
        rittrnVioltVhcleCount: 0,
        troblOcrnCount: 0,
      },
      // 실시간 발생 이벤트 
      popupStatus: {
        node_id: '',
        crslk_az: '',
        ocrn_dt: '',
        type: ''
      },
      // 실시간 발생 이벤트 리스트 
      realTimeEventList: [],
      // 이벤트 발생 체크 
      eventFlage: false,
      // 이벤트 상세보기 팝업 
      modal_event_detail_list: false,
      // 타이머 관리 
      timer: {}
    };
  },
  components: {
    PaginationButton: PaginationButton,
    OpenLayers: OpenLayers,
    DongSelectList: DongSelectList,
  },
  methods: {
    // 휠 이벤트 
    childWheel(coordinate) {

    },

    //DongSelectList에서 dong_cd 받아오기
    setDongCd(value) {
      this.address = value;
    },

    childMoveEnd(zoom) {
      // console.log("zoom zoomzoom: ", zoom);
      if (this.now_zoom >= 18.6 && zoom < 18.6) {
        this.address.node_id = null;
        this.statusSearch(false);
      }
      this.now_zoom = zoom;
    },

    // 실시간 발생 토클?
    toggleSlide() {
      if (this.showSlide) {
        this.slideText = "검색하기";
      } else {
        this.slideText = "창닫기";
      }
      this.showSlide = !this.showSlide;
    },

    dongSelectF: function (event) {

    },

    //지역 및 조건 설정 안에 있는 횡단보도의 위치와 횟수의 합
    changeTab(tabId) {
      this.activeTab = tabId;
    },

    showPopup() {
      this.isPopupVisible = true;
    },

    hidePopup(node_id) {
      this.isPopupVisible = false;
    },

    // 팝업 상세 
    openDetailPopup(type) {
      let vm = this;
      vm.eventListSearch.currentPage = 1;
      vm.eventListSearch.startDate = vm.condition.date + ' ' + vm.condition.start_time;
      vm.eventListSearch.endDate = vm.condition.date + ' ' + vm.condition.end_time;


      // 무단횡단    
      if (type == 'c1') {
        vm.eventListSearch.eventType = '무단횡단';
        // 신호연장
      } else if (type == 'c2') {
        vm.eventListSearch.eventType = '신호연장';
        // 차량위반
      } else if (type == 'c3') {
        vm.eventListSearch.eventType = '우회전신호위반';
        // 장비발생
      } else if (type == 'c4') {
        vm.eventListSearch.eventType = '장비장애';
      }

      if (type != 'c4') {
        const vm = this;
        axios({
          url: "/statusControl/eventSelectList.json",
          method: "post",
          headers: {
            "Content-Type": "application/json; charset=UTF-8",
          },
          data: vm.eventListSearch,
        })
          .then(function (response) {
            vm.eventListCount = response.data.eventListCount;
            vm.eventList = response.data.eventList;
            vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * vm.eventListSearch.perPage;
            vm.modal_event_detail_list = true;
          })
          .catch(function (error) {
            alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
          });
      }
    },

    // 마우스 클릭 
    childClick: function (prop, coordinate, layerCk, map) {
      var vm = this;

      if (layerCk == true) {
        if (prop[0] != null && prop[0].layerName != 'multiPolygonLayer') {
          if (prop[0].layerName === 'dong') {
            //this.address.dong_dong_cd = prop[0].id_;
            //this.address.dong_cd =prop[0].id_;       
            vm.eventListSearch.dong_cd = prop[0].id_;
          } else if (prop[0].layerName === 'node') {
            //this.address.node_id = prop[0].id_;   
            vm.eventListSearch.node_id = prop[0].id_;
          }
          this.createPopup(coordinate, prop[0]);
        }
      }
    },

    // 장애 팝업
    createErrorPopup: function (item) {
      var vm = this;
      vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
      let element = document.createElement("div");
      element.classList.add('ol-popup');

      // 검색창 떠있는 동안은 자동 리프레쉬 멈춤     
      var html = "";

      html = "<div style='transform: translate(0%, 0%) translate(-150px,-230px);'>"
        + " <table class='map_multi_popup' >"
        + " <thead>"
        + " <td colspan='4' class='fon'> <span > " + item.node_name + "_" + item.crslk_az + "측 획단보도 장애정보 <a id='popup-closer' class='ol-popup-closer' style='float: right;'>X   </a> </span></td>"
        + " </thead>"
        + " <tbody>"
        + " <tr>"
        + " <th colspan='3'>장애명</th>"
        + " <td >" + item.trobl_nm + "</td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>담당자</th>"
        + " <td >" + item.mngr_nm + "</td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>연락처</th>"
        + " <td >" + item.mngr_telno + "</td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>이메일</th>"
        + " <td >" + item.mngr_eml + "</td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>소속정보</th>"
        + " <td >" + item.mngr_ogdp_info + "</td>"
        + " </tr>"
        + "<tr>"
        + " <th colspan='5'><button class='map_multi_popup_move_button' id='close'>닫기</button></th>"
        + " </tr>"
        + " </tbody>"
        + " </table>"
        + " </div>";
      + " </tbody>"
        + " </table>"
        + " </div>";

      element.innerHTML = html;
      element.style.display = 'block';

      // OverLay 생성
      let overlay = new Overlay({
        id: 'multiPopup',
        element: element, // 생성한 DIV
        autoPan: true,
        className: "multiPopup",
        autoPanMargin: 100,
        autoPanAnimation: {
          duration: 400
        }
      });

      //오버레이의 위치 저장     
      var geom = JSON.parse(item.geom.value);
      // console.log(geom);
      overlay.setPosition(geom.coordinates);

      //지도에 추가
      this.$refs.open_layers.map.addOverlay(overlay);
      // 해당 DIV 다켓방법
      let oElem = overlay.getElement();
      oElem.addEventListener('click', function (e) {
        var target = e.target;
        if (target.className == "ol-popup-closer" || target.className == 'map_multi_popup_move_button') {
          //선택한 OverLayer 삭제
          vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
          vm.timer = setInterval(() => {
            vm.statusSearch(false);
          }, 5000)

        }
      });
    },

    // 정보 팝업
    createPopup: function (coordinate, prop) {
      var vm = this;
      vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
      let element = document.createElement("div");
      element.classList.add('ol-popup');

      // 검색창 떠있는 동안은 자동 리프레쉬 멈춤 
      clearInterval(this.timer);
      var html = "";
      html = "<div style='transform: translate(0%, 0%) translate(-150px,-190px);'>"
        + " <table class='map_multi_popup' >"
        + " <thead>"
        + " <td colspan='5' class='fon'> <span > " + prop.values_.name + " <a id='popup-closer' class='ol-popup-closer' style='float: right;'>X   </a> </span></td>"
        + " </thead>"
        + " <tbody>"
        + " <tr>"
        + " <th colspan='3'>무단횡단 발생</th>"
        + " <td >" + prop.values_.crosng_cnt + "</td>"
        + " <td ><button class='map_multi_popup_button' id='c1' >상세</button></td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>신호연장 발생</th>"
        + " <td >" + prop.values_.extn_cnt + "</td>"
        + " <td ><button class='map_multi_popup_button' id='c2' >상세</button></td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>차량위반 발생</th>"
        + " <td >" + prop.values_.law_vltn_cnt + "</td>"
        + " <td ><button class='map_multi_popup_button' id='c3' >상세</button></td>"
        + " </tr>"
        + " <tr>"
        + " <th colspan='3'>장비장애 발생</th>"
        + " <td >" + prop.values_.error_cnt + "</td>"
        + " <td ><button class='map_multi_popup_button' id='c1' >상세</button></td>"
        + " </tr>";
      if (prop.layerName != 'crslk') {
        html += "<tr>"
          + " <th colspan='5'><button class='map_multi_popup_move_button' id='move'>이동</button></th>"
          + " </tr>"
          + " </tbody>"
          + " </table>"
          + " </div>";
      } else {
        html += " </tbody>"
          + " </table>"
          + " </div>";
      }

      element.innerHTML = html;
      element.style.display = 'block';

      // OverLay 생성
      let overlay = new Overlay({
        id: 'multiPopup',
        element: element, // 생성한 DIV
        autoPan: true,
        className: "multiPopup",
        autoPanMargin: 100,
        autoPanAnimation: {
          duration: 400
        }
      });

      //오버레이의 위치 저장     
      overlay.setPosition(prop.values_.geometry.flatCoordinates);

      //지도에 추가
      this.$refs.open_layers.map.addOverlay(overlay);
      // 해당 DIV 다켓방법
      let oElem = overlay.getElement();
      oElem.addEventListener('click', function (e) {
        var target = e.target;
        if (target.className == "ol-popup-closer") {
          //선택한 OverLayer 삭제
          vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
          element = '';

          vm.timer = setInterval(() => {
            vm.statusSearch(false);
          }, 5000)

        } else if (target.className == "map_multi_popup_button") {
          vm.openDetailPopup(target.id)

        } else if (target.className == "map_multi_popup_move_button") {
          if (prop != null && prop.layerName != 'multiPolygonLayer') {
            if (prop.layerName === 'dong') {
              vm.address.dong_dong_cd = prop.id_;
              vm.address.dong_cd = prop.id_;
            } else if (prop.layerName === 'node') {
              vm.address.node_id = prop.id_;
            }
            vm.statusSearch(true);
          }
          vm.timer = setInterval(() => {
            vm.statusSearch(false);
          }, 5000)
        }
      });
    },

    // 장애 발생 현황 클릭 
    troblCcrnLocation: function (item) {
      // console.log('troblCcrnLocation', item);
      clearInterval(this.timer);
      this.address.node_id = item.node_id;
      this.statusSearch(true);
      this.eventFlage = true;
      this.createErrorPopup(item);
    },

    // 셀렉트 선택시 반영 데이터 
    getStatusData: function (pointAnim) {
      const vm = this;

      var layer = 'dong'
      var epsg = "EPSG:5181";

      if (vm.address.guGun_dong_cd == null) {
        layer = 'sigungu';
      } else if (vm.address.node_id != null) {
        layer = 'crslk';
      } else if (vm.address.dong_dong_cd != null) {
        layer = 'node';
        epsg = "EPSG:4326";
      }

      axios({
        url: "/common/getStatusDataGeoJson.json",
        method: 'post',
        headers: {
          'Content-Type': 'application/json; charset=UTF-8'
        },
        data: {
          "dong_cd": vm.address.dong_cd
          , "start_dt": vm.condition.date + ' ' + vm.condition.start_time
          , "end_dt": vm.condition.date + ' ' + vm.condition.end_time
          , "layer": layer
          , "signExtn": vm.condition.signExtn
          , "wtrms": vm.condition.wtrms
          , "rittrnVhcle": vm.condition.rittrnVhcle
          , "eqpmnTrobl": vm.condition.eqpmnTrobl
          , "currentTimestamp": vm.condition.currentTimestamp
        },
      }).then(function (response) {
        vm.statusControlCountList = response.data.totalCount;
        vm.$refs.open_layers.removeAddLayerAll();
        vm.$refs.open_layers.addLayerByGeojson(response.data.geojson, layer, epsg, baseStyles["labelStyle"], "label");

        // 마지막 시간 데이터  생성 
        vm.condition.currentTimestamp = response.data.realTimeEvent.currentTimestamp;

        // 이벤트 리스트 등록
        vm.realTimeEventList = response.data.realTimeEvent.RealTimeEventList;

        // console.log( ' vm.realTimeEventList',vm.realTimeEventList)

        // 실시간 이벤트 발생여부 체크 
        if (vm.realTimeEventList.length > 0) {
          vm.popupStatus = Object.assign({}, vm.realTimeEventList[0]);
          vm.address.node_id = vm.popupStatus.node_id;
          vm.statusSearch(true);
          vm.eventFlage = true;
          vm.showPopup();
        }
        // 차트 데이터 생성
        vm.drawChars(response.data.countList);
      }).catch(function (error) {
        console.log("error : ", error);
      }).finally(function () {
        // 항상 실행되는 영역
        if (vm.address.guGun_dong_cd == null) {
          layer = 'sigungu';
          vm.$refs.open_layers.addVectorLayerByUrl("/common/getDongsGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd);
        } else if (vm.address.node_id != null) {
          layer = 'crslk';
          // epsg = "EPSG:4326";
          vm.$refs.open_layers.addVectorLayerByUrl("/common/getNodeGeoJson.json", "multiPolygonLayer", "EPSG:4326", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd, vm.address.node_id);
        } else if (vm.address.dong_dong_cd != null) {
          layer = 'node';
          epsg = "EPSG:4326";
          vm.$refs.open_layers.addVectorLayerByUrl("/common/getDongGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd);
        } else {
          vm.$refs.open_layers.addVectorLayerByUrl("/common/getDongsGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd);
        }
      });;
    },

    // 서치 버튼 클릭 
    statusSearch: function (pointAnim) {
      var vm = this;


      // 검색 버튼 클릭
      if (pointAnim == true) {
        if (this.$refs.open_layers.map.getOverlayById('multiPopup') != null) {
          this.$refs.open_layers.map.removeOverlay(this.$refs.open_layers.map.getOverlayById('multiPopup'));
          vm.timer = setInterval(() => {
            vm.statusSearch(false);
          }, 5000)
        }
        // 자동 처리    
      } else {
        if (this.$refs.open_layers.map.getOverlayById('multiPopup') != null) {
          return false;
        }
      }
      // 이벤트 발생시 다시 제자리로
      if (this.eventFlage == true) {
        this.isPopupVisible = false;
        this.eventFlage = false;
        this.address.node_id = null;
        pointAnim = true;
      }

      if (pointAnim == null) {
        pointAnim = true;
      }

      //지도 영역 수정   
      this.getStatusData(pointAnim);

      this.situationOccurrenceStatusSearch();
      this.troubleOccurrenceStatusSearch();
    },

    // 차트 그리기 
    drawChars: function (data) {

      // 횡단보도별 무단횡단 차트 정보 
      var wtrmsCount = data.sort(function (a, b) {
        return b.wtrmsCount - a.wtrmsCount;
      });
      wtrmsCount = wtrmsCount.slice(0, 10);

      // 신호연장 차트 정보 
      var signExtnCount = data.sort(function (a, b) {
        return b.signExtnCount - a.signExtnCount;
      });
      signExtnCount = signExtnCount.slice(0, 10);

      // 우회전 위반 차트 정보 
      var rittrnVioltVhcleCount = data.sort(function (a, b) {
        return b.rittrnVioltVhcleCount - a.rittrnVioltVhcleCount;
      });
      rittrnVioltVhcleCount = rittrnVioltVhcleCount.slice(0, 5);

      // 장애발생  차트 정보 
      var troblOcrnCount = data.sort(function (a, b) {
        return b.troblOcrnCount - a.troblOcrnCount;
      });
      troblOcrnCount = troblOcrnCount.slice(0, 5);

      // 차트 생성
      if (this.chart1.xAxis == null) {
        this.chart1 = COMMON_CHART.createChartByIds("chartdiv1", this.chart1, wtrmsCount, "wtrmsCount", "crslk_nm");
        this.chart2 = COMMON_CHART.createChartByIds("chartdiv2", this.chart2, signExtnCount, "signExtnCount", "crslk_nm");
        this.chart3 = COMMON_CHART.createChartByIds("chartdiv3", this.chart3, rittrnVioltVhcleCount, "rittrnVioltVhcleCount", "crslk_nm");
        this.chart4 = COMMON_CHART.createChartByIds("chartdiv4", this.chart4, troblOcrnCount, "troblOcrnCount", "crslk_nm");
      } else {
        // 데이터 변경
        this.chart1.xAxis.data.setAll(wtrmsCount);
        this.chart1.series.data.setAll(wtrmsCount);
        this.chart2.xAxis.data.setAll(signExtnCount);
        this.chart2.series.data.setAll(signExtnCount);
        this.chart3.xAxis.data.setAll(rittrnVioltVhcleCount);
        this.chart3.series.data.setAll(rittrnVioltVhcleCount);
        this.chart4.xAxis.data.setAll(troblOcrnCount);
        this.chart4.series.data.setAll(troblOcrnCount);
      }
    },

    //상황 발행 현황 검색
    statusControlCount: function () {
      //검색 데이터
      const vm = this;
      axios({
        url: "/statusControl/statusControlCount.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { "dong_cd": vm.address.dong_cd, "start_dt": vm.condition.date + ' ' + vm.condition.start_time, "end_dt": vm.condition.date + ' ' + vm.condition.end_time, "layer": layer },
        // data: vm.address ,
      })
        .then(function (response) {
          vm.statusControlCountList = response.data;
        })
        .catch(function (error) {
        });
    },

    //상황 발행 현황 검색
    eventSelectByRegion: function () {
      //검색 데이터
      const vm = this;
      axios({
        url: "/statusControl/eventSelectByRegion.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.address,
      })
        .then(function (response) {
          vm.chartData.wtrms = response.data.wtrms;
          vm.chartData.signExtn = response.data.signExtn;
          vm.chartData.rittrnVioltVhcle = response.data.rittrnVioltVhcle;
          vm.chartData.troblOcrn = response.data.troblOcrn;
        })
        .catch(function (error) {
          console.log("eventSelectByRegion - error : ", error);
        });
    },

    //실시간 발생 현황 - 상황 발행 현황 검색
    situationOccurrenceStatusSearch: function () {
      //검색 데이터
      const vm = this;
      vm.situationOccurrenceStatusListSearch.condition = vm.condition;
      vm.situationOccurrenceStatusListSearch.address = vm.address;
      axios({
        url: "/statusControl/situationOccurrenceStatusSearch.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.situationOccurrenceStatusListSearch,
      })
        .then(function (response) {
          vm.situationOccurrenceStatusList = response.data.situationOccurrenceStatusList;
          vm.situationOccurrenceStatusListCount = response.data.situationOccurrenceStatusListCount;
        })
        .catch(function (error) {
          console.log("statusSearch - error : ", error);
        });
    },

    //실시간 발생 현황 - 장애발생현황
    troubleOccurrenceStatusSearch: function () {
      //검색 데이터
      const vm = this;
      axios({
        url: "/statusControl/troubleOccurrenceStatusSearch.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.troubleOccurrenceStatusListSearch,
      })
        .then(function (response) {
          vm.troubleOccurrenceStatusList = response.data.troubleOccurrenceStatusList;
          vm.troubleOccurrenceStatusListCount = response.data.troubleOccurrenceStatusListCount;
        })
        .catch(function (error) {
          console.log("statusSearch - error : ", error);
        });
    },

    // 이벤트 발생 상세정보 조회(클릭 이벤트)
    eventSelectList: function () {
      const vm = this;
      axios({
        url: "/statusControl/eventSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.eventListSearch,
      })
        .then(function (response) {
          vm.eventListCount = response.data.eventListCount;
          vm.eventList = response.data.eventList;
          vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * vm.eventListSearch.perPage;
        })
        .catch(function (error) {
          console.log("errorSelectList - error : ", error);
          alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
        });
    },


    // 날짜 초기화
    initialDate() {
      this.condition.date = COMMON_UTIL.today();
      this.condition.start_time = "00:00";
      this.condition.end_time = "23:59";

      this.eventListSearch.sigungu_cd = this.address.guGun_dong_cd;
      this.eventListSearch.dong_cd = this.address.dong_cd;
      this.eventListSearch.dong_dong_cd = this.address.node_id;
      this.eventListSearch.node_id = this.address.node_id;
    },

    init() {
      this.statusControlCount();
      this.eventSelectByRegion();
      const clusterLayerExists = this.$refs.open_layers.map.getLayers().getArray().some(layer => {
        return layer.get('name') === "clusterLayer";
      });

      if (clusterLayerExists) {
        this.$refs.open_layers.addClusterLayerByUrl("/common/getNodeGeoJsonForWtrmsCrosngStatusControl.json", "clusterLayer", "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address.dong_cd);
      }

      this.$refs.open_layers.addVectorLayerByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd, this.address.node_id);

      this.situationOccurrenceStatusSearch();
      this.troubleOccurrenceStatusSearch();
    },

  },
  watch: {
    "condition.date": function (newValue, oldValue) {

    },
    "condition.start_time": function (newValue, oldValue) {

    },
    "condition.end_time": function (newValue, oldValue) {

    },
    "now_zoom": function (newValue, oldValue) {
    },
    "chartData.wtrms": function (newValue, oldValue) {
      COMMON_CHART.createChartById("chartdiv1", this.chart1, newValue);
    },
    "chartData.signExtn": function (newValue, oldValue) {
      COMMON_CHART.createChartById("chartdiv2", this.chart2, newValue);
    },
    "chartData.rittrnVioltVhcle": function (newValue, oldValue) {
      COMMON_CHART.createChartById("chartdiv3", this.chart3, newValue);
    },
    "chartData.troblOcrn": function (newValue, oldValue) {
      COMMON_CHART.createChartById("chartdiv4", this.chart4, newValue);
    },
  },
  computed: {},
  computed: {
    comma() {
      return (v) => {
        return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      };
    },
  },
  mounted() {
    var vm = this;
    this.initialDate();
    this.$refs.open_layers.setBaseMap(vworldBaseLayer);
    this.$refs.dongSelecter.default_select(false, true, '22', '22030');
    this.statusSearch();
    this.timer = setInterval(() => {
      this.statusSearch(false);
    }, 5000)
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  .top h3 {
    font-size: 15px !important;
  }

  .top p {
    padding-right: 1rem;
  }

  .chart {
    width: -webkit-fill-available !important;
  }

  .top {
    overflow: scroll;
  }

  .top ul {
    width: 137rem;
    overflow: hidden;
    justify-content: space-between !important;
    padding: 2rem 1rem !important;
  }

  .top li {
    display: flex;
    align-items: center;
  }

  .search {
    width: inherit;
  }

  .toggle {
    color: #fff;
    font-weight: bold;
    background: #13833b;
    display: block !important;
    position: absolute;
    z-index: 150;
    top: 7.2rem;
    right: 1rem;
  }

  .wrap {
    height: auto !important;
    width: inherit;
    margin: 0 !important;
  }

  .slide-content {
    position: absolute;
    z-index: 97;
    top: 6rem;
    /* left: -31rem; */
    width: -webkit-fill-available;
    height: 100vh;
    background-color: #f0f0f0;
    transition: transform 0.3s ease;
    transform: translateX(100%);
  }

  .slide-content.active {
    transform: translateX(0);
  }
}

.search label {
  line-height: 3rem;
}

.tab-buttons .ulbox {
  height: calc(100% - 11rem);
  overflow: scroll;
  overflow-x: hidden;
}

.ulbox ul {
  height: 30rem;
}

.ulbox ul li p {
  font-size: 13px;
}

.popup-btn {
  position: absolute;
  bottom: 3rem;
  right: 28%;
}

.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: rgba(0, 0, 0, 0.7); */
  z-index: 9999;
}

.popup-content {
  background-color: #000000a3;
  width: 17%;
  text-align: center;
  color: #ffffff;
  /* height: 20%; */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.popup-content ul {
  padding: 2rem 0;
}

.popup-content ul li {
  font-size: 16px;
}

.popup-content h2 {
  margin-top: 0;
  font-size: 2.5rem;
  color: #bf1a21;
}

.toggle {
  display: none;
}

.chart>div {
  height: 100%;
}

.chart .box {
  height: 85%;
}

.chart {
  width: 20%;
  height: 85%;
  position: absolute;
  right: 2rem;
  top: 10rem;
}

.chart h2 {
  border-radius: 10px 10px 0 0;
}

.search .box ul li {
  text-align: left;
}

.search .box button {
  font-size: 1.3rem;
  padding: 0.5rem 1.3rem;
}

.search .box button.gray-btn.active {
  /* Your CSS styles for the button when it's active (clicked) */
  background-color: #13833b;
  color: #fff;
  /* Add any other styles you want to apply when the button is active */
}

.search .box button img {
  width: 20px;
}

.btn_set {
  position: relative;
  border-bottom: 1px solid #e5e3e3;
  padding: 0 0 1rem 0;
}

.btn_set div {
  position: absolute;
  top: 40px;
  width: 313px;
  height: 380px;
  background: #fff;
  padding: 1rem;
}

.bg-white::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.left h2,
.chart h2 {
  background: #50ba8a;
  text-align: center;
  color: #fff;
  padding: 1.6rem 0;
}

.left h2 {
  padding: 1rem 0;
  font-size: 1.3rem;
}

.top {
  z-index: 100;
  background: #fdfdf2;
  top: 0;
  /* width: -webkit-fill-available; */
  height: 86px !important;
}

.top p {
  font-size: 15px;
}

.top ul {
  height: inherit;
  justify-content: space-evenly;
}

.top li {
  text-align: center;
}

.top li img {
  width: 20px;
}

.top h3 {
  font-size: 20px;
  text-align: end;
}

.wrap {
  z-index: 100;
  top: 0;
  height: inherit;
}

.left {
  background: #fff;
  height: 100%;
}

.right {
  width: -webkit-fill-available;
  position: relative;
  height: 100%;
}

.map {
  width: 100%;
  height: calc(100% - 86px);
}
</style>
