<template>
  <div class="wrap">
    <div class="board-wrap">
      <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">유지보수 담당자 관리</h2>
    <div style="margin-left: 2rem;" class="m-b3">시스템 관리&nbsp;&#62;&nbsp;<em class="green2 lined">유지보수 담당자 관리</em> </div>
      <!--
      <div class="search-wrap clear-fix">
        <div class="float-right flex gap">
          <div class="flex gap date">
            <label>등록일자</label>
            <input
            class="date-input"
              type="date"
              value-format="yyyyMMdd"
              v-model="managerListSearch.startDate"
            />
            <span> ~ </span>
            <input
            class="date-input"
              type="date"
              value-format="yyyyMMdd"
              v-model="managerListSearch.endDate"
            />
          </div>
          <div class="flex gap search">
                <select v-model="managerListSearch.searchType">
                  <option value="null" disabled>검색조건</option>
                  <option value="mngr_nm">이름</option>
                  <option value="mngr_ogdp_info">소속정보</option>
                </select>
                <input
                  type="search"
                  placeholder="검색어를 입력 해주세요."
                  v-model="managerListSearch.searchText"
                  @keyup.enter="managerSelectList"
                />
                <button style="width: 11rem;" class="btn-2 gr-btn" @click="managerSelectList">
                  검색
                </button>
          </div>
        </div>
      </div>
      -->
      <!-- 검색 -->
    <div class="de_Search">
      <table class="troubleTable">
      <tbody>
          <tr>
              <th>등록일자</th>
              <td colspan="3"> 
                 <input type="date" value-format="yyyyMMdd"  v-model="managerListSearch.startDate"/>
                 <span style="margin: 0px 2%;"> ~ </span>
                 <input type="date" value-format="yyyyMMdd"  v-model="managerListSearch.endDate" />                  
              </td>  
              <th>검색</th>
              <td colspan="3">       
               <select v-model="managerListSearch.searchType">
                  <option value="null" disabled>검색조건</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="min-width: 50%;"/>
                <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="managerSelectList">검색</button>
              </td>         
          </tr>          
      </tbody>
      </table>
    </div>
      <div>
        <table class="pc">
          <colgroup>
            <col style="width: 15%" />
            <col style="width: 15%" />
            <col style="width: 25%" />
            <col style="width:15%" />
            <col style="width: 10%" />
          </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 managerList"
              :key="idx"
              @click="managerSelectOnePage(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_eml }}</td>
              <td data-title="소속정보">{{ item.mngr_ogdp_info }}</td>
              <td data-title="등록일자">{{ yyyymmdd(item.reg_dt) }}</td>
            </tr>
          </tbody>
        </table>
        <table class="mobile">
          <colgroup>
            <col style="width: 10%" />
            <col style="width: 20%" />
          </colgroup>
          <tbody
            v-for="(item, idx) in managerList"
            :key="idx"
            @click="managerSelectOnePage(item)"
          >
            <tr>
              <th>No</th>
              <td data-title="NO">{{ managerIdx - idx }}</td>
            </tr>
            <tr>
              <th>이름</th>
              <td data-title="이름">{{ item.mngr_nm }}</td>
            </tr>
            <tr>
              <th>전화번호</th>
              <td data-title="전화번호">{{ HyphenMinus(item.mngr_telno) }}</td>
            </tr>
            <tr>
              <th>이메일</th>
              <td data-title="이메일">{{ item.mngr_eml }}</td>
            </tr>
            <tr>
              <th>소속정보</th>
              <td data-title="소속정보">
                {{ item.mngr_ogdp_info }}
              </td>
            </tr>
            <tr>
              <th>등록일자</th>
              <td data-titel="등록일자">{{ yyyymmdd(item.reg_dt) }}</td>
            </tr>
            
            <hr class="margin2 m-b" />
          </tbody>
        </table>
      </div>
      <div class="bottom-wrap">
        <PaginationButton
          v-model:currentPage="managerListSearch.currentPage"
          :per-page="managerListSearch.perPage"
          :total-count="managerListCount"
          :max-range="5"
          :click="managerSelectList"
        />
        <div class="btn-wrap">
          <button @click="managerInsertPage" class="btn-2 gr-btn">
            등록
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data: function () {
    return {
      managerListSearch: {
        currentPage: 1,
        perPage: 10,
        searchType: null,
        searchText: null,
        startDate: null,
        endDate: null,
      },
      managerListCount: 0,
      managerList: [],
      managerIdx: 0
    };
  },
  methods: {
    //횡단보도 유지보수 관리자 목록 조회
    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 = response.data.managerListCount-(vm.managerListSearch.currentPage-1)*response.data.managerList.length;
        })
        .catch(function (error) {
          console.log("managerSelectList - error : ", error);
          alert(
            "횡단보도 유지보수 관리자 목록 조회 오류, 관리자에게 문의해주세요."
          );
        });
    },

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

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

    //횡단보도 유지보수 관리자 상세조회 페이지 이동
    managerSelectOnePage: function (manager) {
      this.$router.push({
        path: "/ManagerModifyForm.page",
        query: { mntnce_mngr_id: manager.mntnce_mngr_id },
      });
    },

    //횡단보도 유지보수 관리자 등록 페이지 이동
    managerInsertPage: function () {
      this.$router.push({ path: "/ManagerAddForm.page" });
    },
  },

  watch: {},
  computed: {},
  components: {
    PaginationButton: PaginationButton,
  },
  mounted() {
    console.log("Main4 mounted");
    this.managerSelectList();
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  .board-wrap {
    padding: 0rem;
}
  .form-wrap{width: -webkit-fill-available !important;}
  .wrap{padding: 0 1rem;}
  .date{margin: 0rem 0 1rem 0 !important;}
  .search{width: 335px !important;}
  .search input{width: 14rem;}
  .search select{width: 9rem;}
}

.mobile{display: none;}
.date{margin-right: 3rem;}
.wrap {
  width: 80%;
  margin: 50px auto;
}
.wrap h2{font-size: 2.5rem;}
.search{width: 350px;}
.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;
}

h2.page-title {
  font-size: 24px;
}

hr.margin {
  margin: 30px 0;
}

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>
