<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-center">
      <p class="main-title flex80">호스트 관리</p>
      <PageNavigation />
    </div>
    <div class="content-wrap">
      <div class="content content-box flex100">
        <div class="column-list">
          <div class="search-bar">
            <div class="flex justify-end align-center">
              <select name="" id="" class="square-select" v-model="search_data.key">
                <option :value="null" disabled>선택</option>
                <option value="host_nm">호스트명</option>
                <option value="host_ip">호스트(IP)</option>
                <option value="rgtr_id">등록자</option>
              </select>
              <div class="search-square">
                <div class="flex justify-end align-center no-gutter">
                  <input type="text" class="square-input flex90" v-model="search_data.value" placeholder="검색어를 입력해주세요." @keyup.enter="selectHosts" />
                  <button class="square-button blue-btn flex10" @click="selectHosts">
                    <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="content-zone" style="overflow-y: auto">
            <div class="table-zone">
              <div class="list-info flex justify-between align-center">
                <div class="count-zone">
                  <p> 총 <span>{{ hosts.length }}</span>건 중 <span>{{ selectedHosts.length }}</span>건 선택</p>
                </div>
                <div class="cunt-selectZone">
                  <select name="" id="">
                    <option value="">10개 보기</option>
                    <option value="">20개 보기</option>
                  </select>
                </div>
              </div>
              <table class="list-table">
                <colgroup>
                  <col style="width: 5%" />
                  <col style="width: 5%" />
                  <col style="width: 15%" />
                  <col style="width: 10%" />
                  <col style="width: 15%" />
                  <col style="width: 10%" />
                  <col style="width: 10%" />
                  <col style="width: 15%" />
                  <col style="width: 15%" />
                </colgroup>
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" @click="hostCheckAll" v-model="checkAll" />
                    </th>
                    <th>No</th>
                    <th>호스트명</th>
                    <th>프로토콜</th>
                    <th>호스트(IP)</th>
                    <th>사용자명</th>
                    <th>포트</th>
                    <th>등록자</th>
                    <th>등록일</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(host, index) in hosts" :key="index" @click="loadHostData(host)">
                    <td>
                      <input type="checkbox" @click.stop="" v-model="selectedHosts" :value="host.host_code" name="hosts" />
                    </td>
                    <td>{{ hostIdx - index }}</td>
                    <td>{{ host.host_nm }}</td>
                    <td>{{ host.host_protocol }}</td>
                    <td>{{ host.host_ip }}</td>
                    <td>{{ host.host_id }}</td>
                    <td>{{ host.host_port }}</td>
                    <td>{{ host.rgtr_id }}</td>
                    <td>{{ $filters.dateTime(host.reg_dt) }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="flex justify-end">
              <button class="red-border-btn small-btn" @click="deleteSelectedHosts">선택 삭제</button>
            </div>
            <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="selectHosts" />
          </div>
        </div>
        <div class="data-set">
          <div class="form-box">
            <div class="content-titleZone">
              <p class="box-title" v-if="dataLoaded">호스트 수정</p>
              <p class="box-title" v-else>호스트 등록</p>
            </div>
            <div class="table-zone">
              <table class="form-table2">
                <colgroup>
                  <col style="width: 10%" />
                  <col style="width: 40%" />
                  <col style="width: 10%" />
                  <col style="width: 40%" />
                </colgroup>
                <tbody>
                  <tr>
                    <th>프로토콜</th>
                    <td>
                      <select name="" id="host_protocol" class="full-input" v-model="hostData.host_protocol">
                        <option :value="null" disabled> 프로토콜을 선택해주세요. </option>
                        <option value="ftp">FTP - 파일 전송 프로토콜</option>
                        <option value="sftp"> SFTP - SSH 파일 전송 프로토콜 </option>
                      </select>
                    </td>
                    <th>호스트(IP)</th>
                    <td>
                      <input type="text" id="host_ip" class="full-input" v-model="hostData.host_ip" />
                    </td>
                  </tr>
                  <tr>
                    <th>포트</th>
                    <td>
                      <input type="number" id="host_port" class="full-input" v-model="hostData.host_port" />
                    </td>
                    <th>호스트명(별칭)</th>
                    <td>
                      <input type="text" id="host_nm" class="full-input" v-model="hostData.host_nm" />
                    </td>
                  </tr>
                  <tr>
                    <th>사용자ID</th>
                    <td>
                      <input type="text" id="host_id" class="full-input" v-model="hostData.host_id" />
                    </td>
                    <th v-if="dataLoaded">비밀번호 변경</th>
                    <th v-else>비밀번호</th>
                    <td>
                      <input v-if="dataLoaded" type="password" class="full-input" v-model="changPw" />
                      <input v-else id="host_pw" type="password" class="full-input" v-model="hostData.host_pw" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="flex justify-end">
              <!-- 데이터가 로드되었을 때는 '수정' 버튼과 '초기화' 버튼을 보여줍니다. -->
              <template v-if="dataLoaded">
                <button class="blue-btn small-btn" @click="updateHost">수정</button>
                <button class="blue-border-btn small-btn" @click="insertForm()">취소</button>
              </template>
              <!-- 데이터가 로드되지 않았을 때는 '등록' 버튼과 '초기화' 버튼을 보여줍니다. -->
              <template v-else>
                <button class="blue-btn small-btn" @click="hostInsertCheck">등록</button>
                <button class="blue-border-btn small-btn" @click="resetForm">초기화</button>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import axios from "axios";
export default {
  data() {
    return {
      // 검색 객체
      search: this.$getDefaultSerchVO(),
      search_data: this.$getDefaultSerchItem(null, "String"),

      hostData: {
        host_code: null,
        host_protocol: null,
        host_ip: null,
        host_nm: null,
        host_id: null,
        host_pw: null,
        host_port: null,
      },
      changPw: null,
      hosts: [],
      hostIdx: 0,
      dataLoaded: false,
      selectedHosts: [],

      searchPath: mdiMagnify,
      inputValue: null,
      checkAll: false,

      hostTest: true,
    };
  },
  methods: {
    // 검색 객체 초기화
    searchInit: function () {
      this.search.searchObjectList.push(this.search_data);
    },

    selectHosts() {
      const vm = this;
      axios({
        url: "/host/list",
        method: "post",
        headers: {},
        data: vm.search,
      })
        .then(function (response) {
          vm.hosts = response.data.resultData.hostList;
          vm.search.totalRows = response.data.resultData.totalRow;
          vm.hostIdx =
            vm.search.totalRows -
            (vm.search.currentPage - 1) * vm.search.perPage;
        })
        .catch(function (error) {
          vm.$showAlert(
            "호스트 목록",
            "목록 불러오기 오류, 관리자에게 문의바랍니다."
          );
        });
    },

    hostInsert: function () {
      const vm = this;

      if (vm.hostTest === false) {
        vm.$showAlert("호스트 등록", "접속테스트를 실행해주세요.");
        return;
      }

      axios({
        url: "/host",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.hostData,
      })
        .then(function (response) {
          let result = response.data;
          if (result > 0) {
            vm.$showAlert("호스트 등록", "호스트 등록이 완료되었습니다.");
            vm.selectHosts();
            vm.resetForm();
            vm.hostTest = false;
          } else {
            vm.$showAlert(
              "호스트 등록",
              "호스트 등록에 실패했습니다. 다시 시도해주세요."
            );
          }
        })
        .catch(function (error) {
          vm.$showAlert("호스트 등록", "등록오류, 관리자에게 문의바랍니다.");
        });
    },

    updateHost: async function () {
      const vm = this;

      if (
        JSON.stringify(vm.hostData) === JSON.stringify(vm.originalHostData) &&
        (vm.changPw === null || vm.changPw === "")
      ) {
        vm.$showAlert("호스트 수정", "수정된 정보가 없습니다.");
        return;
      }

      if (vm.changPw != null && vm.changPw != "") {
        vm.hostData.host_pw = vm.changPw;

        if (vm.hostTest === false) {
          vm.$showAlert("호스트 수정", "접속테스트를 실행해주세요.");
          return;
        }
      }

      axios
        .put("/host", vm.hostData)
        .then((response) => {
          if (response.data > 0) {
            vm.$showAlert("호스트 수정", "호스트 정보가 수정되었습니다.");
            vm.changPw = null;
            vm.resetData();
            vm.selectHosts();
            vm.hostTest = false;
          } else {
            vm.$showAlert(
              "호스트 수정",
              "호스트 정보 수정에 실패하였습니다. 다시 시도해주세요."
            );
          }
        })
        .catch((error) => {
          vm.$showAlert("호스트 수정", "수정 오류, 관리자에게 문의해주세요.");
        });
    },

    async deleteSelectedHosts() {
      const vm = this;

      if (vm.selectedHosts.length === 0) {
        vm.$showAlert("호스트 삭제", "선택한 호스트가 없습니다.");
        return;
      }

      if (
        !(await vm.$showConfirm(
          "호스트삭제",
          "선택한 호스트를 삭제하시겠습니까?"
        ))
      ) {
        return;
      }

      axios({
        url: "/host",
        method: "delete",
        headers: {
          "Content-Type": "application/json",
        },
        data: vm.selectedHosts,
      })
        .then(function (response) {
          // 삭제가 성공하면 화면에서도 호스트를 제거합니다.
          if (response.data > 0) {
            vm.$showAlert("호스트 삭제", "선택한 호스트가 삭제되었습니다.");
            vm.checkAll = false;
            vm.selectedHosts = [];
            vm.selectHosts();
          } else {
            vm.$showAlert(
              "호스트 삭제",
              "선택한 호스트 삭제에 실패하였습니다. 다시 시도해주세요."
            );
          }
        })
        .catch(function (error) {
          vm.$showAlert("호스트 삭제", "삭제오류, 관리자에게 문의바랍니다.");
        });
    },

    insertForm: function () {
      this.dataLoaded = false;
      this.resetForm();
    },

    hostInsertCheck: async function () {
      const vm = this;

      if (vm.$isEmpty(vm.hostData.host_protocol)) {
        vm.$showAlert("호스트 등록", "프로토콜을 선택해주세요.");
        document.getElementById("host_ip").focus();
        return false;
      }

      if (vm.$isEmpty(vm.hostData.host_ip)) {
        vm.$showAlert("호스트 등록", "호스트(IP)를 입력해주세요.");
        document.getElementById("host_ip").focus();
        return false;
      }

      if (vm.$ipv4(vm.hostData.host_ip) === false) {
        vm.$showAlert("호스트 등록", "IP형식을 확인해주세요.");
        document.getElementById("host_ip").focus();
        return false;
      }

      if (vm.$isEmpty(vm.hostData.host_port)) {
        vm.$showAlert("호스트 등록", "포트를 입력해주세요.");
        document.getElementById("host_port").focus();
        return false;
      }

      if (vm.hostData.host_port > 65535) {
        vm.$showAlert("호스트 등록", "포트는 65535이하 숫자입니다.");
        document.getElementById("host_port").focus();
        return false;
      }

      if (vm.$isEmpty(vm.hostData.host_nm)) {
        vm.$showAlert("호스트 등록", "호스트명(별칭)을 입력해주세요.");
        document.getElementById("host_nm").focus();
        return false;
      }

      if (vm.$isEmpty(vm.hostData.host_id)) {
        vm.$showAlert("호스트 등록", "사용자ID를 입력해주세요.");
        document.getElementById("host_id").focus();
        return false;
      }

      if (vm.$isEmpty(vm.hostData.host_pw)) {
        vm.$showAlert("호스트 등록", "비밀번호를 입력해주세요.");
        document.getElementById("host_pw").focus();
        return false;
      }

      if (vm.hostTest === false) {
        vm.$showAlert("호스트 등록", "접속테스트를 실행해주세요.");
        return false;
      }
      vm.hostInsert();
    },

    check: function (host) {
      this.selectedHosts.push(host.host_code);
    },

    hostCheckAll() {
      this.checkAll = !this.checkAll;

      if (this.checkAll) {
        this.hosts.forEach((host) => {
          this.selectedHosts.push(host.host_code);
        });
      } else {
        this.selectedHosts = [];
      }
    },

    loadHostData(host) {
      this.hostData = Object.assign({}, host); // 클릭한 호스트의 데이터를 복사하여 저장합니다.
      this.originalHostData = Object.assign({}, host);
      this.dataLoaded = true; // 데이터가 로드되었음을 표시합니다.
    },

    resetData() {
      this.hostData = {}; // 데이터를 초기화합니다.
      this.dataLoaded = false; // 데이터 로드 상태를 초기화합니다.
    },

    resetForm() {
      this.hostData = {
        host_code: null,
        host_protocol: null,
        host_ip: null,
        host_nm: null,
        host_id: null,
        host_pw: null,
        host_port: null,
      };
    },
  },
  components: {
    PageNavigation: PageNavigation,
    PaginationButton: PaginationButton,
    SvgIcon: SvgIcon,
  },
  mounted() {
    this.selectHosts();
    this.searchInit();
  },
};
</script>