<template>
  <Card :padding="0"    dis-hover :bordered="false"  :style="'background:#fff;height:' + clientHeight +'px'">
    <div ref="toolbarcard" >
         <Card :padding="0"  style="padding-top:14px;padding-left:16px;padding-right:16px;border-radius:0px;" :bordered="false" dis-hover>
            <ListBtnToolbar ref="menutoolbar" :config="menuToolbar"  :moduleMethod="moduleMethod"   @doAction="doAction"/>
            <Divider style="margin-top:16px;margin-bottom:0px;" />
        </Card>
    </div>
    <div ref="formcard">
    <Card :padding="0"  dis-hover :bordered="false"  style="padding-left:14px;padding-right:14px;padding-top:0px;padding-bottom:0px">
        <Formcards  ref="form"  :config="myConfig.formConfig" :dictData="dictData"/>
    </Card>
    </div>
    <div style="padding:14px 16px;">
        <iframe v-if="resert" ref="birtreport" :src="iframeUrl" frameborder="0"  style="width: 100%;border:1px solid #DCDFE6"  :height="currentHeight" allowtransparency="true"  @load="load"></iframe>
    </div>
  </Card>
</template>

<script>
import ListBtnToolbar from './listbtntoolbar.vue';
import Formcards from './formcard.vue';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
    name:'mreport',
    components:{ListBtnToolbar,Formcards},
    data () {
        return {
            myConfig:{
                titleType:2,
                divStyle:'padding:5px',
                title:'查询条件'
            },
            menuToolbar:{},
            gridToolbar:{},
            frontBtn: [{
                name:'searchData',text:'查询',icon:'custom-search'
            },{
                name:'clearData',text:'清除',icon:'custom-clean'
            }],
            birtUrl:'',
            iframeUrl:'',
            resert:true,
            outsideheight:0
        };
    },
    props:{
        config: {
            type:Object,
            default:null
        },
        dictData: {
            type: Object,
            default:null
        },
        moduleMethod:{
            type:Array,
            default: () => {
                return [];      
            }
        }
    },
    computed: {
        clientHeight () {
            return this.$Store.state.app.clientHeight;
        },
        currentHeight () {
            let curlheight = this.$Store.state.app.clientHeight - this.outsideheight - 30;
            return curlheight;
        }
    },
    created () {
        this.myConfig =  Object.assign({},this.myConfig, this.config);
        this.myConfig.formConfig.titleType = this.myConfig.titleType;
        if (this.myConfig.formConfig.title === undefined) {
            this.myConfig.formConfig.title = this.myConfig.title;
        }
        if (this.myConfig.menuToolbar && this.myConfig.menuToolbar.items) {
            this.menuToolbar = this.$Method.copy(this.myConfig.menuToolbar);     
        } 
        if (!this.menuToolbar.items) {
            this.menuToolbar.items = [];
        }
        let frontBtn = []
        this.frontBtn.forEach(el => {
            let index = this.menuToolbar.items.findIndex(el2 => el2.name === el);
            if (index === -1) {
                frontBtn.push(el);
            }
        });
        this.menuToolbar.items = frontBtn.concat(this.menuToolbar.items);
        this.menuToolbar.mainButton = 'searchData';
        this.menuToolbar.mainButtonText ='查询';
        this.menuToolbar.ignoreModule = ['searchData','clearData'];
        this.setReportUrl();
    },
    methods: {
        doAction (obj) {
            const method = obj.name;
            if (this.$parent[method]) {
                this.$parent[method]();
            } else {
                if (this[method]) {
                    this[method]();
                }
            }
        },
        clearData () {
            this.$refs.form.clearData();
            this.resert = false;
            this.iframeUrl = '';
        },
        searchData() {
            this.$refs.form.checkValidate();
            let flag = this.$refs.form.isError();
            if (flag) {
                this.alert('必填项不允许为空');
                return false;
            }
            let data = this.$refs.form.getData();

            let  url = this.birtUrl + '&__masterpage=true&__showtitle=false&__format=html&__page=1';
            let paramurl = '';
            for (let key in data) {
                if (data[key]) {
                    paramurl += '&' + key + '=' + data[key];
                }
            }
            //url拼上__userid，__postid ，增加数据范围
            let userid = this.$Method.getUrlParam('userid');
            if (userid != null && userid != '') {
                paramurl += '&__userid=' + userid;
            }
            let postid = this.$Method.getUrlParam('postid');
            if (postid != null && postid != '') {
                paramurl += '&__postid=' + postid;
            }
            paramurl += '&__accesstime=' + new Date().getTime();

            url = encodeURI(url + paramurl);
            this.iframeUrl = url;
            this.resert = false;
            this.$nextTick(() => {
                this.resert = true;
            });
        },
        refurbish () {
            this.searchData();
        },
        getForm () {
            return this.$refs.form;
        },
        load() {
            if (this.myConfig.onLoad) {
                let iframe = this.$refs.birtreport.$el;
                this.myConfig.onLoad(iframe);
            }
        },
        setReportUrl() {
            this.birtUrl = '';
            if (!this.birtUrl) {
                if (this.$parent.getReportConfig) {
                    this.birtUrl = this.$parent.getReportConfig();
                }
            }
        },
         setGridHeight() {
            let height = this.$refs.toolbarcard.offsetHeight  + this.$refs.formcard.offsetHeight;
            this.outsideheight = height;
        }
    },
    mounted () {
        this.observer = elementResizeDetectorMaker();
        if (this.$refs.formcard) {
            this.observer.listenTo(this.$refs.formcard, this.setGridHeight);
        }
    },
    beforeUnmount() {
        if (this.$refs.formcard) {
            this.observer.removeListener(this.$refs.formcard, this.setGridHeight);
        }
    }
};
</script>

