<template>
  <div class="wrap">
    <h2 style="color: #10833b" class="flex gap">
      <img src="../../../resources/images/bar.png" alt="" />횡단보도 목록 조회
    </h2>
    <div style="margin-left: 2rem; font-size: 13px" class="m-b3">
      현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">횡단보도 목록 조회</em>
    </div>
    <div class="board-wrap ">

<!--
      <table class="table2 m-b3">
        <tr>
          <th>지역</th>
          <td class="flex gap"><dongSelectList
              @setDongCd="setDongCd"
              :nodeHiddenCk="true"
              :crslk_azHiddenCk="true"
            ></dongSelectList></td>
          <th><label class=" ">조회기간 </label></th>
          <td><input
                class=""
                type="date"
                value-format="yyyyMMdd"
                v-model="crosswalkListSearch.startDate"
              />
              <span> ~ </span>
              <input
                class=""
                type="date"
                value-format="yyyyMMdd"
                v-model="crosswalkListSearch.endDate"
              /></td>
        </tr>
        <tr>
          <th> <label class=" ">상태 </label></th>
          <td class="flex gap"><select name="" id="op">
                <option value="">정상</option>
              </select>
              <button
                type="button"
                class="s-btn green-btn"
                @click="crosswalkSelectList()"
              >
                조회
              </button></td>
              <th><label class="">우회차선 </label></th>
          <td><select v-model="crosswalkListSearch.searchRightTurnType">
                <option value="null" disabled>전체</option>
                <option value="직각">직각</option>
                <option value="곡선">곡선</option>
              </select></td>
        </tr>
      </table>
-->

       <!-- 검색 -->
    <div class="de_Search">
      <table class="troubleTable">
      <tbody>
          <tr>
              <th>행정동</th>
              <td colspan="3" class="flex gap"> 
                <dongSelectList  @setDongCd="setDongCd" :nodeHiddenCk="true" :crslk_azHiddenCk="true" ></dongSelectList>           
              </td>  
              <th>조회기간</th>
              <td colspan="3">       
                 <input type="date" value-format="yyyyMMdd" v-model="crosswalkListSearch.startDate" />
                 <span style="margin: 0px 2%;"> ~ </span>
                 <input type="date" value-format="yyyyMMdd" v-model="crosswalkListSearch.endDate" />        
              </td>         
          </tr>
          <tr>                 
              <th>상태</th>
              <td > 
                <select name="" id="op" style="width:100%;">
                  <option value="">정상</option>
                </select>      
              </td>  
              <th>우회차선</th>
              <td >       
                 <select v-model="crosswalkListSearch.searchRightTurnType" style="width:100%;">
                  <option value="null" disabled>전체</option>
                  <option value="직각">직각</option>
                  <option value="곡선">곡선</option>
                </select>   
              </td>             
              <td colspan="4">     
                <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="userSelectList">검색</button>
              </td> 
          </tr>
      </tbody>
      </table>
    </div>
      <!-- <div class="search-wrap border">
        <div class="flex-between mb-block">
          <div class="gap gap-sub">
            
          </div>
          <div class="flex gap date">
            
            <div class="bg-white flex gap">
              
            </div>
          </div>
        </div>

        <div class="flex-between">
          <div class="flex-start gap statue">
           
            <div class="bg-white flex gap box">
              
            </div>
          </div>
          <div class="flex mb-block">
            <div class="flex-start gap">
              
              
            </div>

            <div class="flex-start gap">
              <label class="">왕복차선 </label>
              <select v-model="crosswalkListSearch.searchRoundTripLane">
                <option value="null" disabled>전체</option>
              </select>
            </div>
            <div class="flex gap">
              <label class="m-r">장비 </label>
              <label>무단횡단</label>
              <input
                class="m-r"
                type="checkbox"
                v-model="crosswalkListSearch.jaywalking"
                true-value="Y"
                false-value="N"
              />
              <label>신호연장</label>
              <input
                class="m-r"
                type="checkbox"
                v-model="crosswalkListSearch.signal"
                true-value="Y"
                false-value="N"
              />
              <label>우회차량</label>
              <input
                class="m-r"
                type="checkbox"
                v-model="crosswalkListSearch.rightTurn"
                true-value="Y"
                false-value="N"
              />
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div>
      <table class="pc">
        <!-- <colgroup>
            <col style="width: 10%;">
            <col style="width: 20%;">
            <col style="width: 20%;">
            <col style="width: 30%;">
            <col style="width: 20%;">
          </colgroup> -->
        <thead>
          <tr>
            <th>No</th>
            <th>설치일자</th>
            <th>시/도</th>
            <th>시/군/구</th>
            <th>행정동</th>
            <th>노드명</th>
            <th>횡단보도명</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, idx) in crosswalkList"
            :key="idx"
            @click="crosswalkSelectOne(item)"
          >
            <td data-title="NO">{{ crosswalkIdx - idx }}</td>
            <td data-title="설치일자">{{ item.instl_ymd }}</td>
            <td data-title="시/도">{{ item.sido_nm }}</td>
            <td data-title="시/군/구">{{ item.sigungu_nm }}</td>
            <td data-title="행정동">{{ item.dong_nm }}</td>
            <td data-titel="노드명">{{ item.node_name }}</td>
            <td data-titel="횡단보도명">{{ item.crslk_nm }}</td>
          </tr>
        </tbody>
      </table>
      <table class="mobile">
        <colgroup>
          <col style="width: 10%" />
          <col style="width: 20%" />
        </colgroup>
        <tbody>
          <tr>
            <th>No</th>
            <td></td>
          </tr>
          <tr>
            <th>설치일자</th>
            <td></td>
          </tr>
          <tr>
            <th>시/도</th>
            <td></td>
          </tr>
          <tr>
            <th>시/군/구</th>
            <td></td>
          </tr>
          <tr>
            <th>행정동</th>
            <td></td>
          </tr>
          <tr>
            <th>교차로</th>
            <td></td>
          </tr>
          <tr>
            <th>횡단보도명</th>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div class="modal-wrap" v-if="modal_crosswalkOne == true">
        <div class="modal-bg"></div>
        <div class="modal">
          <h2 class="flex-between">
            횡단보도 상세정보
            <button
              type="button"
              class="gray-btn"
              @click="modal_crosswalkOne = false"
            >
              <img src="../../../resources/images/close.png" alt="" />
            </button>
          </h2>
          <div class="modalmain">
            <div class="flex-between">
              <div class="img">무단횡단검지카메라 이미지</div>
              <div class="img">무단횡단검지카메라 이미지</div>
              <div class="img">신호연장검지카메라 이미지</div>
              <div class="img">신호연장검지카메라 이미지</div>
              <div class="img">우회차량검지카메라 이미지</div>
            </div>
            <table>
              <colgroup>
                <col style="width: 20%" />
                <col style="width: 20%" />
                <col style="width: 20%" />
                <col style="width: 20%" />
              </colgroup>
              <tbody>
                <tr>
                  <td colspan="2">시/도</td>
                  <td colspan="2">{{ crosswalk.sido_nm }}</td>
                </tr>
                <tr>
                  <td colspan="2">시/군/구</td>
                  <td colspan="2">{{ crosswalk.sigungu_nm }}</td>
                </tr>
                <tr>
                  <td colspan="2">행정동</td>
                  <td colspan="2">{{ crosswalk.dong_nm }}</td>
                </tr>
                <tr>
                  <td colspan="2">노드명</td>
                  <td colspan="2">{{ crosswalk.node_name }}</td>
                </tr>
                <tr>
                  <td colspan="2">횡단보도명</td>
                  <td colspan="2">{{ crosswalk.crslk_nm }}</td>
                </tr>
                <tr>
                  <td rowspan="2">좌표</td>
                  <td>위도</td>
                  <td colspan="2">{{ crosswalk.lat }}</td>
                </tr>
                <tr>
                  <td>경도</td>
                  <td colspan="2">{{ crosswalk.lon }}</td>
                </tr>
                <tr>
                  <td rowspan="3">설치된 검시장비</td>
                  <td>무단횡단</td>
                  <td
                    colspan="2"
                    v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn == 'y'"
                  >
                    설치
                  </td>
                  <td colspan="2" v-else>미설치</td>
                </tr>
                <tr>
                  <td>신호연장</td>
                  <td
                    colspan="2"
                    v-if="crosswalk.signl_extn_eqpmn_instl_yn == 'y'"
                  >
                    설치
                  </td>
                  <td colspan="2" v-else>미설치</td>
                </tr>
                <tr>
                  <td>우회전차량</td>
                  <td
                    colspan="2"
                    v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn == 'y'"
                  >
                    설치
                  </td>
                  <td colspan="2" v-else>미설치</td>
                </tr>
                <tr>
                  <td colspan="2">무단횡단 검지범위</td>
                  <td colspan="2">{{ crosswalk.wtrms_crosng_detct_rate }}%</td>
                </tr>
                <tr>
                  <td colspan="2">왕복차선</td>
                  <td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>
                </tr>
                <tr>
                  <td colspan="2">우회전차선유무</td>
                  <td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
                </tr>
                <tr>
                  <td colspan="2">우회전차선유형</td>
                  <td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
                </tr>
                <tr>
                  <td colspan="2">횡단보도 유지보수 담당자</td>
                  <td colspan="2">{{ crosswalk.mngr_nm }}</td>
                </tr>
                <tr>
                  <td>등록자 ID</td>
                  <td>{{ nullHyphen(crosswalk.rgtr_id) }}</td>
                  <td>등록일자</td>
                  <td>{{ yyyymmdd(crosswalk.reg_dt) }}</td>
                </tr>
                <tr>
                  <td>수정자 ID</td>
                  <td>{{ nullHyphen(crosswalk.mdfr_id) }}</td>
                  <td>수정일자</td>
                  <td>{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
                </tr>
              </tbody>
            </table>
            <br />
            <br />
            <br />
            <table>
              <colgroup>
                <col style="width: 20%" />
                <col style="width: 20%" />
                <col style="width: 20%" />
                <col style="width: 20%" />
              </colgroup>
              <tbody>
                <tr>
                  <td rowspan="3">금일 상황발생 수</td>
                  <td>무단횡단</td>
                  <td>2회</td>
                  <td rowspan="4">
                    <button class="green-btn">상황발생 상세보기</button>
                    <button class="green-btn">장애발생 상세보기</button>
                    <button class="green-btn">위치확인</button>
                  </td>
                </tr>
                <tr>
                  <td>신호연장</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td>우회전차량</td>
                  <td>-</td>
                </tr>
                <tr>
                  <td colspan="2">금일 장애발생 수</td>
                  <td>1회</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-wrap">
      <PaginationButton
        v-model:currentPage="crosswalkListSearch.currentPage"
        :per-page="crosswalkListSearch.perPage"
        :total-count="crosswalkListCount"
        :max-range="5"
        :click="crosswalkSelectList"
      />
    </div>
    <div class="flex-end">
      <router-link to="/UserManagement.page">
        <span class="btn-2 green-btn excel">Excel로 저장</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import dongSelectList from "../../component/dongSelectList.vue";
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";

export default {
  data() {
    return {
      crosswalkListSearch: {
        currentPage: 1,
        perPage: 10,
        startDate: null,
        endDate: null,
        searchDongCode: null,
        searchRightTurnType: null,
        searchRoundTripLane: null,
        jaywalking: null,
        signal: null,
        rightTurn: null,
      },

      crosswalk: {
        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,
      },

      crosswalkListCount: 0,
      crosswalkList: [],
      crosswalkIdx: 0,

      address: {},
      modal_crosswalkOne: false,
    };
  },
  methods: {
    crosswalkSelectList: function () {
      const vm = this;
      vm.crosswalkListSearch.searchDongCode = vm.address.dong_cd;

      axios({
        url: "/statusControl/crosswalkSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.crosswalkListSearch,
      })
        .then(function (response) {
          console.log("crosswalkSelectList - response : ", response.data);
          vm.crosswalkListCount = response.data.crosswalkListCount;
          vm.crosswalkList = response.data.crosswalkList;
          vm.crosswalkIdx =
            response.data.crosswalkListCount -
            (vm.crosswalkListSearch.currentPage - 1) *
              response.data.crosswalkList.length;
        })
        .catch(function (error) {
          console.log("crosswalkSelectList - error : ", error);
          alert("횡단보도 목록 조회 오류, 관리자에게 문의해주세요.");
        });
    },

    crosswalkSelectOne: function (item) {
      const vm = this;

      axios({
        url: "/statusControl/crosswalkSelectOne.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { node_id: item.node_id, crslk_az: item.crslk_az },
      })
        .then(function (response) {
          console.log("crosswalkSelectOne - response : ", response.data);
          vm.crosswalk = response.data;
          vm.modal_crosswalkOne = true;
        })
        .catch(function (error) {
          console.log("crosswalkSelectOne - error : ", error);
          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
        });
    },
    //날짜 시,분,초 자르기
    yyyymmdd: function (date) {
      return COMMON_UTIL.yyyymmdd(date);
    },

    //null값 '-' 치환
    nullHyphen(data) {
      return COMMON_UTIL.nullHyphen(data);
    },

    //dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
    setDongCd(value) {
      console.log("value : ", value);
      this.address = value;
    },
  },
  watch: {},
  computed: {},
  components: {
    PaginationButton: PaginationButton,
    dongSelectList: dongSelectList,
  },
  mounted() {
    console.log("CrosswalkListSearch mounted");
    this.crosswalkSelectList();
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  .date {
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
  .line select {
    width: 10rem;
  }
  .local select {
    width: 8.7rem;
  }
}
.date {
  width: 60%;
}
.wrap h2 {
  font-size: 2.5rem;
}
.mar {
  margin-bottom: 0rem !important;
}
.gap-sub {
  display: flex;
}
.g1 {
  width: 35.9em !important;
  margin-bottom: 0rem !important;
}
.ta5 {
  height: 9em !important;
  line-height: 9em !important;
  height: 30em;
}
.in1 {
  width: 21em;
  /* height: 4em !important; */
  text-align: center;
}
.taa {
  width: 10em;
  height: 7em;
  background-color: #f0f0f0;
  /* border: 1px solid gray; */
  /* border-bottom: 1px solid; */
  box-shadow: 0px 0px 1px gray;
  line-height: 7em;
  text-align: center;
}
.g2 {
  width: 38.6em;
  /* margin-bottom: 0rem !important; */
}
.g3 {
  width: 39em;
  height: 7em;
  /* margin-top: -11px; */
  /* flex-grow: 1; */
  /* width: 155em; */
}
.statue {
  width: 50%;
}
.statue select {
  width: 20rem;
}
#op {
  line-height: 2em;
}
.border {
  width: 100%;
  height: 100%;
  /* border: 1px solid blue; */
}
.board-wrap {
  width: 100%;
}
.mobile {
  display: none;
}
::v-deep select {
  width: 15rem;
}
.img {
  width: 20rem;
  height: 20rem;
  border: 1px solid #e5e5dd;
}
.btnb {
  width: 1500px;
  margin: 0 auto;
  /* text-align: right; */
  /* margin-top: -80em; */
  /* border: 1px solid red; */
}
.modal {
  width: 100rem;
}
.modalmain {
  padding: 1rem;
  max-height: 70rem;
  overflow: scroll;
  overflow-x: hidden;
}
.modalmain table tbody tr:nth-child(odd) {
  background: #f7f6f6;
}
.modalmain table tbody tr:nth-child(even) {
  background: #ffffff;
}
.modalmain table td {
  border: 1px solid #eee;
}
.modal h2 {
  background: #e5e5dd;
  font-size: 2rem;
  padding: 1rem;
}
.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 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;
}
.txt-point {
  color: #333;
}
.wrap {
  width: 80%;
  margin: 50px auto;
}

.search-wrap .box {
  width: 100%;
}
.float-right {
  float: right;
}

.clear-fix::after {
  content: "";
  display: block;
  clear: both;
}

.search-wrap .float-right form > *:not(:last-child) {
  margin-right: 1rem;
}

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

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

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

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

table tr:nth-child(odd) {
  background-color: #f7f6f6;
}

table tr:nth-child(even) {
  background-color: #fdfdf2;
}

.bottom-wrap {
  position: relative;
  padding: 1rem 0;
}

.btn-2 {
  display: inline-block;
  padding: 0.3rem 2rem;
  font-size: 13.333px;
}

.pg-wrap {
  text-align: center;
}

.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}

.pg-item.prev,
.pg-item.next,
.pg-item.active {
  color: #13833b;
}

.btn-wrap {
  position: absolute;
  right: 0;
  top: 1.5em;
  z-index: 10;
}

.btn-wrap button {
  cursor: pointer;
}
</style>
