<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">
            <h2>횡단보도 등록</h2>
  
            <div class="box">
              <div class="flex-between m-b" id="siDoHiddenCk">
                <label for="">시/도</label>
                <select name="siDoSelectList" id="siDoSelectList" v-model="address['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="flex-between m-b" id="gunGuHiddenCk">
                <label for="">시/군/구</label>
                <select name="gunGuSelectList" id="gunGuSelectList" v-model="address['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="flex-between m-b" id="dongHiddenCk">
                <label for="">행정동</label>
                <select name="dongSelectList" id="dongSelectList" v-model="address['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="flex-between m-b" id="nodeHiddenCk">
                <label for="">교차로</label>
                <select name="nodeSelectList" id="nodeSelectList" v-model="address['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="flex-between m-b" id="azimuthHiddenCk">
                <label for="">방위각</label>
                <select name="azimutSelectList" id="azimutSelectList" v-model="address['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 >
                <div class="flex-between gap m-b " style="margin-top: 2rem;">
                  <label for="" class="m-r">횡단보도 좌표</label><button class="s-btn" @click="clickStateChange()">좌표선택</button>
                </div>
                <div class="br-ver m-b" style="margin-bottom:1.5rem;"></div>
                <div class="flex-between gap">
                  <div class="flex m-b gap">
                    <label class="m-r">위도</label>
                    <input class="text-input" style="width: 9rem" type="text" name="" id="" placeholder="00.0000"
                      v-model="address.coordinate[1]" />
                  </div>
                  <div class="flex m-b gap">
                    <label class="m-r">경도</label>
                    <input class="text-input" style="width: 9rem" type="text" name="" id="" placeholder="00.0000"
                      v-model="address.coordinate[0]" />
                  </div>
                </div>
              </div>
              <div class="">             
                <div class="flex-between gap m-b " style="margin-top: 1.5rem;">
                  <label for="" class="m-r">지원서비스 선택</label>
                </div>
                <div class="br-ver m-b"></div>
                <div class="flex-between m-b" style="margin-bottom:1.5rem;">
                  <input class="m-r" type="checkbox" v-model="condition.wtrms_crosng_eqpmn_instl_yn" /><label for="">무단횡단 검지</label>
                  <input class="m-r" type="checkbox" v-model="condition.signl_extn_eqpmn_instl_yn" /><label for="">신호연장 알림</label>                 
                </div>
                 <div class="flex-between m-b" style="margin-bottom:1.5rem;">
                   <input class="m-r" type="checkbox" v-model="condition.rittrn_vhcle_eqpmn_instl_yn" /><label for="">우회전 차량 안전 메세지 전송</label>
                 </div> 
                <div class="bottom">
                  <!--<div class="flex-between m-b gap">
                    <label class="gap">무단횡단 검지 범위 : </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-between m-b gap">
                    <label class="gap">왕복차선 정보 : </label>
                    <select name="" id="" v-model="condition.rndtp_tfclne_info">
                      <option :value="99" disabled> 왕복 차선 정보 </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-between m-b gap">
                    <label class="gap">우회전 차선 유무 : </label>
                    <select style="" name="" id="" v-model="condition.rittrn_tfclne_yn">
                      <option :value="null" disabled>우회전 차선 유무</option>
                      <option :value=true>있음</option>
                      <option :value=false>없음</option>
                    </select>
                  </div>
                  <div class="flex-between m-b gap">
                    <label class="gap">우회전 차선 유형 : </label>                  
                    <select style="" name="" id="" v-model="condition.rittrn_tfclne_ty">
                      <option :value="null" disabled>우회전 차선 유형</option>
                      <option :value='직각'>직각</option>
                      <option :value='곡선'>곡선</option>
                    </select>
                  </div>
                   <div class="flex-between gap m-b " style="margin-top: 2rem;">
                  <label for="" class="m-r">횡단보도 관리자</label>
                  </div>
                  <div class="br-ver m-b"></div>
                  <div class="flex-between m-b gap">                  
                    <div class="flex gap">
                      <input class="text-input" type="text" name="" id="" placeholder="" v-model="managerInfo.mngr_nm" style="width:100% !important">
                      <button @click="modal_managerSearch = true" class="s-btn gr-btn" style="width: 20rem;">검색</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" @click="modal_insert = true">등록</button>
                <div class="modal-wrap" v-if="modal_insert == 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="crslkInsert">확인</button>
                        <button @click="modal_insert = false">취소</button>
                      </div>
                    </div>
                  </div>
                </div>
                <button class="gr-btn">취소</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- <img class="icon crosswalk" src="../../../resources/images/crosswalk.png" alt="">
        <img class="icon warning" src="../../../resources/images/warning.png" alt=""> -->
          <OpenLayers ref="open_layers" />
      </div>
    </div>
</template>

<script>

import axios from 'axios';
import MapPage from "../../component/MapPage.vue";
import OpenLayers from "../../component/OpenLayers.vue";
import {
  naverBaseLayer,
  vworldBaseLayer,
  vworldGrayLayer,
  vworldMidnightLayer,
  vworldHybridLayer,
  vworldSatelliteLayer,
} 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";

var freeBus = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "popupContent": "18th & California Light Rail Stop",
        "data": 123
      },
      "geometry": {
        "type": "Point",
        "coordinates": [126.9757184, 37.564388]
      }
    }, {
      "type": "Feature",
      "properties": {
        "popupContent": "20th & Welton Light Rail Stop",
        "data": 456
      },
      "geometry": {
        "type": "Point",
        "coordinates": [124.9748523, 37.5796212]
      }
    }
  ]
};

export default {
  data() {
    return {
      showSlide: false,
      slideText: '횡단보도 등록',
      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,
      },
      managerList: [],
      managerListCount: 0,
      managerIdx: 0,

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

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

      clickState: false,
      modal_managerSearch: false,
      modal_insert: false,
      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,
      items: [
        { id: 1, name: "무단횡단", isActive: false },
        { id: 2, name: "신호연장", isActive: false },
        { id: 3, name: "우회전 차량", isActive: false },
        { id: 4, name: "장애발생", isActive: false },
      ],
    };
  },
  components: {
    PaginationButton:PaginationButton,
    OpenLayers: OpenLayers,
    DongSelectList: DongSelectList,
  },
  methods: {
    toggleSlide() {
      if (this.showSlide) {
        this.slideText = "횡단보도 등록";
      } else {
        this.slideText = "창닫기";
      }
      this.showSlide = !this.showSlide;
    },
    changeTab(tabId) {
      point_lat
      this.activeTab = tabId;
    },
    toggleActive(item) {
      item.isActive = !item.isActive;
    },

    //시/도 받아오기
    siDoSelectList: function () {
      const vm = this;
      axios({
        url: '/dong/siDoSelectList.json',
        method: 'post',
        headers: {
          'Content-Type': "application/json; charset=UTF-8",
        },
        data: {}
      }).then(function (response) {
        // console.log("siDoSelectList - response : ", response.data);
        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) {
        // console.log("gunGuSelect - response : ", response.data);
        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) {
        // console.log("dongSelectList - response : ", response.data);
        vm.dongList = response.data;
      }).catch(function (error) {
        console.log("dongSelectList - error : ", error);
      });
    },

    //노드(교차로) 받아오기
    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) {
        // console.log("findNodeUsingDongSelectList - response : ", response.data);
        vm.nodeList = response.data;
      }).catch(function (error) {
        console.log("findNodeUsingDongSelectList - error : ", error);
      });
    },

    //횡단보도 등록
    crslkInsert: function () {
      const vm = this;
      axios({
        url: "/management/crslkInsert.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { "address": vm.address, "condition": vm.condition, "managerInfo": vm.managerInfo },
      })
        .then(function (response) {
          // console.log("crslkInsert - response : ", response.data);
          vm.modal_insert = false;
        })
        .catch(function (error) {
          console.log("crslkInsert - error : ", error);
          alert(
            "횡단보도 등록 오류, 관리자에게 문의해주세요."
          );
        });
    },

    //횡단보도 유지보수 관리자 목록 조회
    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) {
      this.managerInfo = managerInfo;
    },

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

    //날짜 시,분,초 자르기
    yyyymmdd: function (date) {
      return COMMON_UTIL.yyyymmdd(date);
    },

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

    //시/도/군/구 Select 선택시 바로 위치 이동
    siDoGunGuSelectF: function (event) {
      //기존 layer 지우기
      this.$refs.open_layers.removeLayerAll();
      //기본 지도 layer 그리기 + 해당 위치로 이동
      this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
      // this.$refs.open_layers.setZoom(this.address.zoomLevel);

      // 지역 중앙에 노드 + 이름 넣기
      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd);
      //polygon 그리기
      this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
    },

    //행정동 Select 선택시 바로 위치 이동
    dongSelectF: function (event) {
      //기존 layer 지우기
      this.$refs.open_layers.removeLayerAll();
      //기본 지도 layer 그리기 + 해당 위치로 이동
      this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
      // this.$refs.open_layers.setZoom(this.address.zoomLevel);

      // 행정동에 포함된 노드 넣기
      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodesGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle'], 'label', this.address.dong_cd);
      //polygon 그리기
      this.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
    },

    //노드 Select 선택시 바로 위치 이동 횡단보도 노드 
    nodeSelectF: function (event) {
      //기존 layer 지우기
      this.$refs.open_layers.removeLayerAll();
      //기본 지도 layer 그리기 + 해당 위치로 이동
      this.$refs.open_layers.setBaseMap(vworldBaseLayer, this.address.dong_cd, event.target.value);
      // this.$refs.open_layers.setZoom(this.address.zoomLevel);
      //polygon 그리기
      this.$refs.open_layers.addVectorLayerByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2', 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);
    },

    childClick: function (prop, coordinate, layerCk) {
      // console.log("childClick coordinate : ", coordinate);
      // console.log("childClick prop : ", prop[0]);

      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) {
        // console.log("childClick prop.layerName : ", prop[0].layerName);
        if (prop[0].layerName == "nodeLayer") {
          this.$refs.open_layers.removeLayer('multPolygonLayer');
          this.$refs.open_layers.removeLayer('nodeLayer');
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, 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', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', prop[0].id_, prop[0].id_);
            this.$refs.open_layers.addVectorLayerByUrl('/common/getNodesGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle'], 'label', prop[0].id_, prop[0].id_);
          }
          else {
            this.$refs.open_layers.addVectorLayerByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2', 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_);
          }

          // this.$refs.open_layers.setZoom(18);
        }

      }
      if (this.clickState) {
        
        this.address.coordinate = transform(coordinate,"EPSG:5181","EPSG:4326");
        // console.log("prop : ", prop);
        // console.log("coordinate : ", coordinate);
        // 레이어 삭제
        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[0] = null;
      //   this.address.coordinate[1] = null;
      // }
    },

    //좌표로 dong_cd찾기
    childWheel(coordinate) {
      // console.log("childWheel check : ", 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) {
            // console.log("getDongCdUsingCoordinates - response : ", response.data);
            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.address.dong_cd = 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");
        // console.log("transform coordinate : ", coordinate);
        // console.log("this.nodeList : ", this.nodeList);

        for (var i = 0; i < this.nodeList.length; i++) {
          // console.log("this.nodeList[i].geom : ", JSON.parse(this.nodeList[i].geometry).coordinates);
          // console.log("this.nodeList[i].node_id : ", this.nodeList[i].node_id);
          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;
          // console.log(" this.wheelEventNode : ", this.wheelEventNode);
          this.address.node_id = this.nodeList[minIndex].node_id;
          this.address.node_name = this.nodeList[minIndex].node_name;

        }
      }
      // console.log(" wheel address : ", this.address);
    },

    toRadians(degrees) {
      return (degrees * Math.PI) / 180;
    },

    childMoveEnd(zoom) {
      // console.log("zoom : ", zoom);
      this.now_zoom = zoom;
      //시/도 레이어로 수정
      if (this.wheelEventSiDo == null) return;
      if (zoom <= 13) {
        this.$refs.open_layers.removeLayer('crslkLayer');
        this.$refs.open_layers.removeLayer('multPolygonLayer');
        this.$refs.open_layers.removeLayer('nodeLayer');
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsPolygonGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.wheelEventSiDo);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventSiDo);
      }
      //시/군/구 레이어로 수정
      else if (zoom <= 14.5) {
        this.$refs.open_layers.removeLayer('crslkLayer');
        this.$refs.open_layers.removeLayer('multPolygonLayer');
        this.$refs.open_layers.removeLayer('nodeLayer');
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsPolygonGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.wheelEventSiGunGu);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventSiGunGu);
      }
      //행정동
      else if (zoom <= 17.5) {
        this.$refs.open_layers.removeLayer('crslkLayer');
        this.$refs.open_layers.removeLayer('multPolygonLayer');
        this.$refs.open_layers.removeLayer('nodeLayer');
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getDongsPolygonGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.wheelEventDong);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodesGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle'], 'label', this.wheelEventDong);
      }
      //노드
      else if (zoom <= 18) {
        this.$refs.open_layers.removeLayer('crslkLayer');
        this.$refs.open_layers.removeLayer('multPolygonLayer');
        this.$refs.open_layers.removeLayer('nodeLayer');
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2',this.wheelEventDong, this.wheelEventNode);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getCrslksGeoJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, this.wheelEventNode);

      }
      //횡단보도
      else {
        //가장 가까운 노드로 판단
        this.$refs.open_layers.removeLayer('crslkLayer');
        this.$refs.open_layers.removeLayer('multPolygonLayer');
        this.$refs.open_layers.removeLayer('nodeLayer');
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getNodeGeoJson.json', 'nodeLayer', 'EPSG:4326', baseStyles['labelStyle2'], 'labelStyle2', this.wheelEventDong, this.wheelEventNode);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, this.wheelEventNode);

      }
    },
    clickStateChange() {
      this.clickState = true;
    }
  },
  watch: {
    'address.dong_cd': function (newValue, oldValue) {
      // console.log("dong_cd newValue : ", newValue);
      // console.log("dong_cd oldValue : ", oldValue);
      // this.address.dong_cd = newValue;
    },
    'address.siDo_dong_cd': function (newValue, oldValue) {
      // console.log("siDo_dong_cd newValue : ", newValue);
      // console.log("siDo_dong_cd oldValue : ", oldValue);
      this.address.dong_cd = newValue;

      //아래에 있는 값은 초기화
      this.address.guGun_dong_cd = null;
      this.address.dong_dong_cd = null;
      this.address.node_id = null;
      this.gunGuList = null;
      this.dongList = null;

      //zoom 재설정
      this.address.zoomLevel = 11.5;

      this.gunGuSelect(newValue);

    },
    'address.guGun_dong_cd': function (newValue, oldValue) {
      // console.log("guGun_dong_cd newValue : ", newValue);
      // console.log("guGun_dong_cd oldValue : ", oldValue);
      this.address.dong_cd = newValue;
      //아래에 있는 값은 초기화
      this.address.dong_dong_cd = null;
      this.address.node_id = null;
      this.dongList = null;

      //zoom 재설정
      this.address.zoomLevel = 14;

      // 왜넣었는지 까먹...
      if (newValue != null) {
        this.dongSelectList(newValue);
      }
    },
    'address.dong_dong_cd': function (newValue, oldValue) {
      // console.log("dong_dong_cd newValue : ", newValue);
      // console.log("dong_dong_cd oldValue : ", oldValue);
      this.address.dong_cd = newValue;
      //아래에 있는 값은 초기화
      this.address.node_id = null;

      this.address.zoomLevel = 15;
      this.findNodeUsingDongSelectList(newValue);
    },
    'address.node_id': function (newValue, oldValue) {
      // console.log("node_id newValue : ", newValue);
      // console.log("node_id oldValue : ", oldValue);
      this.address.node_id = newValue;
      this.nodeList.forEach((node) => {
        if (node.node_id == newValue) {
          this.address.node_name = node.node_name;
        }
      })
      this.address.zoomLevel = 19;
    },
    'address.coordinate': function (newValue, oldValue) {
      // console.log("coordinate newValue : ", newValue);
      // console.log("coordinate oldValue : ", oldValue);
      this.address.lat = newValue[0];
      this.address.lon = newValue[1];
    },
    'managerInfo': function (newValue, oldValue) {
      // console.log("managerInfo newValue : ", newValue);
      // console.log("managerInfo oldValue : ", oldValue);
    },
    "now_zoom": function (newValue, oldValue) {
      // console.log("now_zoom newValue : ", newValue);
      // console.log("now_zoom oldValue : ", oldValue);
    },
    "nodeList": function (newValue, oldValue) {
      // console.log("nodeList newValue : ", newValue);
      // console.log("nodeList oldValue : ", oldValue);
    },
    "condition.rndtp_tfclne_info": function (newValue, oldValue) {
      // console.log("rndtp_tfclne_info newValue : ", newValue);
      // console.log("rndtp_tfclne_info oldValue : ", oldValue);
    },
  },
  computed: {},
  mounted() {
    console.log("Main2 mounted");
    this.siDoSelectList();
    this.gunGuSelect(this.address.siDo_dong_cd);
    this.dongSelectList(this.address.guGun_dong_cd);
    this.managerSelectList();
    // 지도 초기화 
    this.$refs.open_layers.setBaseMap(vworldBaseLayer);
    // 지도 폴리곤 넣기
    this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
    // 지역 중앙에 노드 + 이름 넣기
    this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsCenterJson.json', 'nodeLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd);
  },
};
</script>
<style scoped>
@media all and (max-width: 479px) {
  .top {
    overflow: scroll;
  }

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

  .top li {
    display: flex;
  }

  .search {
    width: inherit;
  }

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

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

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

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

.toggle {
  display: none;
}

label {
  text-align: left;
}

.search .box {
  padding: 1rem 2rem;
  background-color: #eaebec;
}

.search input[type="text"] {
  
}

.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 {
  min-height: 46.6rem;
  max-height: 46.6rem;
  overflow: scroll;
  overflow-x: hidden;
}

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

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;
}
.map {
  width: 100%;
  height: calc(100% - 0px);
}
.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

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 {
  padding: 1rem;
  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: #e5e5dd;
  font-size: 2rem;
  padding: 1rem;
  color: #333;
}

.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;
}

.modal-bg button {
  border: 0;
  background: none;
  height: 30px;
  cursor: pointer;
}

.modal button img {
  width: 25px;
}

select {
    padding: 0.5rem;
    /* border-radius: 5px; */
    width: 90%;
    height: 3rem;
    border: 1px solid #c3bfbf;
    font-size: 1.2rem;
    color: #474747;
    text-align: center;
}
</style>