<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 style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small"
                            @click="issueBtn" round>问卷发布
                        </ElButton>
                        <ElButton icon="el-icon-view" type="success" size="small" @click="showDrawer" round>H5预览
                        </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-dialog title="问卷发布" :visible.sync="issueDialog" width="30%" top="25vh">
                    <el-form :model="issueForm">
                        <el-form-item label="问卷封面：" label-width="125px">
                            <div style="display: flex;align-items: center;">
                                <img style="width:80px; height: 50px; margin-right: 10px;cursor: pointer;"
                                    v-for="i in issueForm.cover" :src="i" alt="">
                            </div>
                            <!-- <el-input v-model="issueForm.cover" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="反馈期限：" label-width="125px">
                            <el-date-picker v-model="issueForm.time" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="邀请人员：" label-width="125px">
                            <el-button type="success" size="small">选择人员</el-button>
                        </el-form-item>
                        <div style="text-align: center;">
                            <el-button size="small" @click="issueDialog = false">取消</el-button>
                            <el-button type="primary" size="small" @click="issueFormBtn">发布</el-button>
                        </div>
                    </el-form>
                </el-dialog>
            </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: '',
            issueDialog: false,
            issueForm: {
                cover: [
                    'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26101.svg',
                    'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26102.svg'
                ]
            },
        }
    },
    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")
        this.$refs.designer.removeMenuItem("inputNumber")
        this.$refs.designer.removeMenuItem("select")
        this.$refs.designer.removeMenuItem("fc-editor")
        this.$refs.designer.removeMenuItem("el-button")
        this.$refs.designer.removeMenuItem("el-divider")
        //配置组件生成规则---直接配置显示在页面上
        // const rule = [{ "type": "input", "field": "int", "title": "输入框", "info": "", "_fc_drag_tag": "input", "hidden": false, "display": true }]
        // this.$refs.designer.setRule(rule)
    },
    methods: {
        //问卷发布
        issueBtn() {
            this.Frule = formCreate.parseJson(this.getFormJson())
            this.Fopthion = formCreate.parseJson(this.getFormOption())
            console.log(this.Frule)
            //判断是否配置了表单
            if (this.Frule.length > 0) {
                this.issueDialog = true
            } else {
                this.$message({
                    message: '请配置表单后发布',
                    type: 'warning'
                });
            }
        },
        //预览生成按钮的输出
        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)
        },
        issueFormBtn() {
            console.log(this.issueForm)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/._fc-m-tools {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/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>