<template>
    <div class="fa-design-panel">
        <div class="fa-dp-header">
            <el-button type="text" @click="exportXML">导出xml</el-button>
        </div>
        <div class="fa-dp-main">
            <bpm-panel ref="BPMNPanel"/>
        </div>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from "vue-property-decorator";
    import BpmPanel from './BpmnPanel/index.vue';

    @Component({
        components: {BpmPanel}
    })
    export default class FlowAbelDesignPanel extends Vue {
        private exportXML() {
            (this.$refs['BPMNPanel'] as any).exportXML();
        }
    }
</script>

<style scoped lang="scss">
    @import './assets/iconfont/iconfont.css';
    .fa-design-panel{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, .02);
        z-index: 10;
        overflow: hidden;

        .fa-dp-header{
            flex: 0 0 58px;
            width: 100%;
            border-bottom: 1px solid #eeeeee;
            box-shadow: 0 3px 5px #eeeeee;
            background: #ffffff;
        }
        .fa-dp-main{
            flex: auto;
            /*display: flex;*/
            /*flex-direction: row;*/
        }
    }
</style>
