<template>
  <a-modal
    :style="{top:'5%',height:'95%'}"
    :title="title"
    :width="500"
    :visible="visible"
    :confirm-loading="confirmLoading"
    wrapClassName="ant-modal-cust-warp"
    cancel-text="关闭"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-directory-tree
     :load-data="onLoadData"
     :tree-data="treeData"
     @select="onSelect"
    >

    </a-directory-tree>
  </a-modal>
</template>

<script>

import {getAction,postAction,deleteAction} from '@/api/manage'


export default {
  name: 'FileSelectModal',
  data : function() {
    return {
      title : "选择文件目录",
      visible : false,
      confirmLoading : false,
      treeData : [],
      fileTreeUrl : "/online/form/head/fileTree",
      rootFileUrl : "/online/form/head/rootFile",
      selectedKey : ""
    };
  },
  created : function() {
    this.loadRoot();
  },
  methods : {
    handleSubmit : function() {
      this.$emit("callback", this.selectedKey);
      this.visible = false;
    },
    handleCancel : function() {
      this.visible = false;
    },
    show : function() {
      this.visible = true;
      this.selectedKey = "";
    },
    loadRoot : function() {
      let self = this;
      getAction(this.rootFileUrl).then(function(result) {
        if (result.success) {
          self.treeData = result.result;
        }
      });
    },
    onLoadData : function(treeNode) {
      let self = this;
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
        } else {
          let param = {
            parentPath : treeNode.dataRef.key
          };
          getAction(self.fileTreeUrl, param).then(function(res) {
            if (res.success) {
              treeNode.dataRef.children = res.result;
              self.treeData = [...self.treeData]
              resolve();
            }
          });
        }
      });
    },
    onSelect : function(obj) {
      this.selectedKey = obj[0];
    }
  }
}
</script>

<style scoped>

</style>