<template>
    <el-dialog :visible.sync="visible" fullscreen lock-scroll class="JNPF-full-dialog"
        :show-close="false" :modal="false">
        <div class="JNPF-common-layout">
            <div class="JNPF-common-layout-center" v-if="visible">
                <div class="top">
                    <div class="" style="display: flex;align-items: center;">
                        <div style="margin-right: 20px;">题目选项</div>
                        <div>
                            <span style="margin-right: 10px;" v-for="item,index in questionnOptions"
                                :key="index">{{ item.optionContent }}</span>
                        </div>
                    </div>
                    <el-button @click="closeDialog">返回</el-button>
                </div>
                <el-row class="JNPF-common-search-box" :gutter="16">
                    <el-form @submit.native.prevent>
                        <el-col :span="6">
                            <jnpf-form-tip-item label="用户" align="left" prop="userId">
                                <JnpfUserSelect v-model="query.userId" class="item"
                                    placeholder="请选择用户" clearable :ableIds="[]" :multiple="false" />
                            </jnpf-form-tip-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search"
                                    @click="getList()">查询</el-button>
                                <el-button icon="el-icon-refresh-right"
                                    @click="reset()">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <div class="JNPF-common-layout-main JNPF-flex-main">
                    <JNPF-table v-loading="listLoading" :data="tableData">
                        <el-table-column prop="username" label="用户" align="left"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="" label="回答" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <template v-if="scope.row.answerOption.length ">
                                    <span v-for=" (item,index) in
                                    scope.row.answerOption" :key="index"
                                        style="margin-right: 10px;">{{  item}}</span>
                                </template>
                                <span
                                    v-else-if="scope.row.textResponse">{{ scope.row.textResponse }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                    </JNPF-table>
                    <pagination :total="total" :page.sync="query.currentPage"
                        :limit.sync="query.pageSize" @pagination="getList" />
                </div>
            </div>
        </div>
        <div class="dialogChart">
            <el-dialog title="题目预览" :visible.sync="dialogChartVisible" :modal="false">
                <div id="basic_dashboard" style="width: 100%;height: 400px;"></div>
            </el-dialog>
        </div>
    </el-dialog>
</template>

<script>

import mixin from '@/mixins/generator/form'


import {
    getStatsDetail
} from "@/api/governmentCloud/questionnaireInvestigation/questionnaireInvestigation";


export default {
    mixins: [mixin],
    components: {},
    data() {
        return {
            visible: false,
            showContent: false,
            countSecond: null,
            endDate: 1725089581000,
            listLoading: false,
            tableData: [],
            total: 0,
            query: {
                currentPage: 1,
                pageSize: 20,
                userId: null
            },

            dialogChartVisible: false,
            questionnaire: null,

            questionnaireTopicId: null,
            id: null
        }
    },
    async created() {
    },
    methods: {
        //返回列表页面
        closeDialog() {
            this.$emit("close");
        },
        reset() {
            this.query = {
                currentPage: 1,
                pageSize: 20,
                userId: null
            }
            this.getList()
        },
        async init(item, id) {
            this.id = id
            this.questionnaireTopicId = item.id
            this.getList()
        },
        getList(item, i) {
            let params = {
                ...this.query,
                questionnaireTopicId: this.questionnaireTopicId,
                id: this.id
            }
            this.listLoading = true;
            getStatsDetail(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.stats
                    this.questionnOptions = res.data.questionnaireOptionIds
                    this.total = res.data.total
                    this.listLoading = false
                    this.visible = true
                } else {
                    this.$message.error(res.msg)
                    this.showType = '1'
                }
            })

        },
    },
}
</script>

<style lang="scss" scoped>
.JNPF-common-layout {
    padding: 20px;
    background-color: #fff;
}
.top {
    background-color: #fff;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-title {
        margin-left: 0px;
        display: flex;
        font-size: 18px;
        align-items: center;
        div {
            margin: 0 10px;
        }
    }
}
.dialogChart {
    ::v-deep .el-dialog__header {
        padding: 20px 20px 10px !important;
    }
}
</style>