<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">{{ this.feedbackData.title }}</div>
                        <div class="tips">
                            {{ this.feedbackData.remark }}
                        </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>
                            <span class="cLeftTop" style="margin: 0;" :class="selTitle == 1 ? 'title' : ''"
                                @click="selTitle = 1">全部数据（220）</span>
                            <span class="cLeftTop" :class="selTitle == 2 ? 'title' : ''" @click="selTitle = 2">已反馈（1）</span>
                            <span class="cLeftTop" :class="selTitle == 3 ? 'title' : ''"
                                @click="selTitle = 3">未反馈（219）</span>
                        </div>
                        <el-button class="m15" type="primary" size="small">导出数据</el-button>
                        <div class="lBox m15">
                            <div class="treeS">
                                <el-tree :data="treeData" :props="defaultProps" @node-click="treeSub"></el-tree>
                            </div>
                            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column label="日期" width="120">
                                    <template slot-scope="scope">{{ scope.row.date }}</template>
                                </el-table-column>
                                <el-table-column prop="name" label="姓名" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="地址" show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="cRight">
                        <div class="title">
                            题型数据分析
                        </div>
                        <div class="scroll">
                            <div class="box" v-for="i in 2">
                                <div style="display: flex;align-items: center;">
                                    <el-tag type="primary" effect="plain">单项选择</el-tag>
                                    <div style="margin-left: 10px;">1.你是男性还是女性</div>
                                </div>
                                <div class="m15"
                                    style="display: flex;align-items: center;justify-content: space-around; width: 40%;">
                                    <div style="text-align: center;">
                                        <el-progress type="circle" :percentage="45" show-text width="75">男</el-progress>
                                        <div>男</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <el-progress type="circle" :percentage="45" show-text width="75">男</el-progress>
                                        <div>女</div>
                                    </div>
                                </div>

                            </div>
                            <div class="box m15" v-for="i in 4">
                                <div style="display: flex;align-items: center;">
                                    <el-tag type="primary" effect="plain">单项选择</el-tag>
                                    <div style="margin-left: 10px;">1.你是男性还是女性</div>
                                </div>
                                <el-button class="m15" type="primary" size="small"
                                    @click="drawerAnswer = 1">查看详情答案</el-button>
                            </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>
        <el-drawer :visible.sync="drawerAnswer" title="反馈详情" size="40%">
            <div class="answerBox">
                <div class="aTop">
                    问题：你的具体想法？
                </div>
                <el-table class="m15" :data="tableData" border style="width: 100%;">
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>

    </div>
</template>

<script>
import formCreate from "@form-create/element-ui";
export default {
    data() {
        return {
            tabs: '1',
            drawer: false,
            Frule: '',
            Fopthion: '',
            drawerAnswer: false,
            feedbackData: {},
            selTitle: 1,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            treeData: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                        label: '三级 1-1-1'
                    }]
                }]
            }, {
                label: '一级 2',
                children: [{
                    label: '二级 2-1',
                    children: [{
                        label: '三级 2-1-1'
                    }]
                }, {
                    label: '二级 2-2',
                    children: [{
                        label: '三级 2-2-1'
                    }]
                }]
            }, {
                label: '一级 3',
                children: [{
                    label: '二级 3-1',
                    children: [{
                        label: '三级 3-1-1'
                    }]
                }, {
                    label: '二级 3-2',
                    children: [{
                        label: '三级 3-2-1'
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },

        }
    },
    mounted() {
        let id = localStorage.getItem('checkFeedbackId')
        this.getInfo(id)

    },
    methods: {
        treeSub(data) {
            console.log(data)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getInfo(id) {
            this.$get('/feedback/info', { id }).then(res => {
                this.feedbackData = res.data
                console.log(this.feedbackData)
                this.Frule = formCreate.parseJson(this.feedbackData.formContent)
                this.Fopthion = formCreate.parseJson(this.feedbackData.ruleContent)
            })
            this.$get('/feedback/getOptionSummaryList', { feedbackId: id }).then(res => {
                console.log(res)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.treeS {
    width: 20%;
    margin-left: 10px;
}

/deep/.el-tree {
    background-color: transparent;
}

.m15 {
    margin-top: 15px;
}

.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 {
        font-size: 14px;
        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;
        }
    }
}

.answerBox {
    padding: 0 20px;
    box-sizing: border-box;

    .aTop {
        border-left: 4px solid #3377ff;
        background-color: #eff4ff;
        color: #3377ff;
        line-height: 70px;
        padding-left: 20px;
        box-sizing: border-box;
        font-weight: bold;
    }
}

.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.5%;
        box-sizing: border-box;
        padding: 20px;

        .cLeftTop {
            font-size: 16px;
            margin-left: 20px;
            cursor: pointer;
        }

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

        }
    }

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

        .scroll {
            height: 93%;
            overflow-y: auto;
            overflow-x: hidden;
            // border: 1px solid;
        }

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

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

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


    }

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