<template>
    <div class="page">

        <el-button class="backBtn" size="small" @click="$router.back()">返回上一级</el-button>
        <el-tabs v-model="tabs">
            <el-tab-pane label="设计问卷" name="1">
                <fc-designer style="height: 79vh;" ref="designer">
                    <template slot="handle">
                        <ElButton icon="el-icon-upload" type="success" size="small" @click="showDrawer" round>移动端预览
                        </ElButton>
                    </template>
                </fc-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="primary" size="small" @click="showDrawer"
                                round>移动端预览</el-button>
                        </el-row>
                    </div> -->

                <el-drawer :visible.sync="drawer" title="预览">
                    <div class="showPhone">
                        <div class="phone">
                            <div class="phoneContent">
                                <form-create :rule="Frule" :option="Fopthion" @submit="onSubmit">
                                </form-create>
                            </div>
                        </div>
                    </div>
                </el-drawer>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import formCreate from "@form-create/element-ui";
export default {
    data() {
        return {
            tabs: '1',
            drawer: 0,
            Frule: '',
            Fopthion: '',
        }
    },
    mounted() {
        //配置表单基础样式以及按钮展示
        const option = {
            "form": {
                "labelPosition": "top",
                "size": "mini",
                "labelWidth": "20%",
                "hideRequiredAsterisk": false,
                "showMessage": true,
                "inlineMessage": false
            },
            "submitBtn": true,
            "resetBtn": false,
        }
        this.$refs.designer.setOption(option)
        //移除组件大类
        this.$refs.designer.removeMenu('layout',)
        //移除对应组件
        this.$refs.designer.removeMenuItem('el-transfer')
        this.$refs.designer.removeMenuItem('el-alert')
        this.$refs.designer.removeMenuItem("colorPicker")
        this.$refs.designer.removeMenuItem("cascader")
        this.$refs.designer.removeMenuItem("rate")
        this.$refs.designer.removeMenuItem("slider")
        this.$refs.designer.removeMenuItem("datePicker")
        this.$refs.designer.removeMenuItem("timePicker")
        this.$refs.designer.removeMenuItem("switch")
        this.$refs.designer.removeMenuItem("tree")
        //配置组件生成规则---直接配置显示在页面上
        // const rule = [{ "type": "input", "field": "int", "title": "输入框", "info": "", "_fc_drag_tag": "input", "hidden": false, "display": true }]
        // this.$refs.designer.setRule(rule)
    },
    methods: {
        //预览生成按钮的输出
        onSubmit(formData) {
            console.log(formData)
        },
        //展示移动端效果
        showDrawer() {
            this.drawer = 1
            this.Frule = formCreate.parseJson(this.getFormJson())
            this.Fopthion = formCreate.parseJson(this.getFormOption())
        },
        getFormJson() {
            //FcDesigner 生成的`JSON`
            const FcDesignerRule = this.$refs.designer.getRule();
            console.log(FcDesignerRule)
            return JSON.stringify(FcDesignerRule)
        },
        getFormOption() {
            //FcDesigner 生成的`options`
            const FcDesignerOptions = this.$refs.designer.getOption();
            console.log(FcDesignerOptions)
            return JSON.stringify(FcDesignerOptions)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/._fc-l-title {
    text-align: center;
    margin-bottom: 10px;
}

/deep/._fc-l-item {
    width: 100%;
    border: 1px solid #1a7af8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 4px;

    ._fc-l-icon {
        width: 40%;
        text-align: right;
        color: #1a7af8;
    }


    ._fc-l-name {
        width: 50%;
        text-align: left;
        color: #1a7af8;
    }
}

/deep/._fc-l-item:hover ._fc-l-name {
    color: #FFF;
}

/deep/._fc-l-item:hover ._fc-l-icon {
    color: #FFF;
}

.showPhone {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .phone {
        width: 378px;
        height: 770px;
        background: url('../../../assets/images/phone.png') no-repeat;
        position: relative;

        .phoneContent {
            // border: 1px solid;
            position: absolute;
            top: 95px;
            left: 25px;
            width: 86.5%;
            height: 75%;
            box-sizing: border-box;
            padding: 20px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

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

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

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

.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;
}

/* 侧边滚动条 */
/deep/._fc-m-drag::-webkit-scrollbar {
    width: 3px;
}

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

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