<template>
  <div class="grid2_8">
    <div class="left">
      <div class="wrap flex-between">
        <div class="search">
          <h2>횡단보도 조회</h2>
          <div class="box grid gap ">
            <DongSelectList @setDongCd="setDongCd" ref="parent" :crslk_azHiddenCk=true :open_layers="this.$refs.open_layers"
            @siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></DongSelectList>
            <div class="flex-center m-t3"><button class="btn-l gr-btn search-btn">검색</button></div>
          </div>
          <hr />
          <div class="box tab-buttons" style="height: calc(100% - 31rem)"  v-show="modal_tab == true">
            <div class="btn_set flex-start gap">
              <button
                class="m-r flex gray-btn s-btn gap"
                v-for="tab in tabs"
                :key="tab.id"
                :class="{ active: activeTab === tab.id }"
                @click="changeTab(tab.id)"
              >
                {{ tab.title }}
                <!-- <img 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.content2">
                  <li @click="troblCcrnLocation1">
                      <p class="m-b" style="color: #9bbb8d; ">장애명: 오른쪽 무단횡단 카메라 작동 불량</p>
                      <p class="m-b" style="color: #474747; font-size: 14px;"><img src="../../../resources/images/icon/map.png" alt=""> 달서초등(A) 북쪽횡단보도</p>
                      <p class="m-b">발생일시: 2023-07-24 17:38</p>
                      <p class="m-b">담당자: 김성훈</p>
                      <p class="m-b">연락처: 010-2158-4427</p>
                      <p class="">복구여부: 미복구</p>
                    </li>
                    <li @click="troblCcrnLocation2">
                      <p class="m-b" style="color: #9bbb8d; ">장애명: 왼쪽 잔여시간표시기 작동 불량</p>
                      <p class="m-b" style="color: #474747; font-size: 14px;"><img src="../../../resources/images/icon/map.png" alt=""> 달서초등(A) 북쪽횡단보도</p>
                      <p class="m-b">발생일시:  2023-07-24 17:38</p>
                      <p class="m-b">담당자: 김성훈</p>
                      <p class="m-b">연락처: 010-2158-4427</p>
                      <p class="">복구여부: 미복구</p>
                    </li>
                    <li @click="troblCcrnLocation3">
                      <p class="m-b" style="color: #9bbb8d; ">장애명: 신호제어기 작동 불량</p>
                      <p class="m-b" style="color: #474747; font-size: 14px;"><img src="../../../resources/images/icon/map.png" alt=""> 이현파출소 동쪽 횡단보도</p>
                      <p class="m-b">발생일시: 2023-07-24 19:30</p>
                      <p class="m-b">담당자: 김성훈</p>
                      <p class="m-b">연락처: 010-2158-4427</p>
                      <p class="">복구여부: 미복구</p>
                    </li>
                </ul>
              </div>
            </div>
          </div>
          <h2 v-show="modal_crosswalUpdate == true">횡단보도 수정</h2>
          <div class="box" v-show="modal_crosswalUpdate == true">
            <div class="grid3_7 m-b" id="siDoHiddenCk">
              <label for="">시/도</label>
              <select
                name="siDoSelectList"
                id="siDoSelectList"
                v-model="crosswalk['siDo_dong_cd']"
                @change="siDoGunGuSelectF($event)"
              >
                <option :value="null" disabled>대구광역시</option>
                <option
                  v-for="(item, key) in siDoList"
                  :key="key"
                  :value="item['dong_cd']"
                >
                  {{ item["dong_nm"] }}
                </option>
              </select>
            </div>
            <div class="grid3_7 m-b" id="gunGuHiddenCk">
              <label for="">시/군/구</label>
              <select
                name="gunGuSelectList"
                id="gunGuSelectList"
                v-model="crosswalk['guGun_dong_cd']"
                @change="siDoGunGuSelectF($event)"
              >
                <option :value="null" disabled>서구</option>
                <option
                  v-for="(item, key) in gunGuList"
                  :key="key"
                  :value="item['dong_cd']"
                >
                  {{ item["dong_nm"] }}
                </option>
              </select>
            </div>
            <div class="grid3_7 m-b" id="dongHiddenCk">
              <label for="">행정동</label>
              <select
                name="dongSelectList"
                id="dongSelectList"
                v-model="crosswalk['dong_dong_cd']"
                @change="dongSelectF($event)"
              >
                <option :value="null" disabled>행정동</option>
                <option
                  v-for="(item, key) in dongList"
                  :key="key"
                  :value="item['dong_cd']"
                >
                  {{ item["dong_nm"] }}
                </option>
              </select>
            </div>
            <div class="grid3_7 m-b" id="nodeHiddenCk">
              <label for="">교차로</label>
              <select
                name="nodeSelectList"
                id="nodeSelectList"
                v-model="crosswalk['node_id']"
                @change="nodeSelectF($event)"
              >
                <option :value="null" disabled>교차로</option>
                <option
                  v-for="(item, key) in nodeList"
                  :key="key"
                  :value="item['node_id']"
                >
                  {{ item["node_name"] }}
                </option>
              </select>
            </div>
            <div class="grid3_7 m-b" id="azimuthHiddenCk">
              <label for="">방위각</label>
              <select
                name="azimutSelectList"
                id="azimutSelectList"
                v-model="crosswalk['crslk_az']"
              >
                <option :value="0" disabled>방위각</option>
                <option :value="10">북</option>
                <option :value="50">북동</option>
                <option :value="20">동</option>
                <option :value="60">남동</option>
                <option :value="30">남</option>
                <option :value="70">남서</option>
                <option :value="40">서</option>
                <option :value="80">북서</option>
              </select>
            </div>

            <div class="m-b">
              <div class="grid3_7 m-b">
                <label for="" class="m-r ">횡단보도 좌표</label
                ><button class="gr-btn s-btn" @click="clickStateChange()">좌표선택</button>
              </div>
              <div class="flex gap">
                <div class="grid3_7 m-b">
                  <label class="m-r">위도</label>
                  <input
                    type="text"
                    name=""
                    id=""
                    placeholder="00.0000"
                    v-model="crosswalk.lat"
                  />
                </div>
                <div class="grid3_7 m-b">
                  <label class="m-r">경도</label>
                  <input
                    type="text"
                    name=""
                    id=""
                    placeholder="00.0000"
                    v-model="crosswalk.lon"
                  />
                </div>
              </div>
            </div>
            <div class="">
              <div class="m-b flex-start" style="margin-top: 3rem">
                <label for="">검지장비 선택</label>
              </div>
              <div class="flex-between m-b">
                <input
                  type="checkbox"
                  v-model="crosswalk.wtrms_crosng_eqpmn_instl_yn"
                /><label for="">무단횡단</label>
                <input
                  type="checkbox"
                  v-model="crosswalk.signl_extn_eqpmn_instl_yn"
                /><label for="">신호연장</label>
                <input
                  type="checkbox"
                  v-model="crosswalk.rittrn_vhcle_eqpmn_instl_yn"
                /><label for="">우회전차량</label>
              </div>
              <div class="bottom">
                <div class="flex m-b">
                  <label class="m-r">무단횡단 검지 범위 : </label>
                  <select
                    name="wtrms_crosng_detct_rate"
                    id="wtrms_crosng_detct_rate"
                    v-model="condition.wtrms_crosng_detct_rate"
                  >
                    <option :value="100">100%</option>
                    <option :value="90">90%</option>
                    <option :value="80">80%</option>
                    <option :value="70">70%</option>
                    <option :value="60">60%</option>
                    <option :value="50">50%</option>
                    <option :value="40">40%</option>
                    <option :value="30">30%</option>
                    <option :value="20">20%</option>
                    <option :value="10">10%</option>
                  </select>
                </div>
                <div class="flex m-b">
                  <label class="m-r">왕복차선 정보 : </label>
                  <select
                    name="rndtp_tfclne_info"
                    id="rndtp_tfclne_info"
                    v-model="condition.rndtp_tfclne_info"
                  >
                    <option :value="99" disabled>왕복 차선 정보</option>
                    <option :value="1">왕복 1차선</option>
                    <option :value="2">왕복 2차선</option>
                    <option :value="3">왕복 3차선</option>
                    <option :value="4">왕복 4차선</option>
                    <option :value="5">왕복 5차선</option>
                    <option :value="6">왕복 6차선</option>
                    <option :value="7">왕복 7차선</option>
                    <option :value="8">왕복 8차선</option>
                    <option :value="9">왕복 9차선</option>
                    <option :value="10">왕복 10차선</option>                   
                  </select>
                </div>
                <div class="flex m-b">
                  <label class="m-r">우회전 차선 유무 : </label>
                  <select
                    style="width: 9rem"
                    name=""
                    id=""
                    v-model="crosswalk.rittrn_tfclne_yn"
                  >
                    <option :value="null">우회전 차선 유무 선택</option>
                    <option :value="true">있음</option>
                    <option :value="false">없음</option>
                  </select>
                </div>
                <div class="flex m-b">
                  <label class="m-r">우회전 차선 유형 : </label>
                  <input
                    type="text"
                    name=""
                    id=""
                    placeholder="우회전 차선 유형 입력"
                    v-model="crosswalk.rittrn_tfclne_ty"
                  />
                </div>
                <div class="flex m-b">
                  <label class="m-r">횡단보도 관리자 : </label>
                  <div class="flex gap">
                    <input
                      type="text"
                      name=""
                      id=""
                      placeholder=""
                      v-model="crosswalk.mngr_nm"
                    />
                    <button class="gr-btn s-btn" @click="modal_managerSearch = true">검색</button>

                    <div class="modal-wrap" v-if="modal_managerSearch == true">
                        <div class="modal-bg"></div>
                        <div class="modal">
                          <h2 class="flex-between">
                            횡단보도 유지보수 담당자 검색
                            <button type="button" class="gray-btn" @click="modal_managerSearch = 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="" v-model="managerListSearch.searchType">
                                            <option value="null">검색조건</option>
                                            <option value="mngr_nm">이름</option>
                                            <option value="mngr_ogdp_info">소속정보</option>
                                          </select>
                                        <input type="text" placeholder="검색어를 입력 해주세요."  v-model="managerListSearch.searchText"  @keyup.enter="managerSelectList" style="width: 76%;" />
                                        <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="managerSelectList">검색</button>
                                      </td> 
                                  </tr>
                              </tbody>
                              </table>
                            </div>
                            <table>
                              <thead>
                                <tr>
                                  <td>No</td>
                                  <td>이름</td>
                                  <td>전화번호</td>
                                  <td>소속정보</td>
                                </tr>
                              </thead>
                              <tbody>
                                <tr v-for="(item, idx) in managerList" :key="idx" @click="managerSelect(item)">
                                  <td data-title="No">{{ managerIdx - idx }}</td>
                                  <td data-title="이름">{{ item['mngr_nm'] }}</td>
                                  <td data-title="전화번호">{{ HyphenMinus(item['mngr_telno']) }}</td>
                                  <td data-title="소속정보">{{ item['mngr_ogdp_info'] }}</td>
                                </tr>
                                <tr v-show="managerList.length == 0">
                                  <td class="exception" colspan="9">조회된 데이터가 없습니다</td>
                                </tr>
                              </tbody>
                            </table>
                            
                            <div class="bottom-wrap">
                              <div class="pg-wrap">
                                <PaginationButton
                                  v-model:currentPage="managerListSearch.currentPage"
                                  :per-page="managerListSearch.perPage"
                                  :total-count="managerListCount"
                                  :max-range="5"
                                  :click="managerSelectList"
                                />
                                <!-- <a href="#" class="pg-item prev">◀</a>
                                <a href="#" class="pg-item active">1</a>                               
                                <a href="#" class="pg-item next">▶</a> -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-center gap" style="margin-top: 3rem">
              <button class="gr-btn s-btn" @click="modal_update = true">수정</button>
              <div class="modal-wrap" v-if="modal_update == true">
                <div class="modal-bg"></div>
                <div class="modal2">
                  <div class="modalmain2">
                    <h4 class="flex-between">
                      횡단보도를&nbsp;<em style="color: blue">수정</em
                      >&nbsp;하시겠습니까?
                    </h4>
                    <div class="flex-center gap" style="margin-top: 3rem">
                      <button @click="crslkUpdate">확인</button>
                      <button @click="modal_update = false">취소</button>
                    </div>
                  </div>
                </div>
              </div>
              <button class="gr-btn s-btn" @click="modal_crosswalUpdate = false; modal_tab=true">취소</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
        <OpenLayers ref="open_layers" />
    </div>
    
    <div class="modal-wrap" v-if="modal_crosswalkOne == true">
      <div class="modal-bg"></div>
      <div class="modal_base" style="width:100rem;">
        <h2 class="flex-between">           
            <span>횡단보도 상세정보</span>
            <button
              type="button"
              class="gray-btn modal_base_close"
              @click="modal_crosswalkOne = false"
            >
              <img src="../../../resources/images/close.png" alt="" />
            </button>
          </h2>
        <div class="modal_base_body">
          <div class="flex-between">
            <div v-if="WTRMS_CAM1.file_name!=null" class="img" >무단횡단검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+WTRMS_CAM1.file_path+'/'+WTRMS_CAM1.file_name">
            </div>
            <div v-if="WTRMS_CAM2.file_name!=null" class="img" >무단횡단검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+WTRMS_CAM2.file_path+'/'+WTRMS_CAM2.file_name">
            </div>
            <div v-if="SIGNL_EXTN_CAM1.file_name!=null" class="img" >신호연장검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+SIGNL_EXTN_CAM1.file_path+'/'+SIGNL_EXTN_CAM1.file_name">
            </div>
            <div v-if="SIGNL_EXTN_CAM2.file_name!=null" class="img" >신호연장검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+SIGNL_EXTN_CAM2.file_path+'/'+SIGNL_EXTN_CAM2.file_name">
            </div>
            <div v-if="RITTRN_VHCLE_CAM.file_name!=null" class="img" >우회차량검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+RITTRN_VHCLE_CAM.file_path+'/'+RITTRN_VHCLE_CAM.file_name">
            </div>
          </div>
          <h3 class="modal_base_title">횡단보도 기본정보</h3>
           <div class="de_Search">
           <table class="troubleTable mrg_b_0" >     
            <colgroup>
              <col id="col1" style="width: 15%" />
              <col id="col2" style="width: 10%" />
              <col id="col3" style="width: 15%" />
              <col id="col4" style="width: 15%" />
              <col id="col5" style="width: 10%" />
              <col id="col6" style="width: 20%" />
              <!-- <col id="col6" style="width: 20%" /> -->
            </colgroup>
            <tbody>
              <tr>
                <th colspan="2">시/도</th>
                <td colspan="2">{{ crosswalk.sido_nm }}</td>
                <th colspan="2">시/군/구</th>
                <td colspan="2">{{ crosswalk.sigungu_nm }}</td>
              </tr>           
              <tr>
                <th colspan="2">행정동</th>
                <td colspan="2">{{ crosswalk.dong_nm }}</td>
                <th colspan="2">노드명</th>
                <td colspan="2">{{ crosswalk.node_name }}</td>
              </tr>     
              <tr>
                <th colspan="2">횡단보도명</th>
                <td colspan="2">{{ crosswalk.crslk_nm }}</td>   
                <th colspan="2">왕복차선</th>
                <td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>               
              </tr>     
              <tr>
                <th colspan="2">위도</th>
                <td colspan="2">{{ crosswalk.lat }}</td>
                <th colspan="2">경도</th>
                <td colspan="2">{{ crosswalk.lon }}</td>                 
              </tr>
              <tr>
                <th rowspan="3">설치된 검시장비</th>
                <th>무단횡단</th>
                <td
                  colspan="6"
                  v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn"
                >
                  설치
                </td>
                <td colspan="6" v-else>미설치</td>
              </tr>
              <tr>
                <th >신호연장</th>
                <td
                  colspan="6"
                  v-if="crosswalk.signl_extn_eqpmn_instl_yn"
                >
                  설치
                </td>
                <td colspan="7" v-else>미설치</td>
              </tr>
              <tr>
                <th>우회전차량</th>
                <td
                  colspan="6"
                  v-if="crosswalk.signl_extn_eqpmn_instl_yn"
                >
                  설치
                </td>
                <td colspan="6" v-else>미설치</td>
              </tr>            

              <!-- <tr>
                <td>우회전차량</td>
                <td colspan="2" v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn">
                  설치
                </td>
                <td colspan="2" v-else>미설치</td>
              </tr> -->                     
              <tr>
                  <th colspan="2">우회전차선유무</th>
                  <td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
                  <th colspan="2">우회전차선유형</th>
                  <td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
                </tr>   
                <tr>
                  <th colspan="2">등록자 ID</th>
                  <td colspan="2">{{crosswalk.rgtr_id}}</td>
                  <th colspan="2">등록일자</th>
                  <td colspan="2">{{ yyyymmdd(crosswalk.reg_dt) }}</td>
                </tr>
                <tr>
                  <th colspan="2">수정자 ID</th>
                  <td colspan="2">{{ crosswalk.mdfr_id}}</td>
                  <th colspan="2">수정일자</th>
                  <td colspan="2">{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
                </tr>
                <tr>
                  <th colspan="2">횡단보도 유지보수 담당자</th>
                  <td colspan="2">{{crosswalk.mngr_nm}}</td>
                </tr>
            </tbody>
          </table>
           </div>
           <br />
   
          <div class="flex-center gap">
            <button class="s-btn gr-btn" @click="editDetails">수정</button>
            <button class="s-btn gr-btn" @click="crslkDelete">삭제</button>
          </div>
          <br />
         
          <h3 class="modal_base_title">이벤트 발생정보</h3>           
          <button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="situationSearchPage(crosswalk.node_id, crosswalk.crslk_az, crosswalk.sigungu_cd, crosswalk.dong_cd)">상황발생 상세보기</button>
            <button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="errorSearchPage(crosswalk.node_id, crosswalk.crslk_az, crosswalk.sigungu_cd, crosswalk.dong_cd)">장애발생 상세보기</button>          
            <div class="de_Search">
              <table class="troubleTable mrg_b_0" >              
                <tbody>
                    <tr>
                      <th rowspan="4">금일 상황 발생</th>
                      <th >무단횡단</th>
                      <td colspan="4">
                        {{ crosswalk.jaywalkCount }}회
                      </td>
                    </tr>
                    <tr>
                      <th>신호연장</th>                     
                      <td>{{ crosswalk.signalCount }}회</td>
                    </tr>
                    <tr>
                      <th>차량위반</th>   
                      <td>{{ crosswalk.rightTurnCount }}회</td>
                    </tr>
                    <tr>
                      <th>금일 장애발생 수</th>
                      <td>{{ crosswalk.errorCount }}회</td>
                    </tr>
                  </tbody>
              </table>
          </div>
        </div>
      </div>
    </div>
      <!--<div class="mapSelectBox">         
          <div class="box">
            <select v-model="selectMap" >
              <option :value="mapList[0]">기본맵</option>
              <option :value="mapList[1]">컬러맵</option>
              <option :value="mapList[2]">나이트맵</option>
              <option :value="mapList[3]">포토맵</option>
            </select>         
        </div>       
      </div>-->
  </div>
</template>

<script>
import axios from "axios";
import MapPage from "../../component/MapPage.vue";
import OpenLayers from "../../component/OpenLayers.vue";
import {
  defaultLayer 
} from "../../component/OpenLayersMap.vue";
import { baseStyles } from "../../component/OpenLayersStyle.vue";
import DongSelectList from "../../component/dongSelectList.vue";
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import { transform } from "ol/proj";
import Overlay from 'ol/Overlay';
import COMMON_MAP from "../../component/OpenLayersNewMap.ts"

export default {
  data() {
    return {
      address: {
        //지역 설정
        dong_cd: "22030",
        siDo_dong_cd: "22",
        guGun_dong_cd: "22030",
        dong_dong_cd: null,
        node_id: null,
        node_name: null,
        zoomLevel: null,
        crslk_az: "0",
        coordinate: [],
        lat: null,
        lon: null,
        baseSource: "EPSG:5181",
      },

      //조건설정
      condition: {
        //체크박스(장비 설치 유무)
        signl_extn_eqpmn_instl_yn: false,
        wtrms_crosng_eqpmn_instl_yn: false,
        rittrn_vhcle_eqpmn_instl_yn: false,
        //무단횐단 검지 범위
        wtrms_crosng_detct_rate: "100",
        //왕복차선 정보
        rndtp_tfclne_info: "99",
        //우회전 차선 유무
        rittrn_tfclne_yn: null,
        //우회전 차선 유형
        rittrn_tfclne_ty: null,
      },
      managerListSearch: {
        currentPage: 1,
        perPage: 10,
        searchType: null,
        searchText: null,
        startDate: null,
        endDate: null,
      },
      managerInfo: {
        mngr_eml: null,
        mngr_nm: null,
        mngr_ogdp_info: null,
        mngr_telno: null,
        mntnce_mngr_id: null,
        reg_dt: null,
        rgtr_id: null,
      },

      crosswalk: {
        siDo_dong_cd: null,
        guGun_dong_cd: null,
        dong_dong_cd: null,
        crslk_az: null,
        node_id: null,
        dong_cd: null,
        crslk_nm: null,
        instl_ymd: null,
        reg_dt: null,
        rgtr_id: null,
        mdfcn_dt: null,
        mdfr_id: null,
        mntnce_mngr_id: null,
        rittrn_tfclne_yn: null,
        rittrn_tfclne_ty: null,
        rndtp_tfclne_info: null,
        wtrms_crosng_detct_rate: null,
        wtrms_crosng_eqpmn_instl_yn: null,
        signl_extn_eqpmn_instl_yn: null,
        rittrn_vhcle_eqpmn_instl_yn: null,
        lat: null,
        lon: null,
        sido_nm: null,
        sigungu_nm: null,
        dong_nm: null,
        node_name: null,
        mngr_nm: null,
      },

      managerList: [],
      managerListCount: 0,
      managerIdx: 0,

      siDoList: [],
      gunGuList: [],
      dongList: [],
      nodeList: [],
      crslkList: [],
      //현재 zoom
      now_zoom: null,

      zoom_status : 5,

      // 맵선택
   /*   selectMap : emapBaseLayer,
      mapList : [ emapBaseLayer,
                  emapColorLayer,
                  emapNightLayer,
                  emapsSkyLayer 
                ],*/

      //휠할때 마우스 위치를 포함하는 dong data
      wheelEventSiDo: null,
      wheelEventSiGunGu: null,
      wheelEventDong: null,
      wheelEventNode: null,

      clickState: false,
      modal_crosswalkOne: false,
      modal_crosswalUpdate: false,
      modal_managerSearch: false,
      modal_update: false,
      modal_tab:true,
      modal_mana:false,
      tabs: [
        {
          id: 1,
          title: "장애발생현황",
          content2: "This is the content for Tab 2",
        },
      ],
      activeTab: 1,
      items: [
        { id: 1, name: "무단횡단", isActive: false },
        { id: 2, name: "신호연장", isActive: false },
        { id: 3, name: "우회전 차량", isActive: false },
        { id: 4, name: "장애발생", isActive: false },
      ],
      file_info:[],
      RITTRN_VHCLE_CAM:{
        file_path:null,
        file_name:null,
      },
      WTRMS_CAM1:{
        file_path:null,
        file_name:null,
      },
      WTRMS_CAM2:{
        file_path:null,
        file_name:null,
      },
      SIGNL_EXTN_CAM1:{
        file_path:null,
        file_name:null,
      },
      SIGNL_EXTN_CAM2:{
        file_path:null,
        file_name:null,
      },
    };
  },
  components: {
    PaginationButton:PaginationButton,
    OpenLayers: OpenLayers,
    DongSelectList: DongSelectList,
  },
  methods: {
    //DongSelectList에서 dong_cd 받아오기
    setDongCd : function(value) {     
      this.address = value;
    },

    //시/도/군/구 Select 선택시 바로 위치 이동
    siDoGunGuSelectF: function (event) {
      //기존 layer 지우기
      this.$refs.open_layers.removeLayerAll();
      //기본 지도 layer 그리기 + 해당 위치로 이동
      this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map), event.target.value);
      this.$refs.open_layers.setZoom(this.address.zoomLevel);
      //polygon 그리기
      this.$refs.open_layers.addVectorLayerByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
      // 지역 중앙에 노드 + 이름 넣기
      this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl("/common/getDongsCenterAndChildNodeCntJson.json","nodeLayer","EPSG:5181",baseStyles["labelStyle"],"label",this.address.dong_cd);
    },

    //행정동 Select 선택시 바로 위치 이동
    dongSelectF: function (event) {
      //기존 layer 지우기
      this.$refs.open_layers.removeLayerAll();
      //기본 지도 layer 그리기 + 해당 위치로 이동
      this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map), event.target.value);
      this.$refs.open_layers.setZoom(this.address.zoomLevel);
      //polygon 그리기
      this.$refs.open_layers.addVectorLayerByUrl(
        "/common/getDongGeoJson.json",
        "multiPolygonLayer",
        "EPSG:5181",
        baseStyles["MultiPolygon"],
        "MultiPolygon",
        this.address.dong_cd
      );
      // 행정동에 포함된 노드 넣기
      this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl(
        "/common/getNodesGeoAndChildNodeCntJson.json",
        "nodeLayer",
        "EPSG:4326",
        baseStyles["labelStyle"],
        "label",
        this.address.dong_cd
      );
    },

    //노드 Select 선택시 바로 위치 이동
    nodeSelectF: function (event) {
      //기존 layer 지우기
      this.$refs.open_layers.removeLayerAll();
      //기본 지도 layer 그리기 + 해당 위치로 이동
      this.$refs.open_layers.setBaseMap(
        COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map),
        this.address.dong_cd,
        event.target.value
      );
      this.$refs.open_layers.setZoom(this.address.zoomLevel);
      //polygon 그리기
      this.$refs.open_layers.addVectorLayerByUrl(
        "/common/getNodeGeoJson.json",
        "multiPolygonLayer",
        "EPSG:4326",
        baseStyles["MultiPolygon"],
        "MultiPolygon",
        this.address.dong_cd,
        this.address.node_id
      );
      // 노드 횡단보도 그리기
      this.$refs.open_layers.addVectorLayerByUrl(
        "/common/getCrslksGeoJson.json",
        "crslkLayer",
        "EPSG:5181",
        baseStyles["labelStyle"],
        "label",
        this.address.dong_cd,
        this.address.node_id
      );

      // this.crslkSearchSelectList(this.address.node_id);
    },
    //노드(교차로) 받아오기
    findNodeUsingDongSelectList: function (dong_cd) {
      const vm = this;
      axios({
        url: "/node/findNodeUsingDongSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { dong_cd: dong_cd },
      })
        .then(function (response) {         
          vm.nodeList = response.data;
        })
        .catch(function (error) {
          console.log("findNodeUsingDongSelectList - error : ", error);
        });
    },

    //시/도 받아오기
    siDoSelectList: function () {
      const vm = this;
      axios({
        url: "/dong/siDoSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {},
      })
        .then(function (response) {        
          vm.siDoList = response.data;
        })
        .catch(function (error) {
          console.log("siDoSelectList - error : ", error);
        });
    },

    //군/구 받아오기
    gunGuSelect: function (dong_cd) {
      const vm = this;
      axios({
        url: "/dong/gunGuSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { dong_cd: dong_cd },
      })
        .then(function (response) {     
          vm.gunGuList = response.data;
        })
        .catch(function (error) {
          console.log("gunGuSelect - error : ", error);
        });
    },

    //행정동 받아오기
    dongSelectList: function (dong_cd) {
      const vm = this;
      axios({
        url: "/dong/dongSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { dong_cd: dong_cd },
      })
        .then(function (response) {
          vm.dongList = response.data;
        })
        .catch(function (error) {
          console.log("dongSelectList - error : ", error);
        });
    },

    //횡단보도 유지보수 관리자 목록 조회
    managerSelectList: function () {
      const vm = this;
      axios({
        url: "/managerSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.managerListSearch,
      }).then(function (response) {
        // console.log("managerSelectList - response : ", response.data);
        vm.managerListCount = response.data.managerListCount;
        vm.managerList = response.data.managerList;
        vm.managerIdx =
          vm.managerListCount -
          (vm.managerListSearch.currentPage - 1) * vm.managerList.length;
      })
      .catch(function (error) {
        console.log("managerSelectList - error : ", error);
        alert(
          "횡단보도 유지보수 관리자 목록 조회 오류, 관리자에게 문의해주세요."
        );
      });
    },
    managerSelect: function (managerInfo) {
      // console.log("managerInfo : ", managerInfo);
      this.crosswalk.mntnce_mngr_id = managerInfo.mntnce_mngr_id;
      this.crosswalk.mngr_nm=managerInfo.mngr_nm;
    },

    // 전화번호 '-' 추가 후 출력
    HyphenMinus: function (telno) {
      return COMMON_UTIL.HyphenMinus(telno);
    },

    childClick: function (prop, coordinate, layerCk,map) {
      if ( prop[0] != null && prop[0].values_ != null && prop[0].values_.dong_cd != null) {
        this.address.dong_cd = prop[0].values_.dong_cd;
      }
      if ( prop[0] != null && prop[0].values_ != null && prop[0].values_.node_id != null ) {
        this.address.node_id = prop[0].values_.node_id;
        this.address.node_name = prop[0].values_.node_name;
      }
      if (layerCk) {
        if (prop[0].layerName == "nodeLayer") {
          this.address.node_id=prop[0].id_;
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map), prop[0].id_);
          // this.$refs.open_layers.setZoom(17);
          // dong인지 node인지 확인 필요
          if (!prop[0].values_.node_id) {
            this.$refs.open_layers.addVectorLayerByUrl("/common/getDongGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", this.address.dong_cd );
            this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl( "/common/getNodesGeoAndChildNodeCntJson.json", "nodeLayer","EPSG:4326", baseStyles["labelStyle"], "label",  prop[0].id_, prop[0].id_ );
          } else {
            this.$refs.open_layers.addVectorLayerByUrl( "/common/getNodeGeoJson.json",  "multiPolygonLayer", "EPSG:4326", baseStyles["MultiPolygon"], "MultiPolygon", prop[0].id_, prop[0].id_);
            this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl( "/common/getCrslksGeoJson.json", "crslkLayer",  "EPSG:5181", baseStyles["labelStyle"], "label",  this.address.dong_cd,prop[0].id_);
          }
        } 
        else if (prop[0].layerName == "crslkLayer") {
          console.log("prop[0].values_ : ",prop[0].values_);
          this.RITTRN_VHCLE_CAM={
            file_path:null,
            file_name:null,
          };
          this.WTRMS_CAM1={
            file_path:null,
            file_name:null,
          }
          this.WTRMS_CAM2={
            file_path:null,
            file_name:null,
          }
          this.SIGNL_EXTN_CAM1={
            file_path:null,
            file_name:null,
          }
          this.SIGNL_EXTN_CAM2={
            file_path:null,
            file_name:null,
          },         
          this.modal_crosswalkOne = true;
          this.crosswalkSelectOne(prop[0].values_);
        }
        else if (prop[0].layerName == "troblLayer"){
          this.modal_mana=true;
          let container = document.createElement('div');
          container.classList.add('ol-popup-custom');
          let content = document.createElement('div');
          content.classList.add('popup-content');
          container.appendChild(content);
          document.body.appendChild(container);
          var coordinate = coordinate; // 클릭한 지도 좌표
          content.innerHTML = this.createPopup();
          
          // 
          var overlay = new Overlay({
            element: container,
          });
          map.addOverlay(overlay);
          overlay.setPosition(coordinate);
        }
      }
      if (this.clickState) {
        this.address.coordinate = coordinate;
        // console.log(" this.address.coordinate : ", this.address.coordinate);
        // console.log(" this.address.coordinate.lat 경도 : ", this.address.coordinate[0]);
        // console.log(" this.address.coordinate.lon 위도 : ", this.address.coordinate[1]);
        // [this.crosswalk.lon,this.crosswalk./lat]=transform([this.address.coordinate[0],this.address.coordinate[1]],"EPSG:5181","EPSG:4326");
        this.crosswalk.lon=this.address.coordinate[0];
        this.crosswalk.lat=this.address.coordinate[1];

        // 레이어 삭제
        this.$refs.open_layers.removeLayer("point1");
        // Icon 그리기
        this.$refs.open_layers.createIcon(
          coordinate[1],
          coordinate[0],
          "/client/resources/images/icon/fin2.png",
          0.3,
          "point1",
          "EPSG:5181"
        );
        this.clickState = false;
      } else {
        this.$refs.open_layers.removeLayer("point1");
        this.address.coordinate = null;
      }
    },
    createPopup: function () {
      var content =`<table class="htmlTable" v-show="modal_mana == true">
          <thead>
            <td colspan="4" class="fon">유지보수 담당자 정보</td>
          </thead>
          <tbody>
            <tr>
              <th class="fon2">장애명</th>
              <td>오른쪽 무단횡단 카메라</td>
            </tr>
            <tr>
              <th class="fon2">이름</th>
              <td>김성훈</td>
            </tr>
            <tr>
              <th class="fon2">연락처</th>
              <td>010-2158-4427</td>
            </tr>
            <tr>
              <th class="fon2">이메일</th>
              <td>taken@naver.com</td>
            </tr>
            <tr>
              <th class="fon2">소속정보</th>
              <td>테이큰</td>
            </tr>
          </tbody>
        </table>`
        // '<table class="htmlTable">' +
        // "<thead>" +
        // '<td colspan="4" class="fon">유지보수 담당자 정보</td>' +
        // "</thead>" +
        // "<tbody>" +
        // "<tr>" +
        // '<th class="fon2">장애명</th>' +
        // "<td></td>" +
        // "</tr>" +
        // "<tr>" +
        // '<th class="fon2">이름</th>' +
        // "<td>sdasd</td>" +
        // "</tr>" +
        // "<tr>" +
        // ' <th class="fon2">연락처</th>' +
        // "<td>sdasd</td>" +
        // "</tr>" +
        // "<tr>" +
        // '<th class="fon2">이메일</th>' +
        // "<td>sdasd</td>" +
        // "</tr>" +
        // "<tr>" +
        // '<th class="fon2">소속정보</th>' +
        // "<td>sdasd</td>" +
        // "</tr>" +
        // "</tbody>" +
        // "</table>";
        return content;
    },
    childMoveEnd(zoom) {     
      this.now_zoom = zoom;
      //시/도 레이어로 수정
      if (this.wheelEventSiDo == null) return;
      if (zoom <= 13) {    
        if(this.zoom_status != 1 ){
          this.$refs.open_layers.removeLayer("crslkLayer");
          this.$refs.open_layers.removeLayer("multiPolygonLayer");
          this.$refs.open_layers.removeLayer("nodeLayer");
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getDongsPolygonGeoJson.json",
            "multiPolygonLayer",
            "EPSG:5181",
            baseStyles["MultiPolygon"],
            "MultiPolygon",
            this.wheelEventSiDo
          );
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getDongsCenterJson.json",
            "nodeLayer",
            "EPSG:5181",
            baseStyles["labelStyle"],
            "label",
            this.wheelEventSiDo
          );
        }
        this.zoom_status = 1;
      }
      //시/군/구 레이어로 수정
      else if (zoom <= 14.5) {
      
        if(this.zoom_status != 2 ){
          this.$refs.open_layers.removeLayer("crslkLayer");
          this.$refs.open_layers.removeLayer("multiPolygonLayer");
          this.$refs.open_layers.removeLayer("nodeLayer");
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getDongsGeoJson.json",
            "multiPolygonLayer",
            "EPSG:5181",
            baseStyles["MultiPolygon"],
            "MultiPolygon",
            this.wheelEventSiGunGu
          );
          this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl(
            "/common/getDongsCenterAndChildNodeCntJson.json",
            "nodeLayer",
            "EPSG:5181",
            baseStyles["labelStyle"],
            "label",
            this.wheelEventSiGunGu
          );
        }
        this.zoom_status = 2;
      }
      //행정동
      else if (zoom <= 17.5) {
       
        if(this.zoom_status != 2 ){
          this.$refs.open_layers.removeLayer("crslkLayer");
          this.$refs.open_layers.removeLayer("multiPolygonLayer");
          this.$refs.open_layers.removeLayer("nodeLayer");
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getDongsPolygonGeoJson.json",
            "multiPolygonLayer",
            "EPSG:5181",
            baseStyles["MultiPolygon"],
            "MultiPolygon",
            this.wheelEventDong
          );
          this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl(
            "/common/getNodesGeoAndChildNodeCntJson.json",
            "nodeLayer",
            "EPSG:4326",
            baseStyles["labelStyle"],
            "label",
            this.wheelEventDong
          );
        }
        this.zoom_status = 3;
      }
      //노드
      else if (zoom <= 18) {
        
        if(this.zoom_status != 4 ){
          this.$refs.open_layers.removeLayer("crslkLayer");
          this.$refs.open_layers.removeLayer("multiPolygonLayer");
          this.$refs.open_layers.removeLayer("nodeLayer");
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getDongsPolygonGeoJson.json",
            "multiPolygonLayer",
            "EPSG:5181",
            baseStyles["MultiPolygon"],
            "MultiPolygon",
            this.wheelEventDong
          );
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getCrslksGeoJson.json",
            "crslkLayer",
            "EPSG:5181",
            baseStyles["labelStyle"],
            "label",
            this.wheelEventDong,
            this.wheelEventNode
          );
        }
        this.zoom_status = 4;
      }
      //횡단보도
      else if( zoom > 18){
      //가장 가까운 노드로 판단 
      if(this.zoom_status != 5 ){
        this.$refs.open_layers.removeLayer("crslkLayer");
          this.$refs.open_layers.removeLayer("multiPolygonLayer");
          this.$refs.open_layers.removeLayer("nodeLayer");
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
            "/common/getCrslksGeoJson.json",
            "crslkLayer",
            "EPSG:5181",
            baseStyles["labelStyle"],
            "label",
            this.wheelEventDong,
            this.wheelEventNode
          );
        }
      this.zoom_status = 5;
      }
    },

    //좌표로 dong_cd찾기
    childWheel(coordinate) {     
      const vm = this;
    
      if (this.now_zoom <= 18) {      
        axios({
          url: "/dong/getDongCdUsingCoordinates.json",
          method: "post",
          headers: {
            "Content-Type": "application/json; charset=UTF-8",
          },
          data: { lat: coordinate[0], lon: coordinate[1] },
        })
          .then(function (response) {           
            for (var i = 0; i < response.data.length; i++) {
              if (response.data[i].layer == "sido") {
                vm.wheelEventSiDo = response.data[i].dong_cd;
              } else if (response.data[i].layer == "sigungu") {
                vm.wheelEventSiGunGu = response.data[i].dong_cd;
              } else {
                vm.wheelEventDong = response.data[i].dong_cd;
                vm.findNodeUsingDongSelectList(vm.wheelEventDong);
              }
            }
          })
          .catch(function (error) {
            console.log("getDongCdUsingCoordinates - error : ", error);
            alert("좌표로 dong_cd 조회 오류, 관리자에게 문의해주세요.");
          });
      } else {        
        var min = 9999999999;
        var minIndex = null;
        coordinate = transform(
          [coordinate[0], coordinate[1]],
          "EPSG:5181",
          "EPSG:4326"
        );    
        for (var i = 0; i < this.nodeList.length; i++) {            
          var lat = JSON.parse(this.nodeList[i].geometry).coordinates[0];
          var lon = JSON.parse(this.nodeList[i].geometry).coordinates[1];
          var dLat = this.toRadians(coordinate[0] - lat);
          var dLon = this.toRadians(coordinate[1] - lon);
          var a =
            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(this.toRadians(lat)) *
              Math.cos(this.toRadians(coordinate[0])) *
              Math.sin(dLon / 2) *
              Math.sin(dLon / 2);
          var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
          var dis = 6371 * c;
          if (min > dis) {
            min = dis;
            minIndex = i;
          }
        }

        if (
          this.nodeList.length != 0 &&
          this.nodeList[minIndex].node_id != null
        ) {
          this.wheelEventNode = this.nodeList[minIndex].node_id;    
          this.address.node_id = this.nodeList[minIndex].node_id; 
        }
      }
    },
    

    //횡단보도 이미지 조회
    crosswalkImgSelect: function (item) {
      const vm = this;
      // console.log("crosswalkSelectOne item : ",item);
      axios({
        url: "/statusControl/crosswalkImgSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { node_id: vm.address.node_id, crslk_az: item.crslk_az },
      }).then(function (response) {  
          console.log("crosswalkImgSelectList response : ",response.data);
          let cnt1=0;
          let cnt2=0;
          for( var i=0 ;  i<response.data.length ; i++){
            console.log("for response i : ",i," :",response.data[i]);
            //우회전 카메라
            if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-RITTRN_VHCLE'){
              vm.RITTRN_VHCLE_CAM.file_name=response.data[i].file_nm;
              vm.RITTRN_VHCLE_CAM.file_path=response.data[i].real_file_nm;
            }
            //무단횡단 카메라
            if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-WTRMS'){
              console.log("for ck i : ",i," :",response.data[i]);
              if(cnt1==0){
                vm.WTRMS_CAM1.file_name=response.data[i].file_nm;
                vm.WTRMS_CAM1.file_path=response.data[i].real_file_nm;
              }
              else{
                vm.WTRMS_CAM2.file_name=response.data[i].file_nm;
                vm.WTRMS_CAM2.file_path=response.data[i].real_file_nm;
              }
              cnt1++;
              console.log("WTRMS_CAM1 i : ",i," :",vm.WTRMS_CAM1);
              console.log("WTRMS_CAM2 i : ",i," :",vm.WTRMS_CAM2);
            }
            //신호연장 카메라
            if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-SIGNL_EXTN'){
              if(cnt2==0){
                vm.SIGNL_EXTN_CAM1.file_name=response.data[i].file_nm;
                vm.SIGNL_EXTN_CAM1.file_path=response.data[i].real_file_nm;
              }
              else{
                vm.SIGNL_EXTN_CAM2.file_name=response.data[i].file_nm;
                vm.SIGNL_EXTN_CAM2.file_path=response.data[i].real_file_nm;
              }
              cnt2++;
            }
          } 
          vm.file_info = response.data;
        })
        .catch(function (error) {
          console.log("crosswalkSelectOne - error : ", error);
          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
        });
    },

    //횡단보도 상세조회
    crosswalkSelectOne: function (item) {
      const vm = this;
      // console.log("crosswalkSelectOne item : ",item);
      axios({
        url: "/statusControl/crosswalkSelectOne.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { node_id: vm.address.node_id, crslk_az: item.crslk_az },
      })
        .then(function (response) {       
          vm.crosswalk = response.data;
          vm.crosswalk.siDo_dong_cd = response.data.dong_cd.slice(0, 2);
          vm.crosswalk.guGun_dong_cd = response.data.dong_cd.slice(0, 5);
          vm.crosswalk.dong_dong_cd = response.data.dong_cd;         
          // let coordinate = transform(
          //   [response.data.lon, response.data.lat],
          //   "EPSG:4326",
          //   "EPSG:5181"
          // );
          // vm.crosswalk.lat = coordinate[0];
          // vm.crosswalk.lon = coordinate[1];
          vm.crosswalk.lat = response.data.lat;
          vm.crosswalk.lon = response.data.lon;
          if (response.data.rittrn_tfclne_yn == "y") {
            vm.crosswalk.rittrn_tfclne_yn = true;
          } else {
            vm.crosswalk.rittrn_tfclne_yn = false;
          }
          if (response.data.rittrn_vhcle_eqpmn_instl_yn == "y") {
            vm.crosswalk.rittrn_vhcle_eqpmn_instl_yn = true;
          } else {
            vm.crosswalk.rittrn_vhcle_eqpmn_instl_yn = false;
          }
          if (response.data.signl_extn_eqpmn_instl_yn == "y") {
            vm.crosswalk.signl_extn_eqpmn_instl_yn = true;
          } else {
            vm.crosswalk.signl_extn_eqpmn_instl_yn = false;
          }
          if (response.data.wtrms_crosng_eqpmn_instl_yn == "y") {
            vm.crosswalk.wtrms_crosng_eqpmn_instl_yn = true;
          } else {
            vm.crosswalk.wtrms_crosng_eqpmn_instl_yn = false;
          }
          vm.modal_crosswalkOne = true;
          vm.crosswalkImgSelect(item);

        })
        .catch(function (error) {
          console.log("crosswalkSelectOne - error : ", error);
          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
        });
    },

    //횡단보도 업데이트
    crslkUpdate() {
      const vm = this;

      axios({
        url: "/management/crslkUpdate.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.crosswalk,
      })
        .then(function (response) {         
        })
        .catch(function (error) {
          // console.log("crslkUpdate - error : ", error);
          alert("횡단보도 업데이트 오류, 관리자에게 문의해주세요.");
        });
      this.modal_update = false;
    },

    //횡단보도 삭제
    crslkDelete() {
      const vm = this;

      axios({
        url: "/management/crslkDelete.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.crosswalk,
      })
        .then(function (response) {         
        })
        .catch(function (error) {
          console.log("crslkDelete - error : ", error);
          alert("횡단보도 삭제 오류, 관리자에게 문의해주세요.");
        });
      this.modal_update = false;
    },
    //장애 발생 버튼
    trobl_ocrn_btn(){
      //해당 위치로 이동
     
    },
    troblCcrnLocation1(){
      //1520002712 달서
      //1520003902 이현
      this.$refs.open_layers.removeLayer('crslkLayer');
      this.$refs.open_layers.removeLayer('multPolygonLayer');
      this.$refs.open_layers.removeLayer('nodeLayer');
      this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, '1520002712');

    },
    troblCcrnLocation2(){
      this.$refs.open_layers.removeLayer('crslkLayer');
      this.$refs.open_layers.removeLayer('multPolygonLayer');
      this.$refs.open_layers.removeLayer('nodeLayer');
      this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, '1520002712');
    },
    troblCcrnLocation3(){
      this.$refs.open_layers.removeLayer('crslkLayer');
      this.$refs.open_layers.removeLayer('multPolygonLayer');
      this.$refs.open_layers.removeLayer('nodeLayer');
      this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, '1520003902');
    },
    //횡단보도 상세정보 수정 버튼
    editDetails() {
      this.siDoSelectList();
      this.gunGuSelect(this.crosswalk.siDo_dong_cd);
      this.dongSelectList(this.crosswalk.guGun_dong_cd);
      this.findNodeUsingDongSelectList(this.crosswalk.dong_dong_cd);
      this.managerSelectList();
      this.modal_crosswalkOne = false;
      this.modal_crosswalUpdate = true;
      this.modal_tab=false;
    },
    toRadians(degrees) {
      return (degrees * Math.PI) / 180;
    },
    changeTab(tabId) {
      this.activeTab = tabId;
    },
    toggleActive(item) {
      item.isActive = !item.isActive;
    },
    //날짜 시,분,초 자르기
    yyyymmdd: function (date) {
      return COMMON_UTIL.yyyymmdd(date);
    },
    clickStateChange() {
      this.clickState = true;
    },
    situationSearchPage: function(node_id, crslk_az, sigungu_cd, dong_cd) {
      this.$router.push({ path: '/SituationSearch.page', query: { 'node_id': node_id, 'crslk_az': crslk_az, 'sigungu_cd': sigungu_cd,'dong_cd': dong_cd}})
    },
    errorSearchPage: function(node_id, crslk_az, sigungu_cd, dong_cd) {
      this.$router.push({ path: '/ErrorSearch.page', query: { 'node_id': node_id, 'crslk_az': crslk_az, 'sigungu_cd': sigungu_cd, 'dong_cd': dong_cd}})
    },
  },
  watch: {
    modal_crosswalkOne: function (newValue, oldValue) { 
    },
    nodeList: function (newValue, oldValue) {   
    },
    selectMap : function(newValue, oldValue) {     
        this.$refs.open_layers.setBaseMap(newValue);     
    },

  },
  computed: {},
  mounted() {     
    console.log(COMMON_MAP.API_KEY);
    this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map));
    if(this.$route.query.route === 'Y') {
      this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.$route.query.dong_cd, this.$route.query.node_id);
      // this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl("/common/getDongsCenterAndChildNodeCntJson.json","nodeLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.$route.query.dong_cd, this.$route.query.node_id);
    } else {
      this.$refs.open_layers.addVectorLayerByUrl( "/common/getDongsGeoJson.json","multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", this.address.dong_cd);
      this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl("/common/getDongsCenterAndChildNodeCntJson.json","nodeLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.address.dong_cd);
    }
    // this.$refs.open_layers.dumpTroblLayer("/common/getDongsCenterAndChildNodeCntJson.json","troblLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.address.dong_cd);
  },
};
</script>
<style scoped>
.tab-buttons .ulbox {
  height: calc(100% - 6rem);
  overflow: scroll;
  overflow-x: hidden;
}
.ulbox ul {
  height: 30rem;
}
.ulbox ul li p{font-size: 13px;}
.fon {
  color: white;
}
.fon2 {
  background-color: #31a257;
  color: white;
}
.co2 {
  background-color: #13833b;
}
.co3 {
  background-color: #31a257;
}
.co1 {
  background-color: rgb(244, 244, 244);
}
#col1 {
  background-color: #13833b;
  color: #ffffff;
}
#col2 {
  background-color: #ffffff;
}
#col3 {
  background-color: #ffffff;
}
#col4 {
  background-color: #13833b;
  color: #ffffff;
}
.grid {
  padding: 1rem;
  gap: 1rem;
}
.img {
  height: 15rem;
  border: 1px solid rgba(92, 92, 92, 0.516);
  line-height: 4rem;
  width: 200px;
}
label {
  
    /* width: max-content; */
    text-align: left;
    line-height: 3rem;

}
.search .box {
  padding: 1rem 2rem;
}
.search .box select{width: -webkit-fill-available;}
.search input[type="text"] {
  /* width: 19rem; */
}
.box{}
.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;
}
h2 {
  background: #50ba8a;
  text-align: center;
  color: #fff;
  padding: 1.6rem 0;
}
.top p {
  font-size: 15px;
}
.top ul {
  padding: 1rem 0;
}
.top li {
  width: calc(100% / 6);
  text-align: center;
}
.top h3 {
  font-size: 20px;
}
.wrap {
  z-index: 100;
  top: 0;
  height: 865px;
}
.left {
  background: #fff;
}
.right {
  width: -webkit-fill-available;
}
.search .box button img{width: 20px;}
.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}
table {
  width: 90%;
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto;
}

th,
td {
  border-left: none;
  border-right: none;
}

table th {
  padding: 15px 0;
  color: #fff;
  background-color: #13833b;
}

table td {
  padding: 10px 0;
  border-bottom: 1px solid #e5e5dd;
}

table thead tr {
  background-color: #f7f6f6;
}
.modal2 {
  padding: 3rem;
}
.modal2 h4 {
  font-size: 2rem;
}
.modal {
  width: 100rem;
}
.modalmain {
  max-height: 70rem;
  overflow: scroll;
  overflow-x: hidden;
}
.modalmain select {
  width: max-content;
}
.modalmain input[type="text"] {
  width: inherit;
}
.modalmain table thead {
  background: #f7f6f6;
}
.modalmain table td {
  border: 1px solid #eee;
}
.modal h2 {
  background: #018b4d;
  font-size: 3rem;
  padding: 1.5rem;
  color: #ffffff;
}
.modal-bg h2 {
  background: #e5e5dd;
  font-size: 2rem;
  padding: 1rem;
}
.modal h3 {
  font-size: 1.8rem;
  border-bottom: 1px solid #eee;
  padding: 1rem 0 0.2rem 0;
}
.modal h4 {
  font-size: 1.6rem;
  font-weight: 100;
  padding: 0.2rem 0 1rem 0;
}
.modal h2 button {
  border: 0;
  background: none;
  height: 30px;
  cursor: pointer;
  width: fit-content;
}
.modal-bg button {
  border: 0;
  background: none;
  height: 30px;
  cursor: pointer;
}
.modal button img {
  width: 25px;
}
.search-btn{padding: 1rem 2rem;}

.ol-popup-custom {
    padding: 0;
    margin: 0;
    pointer-events: none;
    position: absolute;
    background-color: white;
    filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.6));
    border: 1px solid black;
    width: 90px;
    left: -45px; /* 위치를 조정, -width의 절반값 */
    height: 24px;
    bottom: -12px; /* 위치를 조정, -height의 절반값 */
    box-sizing: border-box;
    overflow: hidden;
}
.popup-content {
   position: relative;
   animation-duration: 1s;
   animation-name: slidein;
   animation-direction: alternate;
   animation-iteration-count: infinite;
   box-sizing: border-box;
   line-height: 100%;
}
.popup-content > span {
    display: inline-block;
    line-height: 100%;
    width: 100%;
    font-size:10px;
    font-weight: bold;
    box-sizing: border-box;
}
</style>
