<template>
  <div class="app-container">
    <ContainerLayout :options="view.layout" ref="layout" class="body-content" @resize="resize">
      <div slot="north">
        <div class="title" v-if="view.showTitle" ref="title">{{$_i18n(view.title)||"未设置标题"}}</div>
        <CustomToolbar v-show="view.showToolbar" ref="toolbar" :fid="fid" @click="$page_toolbar_clickHandler"
                       @ready="$_page_toolbar_initComplete" @resize="resize" @completed="completed" page="tree"
                       :queryParams="queryParams" @updateView="$_page_updateView"
        ></CustomToolbar>
      </div>
      <div slot="west" style="height:100%">
        <el-input v-model="filterText" :placeholder="$t('tree.filter_text')" v-if="view.showFilter"
               ref="filterText"    prefix-icon="el-icon-search" size="mini" clearable>
  <!--        当需要使用外部样式，如iconfont时，才使用slot方式-->
  <!--        <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
        </el-input>
        <el-tree ref="tree" :data="items" :props="view.treeProps" :filter-node-method="filterNode"
                 class="filter-tree" :class="view.cssClass" default-expand-all :style="{height:view.treeHeight}"
                 :draggable="view.draggable" :show-checkbox="view.showCheckbox" node-key="id"
                 :highlight-current="view.highlightCurrent" @current-change="clickNode"
               :render-content="renderContent" :icon-class="view.iconClass"/>
      </div>
      <!--使用vue动态组件加载适配-->
      <template v-if="view.layout.center.component!=null">
        <component ref="center" :is="view.layout.center.component" :params="view.layout.center.params"></component>
      </template>
      <!--使用vue动态组件加载适配-->
      <component v-if="view.layout.east && view.layout.east.component!=null && view.layout.east.visible"
                 slot="east" ref="east" :is="view.layout.east.component" :params="view.layout.east.params">
      </component>
    </ContainerLayout>
    <template>
      <Dialog refs="dialog" :title="dialog.title" :visible.sync="dialog.visible" :destroy-on-close="dialog.destroyOnClose"
                  :width="dialog.width" :height="dialog.height" :close-on-click-modal="dialog.modalClose"
                  :parentClass="view.parentClass" :custom-class="view.customClass"
                  @close="handleDialogClose" :modal-append-to-body="false" :close-on-press-escape="false">
        <component v-if="dialog.visible" ref="south" :is="dialog.component" :params="dialog.params"></component>
        <span v-if="dialog.footer&&dialog.footer.visible" slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="dialog.visible = false">确 定</el-button>
        </span>
      </Dialog>
    </template>
  </div>
</template>
<script>
    import resize from '../../utils/mixins/resize';
    import page from '../Common/page';
    export default {
        name: "TreeView",
        mixins: [resize, page],//监听外部框架的大小改变事件
        async created() {
            this.$_page_getRouter();
            await this.initFormConfig();
            this.$nextTick(()=>{
                this.$refs.layout.updateLayout(this.view.layout);
            })
        }, mounted() {

        }, data() {
            return {
                filterText: '',
                jid: null,
                items: [],
                view: {//布局控制配置
                    showCheckbox: false,
                    showFilter:true,
                    selectEnable:true,
                    clickMode: 2,  //1 为 仅树节点可以点击，2为仅叶子节点可以点击，3为全部可以点击，默认为仅叶子节点可以点击,0都不能点击
                    layout: {
                        north: {visible: true, resize: false, size: "auto"},
                        west: {visible: true},
                        center: {component: null, params: {showTitle: true,inited:false}, query: {}},
                        east:  {visible: false, params: {showTitle: true,inited:false}, query: {}}
                    },
                    dialog: {},
                    treeProps: {
                        children: 'children',
                        label: 'name'
                    },
                    highlightCurrent: true,
                    treeHeight: "calc(100% - 38px)"
                }
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            }
        },
        methods: {
            renderContent(h, { node, data, store }) {
                // this.$d.debug().log(node,data,store);
                return (<span class="el-tree-node__label {data.color}">
                    <span title={data.title}>{node.label}</span>
                    </span>);
            },customQuery(params) {
                if (this.jid) {
                    this.clearData();
                    params.loading = true;
                    this.$d.debug().log("打印查询参数",this.view,this.queryParams)
                    this.$http(this.$store.state.api.json[this.view.dataType=="json"?"loadData":"loadTree"] + this.jid,
                            {keymap:{},data: this.queryParams}).then((res) => {
                        this.items = this.$d.transform2TreeData(res.data);
                        //这边需要等待子页面的工具栏加载完成才继续
                        //有时子控件的工具栏会先完成
                        //有时子控件的工具栏会后完成
                        //自动选中之前的数据的功能
                        let item = this.$_page_keepSelectedCallback(res.data);
                        // this.$d.debug().log("测试联动", item);
                          this.$nextTick(() => {
                            if (this.view.selectEnable) { //如果需要默认选中
                              if ((this.view.clickMode & 1) > 0) {
                                this.setCurrentNode(item || this.items[0]);
                              } else {
                                if (this.items.length > 0) {
                                  if (item == null) {
                                    item = this.items[0];
                                    while (item.children && item.children.length > 0) {
                                      item = item.children[0];
                                    }
                                  }
                                  this.setCurrentNode(item);
                                }
                              }
                            } else {//如果不需要选中，则直接参数传递给下级
                                let params=this.$d.extend({},this.queryParams);
                                delete params.jid;
                                delete params.fid;
                                delete params.rid;
                                this.selectedItem=params;
                                this.$_page_linkageLayout("center");
                            }
                          })
                        params.loading = false;
                    })
                }
            },setCurrentNode(node){
                if(this.view.selectEnable) {
                  if (this.view.layout.center.component == "Workflow" || (this.$refs.center.$refs.toolbar && this.$refs.center.$refs.toolbar.loaded)) {
                    this.$refs.tree.setCurrentNode(node);
                    this.$refs.tree.$emit("current-change", node);
                  } else {
                    setTimeout(this.setCurrentNode, 50, node);
                  }
                }
            }, filterNode(value, data) {
                if (!value) return true
                return data[this.view.treeProps.label].indexOf(value) !== -1
            }, clickNode(data, node) {
                this.selectedItem = data;
                if ((this.view.clickMode & 1) == 0 && data.children && data.children.length > 0) {//非叶子节点
                    return;
                }
                if ((this.view.clickMode & 2) == 0 && !data.children && data.children.length == 0) {//叶子节点
                    return;
                }
                // this.$d.debug().log("选中事件", data);
                //更新数据，因为不是指针，所以需要额外的逻辑进行更新
                if (this.$refs.center) {
                    this.$_page_linkageLayout("center");
                }
                if (this.view.layout.east.visible&&this.$refs.east) {
                  this.$_page_linkageLayout("east");
                }
            }, calcHeight() {
                let toolbarHeight = (this.$refs.toolbar && this.$refs.toolbar.$el && this.$refs.toolbar.$el.offsetHeight) || 0;
                let titleHeight = (this.$refs.title && this.$refs.title.offsetHeight) || 0;
                let height = this.$el.offsetHeight - toolbarHeight - titleHeight - (this.view.showFilter?38:0)-6;
                return height;
            }, updatePageParams(pageParams) {
                if (pageParams.reportname) {
                    this.view.title = pageParams.reportname;
                    delete pageParams.reportname;
                }
                if (pageParams.jid) {
                    this.jid = pageParams.jid;//拦截无穷递归
                }
                if (pageParams.rid) {
                    this.view.layout.center.params.rid = pageParams.rid;//支持默认递归传递
                }
            }, resize(e) {
                this.$nextTick(() => {
                    let height = this.calcHeight();
                    if (height > 0 && this.view.treeHeight != height + "px") {
                        this.view.treeHeight = height + "px";
                    }
                    if (this.$refs.center && this.$refs.center.resize)
                        this.$refs.center.resize(e);
                })
            }, completed() {
                // this.$d.debug().log("收到工具栏布局完成事件");
            }, clearData() {
                this.items = [];
                if (this.$refs.center&&this.$refs.center.clearData) {
                    this.$refs.center.clearData();
                }
                if (this.view.layout.east.visible&&this.$refs.east&&this.$refs.east.clearData) {
                  this.$refs.east.clearData();
                }
            }
        }
    }
</script>

