<template>
  <div class="app-container">
    <ContainerLayout :options="view.layout" ref="layout" class="body-content form" @resize="resize">
      <div slot="north">
        <div class="title" v-if="view.showTitle" ref="title">{{$_i18n(view.title)||"未设置标题"}}</div>
        <!--表单应用，不提供工具栏fid-->
        <CustomToolbar v-show="view.showToolbar" ref="toolbar" @click="$page_toolbar_clickHandler"
                       @ready="$_page_toolbar_initComplete" @resize="resize" @completed="completed"
                       :queryParams="queryParams"></CustomToolbar>
      </div>
      <div class="form-body tree-body" style="width: 100%;">
        <el-input v-if="view.showFilter" v-model="filterText" :placeholder="$t('tree.filter_text')"
                  ref="filterText" prefix-icon="el-icon-search" size="mini" clearable/>
        <el-tree ref="tree" :data="items" :props="view.treeProps" :filter-node-method="filterNode"
                 class="filter-tree" :default-expand-all="view.expandAll" :style="{height:view.treeHeight,width:'100%'}"
                 :checkStrictly="view.checkStrictly" :defaultCheckedKeys="defaultCheckedKeys"
                 :draggable="view.draggable" :show-checkbox="view.showCheckbox" node-key="id"
                 :highlight-current="view.highlightCurrent" @current-change="clickNode" />
      </div>
    </ContainerLayout>
  </div>
</template>
<script>
    import resize from '../../utils/mixins/resize';
    import page from '../Common/page';
    export default {
        name:"SelectTreeView",
        mixins:[resize,page],//监听外部框架的大小改变事件
        data() {
            return {
                loaded:false,
                columnSize:12,
                filterText: '',
                jid: null,
                items: [],
                defaultCheckedKeys:[],
                view: {//布局控制配置
                    checkStrictly:true,//用严格模式来控制是否需要半选,默认是不级联
                    showCheckbox: true,
                    showFilter:true,
                    selectEnable:true,
                     // supportHalfChecked:true,//是否支持半选即选中
                    expandAll:true,
                    layout: {
                        north: {visible: true, resize: false, size: "auto"}
                    },
                    dialog: {},
                    treeProps: {
                        children: 'children',
                        label: 'name'
                    },
                    highlightCurrent: true,
                    treeHeight: "calc(100% - 38px)"
                },
                tools:[
                  {type:"saveRel",code:"save",name:"[toolbar.save]",remark:"[toolbar.save_remark]",style:"icon-save"}
                ],
                selectedItem:[],
                rules:{}
            }
        },async created() {
            this.$_page_getRouter();
            await this.initFormConfig();
        },
        mounted(){
            this.$refs.layout.updateLayout(this.view.layout);
        },
        watch:{
            filterText(val) {
                this.$refs.tree.filter(val)
            }
        },
        computed:{
        },
        methods: {
            customQuery(params) {
                if (this.jid) {
                    this.clearData();
                    params.loading = true;
                    let data=Object.assign({},this.queryParams);
                    delete data.jid;
                    this.$http(this.$store.state.api.json[this.view.dataType==="json"?"loadData":"loadTree"] + this.jid,
                            {keymap:{},data: data}).then((res) => {
                        this.items = this.$core.transform2TreeData(res.data,this.queryParams.pid||0,!this.view.checkStrictly);
                        for(let i in res.data){
                          if(res.data[i].checked)
                            this.defaultCheckedKeys.push(res.data[i].id)
                        }
                        params.loading = false;
                    })
                }
            },setCurrentNode(node){

            }, filterNode(value, data) {
                if (!value) return true
                return data[this.view.treeProps.label].indexOf(value) !== -1
            }, clickNode(data, node) {
                this.selectedItem = data;
            }, 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;
                return this.$el.offsetHeight - toolbarHeight - titleHeight - (this.view.showFilter ? 38 : 0) - 6;
            }, updatePageParams(pageParams) {
                if (pageParams.reportName) {
                  this.view.title = pageParams.reportName;
                  delete pageParams.reportName;
                }
                if (pageParams.jid) {
                    this.jid = pageParams.jid;//拦截无穷递归
                }
            }, resize(e) {
              this.$nextTick(()=>{
                let height = this.calcHeight();
                if (height > 0 && this.view.treeHeight !== height + "px") {
                  this.view.treeHeight = height + "px";
                }
              })
            }, completed() {
                // this.$core.debug().log("收到工具栏布局完成事件");
            }, clearData() {
                this.items = [];
            },
        }
    }
</script>

