<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="closeModal()"><svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon></button>
        </div>
        <div>
          <h2>현재 경로</h2>
          <p>
            <span>{{ selectedPath }}</span>
          </p>
        </div>
      </div>
      <div class="modal-content-monthly">
        <TreeItem :connection="modalConnection" :closeModal="isCloseModal" v-for="(item, idx) in modalNodes" :item="item" :idx="item.id" :key="idx" @selectFolder="selectFolder" @selectItem="handleSelectItem" />
      </div>
      <div class="modal-end flex justify-end">
        <button class="blue-btn small-btn" v-if="selectType === 'copy'" @click="submit('복사')">복사</button>
        <button class="blue-btn small-btn" v-else-if="selectType === 'move'" @click="submit('이동')">이동</button>
        <button class="blue-btn small-btn" v-else-if="selectType === 'choose'" @click="submit('선택')">선택</button>
        <button class="blue-btn small-btn" v-else-if="selectType === 'update'" @click="submit('수정')">수정</button>
        <button class="gray-btn small-btn" @click="closeModal()">취소</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import SvgIcon from '@jamescoyle/vue-icon';
import TreeItem from '../component/FileTree.vue';
import { mdiClose } from '@mdi/js';
export default {
  props: {
    modalNodes: Object,
    modalConnection: {
      type: Object,
      default: {},
    },
    modalOpen: Boolean,
    selectType: Number,
  },
  data() {
    return {
      // host_code: null,
      // parentSelectNode: null,
      closePath: mdiClose,
      isModalOpen: false,
      isCloseModal: false,
      selectedPath: null,
      selectItem: null,
    }
  },
  methods: {
    selectFolder(path) {
      this.$emit('modalSelectFolder', path)
      this.modalConnection.path = path;
      this.selectedPath = path;
    },

    closeModal() {
      this.isCloseModal = true;
      this.isModalOpen = false;
      this.$emit('closeTreeModal', this.isModalOpen);
    },

    async submit(type) {
      this.$emit('modalSubmit', type);
      this.$emit('modalSelectItem', this.selectItem);
    },

    handleSelectItem(item, parentItem) {
      // 현재 선택된 폴더와 클릭한 폴더가 같을 때
      if (this.selectedPath == item.id) {
        this.selectItem = parentItem;
      } else {
        this.selectItem = item;
      }
    },

  },
  watch: {
    'modalOpen': function (v) {
      this.isModalOpen = v;
      this.isCloseModal = !v;
    },
  },
  computed: {

  },
  components: {
    'SvgIcon': SvgIcon,
    'TreeItem': TreeItem,
  },
  mounted() {
  }
}
</script>
<style scoped>
.tree-container {
  padding: 5px 10px;
}

.children-node {
  padding: 0 0 0 10px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.node-text {
  font-size: 1.4rem;
  margin-left: 5px;
}
</style>