<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 ">      
     <!-- 검색 -->
    <div class="de_Search">
      <table class="troubleTable">
      <tbody>
          <tr>
              <th>검색일자</th>
              <td colspan="3" style="width:30%;"> 
                 <input type="date" value-format="yyyyMMdd" style="width: 45%;" :max="today" v-model="eventListSearch.startDate"/>
                 <span style="margin: 0px 2%;"> ~ </span>
                 <input type="date" value-format="yyyyMMdd" style="width: 45%;" :min="eventListSearch.startDate" :max="today" v-model="eventListSearch.endDate"/>                  
              </td>  
              <th>행정구역</th>
              <td colspan="3" class="flex gap">       
                 <dongSelectList @setDongCd="setDongCd"
                                :user_sigungu_cd="eventListSearch.sigungu_cd" 
                                :user_dong_cd="eventListSearch.dong_dong_cd"
                                :user_node_id="eventListSearch.node_id"
                                :user_crslk_az="eventListSearch.crslk_az"></dongSelectList>         
              </td>          
          </tr>
          <tr>                     
              <th>상황명</th>               
              <td colspan="7" >     
                <select v-model="eventListSearch.eventType">
                  <option :value=null>전체</option>
                  <option value="무단횡단">무단횡단</option>
                  <option value="신호연장">신호연장</option>
                  <option value="우회전신호위반">우회전신호위반</option>
                </select>
                <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="eventSelectList">검색</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>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in eventList"
              :key="idx"
              @click="eventSelectOne(item)"
            >
              <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 date-title="노드/횡단보도명">{{ item.crslk_nm }}</td>
              <td data-title="상황명">{{ item.type }}</td>
            </tr>
            <tr v-if="eventListCount == 0">
              <td style="font-size: 20px;" colspan="7">검색조건에 해당하는 데이터가 없습니다.</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_jaywalk == 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_jaywalk = false">
                <img src="../../../resources/images/close.png" alt="" />
              </button>
            </h2>
            <div class="modal_base_body">
              <h3  class="modal_base_title"  v-if="eventJaywalk.sigungu_nm === null">{{ eventJaywalk.sido_nm }} - {{ eventJaywalk.crslk_nm }}</h3>
              <h3  class="modal_base_title"  v-else-if="eventJaywalk.dong_nm === null">{{ eventJaywalk.sido_nm + " " + eventJaywalk.sigungu_nm }} - {{ eventJaywalk.crslk_nm }}</h3>
              <h3  class="modal_base_title"  v-else>{{ eventJaywalk.sido_nm + " " + eventJaywalk.sigungu_nm + " " + eventJaywalk.dong_nm }} - {{ eventJaywalk.crslk_nm }}</h3>             
              <div class="de_Search">
              <table class="troubleTable mrg_b_0" > 
                <tbody>
                  <tr>
                    <th colspan="2">발생일시</th>
                    <td >{{ eventJaywalk.ocrn_dt }}</td>
                  </tr>
                  <tr>
                    <th colspan="2">상황명</th>
                    <td >무단횡단</td>
                  </tr>
                  <tr>
                    <th colspan="2"> 무단횡단 시도 인원 수</th>
                    <td >{{ eventJaywalk.wtrms_crosng_try_nope }}명</td>
                  </tr>
                  <tr>
                    <th colspan="2">잔여보행 상황발생 여부</th>
                    <td v-if="eventJaywalk.rm_walking_situ_ocrn_yn === '1'" > 발생 </td>
                    <td v-else > 미발생 </td>
                  </tr>
                  <tr>
                    <th colspan="2">잔여보행 인원 수</th>
                    <td >{{ eventJaywalk.rm_pdstrn_cnt }}명</td>
                  </tr>
                  <tr>
                    <th colspan="2">횡단완료 인원 수</th>
                    <td >{{ eventJaywalk.crosng_cmptn_nope }}명</td>
                  </tr>
                </tbody>
              </table>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-wrap" v-if="modal_signal == 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_signal = false">
                <img src="../../../resources/images/close.png" alt="" />
              </button>
            </h2>
            <div class="modal_base_body">
              <h3  class="modal_base_title" v-if="eventSignal.sigungu_nm === null">{{ eventSignal.sido_nm }} - {{ eventSignal.crslk_nm }}</h3>
              <h3  class="modal_base_title" v-else-if="eventSignal.dong_nm === null">{{ eventSignal.sido_nm + " " + eventSignal.sigungu_nm }} - {{ eventSignal.crslk_nm }}</h3>
              <h3  class="modal_base_title" v-else>{{ eventSignal.sido_nm + " " + eventSignal.sigungu_nm + " " + eventSignal.dong_nm }} - {{ eventSignal.crslk_nm }}</h3>             
              <div class="de_Search">
              <table class="troubleTable mrg_b_0" > 
                <tbody>
                  <tr>
                    <th colspan="2">발생일시</th>
                    <td >{{ eventSignal.ocrn_dt }}</td>
                  </tr>
                  <tr>
                    <th colspan="2">상황명</th> 
                    <td >신호연장</td>
                  </tr>
                  <tr>
                    <th colspan="2">신호연장 시 보행자 수</th>
                    <td >{{ eventSignal.signl_extn_pdstrn_cnt }}명</td>
                  </tr>
                  <tr>
                    <th colspan="2">횡단 완료자 수</th>
                    <td >{{ eventSignal.crosng_cmptn_cnt }}명</td>
                  </tr>
                  <tr>
                    <th colspan="2">신호연장 시간</th>
                    <td >{{ eventSignal.signl_extn_hr }}초</td>
                  </tr>
                </tbody>
              </table>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-wrap" v-if="modal_rightTurn == 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_rightTurn = false">
                <img src="../../../resources/images/close.png" alt="" />
              </button>
            </h2>
            <div class="modal_base_body">
              <h3 class="modal_base_title" v-if="eventRightTurn.sigungu_nm === null">{{ eventRightTurn.sido_nm }} - {{ eventRightTurn.crslk_nm }} </h3>
              <h3 class="modal_base_title" v-else-if="eventRightTurn.dong_nm === null">{{ eventRightTurn.sido_nm + " " + eventRightTurn.sigungu_nm }}  - {{ eventRightTurn.crslk_nm }}</h3>
              <h3 class="modal_base_title" v-else>{{ eventRightTurn.sido_nm + " " + eventRightTurn.sigungu_nm + " " + eventRightTurn.dong_nm }}  - {{ eventRightTurn.crslk_nm }}</h3>             
              <div class="de_Search">
              <table class="troubleTable mrg_b_0" > 
                <tbody>
                  <tr>
                    <th colspan="2">발생일시</th>
                    <td >{{ eventRightTurn.ocrn_dt }}</td>
                  </tr>
                  <tr>
                    <th colspan="2">상황명</th>
                    <td >우회전차량 신호위반</td>
                  </tr>
                  <tr>
                    <th colspan="2">보행대기자 수</th>
                    <td >{{ eventRightTurn.awiter_cnt }}명</td>
                  </tr>
                  <tr>
                    <th colspan="2">보행자 수</th>
                    <td >{{ eventRightTurn.pdstrn_cnt }}명</td>
                  </tr>
                  <tr>
                    <th colspan="2">보행자신호 상태</th>
                    <td v-if="eventRightTurn.walking_signl_stts === 'G'" >녹색불</td>
                    <td v-else-if="eventRightTurn.walking_signl_stts === 'GF'" >점멸 녹색불</td>
                    <td v-else >적색불</td>
                  </tr>
                  <tr>
                    <th colspan="2">보행신호 표출시간</th>
                    <td >{{ eventRightTurn.walking_signl_expr_hr }}초</td>
                  </tr>
                  <tr>
                    <th colspan="2">보행신호 잔여시간</th>
                    <td >{{ eventRightTurn.walking_signl_rm_hr }}초</td>
                  </tr>
                  <tr>
                    <th colspan="2">우회전 차량 대수</th>
                    <td >{{ eventRightTurn.rittrn_vltn_cnt }}대</td>
                  </tr>
                  <tr>
                    <th colspan="2">우회전 신호위반 차량 대수</th>
                    <td >{{ eventRightTurn.rittrn_law_vltn_cnt }}대</td>
                  </tr>
                </tbody>
              </table>
              </div>
            </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">
        <button type="button" class="green-btn" @click="eventExcel">Excel로 저장</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      eventListSearch: {
        currentPage: 1,
        perPage: 10,
        startDate: null,
        endDate: null,
        eventType: null,
        sigungu_cd:null,
        dong_cd: null,
        dong_dong_cd: null,
        node_id: null,
        crslk_az: null
      },

      eventJaywalk: {
        sido_nm: null,
        sigungu_nm: null,
        dong_nm: null,
        crslk_nm: null,
        rm_walking_situ_ocrn_yn: null,
        frst_sense_dt: null,
        wtrms_crosng_try_nope: null,
        rm_pdstrn_cnt: null,
        crosng_cmptn_nope: null
      },

      eventSignal: {
        sido_nm: null,
        sigungu_nm: null,
        dong_nm: null,
        crslk_nm: null,
        signl_extn_pdstrn_cnt: null,
        crosng_cmptn_cnt: null,
        signl_extn_hr: null,
      },

      eventRightTurn: {
        sido_nm: null,
        sigungu_nm: null,
        dong_nm: null,
        crslk_nm: null,
        awiter_cnt: null,
        pdstrn_cnt: null,
        walking_signl_stts: null,
        walking_signl_expr_hr: null,
        walking_signl_rm_hr: null,
        rittrn_law_vltn_cnt: null,
        rittrn_vltn_cnt: null,
      },

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

      address: {},

      modal_jaywalk: false,
      modal_signal: false,
      modal_rightTurn: false,

      //오늘 날짜
      today: COMMON_UTIL.today(),
    };
  },
  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) * vm.eventListSearch.perPage;
      })
      .catch(function(error) {
        console.log("errorSelectList - error : ", error);
        alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
      });
    },

    eventSelectOne: function (eventOne) {
      const vm = this;

      axios({
        url: "/statusControl/eventSelectOne.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: eventOne,
      })
        .then(function (response) {
          // console.log("errorSelectList - response : ", response.data);
          if(response.data.type === "jaywalk") {
            vm.eventJaywalk = response.data
            vm.modal_jaywalk = true;
          } else if (response.data.type === "signal") {
            vm.eventSignal = response.data
            vm.modal_signal = true;
          } else {
            vm.eventRightTurn = response.data
            vm.modal_rightTurn = true;
          }
          
        })
        .catch(function (error) {
          console.log("errorSelectList - error : ", error);
          alert("장애발생 상세정보 조회 오류, 관리자에게 문의해주세요.");
        });
    },

     //상황발생 엑셀 저장
     eventExcel: function() {
      const vm = this;
      axios({
        url: "/statusControl/eventExcel.json",
        method: "post",
        herders: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        responseType: 'arraybuffer',
        data: vm.eventListSearch,
      })
        .then(function (response) {
          // console.log("eventExcel - response : ", response.data);
          const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers["content-type"] }));
          const link = document.createElement("a");
          link.href = url;
          let today = COMMON_UTIL.today();
          link.download = '[' + today + ']' + '상황발생목록조회';
          link.click();
          window.URL.revokeObjectURL(url);
        })
        .catch(function (error) {
          console.log("eventExcel - error : ", error);
          alert("상황발생 Excel 저장 오류, 관리자에게 문의해주세요.");
        });
    },

    //dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
    setDongCd(value) {
      // console.log("value : ", value);
      this.address = value;
    },
  },
  watch: {
    
    'address.dong_cd': function (newValue) {
      this.eventListSearch.dong_cd = newValue;
    },

    'address.node_id': function (newValue) {
      this.eventListSearch.node_id = newValue;
    },

    'address.crslk_az': function (newValue) {
      this.eventListSearch.crslk_az = newValue;
    },
  },
  computed: {},
  components: {
    PaginationButton: PaginationButton,
    dongSelectList: dongSelectList
  },
  created(){
    if(this.$route.query.sigungu_cd != null) {
      // console.log("SituationSearch created");
      this.eventListSearch.sigungu_cd = this.$route.query.sigungu_cd;
      this.eventListSearch.dong_dong_cd = this.$route.query.dong_cd;
      this.eventListSearch.node_id = this.$route.query.node_id;
      this.eventListSearch.crslk_az = this.$route.query.crslk_az;
      this.eventListSearch.startDate = COMMON_UTIL.today();
      this.eventListSearch.endDate = COMMON_UTIL.today();
    } else {
      this.eventListSearch.endDate = COMMON_UTIL.today();
      this.eventListSearch.startDate = COMMON_UTIL.oneMonthAgo();
    }
  },
  mounted() {
    console.log("SituationSearch 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: 25px 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>
