<template>
  <div class="row">
    <div class="table-zone pd0">
      <table class="form-table">
        <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
        <colgroup>
          <col style="width: 15%" />
          <col style="width: 85%" />
        </colgroup>
        <tbody>
          <tr>
            <th>데이터 선택</th>
            <td>
              <button class="blue-border-btn small-btn" @click="itmSelectModal = true">아이템 추가</button>
              <button class="blue-btn small-btn" @click="execModel">데이터 적용</button>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="data-list" :style="'height:' + componentHright + 'px;'">
                <ul class="flex">
                  <li v-for="(itm, indx) in crrentJobGroup.jobItm" :key="indx" class="flex50">
                    <div class="item flex justify-between align-center">
                      <p>{{ indx + 1 + ". " + itm.type }}</p>
                      <div>
                        <button class="blue-border-btn set-btn" @click="showPopup(indx)">설정</button>
                        <!-- <button class="red-border-btn set-btn" @click="deleteConnect(indx)">삭제</button> -->
                      </div>
                      <FileSelect :openPopup="popupToggls[indx]" :jobItem="itm" :mode="itm.type" @closePopup="closePopup(indx)" v-if="itm.type == 'fileRead' || itm.type == 'fileWrite'" />
                      <DatabaseConnection :openPopup="popupToggls[indx]" :jobItem="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'dbConnection'" />
                      <DataCheck :openPopup="popupToggls[indx]" :jobItem="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'dataCheck'" />
                      <DataSort :openPopup="popupToggls[indx]" :item="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'dataSort'" />
                      <DataFilter :openPopup="popupToggls[indx]" :item="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'dataFilter'" />
                    </div>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div v-show="itmSelectModal" class="modal-wrapper">
    <div class="modal-container small-modal">
      <div class="modal-title">
        <div class="flex justify-between align-center">
          <h2>아이템 선택</h2>
          <button class="close-btn" @click="itmSelectModal = false">X</button>
        </div>
      </div>
      <div class="modal-content-monthly">
        <div class="justify-center aling-center" style="text-align: center">
          <select class="square-select half-input" v-model="selectItm">
            <!-- <option v-show="crrentJobGroup.datasetPost_id == null" value=""> 데이터셋 읽기 </option>
            <option v-show="crrentJobGroup.datasetPost_id == null" value="fileRead"> 파일 읽기 </option> -->
            <option v-show="crrentJobGroup.datasetPost_id == null" value="dbConnection"> DB 수집 </option>
            <!-- <option v-show="crrentJobGroup.datasetPost_id == null" value=""> API 수집 </option>
            <option v-show="crrentJobGroup.datasetPost_id == null" value="dataSort"> 데이터검증 </option>
            <option v-show="crrentJobGroup.datasetPost_id == null" value="fileWrite"> 파일 쓰기 </option> -->
            <!-- <option value="dataFilter">필터 모듈</option>
            <option value="dataSort">정렬 모듈</option> -->
          </select>
        </div>
      </div>
      <div class="modal-end flex justify-end">
        <button class="darkg-border-btn small-btn" @click="addItm">확인</button>
      </div>
    </div>
  </div>
</template>
<script>
import FileSelect from "./itm/fileSelect.vue";
import DatabaseConnection from "./itm/databaseConnection.vue";
import DataCheck from "./itm/dataCheck.vue";
import DataSort from "./itm/dataSort.vue";
import DataFilter from "./itm/dataFilter.vue";

import axios from "axios";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiTrashCan, mdiCog } from "@mdi/js";
export default {
  name: "job-container",
  props: {
    jobGroup: {
      type: Object,
      default: null,
    },
    height: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      popupToggls: [],
      itmSelectModal: false,
      // , jobGroups: this.jobGroup
      crrentJobGroup: this.jobGroup,
      componentHright: this.height,
      defaultJobGroup: Object, //JSON.parse(JSON.stringify(this.$getDefaultJobGroup().jobGroup))
      defaultJobItm: Object, //JSON.parse(JSON.stringify(this.$getDefaultJobGroup().jobItm))
      delPath: mdiTrashCan,
      setPath: mdiCog,
      selectItm: "dbConnection",
    };
  },
  methods: {
    // 팝업 호출
    showPopup: function (indx) {
      if (
        this.crrentJobGroup.jobItm[indx - 1] != null &&
        this.crrentJobGroup.datasetPost_id == null
      ) {
        console.log('show')
        this.crrentJobGroup.jobItm[indx].front_dataTable =
          this.crrentJobGroup.jobItm[indx - 1].dataTable;
      }

      this.popupToggls[indx] = true;
    },
    closePopup: function (indx) {
      this.popupToggls[indx] = false;

    },

    // 기본 job 데이터
    getDefaultJobGroup: function () {
      var vm = this;
      this.defaultJobGroup = JSON.parse(
        JSON.stringify(this.$getDefaultJobGroup().jobGroup)
      );
      this.defaultJobItm = JSON.parse(
        JSON.stringify(this.$getDefaultJobGroup().jobItem)
      );
      if (this.crrentJobGroup == null) {
        this.crrentJobGroup = JSON.parse(JSON.stringify(this.defaultJobGroup));
      }
    },

    // 아이템 선택
    addItm: function () {
      var type = this.selectItm;
      this.itmSelectModal = false;
      let newItm = JSON.parse(
        JSON.stringify(this.$getDefaultJobGroup().jobItem)
      );
      newItm.type = type;
      newItm.indx = this.crrentJobGroup.jobItm.length + 1;

      // 파일 읽기 모듈
      if (type == "fileRead") {
        newItm.itm = JSON.parse(
          JSON.stringify(this.$getDefaultJobGroup().fileRead)
        );
      }

      // 데이터 베이스 연계 모듈
      else if (type == "dbConnection") {
        newItm.itm = JSON.parse(
          JSON.stringify(this.$getDefaultJobGroup().connectionDb)
        );
      }

      // 데이터 체크모듈 (안씀)
      else if (type == "dataCheck") {
        newItm.itm = JSON.parse(
          JSON.stringify(this.$getDefaultJobGroup().dataCheck)
        );
        newItm.itm_option_string = "1";
      }

      // 데이터 정렬 초기화
      else if (type == "dataSort") {
        newItm.itm = JSON.parse(
          JSON.stringify(this.$getDefaultJobGroup().dataFilter)
        );
        newItm.itm.filterItems.push(
          JSON.parse(JSON.stringify(this.$getDefaultJobGroup().filterItem))
        );
        newItm.itm.filterItems[0].cmpr_value = "DESC";
        newItm.itm.filterItems[0].cmpr_value2 = "10000";
        // 잡그룹이 데이터셋 형일때
        if (this.crrentJobGroup.datasetPost_id != null) {
          newItm.front_dataTable = JSON.parse(
            JSON.stringify(this.crrentJobGroup.dataTable)
          );
        }
      }

      // 데이터 필터 초기화
      else if (type == "dataFilter") {
        newItm.itm = JSON.parse(
          JSON.stringify(this.$getDefaultJobGroup().dataFilter)
        );
        newItm.itm.match_type = true;
        // 잡그룹이 데이터셋 형일때
        if (this.crrentJobGroup.datasetPost_id != null) {
          newItm.front_dataTable = JSON.parse(
            JSON.stringify(this.crrentJobGroup.dataTable)
          );
        }
      }

      // 파일 쓰기 모듈
      else if (type == "fileWrite") {
        newItm.itm = JSON.parse(
          JSON.stringify(this.$getDefaultJobGroup().fileRead)
        );
      }

      if (
        this.crrentJobGroup.jobItm.length > 0 &&
        this.crrentJobGroup.datasetPost_id == null
      ) {
        newItm.front_dataTable =
          this.crrentJobGroup.jobItm[
            this.crrentJobGroup.jobItm.length - 1
          ].dataTable;
      }

      this.popupToggls.push(false);

      this.crrentJobGroup.jobItm.push(newItm);
    },

    execModel: function () {
      let vm = this;
      axios({
        url: "/job/executeJob.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.crrentJobGroup,
      })
        .then(function (response) {
          vm.crrentJobGroup.dataTable = response.data.resultData.dataTable;
          vm.$emit('getDataTable', vm.crrentJobGroup.dataTable)
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    deleteConnect: function (indx) {
      this.crrentJobGroup.jobItm.splice(indx, 1);
    },
  },
  watch: {
    jobGroup: function (v) {
      this.crrentJobGroup = v;
    },
    height: function (v) {
      this.componentHright = v;
    },

  },
  components: {
    FileSelect: FileSelect,
    DatabaseConnection: DatabaseConnection,
    SvgIcon: SvgIcon,
    DataCheck: DataCheck,
    DataSort: DataSort,
    DataFilter: DataFilter,
  },
  mounted() {
    this.getDefaultJobGroup();
  },
};
</script>