<template>
    <div class="page font">

        <el-button class="backBtn" size="small" @click="$router.back()">返回列表</el-button>
        <el-tabs v-model="tabs">
            <el-tab-pane label="问卷情况" name="1">
                <div class="top" style="margin: 10px 0;">
                    <div style="width: 80%;">
                        <div class="title">问卷名称</div>
                        <div class="tips">
                            问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述问卷描述
                        </div>
                    </div>
                    <el-button type="success" @click="drawer = true">预览</el-button>
                </div>
                <div style="margin: 10px 0;">
                    <el-tag type="success"> 进行中</el-tag> 反馈时间：2023-06-23 09:00:00~2023-06-24 17:00:00
                </div>

                <div class="content">
                    <div class="cLeft"></div>
                    <div class="cRight">
                        <div class="title">
                            题型数据分析
                        </div>
                        <div class="box">
                            <div style="display: flex;align-items: center;">
                                <el-tag type="primary" effect="plain">单项选择</el-tag>
                                <div style="margin-left: 10px;">1.你是男性还是女性</div>
                            </div>
                            <div>
                                <el-progress type="circle" :percentage="45">男</el-progress>
                                <el-progress type="circle" :percentage="55">女</el-progress>
                            </div>

                        </div>
                    </div>
                </div>


            </el-tab-pane>
        </el-tabs>

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

<script>
import formCreate from "@form-create/element-ui";
export default {
    data() {
        return {
            tabs: '1',
            drawer: false,
            Frule: '',
            Fopthion: '',
        }
    },
    mounted() {
        this.Frule = [
            {
                "type": "span",
                "title": "问卷名称",
                "native": false,
                "children": [
                    "这是一段文字"
                ],
                "_fc_drag_tag": "span",
                "hidden": false,
                "display": true
            },
            {
                "type": "input",
                "field": "Fupb1nuyh5txf1",
                "title": "输入框",
                "info": "",
                "$required": false,
                "_fc_drag_tag": "input",
                "hidden": false,
                "display": true
            },
            {
                "type": "inputNumber",
                "field": "Flo91nuyh5vjag",
                "title": "计数器",
                "info": "",
                "$required": false,
                "_fc_drag_tag": "inputNumber",
                "hidden": false,
                "display": true
            },
            {
                "type": "radio",
                "field": "Fz3d1nuyh5xpor",
                "title": "单选框",
                "info": "",
                "effect": {
                    "fetch": ""
                },
                "$required": false,
                "options": [
                    {
                        "value": "1",
                        "label": "选项1"
                    },
                    {
                        "value": "2",
                        "label": "选项2"
                    }
                ],
                "_fc_drag_tag": "radio",
                "hidden": false,
                "display": true
            },
            {
                "type": "checkbox",
                "field": "Fwzb1nuyh61906",
                "title": "多选框",
                "info": "",
                "effect": {
                    "fetch": ""
                },
                "$required": false,
                "options": [
                    {
                        "value": "1",
                        "label": "选项1"
                    },
                    {
                        "value": "2",
                        "label": "选项2"
                    }
                ],
                "_fc_drag_tag": "checkbox",
                "hidden": false,
                "display": true
            }
        ]
        this.Fopthion = {
            "form": {
                "labelPosition": "top",
                "size": "mini",
                "labelWidth": "20%",
                "hideRequiredAsterisk": false,
                "showMessage": true,
                "inlineMessage": false
            },
            "submitBtn": true,
            "resetBtn": false
        }

    }
}
</script>

<style lang="less" scoped>
.font {
    font-size: 16px;
    line-height: 1.5;
}

.backBtn {
    position: absolute;
    right: 20px;
    z-index: 99;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
        font-size: 24px;
        font-weight: bold;

    }

    .tips {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 限制显示行数 */
        overflow: hidden;
    }

}

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

.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // border: 1px solid;
    height: 600px;

    .cLeft {
        background-color: #fafafa;
        height: 100%;
        border-radius: 4px;
        width: 49%;
    }

    .cRight {
        background-color: #fafafa;
        height: 100%;
        border-radius: 4px;
        width: 49%;
        box-sizing: border-box;
        padding: 20px;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }
}
</style>