<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><label>날짜를 선택해주세요.</label></th>
          <td>
            <input type="date" name="" id="" />
            <span>~</span>
            <input type="date" name="" id="" />
          </td>
          <th>지역</th>
          <td class="flex gap">
            <label>시/도</label>
            <div class="bg-white box">
              <select name="" id="">
                <option value="">대구광역시</option>
              </select>
            </div>
            <label>시/군/구</label>
            <div class="bg-white box">
              <select name="" id="">
                <option value="">서구</option>
              </select>
            </div>
            <label>행정동</label>
            <div class="bg-white box">
              <select name="" id="">
                <option value="">전체</option>
              </select>
            </div>
          </td>
        </tr>
        <tr>
          <th><label>상황명</label></th>
          <td class="flex gap"><select name="" id="">
                <option value="">전체</option>
                <option value="">무단횡단</option>
                <option value="">신호연장</option>
                <option value="">신호위반</option>
              </select>
              <input type="text" />
              <button type="button" class="btn-2 green-btn s-btn">조회</button></td>
        </tr>
      </table>
      
      <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>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in eventList"
              :key="idx"
            >
              <td data-title="NO">{{ eventIdx - idx }}</td>
              <td data-title="발생일시"> {{ item.ocrn_dt }}</td>
              <td data-title="시/도">{{ item.sido_nm }}</td>
              <td data-title="시/군/구">{{ item.sigungu_nm }}</td>
              <td data-title="행정동">{{ item.dong_nm }}</td>
              <td data-title="상황명">{{ item.type }}</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>
          </tbody>
        </table>
        <div class="modal-wrap" v-if="modal_1 == true">
          <div class="modal-bg"></div>
          <div class="modal">
            <h2 class="flex">
              상황발생 상세정보
              <button type="button" class="gray-btn" @click="modal_1 = false">
                <img src="../../../resources/images/close.png" alt="" />
              </button>
            </h2>
            <div class="modalmain">
              <h3>영재어린이집(서측)</h3>
              <h4>동쪽횡단보도</h4>
              <table>
                <colgroup>
                  <col style="width: 50%" />
                  <col style="width: 50%" />
                </colgroup>
                <tbody>
                  <tr @click="modal_1 = true">
                    <td>발생일시</td>
                    <td>2023-05-03 14:48</td>
                  </tr>
                  <tr @click="modal_1 = true">
                    <td>상황명</td>
                    <td>무단횡단</td>
                  </tr>
                  <tr @click="modal_1 = true">
                    <td>신호상태</td>
                    <td>적색불</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-wrap">
        <PaginationButton
            v-model:currentPage="eventListSearch.currentPage"
            :per-page="eventListSearch.perPage" :total-count="eventListCount" :max-range="5"
            :click="eventSelectList" />
        <div class="btn-wrap">
          <router-link to="/UserManagement.page">
            <span class="btn-2 green-btn">Excel로 저장</span>
          </router-link>
        </div>
      </div>
    </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 {
      eventListSearch: {
        currentPage: 1,
        perPage: 10,
        // startDate: null,
        // endDate: null,
        // searchDongCode: null,
      },

      eventListCount: 0,
      eventList: [],
      eventIdx: 0,

      address: {},
      modal_eventOne: false,
    };
  },
  methods: {
    eventSelectList: function() {
      const vm = this;

        axios({
        url: "/statusControl/eventSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.eventListSearch,
      })
        .then(function(response) {
          console.log("errorSelectList - response : ", response.data);
          vm.eventListCount = response.data.eventListCount;
          vm.eventList = response.data.eventList;
          vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * response.data.eventList.length;
        })
        .catch(function(error) {
          console.log("errorSelectList - error : ", error);
          alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
        });
    },
  },
  watch: {},
  computed: {},
  components: {
    PaginationButton: PaginationButton,
    dongSelectList: dongSelectList
  },
  mounted() {
    console.log("Main4 mounted");
    this.eventSelectList();
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  .situ input {
    width: 13rem;
  }
  .date input {
    width: 10rem;
  }
}
.mobile {
  display: none;
}
.modal {
  width: max-content;
}
.modalmain {
  padding: 1rem;
}
.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 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;
  padding: 0 0 0 50rem;
  cursor: pointer;
}
.modal button img {
  width: 25px;
}
.txt-point {
  color: #333;
}
.wrap {
  width: 80%;
  margin: 100px auto;
}
.wrap h2 {
  font-size: 2.5rem;
}

.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.5rem 2rem;
  font-size: 13.333px;
  height: 3rem;
}

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

.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}
.search-wrap label {
  width: 25%;
}
.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>
