<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">{{ feedbackData.title }}</div>
                        <div class="tips">
                            {{ feedbackData.remark }}
                        </div>
                    </div>
                    <el-button type="success" @click="drawer = true">预览</el-button>
                </div>
                <div style="margin: 10px 0;">
                    <el-tag :type="feedbackData.processStatus ? feedbackData.processStatus = 1 ? 'success' : 'info' : 'danger'" >
                     {{ feedbackData.processStatus ? feedbackData.processStatus
                        == 1 ? '进行中' : '已结束' : '未开始' }}</el-tag>
                    反馈时间：{{ feedbackData.timeStart }} ~ {{ feedbackData.timeEnd }}
                </div>

                <div class="content">
                    <div class="cLeft">
                        <div>
                            <span class="cLeftTop" style="margin: 0;" :class="selTitle == 1 ? 'title' : ''"
                                @click="selTitle = 1">全部数据（{{ staffList.total }}）</span>
                            <span class="cLeftTop" :class="selTitle == 2 ? 'title' : ''" @click="selTitle = 2">已反馈（{{
                                staffList.feedBack }}）</span>
                            <span class="cLeftTop" :class="selTitle == 3 ? 'title' : ''" @click="selTitle = 3">未反馈（{{
                                staffList.notBack }}）</span>
                        </div>
                        <!-- <el-button class="m15" type="primary" size="small">导出数据</el-button> -->
                        <div class="lBox m15">
                            <el-table ref="multipleTable" :data="staffList.data" tooltip-effect="dark" border
                                style="width: 100%;max-height: 450px;background-color: transparent; text-align: center;"
                                @selection-change="handleSelectionChange" :header-cell-style="{ 'text-align': 'center' }"
                                :cell-style="{ 'text-align': 'center' }">
                                <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="姓名">
                                </el-table-column>
                                <el-table-column prop="deptName" label="部门">
                                </el-table-column>
                                <el-table-column prop="positionName" label="职位">
                                    <template slot-scope="scope">
                                        {{ scope.row.positionName ? scope.row.positionName : '工作人员' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="backStatus" label="是否反馈">
                                    <template slot-scope="scope">
                                        {{ scope.row.backStatus ? '已反馈' : '未反馈' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="backTimeF" label="反馈时间">
                                    <template slot-scope="scope">
                                        {{ scope.row.backTimeF ? scope.row.backTimeF : '--' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <div style="color: #3377ff; cursor: pointer;" @click="check(scope.row)">查看</div>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="address" label="地址" show-overflow-tooltip>
                                </el-table-column> -->
                            </el-table>
                            <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" :current-page.sync="currentPage2"
                                :page-sizes="[10, 20, 50, 100]" :page-size="staff.size" layout="sizes, prev, pager, next"
                                :total="staff.total">
                            </el-pagination>
                        </div>
                    </div>
                    <div class="cRight">
                        <div class="title">
                            题型数据分析
                        </div>
                        <div class="scroll">
                            <div class="box  m15" v-for="i in questionArr1">
                                <div v-if="i.questionType == 1 || i.questionType == 2">
                                    <div style="display: flex;align-items: center;">
                                        <el-tag type="primary" effect="plain">{{ i.typeFormat }}</el-tag>
                                        <div style="margin-left: 10px;">{{ i.question }}</div>
                                    </div>
                                    <div class="m15" style="display: flex;align-items: center; width: 40%;">
                                        <div style="text-align: center; margin-right: 40px;" v-for="j in i.optionList">
                                            <el-progress type="circle"
                                                :percentage="(j.optionCount / i.allCount * 100).toFixed(2)" show-text
                                                width="75">男</el-progress>
                                            <div>{{ j.optionContent }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box m15" v-for="i in feedbackData.feedbackQuestionList">
                                <div v-if="i.questionType == 3 || i.questionType == 4">
                                    <div style="display: flex;align-items: center;">
                                        <el-tag type="primary" effect="plain">{{ i.questionType == 3
                                            ? '单项填空' : '文本域填空' }}</el-tag>
                                        <div style="margin-left: 10px;">{{ i.content }}</div>
                                    </div>
                                    <el-button class="m15" type="primary" size="small"
                                        @click="getIntData(i)">查看详情答案</el-button>
                                </div>

                            </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="drawerStaff" title="反馈详情" size="40%">
            <div class="answerBox">
                <div class="aTop">
                    {{ staffInfo.name }} - <span style="font-size: 14px;">{{ staffInfo.positionName ? staffInfo.positionName
                        : '工作人员' }}</span>
                </div>
                <div class="m10" v-for=" i in staffDetails">
                    <div>问题：{{ i.questionContent }}</div>
                    <div v-if="i.questionType == 1 || i.questionType == 2">

                        <div class="m10">答案：
                            <span v-for="(j, k) in i.feedbackAnswerOptionList" :key="k">
                                <span v-show="i.feedbackAnswerOptionList.length - k > 0 && k > 0">、</span>{{ j.optionContent
                                }}
                            </span>
                        </div>
                    </div>
                    <div v-if="i.questionType == 3 || i.questionType == 4">
                        <div class="m10">答案：
                            {{ i.content }}</div>
                    </div>

                    <el-divider class="m10"></el-divider>
                </div>
            </div>
        </el-drawer>
        <el-drawer :visible.sync="drawerAnswer" title="反馈详情" size="40%">
            <div class="answerBox">
                <div class="aTop">
                    问题：{{ drawerAnswerObj.content }}
                </div>
                <el-table class="m15" :data="drawerAnswerArr" border style="width: 100%;">
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="backTimeF" label="反馈时间" width="180">
                    </el-table-column>
                    <el-table-column prop="answer" label="反馈详情">
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>

    </div>
</template>

<script>
import formCreate from "@form-create/element-ui";
import moment from "moment";
import { timestampToTime } from "@/assets/utils/dateFormat.js"
function formType(val) {
    // (1.单项选择,2.多项选择,3.文本框,4.多项文本框,5.文字,6.上传附件)
    switch (val) {
        case 1:
            return '单项选择'
            break;
        case 2:
            return '多项选择'
            break;
        case 3:
            return '文本框'
            break;
        case 4:
            return '多项文本框'
            break;
        case 5:
            return '文字'
            break;
        case 6:
            return '上传附件'
            break;
        default:
            break;
    }
}
export default {
    data() {
        return {
            tabs: '1',
            drawer: false,
            Frule: '',
            Fopthion: '',
            drawerAnswer: false,
            drawerAnswerObj: {},
            drawerAnswerArr: [],
            feedbackData: {},
            selTitle: 1,
            staff: {
                page: 1,
                size: 10,
                total: 0,
            },
            staffListS: [],
            staffList: [], //人员
            staffInfo: {},
            drawerStaff: false,
            staffDetails: [],

            questionArr1: [], //题型分析

        }
    },
    watch: {
        'selTitle'(val) {
            let arr = []
            this.staffList.data = this.staffListS
            if (val == 2) {
                this.staffList.data.forEach(i => {
                    if (i.backStatus) {
                        arr.push(i)
                    }
                })
                this.staffList.data = arr
            } else if(val == 3) {
                this.staffList.data.forEach(i => {
                    if (!i.backStatus) {
                        arr.push(i)
                    }
                })
                this.staffList.data = arr
            }
        }
    },
    mounted() {
        let id = localStorage.getItem('checkFeedbackId')
        this.getInfo(id)
        this.getStaffData(id)
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getInfo(id) {
            //获取表单
            this.$get('/feedback/info', { id }).then(res => {
                res.data.timeStart = moment(res.data.feedbackTimeStart).format('yyyy-MM-DD HH:mm:ss')
                res.data.timeEnd = moment(res.data.feedbackTimeEnd).format('yyyy-MM-DD HH:mm:ss')
                this.feedbackData = res.data
                this.Frule = formCreate.parseJson(this.feedbackData.formContent)
                this.Fopthion = formCreate.parseJson(this.feedbackData.ruleContent)
            })

            //题型分析--单选多选
            this.$get('/feedback/getOptionSummaryList', { feedbackId: id }).then(res => {
                res.data.data.forEach(i => {
                    i.allCount = 0
                    i.typeFormat = formType(i.questionType)
                    i.optionList.forEach(j => {
                        i.allCount += j.optionCount
                    })
                })
                this.questionArr1 = res.data.data
                // console.log(this.questionArr1)
            })

        },
        getStaffData(id) {
            //人员数据
            this.$post('/feedback/getStaffList', { feedbackId: id, size: this.staff.size, page: this.staff.page }).then(res => {
                this.staff.total = res.data.total
                res.data.data.forEach(i => {
                    i.backTimeF = moment(i.backTime).format('YYYY-MM-DD')
                })
                this.staffList = res.data
                this.staffListS = res.data.data
                console.log(this.staffList, res)
            })
        },
        //查看人员问卷详情
        check(data) {
            console.log(data)
            this.staffInfo = data
            this.drawerStaff = 1
            this.$post('/feedback/answer/list', { staffId: data.staffId, feedbackId: data.feedbackId, page: 1, size: -1 }).then(res => {
                this.staffDetails = res.data.data
                console.log(this.staffDetails)
            })
        },
        //题型分析--输入框
        getIntData(data) {
            console.log(data)
            this.drawerAnswerObj = data
            this.drawerAnswer = 1
            this.$post('/feedback/getQuestionAnswerList', { questionId: data.id, page: 1, size: -1 }).then(res => {
                res.data.data.forEach(i => {
                    console.log(i)
                    i.backTimeF = moment(i.backTime).format('YYYY-MM-DD')
                })
                this.drawerAnswerArr = res.data.data
                console.log(this.drawerAnswerArr)
            })
        },

    }
}
</script>

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

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

.m15 {
    margin-top: 15px;
}

.m10 {
    margin-top: 10px;
}

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

    }

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