<template>
  <div
    v-show="!treeLoading"
    class="tree"
  >
    <div v-if="Array.isArray(this.getTreeData) && this.getTreeData.length > 0">
      <tree-view
        ref="mtree"
        :data="getTreeData"
        :options="treeOptions"
        @node:selected="onNodeSelected"
      />
    </div>
    <div v-else>
      <section class="section">
        <div class="content has-text-grey has-text-centered">
          <p>
            <b-icon
              icon="frown"
              size="is-large"
            />
          </p>
          <p>데이터가 없습니다.</p>
        </div>
      </section>
    </div>
    <b-loading
      :is-full-page="false"
      :active.sync="treeLoading"
      :can-cancel="false"
    />
  </div>
</template>

<script>
import LiquorTree from 'liquor-tree';

export default {
  components: {
    treeView: LiquorTree,
  },
  props: {
    originData: {
      type: Array,
    },
    treeData: {
      type: Array,
    },
  },
  data() {
    return {
      /* tree */
      treeLoading: true,
      getTreeData: [],
      treeOptions: {
        checkbox: false,
        editing: false,
        dnd: false,
        filter: {
          emptyText: '데이터 없음',
        },
        parentSelect: true,
      },
      value: null,
      alwaysOpen: true,
      clearable: false,
      options: [],
      temp: [],
      clickParams: [],
      selectedParam: {},
    };
  },
  computed: {
    changeTreeData: () => {
      this.getTreeData = this.originData;
    },
  },
  watch: {
    isLoading() {
      this.isLoading2 = this.isLoading;
    },
    treeData() {
      this.treeLoading = true;
      this.getTreeData = [];
      try {
        this.getTreeData = this.change(this.treeData);
        this.$refs.mtree.setModel(this.getTreeData);
      } catch (error) {
        // console.log(error);
      } finally {
        this.treeLoading = false;
      }
    },
  },
  mounted() {
    this.treeLoading = true;
    try {
      if (Array.isArray(this.originData) && this.originData.length > 0) {
        this.getTreeData = this.originData;
      } else if (
        Array.isArray(this.treeData) && this.treeData.length > 0
      ) {
        this.getTreeData = this.change(this.treeData);
      } else {
        this.getTreeData = [];
      }
    } catch (error) {
      //
    } finally {
      this.treeLoading = false;
    }
  },
  methods: {
    expandAll() {
      this.$refs.mtree.expandAll();
    },
    setModel() {
      this.$refs.mtree.setModel(this.getTreeData);
    },
    setNodeParam(node) {
      if (node.states.expanded === false) {
        node.states.expanded = true;
      }
      this.selectedParam[`${node.data.column}`] = node.data.value;
      if (node.parent) {
        this.setNodeParam(node.parent);
      } else {
        this.$emit('tree-click', this.selectedParam);
      }
    },
    onNodeSelected(value) {
      this.selectedParam = {};
      this.setNodeParam(value);
    },
    change(value) {
      const oldData = value;
      if (!Array.isArray(oldData) || oldData.length === 0) {
        return [];
      }
      const newData = [];
      const columns = Object.keys(oldData[0]);
      const keys = [];
      const keysTxt = [];
      columns.map((column) => {
        if (!column.toUpperCase().endsWith('NAME')) {
          keys.push(column);
        } else {
          keysTxt.push(column);
        }
        // return column;
      });
      let node = [];
      oldData.map((row) => {
        node = newData;
        keys.map((key, i) => {
          if (
            node.length === 0 || node[node.length - 1].row[key] !== row[key]
          ) {
            const txt = row[key] == null ? 'N/A' : row[keysTxt[i]];
            const newElement = {
              text: txt,
              data: {
                column: key,
                value: row[key],
              },
              row,
            };
            if (keys.length - 1 !== i) {
              newElement.children = [];
            }
            node.push(newElement);
          }
          node = node[node.length - 1].children;
          // return true;
        });
        // return true;
      });
      this.clickParams = newData;
      return newData;
    },
  },
};
</script>
<style scoped>
.tree {
  max-height: 45rem;
}
</style>
