<template>
  <div v-show="isModalOpen" class="modal-wrapper">
    <div class="modal-container">
      <div class="modal-title">
        <div class="flex justify-between align-center">
          <h2>데이터 셋 선택</h2>
          <button class="close-btn" @click="$emit('closePopup')">
            <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
          </button>
        </div>
      </div>
      <div class="content-wrap">
        <div class="content-box flex justify-between">
          <div class="flex20 content-box">
            <div class="left-content flex100 content-box">
              <CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
            </div>
          </div>
          <div class="flex80 content-box">
            <div class="right-content content-box">
              <div class="flex-column justify-between">
                <div class="flex justify-end align-center flex5 no-gutter">
                  <div class="flex justify-end flex100">
                    <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" />
                      <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" />
                      <select class="square-select ml5" v-model="search_data1.value">
                        <option :value="null">공개여부</option>
                        <option :value="true">공개</option>
                        <option :value="false">비공개</option>
                      </select>
                      <select class="square-select ml5" v-model="search_data2.value">
                        <option :value="null">카테고리</option>
                        <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm }} </option>
                      </select>
                      <select name="" id="searchItm1" class="square-select ml5" v-model="search_data3.key">
                        <option :value="null">검색조건</option>
                        <option value="post_sj">제목</option>
                        <option value="post_dc">내용</option>
                      </select>
                      <div class="search-square ml5">
                        <input type="text" class="square-input" placeholder="Search" v-model="search_data3.value" v-on:keyup.enter="searchData()" />
                        <button class="square-button blue-btn" @click="searchData()">
                          <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="table-zone flex85">
                  <div class="list-info flex justify-between align-center">
                    <div class="count-zone">
                      <p>총 <span>40</span>건 중 <span>01</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">
                    <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                    <colgroup>
                      <col style="width: 10%" />
                      <col style="width: 30%" />
                      <col style="width: 10%" />
                      <col style="width: 10%" />
                      <col style="width: 10%" />
                      <col style="width: 30%" />
                    </colgroup>
                    <thead>
                      <tr>
                        <th>No</th>
                        <th>제목</th>
                        <th>생성자</th>
                        <th>부서</th>
                        <th>카테고리</th>
                        <th>등록일시</th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-if="dataPostList.length > 0">
                        <tr v-for="(item, indx) in dataPostList" :key="indx" @click="selectPost(item)">
                          <td> {{ search.totalRows - indx - (search.currentPage - 1) * search.perPage }} </td>
                          <td>{{ item.post_sj }}</td>
                          <td>{{ item.creat_id }}</td>
                          <td>{{ item.dept_code }}</td>
                          <td>{{ item.ctgry_id }}</td>
                          <td>{{ item.creat_dt }}</td>
                        </tr>
                      </template>
                      <template v-else>
                        <tr>
                          <td colspan="6">등록된 데이터가 없습니다.</td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                  <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
                </div>
                <div>
                  <label :for="comId + 'forder'" style="padding-left: 255px">
                    <p class="width150 fl mt7" style="margin-bottom: 10px"> 데이터셋(ID) </p>
                    <input type="text" :name="comId + 'forder'" class="input_M width50p fl" v-model="selectedDatasetId" readonly />
                  </label>
                </div>
                <div class="flex5">
                  <div class="flex justify-end">
                    <button class="darkg-btn small-btn" @click="complite"> 완료 </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiClose } from "@mdi/js";
import axios from "axios";
import CodeList from "../../common/Component_CodeList.vue";
import PaginationButton from "../../PaginationButton.vue";

export default {
  components: {
    SvgIcon: SvgIcon,
    CodeList: CodeList,
    PaginationButton: PaginationButton,
  },
  props: {
    openPopup: {
      type: Boolean,
      default: false,
    },
    jobItem: {
      type: Boolean,
      default: null,
    },
  },
  data() {
    return {
      isModalOpen: this.openPopup,
      closePath: mdiClose,
      jobItm: this.jobItem,

      activeTab: "tab1",
      modalType: "tab-modal",
      //차트 Box ID (랜덤값 필수)
      categoryList: [],
      pagination: {},

      selectedDatasetId: null, // 선택한 데이터 셋 아이디

      // 데이터셋 목록
      datasetPostList: [],
      dataPostList: [],
      search: this.$getDefaultSerchVO(),
      // 공개여부
      search_data1: this.$getDefaultSerchItem("public_at", "bool"),
      // 카테고리
      search_data2: this.$getDefaultSerchItem("ctgry_id", "string"),
      // 선택
      search_data3: this.$getDefaultSerchItem("post_sj", "string"),
      // 날짜
      search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
      categoryList: [],
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    openPopup(v) {
      this.isModalOpen = v;
    },
    jobItem(v) {
      this.jobItemInfo = v;
    },
  },
  methods: {
    async init() {
      if (!this.jobItem) {
        this.jobItm = Object.assign({}, this.$getDefaultJobGroup().node);
        this.jobItm.itm = Object.assign(
          {},
          this.$getDefaultJobGroup().DatasetPost
        );
      } else {
        this.selectedDatasetId = this.jobItm.itm.dataset_post_id;
      }
      this.search.searchObjectList.push(this.search_date);
      this.search.searchObjectList.push(this.search_data1);
      this.search.searchObjectList.push(this.search_data2);
      this.search.searchObjectList.push(this.search_data3);
      this.categoryList = await this.$getCommonCode("DATA_CTGRY");
    },
    // 탭 변경
    showTab(tabName) {
      this.activeTab = tabName;
    },
    // 카테고리 선택
    categorySelect(item) {
      this.pagination.categoryId = item.categoryId;
      this.searchDatasetPostList();
    },
    //데이터셋 검색
    searchDatasetPostList() {
      this.pagination.currentPage = 1;
      this.getDatasetPostList();
    },
    //데이터셋 데이터 리스트 타이틀 가져오기
    getDatasetTitle(info) {
      if (info.isStandard == true) {
        return info.title;
      } else {
        return info.title + " (표준화필요)";
      }
    },
    selectCode(code) {
      this.search_data2.value = code;
      this.searchData();
    },
    // 완료버튼 클릭
    complite() {
      const vm = this;
      axios({
        url: "/dataset/getDataTableInfo.json",
        method: "post",
        headers: { "Content-Type": "application/json; charset=UTF-8" },
        data: { datapost_id: vm.selectedDatasetId },
      })
        .then(function (response) {
          vm.jobItm.dataTable = response.data.resultData.dataTable;
          vm.$emit("saveNodeData", vm.jobItm);
        })
        .catch(function (error) {
          vm.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },

    selectPost(item) {
      this.jobItm.itm = item;
      this.selectedDatasetId = item.dataset_post_id;
    },
    searchData() {
      const vm = this;
      axios({
        url: "/dataset/selectDataPostList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: JSON.stringify(vm.search),
      })
        .then(function (response) {
          if (response.data.checkMessage.success) {
            vm.dataPostList = response.data.resultData.dataPostList;
            vm.search.totalRows = response.data.resultData.totalRow;
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
  },
  computed: {
    CodeList,
  },
};
</script>