<template>
  <div class="container">
    <div class="content">
      <div class="content-titleZone flex justify-between align-center">
        <p class="box-title">다이어그램 목록</p>
        <div class="search-bar">
          <div class="flex justify-end align-center">
            <input
              type="date"
              name="start-date"
              id="start-date"
              class="square-date"
              :class="{ 'date-placeholder': false }"
              data-placeholder="날짜 선택"
              v-model="search_date.value"
              @change="searchData()"
            />
            <span class="coupler">~</span>
            <input
              type="date"
              name="end-date"
              id="end-date"
              class="square-date ml5"
              :class="{ 'date-placeholder': false }"
              data-placeholder="날짜 선택"
              v-model="search_date.value2"
              @change="searchData()"
            />
            <select
              class="square-select ml5"
              v-model="search_data1.value"
              @change="searchData()"
            >
              <option :value="null">상태 전체</option>
              <option value="success">성공</option>
              <option value="fail">실패</option>
            </select>
          </div>
        </div>
      </div>
      <div class="table-zone">
        <table class="list-table">
          <thead>
            <tr>
              <th>번호</th>
              <th>총 노드수</th>
              <th>실패 노드수</th>
              <th>실패 노드명</th>
              <th>실행일자</th>
              <th>상태</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(rowdata, dataIndex) in logdata"
              :key="dataIndex"
              @click="handleRowClick(rowdata.log_id)"
            >
              <td>{{ dataIndex + 1 }}</td>
              <td>{{ rowdata.total_node_count }}</td>
              <td>{{ rowdata.fail_node_count }}</td>
              <td>{{ rowdata.fail_node_name }}</td>
              <td>{{ $getFullTime(rowdata.operation_date) }}</td>
              <td>
                <p
                  v-if="rowdata.state_info === 'success'"
                  class="flex justify-center align-center state green icon-area"
                >
                  <svg-icon
                    type="mdi"
                    :width="21"
                    :height="21"
                    :path="checkPath"
                  ></svg-icon>
                  <span>성공</span>
                </p>
                <p
                  v-else-if="rowdata.state_info === 'fail'"
                  class="flex justify-center align-center state red"
                >
                  <svg-icon
                    type="mdi"
                    :width="21"
                    :height="21"
                    :path="xPath"
                  ></svg-icon>
                  <span>실패</span>
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <PaginationButton
        v-model:currentPage="search.currentPage"
        :perPage="search.perPage"
        :totalCount="search.totalRows"
        :maxRange="5"
        :click="searchData"
      />
    </div>
  </div>
  <!-- 모달 -->
  <div v-if="isModalOpen" class="modal-wrapper">
    <div class="modal-container list-modal">
      <div class="modal-title">
        <div class="flex justify-between align-center">
          <h2 class="main-title flex80">로그 상세보기</h2>
          <button class="close-btn" @click="closeModal">
            <svg-icon
              type="mdi"
              :width="20"
              :height="20"
              :path="closePath"
            ></svg-icon>
          </button>
        </div>
      </div>
      <div class="modal-content-monthly" v-show="modalType == 'form-modal'">
        <div class="flex justify-start align-center">
          <div class="cunt-selectZone">
            <p class="box-title">
              로그분류
              <select
                v-model="searchdetail_data.value"
                @change="searchDetailData"
              >
                <option :value="null">상태 전체</option>
                <option value="success">성공</option>
                <option value="fail">실패</option>
              </select>
            </p>
          </div>
        </div>
        <table class="list-table blue">
          <thead>
            <tr>
              <th>번호</th>
              <th>작동일시</th>
              <th>작동완료일시</th>
              <th>노드명</th>
              <th>호스트명</th>
              <th>로그분류</th>
              <th>로그메세지</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(rowdata, dataIndex) in detaillogdata" :key="dataIndex">
              <td>{{ dataIndex + 1 }}</td>
              <td>{{ $getFullTime(rowdata.operation_date) }}</td>
              <td>{{ $getFullTime(rowdata.operation_success_date) }}</td>
              <td>{{ rowdata.node_name }}</td>
              <td>{{ rowdata.creat_id }}</td>
              <td>{{ rowdata.log_category }}</td>
              <td class="text-over" title="-">{{ rowdata.log_message }}</td>
            </tr>
          </tbody>
        </table>
        <PaginationButton
          v-model:currentPage="searchdetail.currentPage"
          :perPage="searchdetail.perPage"
          :totalCount="searchdetail.totalRows"
          :maxRange="5"
          :click="detaillogSelectListAll"
        />
      </div>
      <div class="modal-end flex justify-end">
        <button
          v-show="modalType === 'form-modal'"
          class="blue-btn small-btn"
          @click="closeModal"
        >
          확인
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import { mdiClose } from "@mdi/js";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import DefaultSearchBar from "../../template/templateElement/DefaultSearchBar.vue";
import { useRoute } from "vue-router";
import axios from "axios";
export default {
  components: {
    PaginationButton: PaginationButton,
    SvgIcon: SvgIcon,
    DefaultSearchBar: DefaultSearchBar,
  },
  props: {
    diagram_id: {
      type: String, // 또는 String, 실제 타입에 맞게 설정
      required: true,
    },
  },
  data() {
    return {
      // 검색
      search: this.$getDefaultSerchVO(),
      search_date: this.$getDefaultSerchItem("operation_date", "dates"),
      search_data1: this.$getDefaultSerchItem("state_info", "string"),
      search_data2: {
        key: "diagram_id",
        value: this.diagram_id,
      },

      //상세보기 검색
      searchdetail: this.$getDefaultSerchVO(),
      searchdetail_data: this.$getDefaultSerchItem("log_category", "string"),
      searchdetail_data1: {
        key: null,
        value: null,
      },

      //검색 데이터
      searchPath: mdiMagnify,
      startDate: true,
      endDate: true,

      closePath: mdiClose,
      isModalOpen: false,
      modalType: "form-modal",
      checkPath: mdiCheckCircle,
      xPath: mdiCloseCircle,
      logdata: [],
      detaillogdata: [],
      logId: null,
      diagram_id: this.diagram_id,

      //현재 라우터의 정보
      route: useRoute(),
      // 페이지 경로 목록
      pageList: [
        { path: "/", name: "대시보드" },
        { path: "/fileManagement.page", name: "파일 관리" },
        { path: "/hostManagement.page", name: "호스트 관리" },
        { path: "/scheduleManagement.page", name: "작업 스케줄 관리" },
        { path: "/scheduleLogManagement.page", name: "로그 관리" },
      ],
    };
  },
  mounted() {
    this.searchData();
  },
  watch: {
    diagram_id(v) {
      this.search_data2.value = v;
      this.searchData();
    },
  },
  methods: {
    searchData() {
      const vm = this;
      let data = vm.search;
      data.searchObjectList = [];
      data.searchObjectList.push(this.search_date);
      data.searchObjectList.push(this.search_data1);
      data.searchObjectList.push(this.search_data2);
      axios({
        url: "/diagram/logSelectListAll.json",
        method: "post",
        headers: { "Content-Type": "application/json; charset=UTF-8" },
        data: data,
      })
        .then(function (response) {
          vm.search.currentPage = response.data.resultData.searchVO.currentPage;
          vm.search.order = response.data.resultData.searchVO.order;
          vm.search.orderASC = response.data.resultData.searchVO.orderASC;
          vm.search.perPage = response.data.resultData.searchVO.perPage;
          vm.search.searchObjectList = [];
          vm.search.totalRows = response.data.resultData.searchVO.totalRows;
          vm.logdata = response.data.resultData.logList;
        })
        .catch(function (error) {
          vm.$showAlert(
            "오류",
            "처리 중 오류가 발생했습니다. 관리자에게 문의바랍니다."
          );
        });
    },
    searchDetailData() {
      const vm = this;
      let datadetail = vm.searchdetail;
      datadetail.searchObjectList = [];
      datadetail.searchObjectList.push(this.searchdetail_data);

      this.detaillogSelectListAll();
    },
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    pathName() {
      for (let i = 0; i < this.pageList.length; i++) {
        if (this.route.path == this.pageList[i]["path"]) {
          return this.pageList[i]["name"];
        }
      }
      return "대시보드";
    },

    handleRowClick(logId) {
      this.logId = logId;
      this.detaillogSelectListAll();
      this.openModal();
    },

    detaillogSelectListAll() {
      const vm = this;
      let datadetail = vm.searchdetail;
      datadetail.searchObjectList = [];
      datadetail.searchObjectList.push(this.searchdetail_data);
      vm.searchdetail_data1.key = "log_id";
      vm.searchdetail_data1.value = vm.logId;
      datadetail.searchObjectList.push(this.searchdetail_data1);

      axios({
        url: "/diagram/detaillogSelectListAll.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: datadetail,
      })
        .then(function (response) {
          vm.searchdetail.currentPage = response.data.resultData.searchVO.currentPage;
          vm.searchdetail.order = response.data.resultData.searchVO.order;
          vm.searchdetail.orderASC = response.data.resultData.searchVO.orderASC;
          vm.searchdetail.perPage = response.data.resultData.searchVO.perPage;
          vm.searchdetail.searchObjectList = [];
          vm.searchdetail.totalRows = response.data.resultData.searchVO.totalRows;
          vm.detaillogdata = response.data.resultData.logList;
        })
        .catch(function (error) {
          alert("상품 주문에 오류가 발생했습니다.");
        });
    },
  },
};
</script>

<style scoped>
.navigate_bar {
  padding: 10px 0px;
  font-size: 1.3rem;
}
</style>