<template>
  <div class="wrap">
    <div class="board-wrap">
      <!--
      <div class="search-wrap">

        <div class="flex-between mb-block">
          <div class="flex gap m-b date">
            <label>날짜를 선택해주세요.</label>
            <input type="date" name="" id="" />
            <span>~</span>
            <input type="date" name="" id="" />
          </div>
          <div class="flex gap m-b">
            <label>시/도</label>
            <select name="" id="">
              <option value="">대구광역시</option>
            </select>
            <label>시/군/구</label>
            <select name="" id="">
              <option value="">서구</option>
            </select>
            <label>행정동</label>
            <select name="" id="">
              <option value="">전체</option>
            </select>
            </div>
            <div class="flex gap m-b situ">
              <button type="button" class="btn-2 green-btn">조회</button>
            </div>
        </div>
      </div>
      -->
      <!-- 검색 -->
      <div class="de_Search">
        <table class="troubleTable">
        <tbody>
            <tr>
                <th>검색 일자</th>
                <td colspan="3"> 
                  <input type="date" value-format="yyyyMMdd" />
                  <span style="margin: 0px 2%;"> ~ </span>
                  <input type="date" value-format="yyyyMMdd" />                  
                </td>  
                <th>행정동</th>
                <td colspan="3">       
                   <select name="" id="" style="width: 20%;">
                    <option value="">대구광역시</option>
                  </select>              
                  <select name="" id="" style="width: 20%;">
                    <option value="">서구</option>
                  </select>              
                  <select name="" id="" style="width: 20%;">
                    <option value="">전체</option>
                  </select>     
                  <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;">검색</button>
                </td>         
            </tr>          
        </tbody>
        </table>
      </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>
              <th>장애발생여부</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, idx) in dataLogList"
              :key="idx"
            >
              <td data-title="NO">{{ dataLogIdx - idx }}</td>
              <td data-title="발생일시"> {{ item.clct_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.node_name }}</td>
              <td data-title="횡단보도명">{{ item.crslk_nm }}</td>
              <td v-if="item.eqpmn_trobl_yn == 'y'" data-title="장애발생여부">발생</td>
              <td v-else data-title="장애발생여부">미발생</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>
            <tr>
              <th>장애발생여부</th>
              <td></td>
            </tr>                  
          </tbody>
        </table>
      </div>
      <div class="bottom-wrap">
        <PaginationButton
          v-model:currentPage="dataLogListSearch.currentPage"
          :per-page="dataLogListSearch.perPage" :total-count="dataLogListCount" :max-range="5"
          :click="dataLogSelectList" />
        <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 {
      dataLogListSearch: {
        currentPage: 1,
        perPage: 10,
        // startDate: null,
        // endDate: null,
        // searchDongCode: null,
      },

      dataLogListCount: 0,
      dataLogList: [],
      dataLogIdx: 0,

      address: {},
    };
  },
  methods: {
    dataLogSelectList: function() {
      const vm = this;

        axios({
        url: "/dataLog/dataLogSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.dataLogListSearch,
      })
        .then(function(response) {
          console.log("dataLogSelectList - response : ", response.data);
          vm.dataLogListCount = response.data.dataLogListCount;
          vm.dataLogList = response.data.dataLogList;
          vm.dataLogIdx = response.data.dataLogListCount - (vm.dataLogListSearch.currentPage - 1) * response.data.dataLogList.length;
        })
        .catch(function(error) {
          console.log("errorSelectList - error : ", error);
          alert("장애발생 목록 조회 오류, 관리자에게 문의해주세요.");
        });
    },

    //날짜에 '-' 넣기
    yyyymmdd(date) {
      return COMMON_UTIL.yyyymmdd(date);
    },
  },
  watch: {},
  computed: {},
  components: {
    PaginationButton: PaginationButton,
    dongSelectList: dongSelectList
  },
  mounted() {
    console.log("Main4 mounted");
    this.dataLogSelectList();
  },
};
</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: 155rem;
  margin: 100px auto;
}

.search-wrap {
  margin-bottom: 30px;
}

.search-wrap input,
.search-wrap select {
  height: 22.5px;
  border-radius: 3px;
  border: 1px solid #949292;
}

.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 0;
  color: #fff;
  background-color: #13833b;
}

table td {
  padding: 10px 0;
  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>
