<template>
    <div class="page">
        <div class="top">
            <el-button class="backBtn" @click="$router.back()">返回上一级</el-button>
            <el-tabs v-model="tabs">
                <el-tab-pane label="设计问卷" name="1">
                    <fc-designer style="height: 75vh;" ref="designer" />
                    <div class="tool">
                        <!--功能按钮-->
                        <el-row>
                            <el-button icon="el-icon-download" type="primary" size="small" @click="getFormJson()"
                                round>生成表单JSON</el-button>
                            <el-button icon="el-icon-download" type="success" size="small" @click="getFormOption()"
                                round>生成表单配置</el-button>
                            <el-button icon="el-icon-upload" type="success" size="small" @click="drawer = true"
                                round>预览</el-button>
                        </el-row>
                    </div>

                    <el-drawer title="预览" :visible.sync="drawer" :with-header="false">
                        <div class="showPhone">
                            <div>预览</div>
                        </div>
                    </el-drawer>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabs: '1',
            drawer: false,
        }
    },
    methods: {
        getFormJson() {
            //FcDesigner 生成的`JSON`
            const FcDesignerRule = this.$refs.designer.getRule();
            console.log(FcDesignerRule)

        },
        getFormOption() {
            //FcDesigner 生成的`options`
            const FcDesignerOptions = this.$refs.designer.getOption();
            console.log(FcDesignerOptions)
        }
    }
}
</script>

<style lang="less" scoped>
.showPhone{
    border: 1px solid;
    height: 100%;
    width: 100%;
}
.backBtn {
    position: absolute;
    right: 20px;
    z-index: 99;
}

.tool {
    margin-top: 20px;
    text-align: center;
}

/* 侧边滚动条 */
/deep/.el-aside::-webkit-scrollbar {
    width: 3px;
}

/* 滚动条上的滚动滑块 */
/deep/.el-aside::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

/* 滚动条轨道 */
/deep/.el-aside::-webkit-scrollbar-track {
    background: #EEEEEE;
    border-radius: 4px;
}

/* 侧边滚动条 */
/deep/.el-main::-webkit-scrollbar {
    width: 3px;
}

/* 滚动条上的滚动滑块 */
/deep/.el-main::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

/* 滚动条轨道 */
/deep/.el-main::-webkit-scrollbar-track {
    background: #EEEEEE;
    border-radius: 4px;
}
</style>