<template>
  <div class="wrap">
    <div>
      <div class="search-wrap clear-fix">
        <div class="float-left">
          <h3 class="sub-title">행정동 목록</h3>
        </div>
        <div class="float-right">
          <form action="">
            <select name="" id="">
              <option value="">검색조건</option>
            </select>
            <input type="text" />
            <button type="button" class="btn-2 green-btn">검색</button>
          </form>
        </div>
      </div>
      <div>
        <table>
          <colgroup>
            <col style="width: 5%" />
            <col style="width: 10%" />
            <col style="width: 10%" />
            <col style="width: 20%" />
            <col style="width: 10%" />
            <col style="width: 10%" />
            <col style="width: 15%" />
            <col style="width: 20%" />
          </colgroup>
          <thead>
            <tr>
              <th rowspan="2">순번</th>
              <th rowspan="2">ID</th>
              <th rowspan="2">한글명</th>
              <th rowspan="2">영문명</th>
              <th colspan="2">좌표</th>
              <th rowspan="2">레이어</th>
              <th rowspan="2">등록일</th>
            </tr>
            <tr>
              <th>위도</th>
              <th>경도</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>2203060</td>
              <td>평리1동</td>
              <td>Pyeongni 1–dong</td>
              <td>00.000000</td>
              <td>00.000000</td>
              <td></td>
              <td>2023-03-03 12:50</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="bottom-wrap">
        <div class="pg-wrap">
          <a href="#" class="pg-item prev">◀</a>
          <a href="#" class="pg-item active">1</a>
          <a href="#" class="pg-item">2</a>
          <a href="#" class="pg-item">3</a>
          <a href="#" class="pg-item">4</a>
          <a href="#" class="pg-item">5</a>
          <a href="#" class="pg-item next">▶</a>
        </div>
      </div>
    </div>
    <div>
      <div class="sub-title-wrap">
        <h3 class="sub-title">행정동 정보관</h3>
        <span class="btn-2 green-btn">신규등록</span>
      </div>
      <div>
        <table>
          <colgroup>
            <col style="width: 10%" />
            <col style="width: 10%" />
            <col style="width: 30%" />
            <col style="width: 20%" />
            <col style="width: 30%" />
          </colgroup>
          <tbody>
            <tr>
              <th colspan="2">ID</th>
              <td><input type="text" class="full" /></td>
              <th>레이어</th>
              <td><input type="text" class="full" /></td>
            </tr>
            <tr>
              <th colspan="2">한글명</th>
              <td><input type="text" class="full" /></td>
              <th>등록일</th>
              <td></td>
            </tr>
            <tr>
              <th colspan="2">영문명</th>
              <td><input type="text" class="full" /></td>
              <th>수정일</th>
              <td></td>
            </tr>
            <tr>
              <th rowspan="2">좌표</th>
              <th class="second">위도</th>
              <td><input type="text" class="full" /></td>
              <th>등록자</th>
              <td></td>
            </tr>
            <tr>
              <th class="second">경도</th>
              <td><input type="text" class="full" /></td>
              <th>수정자</th>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="btn-wrap">
        <button type="button" class="btn-2 gray-btn" @click="modal_2 = true">
          삭제
        </button>
        <button type="button" class="btn-2 green-btn" @click="modal_1 = true">
          저장
        </button>
      </div>
    </div>

    <div>
      <div class="sub-title-wrap">
        <h3 class="sub-title">파일 업로드</h3>
      </div>
      <div>
        <table>
          <colgroup>
            <col style="width: 30%" />
            <col style="width: 70%" />
          </colgroup>
          <tbody>
            <tr>
              <th>ID</th>
              <td class="txt-left">
                <input type="file" name="" id="fileBtn" />
                <label for="fileBtn" class="btn-2 green-btn"> 파일선택 </label>
                <button type="button" class="gray-btn">등록</button>
              </td>
            </tr>
            <tr>
              <th>양식다운로드</th>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="modal-wrap" v-if="modal_1 == true">
    <div class="modal-bg"></div>
    <div class="modal">
      <p>행정동을 <span class="txt-point">등록</span>하시겠습니까?</p>
      <div class="btn-wrap">
        <button type="button" class="green-btn">확인</button>
        <button type="button" class="gray-btn" @click="modal_1 = false">
          취소
        </button>
      </div>
    </div>
  </div>

  <div class="modal-wrap" v-if="modal_2 == true">
    <div class="modal-bg"></div>
    <div class="modal">
      <p>
        해당 기능은 데이터 삭제 기능입니다.<br />
        데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br />
        삭제를 원하시면 아래 삭제 버튼을 눌러주세요.
      </p>
      <div class="btn-wrap">
        <button type="button" class="green-btn">삭제</button>
        <button type="button" class="gray-btn" @click="modal_2 = false">
          취소
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modal_1: false,
      modal_2: false,
    };
  },
  methods: {},
  watch: {},
  computed: {},
  mounted() {
    console.log("Main4 mounted");
  },
};
</script>

<style scoped>
.wrap {
  width: 155rem;
  margin: 100px auto;
}

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

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

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

.float-left {
  float: left;
}

.float-left .sub-title,
.sub-title-wrap .sub-title {
  font-size: 20px;
}

.float-right {
  float: right;
}

.sub-title-wrap > * {
  display: inline-block;
  vertical-align: middle;
}

.sub-title-wrap > *:not(:last-child) {
  margin-right: 2rem;
}

.full {
  width: 100%;
}

.txt-left {
  text-align: left;
}

.txt-left .green-btn {
  margin-right: 2rem;
  /* border: 1px solid red; */
}

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

label.btn-2 {
  cursor: pointer;
}

.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;
  border-bottom: 1px solid #e5e5dd;
}

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

table tbody th.second {
  background-color: #31a257;
}

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

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

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

.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;
}

#fileBtn::file-selector-button {
  display: none;
}

.btn-wrap {
  text-align: right;
  margin-top: 15px;
}

.btn-wrap > *:not(:last-child) {
  margin-right: 15px;
}

.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 350px;
  padding: 5rem;
  z-index: 2;
  background-color: #fff;
  border-radius: 1rem;
  text-align: center;
}

.modal .btn-wrap {
  margin-top: 15px;
  text-align: center;
}

.txt-point {
  color: #13833b;
}
</style>
