<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="top-title">
                        <div style="opacity: 0.5;">问卷统计</div> /
                        <div style="font-size: 20px;font-weight: bold;margin-right: 30px;">
                            {{questionnaire.topic}}
                        </div>
                        <el-tag style="margin-right: 20px;"
                            v-if="questionnaire.anonymity">匿名</el-tag>
                        <div>
                            <span>下发数量:</span>
                            <span>{{ questionnaire.pushCount }}</span>
                        </div>
                        <div>
                            <span>收回数量:</span>
                            <span>{{ questionnaire.retractCount }}</span>
                        </div>
                        <div>
                            <span>结束倒计时:</span>
                            <span> {{ countSecond }}</span>
                        </div>
                    </div>
                    <div>
                        <el-button @click="closeDialog">
                            返回
                        </el-button>
                    </div>
                </div>
                <el-row class="JNPF-common-search-box" :gutter="16">
                    <el-form @submit.native.prevent>
                        <el-col :span="6">
                            <el-form-item label="题目标题">
                                <el-input v-model="query.title" placeholder="请输入问卷标题" clearable>
                                </el-input>
                            </el-form-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" :hasNO="false">
                        <el-table-column prop="questionNumber" label="题号" align="center" width="100"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="title" label="题目" align="left" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="" label="题目类型" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-tag type="primary"
                                    v-if="scope.row.code.split('_')[0] =='TEXTAREA'">
                                    {{ getQuestionType(scope.row.code.split('_')[0]) }}</el-tag>
                                <el-tag type="warning"
                                    v-else-if="scope.row.code.split('_')[0] =='RADIO'">
                                    {{ getQuestionType(scope.row.code.split('_')[0]) }}</el-tag>
                                <el-tag type="success"
                                    v-else-if="scope.row.code.split('_')[0] =='CHECKBOX'">
                                    {{ getQuestionType(scope.row.code.split('_')[0]) }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="选项" align="left" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.questionnaireOption.length">--</span>
                                <template v-else>
                                    <div v-for="(item,index) in scope.row.questionnaireOption"
                                        :key="index">{{  item.optionContent}}
                                    </div>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="各选项数量" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.questionnaireOption.length">--</span>
                                <template v-else>
                                    <div v-for="(item,index) in scope.row.questionnaireOption"
                                        :key="index">
                                        {{  item.questionnaireOptionSubCount}}</div>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="百分比" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.questionnaireOption.length">--</span>
                                <template v-else>
                                    <div v-for="(item,index) in scope.row.questionnaireOption"
                                        :key="index">
                                        {{  item.percentage}}</div>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="150">
                            <template slot-scope="scope">
                                <el-button type="text" v-if="scope.row.questionnaireOption.length"
                                    @click="openChart(scope.row)">预览
                                </el-button>
                                <el-button type="text" @click="openAnswerList(scope.row)">详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </JNPF-table>
                    <pagination :total="total" :page.sync="query.current" :limit.sync="query.szie"
                        @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>
        <titleDetails v-if="titleDetailsVisible" ref="titleDetails" @close="closeTitleDetails" />

    </el-dialog>
</template>

<script>

import mixin from '@/mixins/generator/form'
import dayjs from 'dayjs'
import titleDetails from './titleDetails.vue'


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


export default {
    mixins: [mixin],
    components: { titleDetails },
    data() {
        return {
            visible: false,
            showContent: false,
            countSecond: null,
            endDate: null,
            listLoading: false,
            tableData: [],
            total: 0,
            query: {
                current: 1,
                size: 20,
                dataType: "0",
                sidx: "-createTime",
                title: null
            },
            titleDetailsVisible: false,
            dialogChartVisible: false,
            questionnaire: null,
        }
    },
    async created() {
    },
    methods: {
        openAnswerList(item) {
            this.titleDetailsVisible = true
            this.$nextTick(() => {
                this.$refs.titleDetails.init(item, this.questionnaire.id)
            })
        },
        closeTitleDetails() {
            this.titleDetailsVisible = false
        },
        basic_dashboard_type(item) {
            var chartDom = document.getElementById('basic_dashboard');
            var myChart = this.$echarts.init(chartDom);

            // 组装选项数据
            let data = []
            item.questionnaireOption.forEach(element => {
                data.push(
                    { value: element.questionnaireOptionSubCount, name: element.optionContent },
                )
            });


            var option = {
                title: {
                    text: item.title,
                    subtext: '选项比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    right: 'center',
                    bottom: '5%'
                },
                series: [
                    {
                        name: '题目预览',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        basic_dashboard_type2(item) {
            var chartDom = document.getElementById('basic_dashboard');
            var myChart = this.$echarts.init(chartDom);

            let xData = item.questionnaireOption.map(element => {
                return element.optionContent
            })
            let yData = item.questionnaireOption.map(element => {
                return element.questionnaireOptionSubCount
            })

            var option = {
                title: {
                    text: item.title,
                    subtext: '选项比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    right: 'center',
                    bottom: '5%'
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: yData,
                        type: 'bar',
                        barWidth: '30',
                        itemStyle: {
                            // 可以在此设置柱子的样式
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        reset() {
            this.query = {
                current: 1,
                size: 20,
                dataType: "0",
                sidx: "-createTime",
                title: null
            }
            this.getList()
        },
        getDate(time) {
            let str = time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '无数据'
            return str
        },
        // 倒计时
        countTime() {
            let now = new Date().getTime(); // 获取当前时间
            let endDate = new Date(this.endDate); // 设置截止时间
            let end = Number(endDate);
            //let endDate = new Date(this.assistActivityEndTime); // this.assistActivityEndTime需要倒计时的日期
            let leftTime = end - now; // 倒计时时间差

            // 定义变量 d,h,m,s保存倒计时的时间
            if (leftTime >= 0) {
                // 天
                this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                // let dayh = this.day * 24
                // 时
                let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
                h = h;
                this.hour = h < 10 ? "0" + h : h;
                // 分
                let m = Math.floor((leftTime / 1000 / 60) % 60);
                this.min = m < 10 ? "0" + m : m;
                // 秒
                let s = Math.floor((leftTime / 1000) % 60);
                this.second = s < 10 ? "0" + s : s;
                this.countSecond = this.day + '天' + this.hour + '时' + this.min + '分' + this.second + '秒'
            } else {
                this.day = 0;
                this.hour = "00";
                this.min = "00";
                this.second = "00";
                this.countSecond = this.hour + ':' + this.min + ':' + this.second
                this.countSecond = '已结束'
            }
            // 等于0的时候不调用
            if (
                Number(this.day) === 0 &&
                Number(this.hour) === 0 &&
                Number(this.min) === 0 &&
                Number(this.second) === 0
            ) {
                this.$route.query.count = 4;
                // 执行飞行任务

                return;
            } else {
                // 递归每秒调用countTime方法，显示动态时间效果,
                setTimeout(this.countTime, 1000);
            }
        },
        getQuestionType(type) {
            console.log(type)
            let str = ''
            if (type == 'TEXTAREA') {
                str = '多行输入'
            } else if (type == 'RADIO') {
                str = '单选'
            } else if (type == 'CHECKBOX') {
                str = '多选'
            }
            return str
        },
        async init(questionnaire) {
            this.questionnaire = questionnaire
            console.log(this.questionnaire)
            this.getList()
        },
        //返回列表页面
        closeDialog() {
            this.$emit("close");
        },
        getList() {
            let params = {
                ...this.query,
                id: this.questionnaire.id
            }
            this.listLoading = true;
            getQuestionnaireStats(params).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.tableData = res.data.questionnaireTopic

                    console.log(this.tableData)

                    this.questionnaire.retractCount = res.data.retractCount
                    this.questionnaire.pushCount = res.data.pushCount
                    this.total = res.data.total
                    this.endDate = res.data.endTime
                    this.listLoading = false
                    this.visible = true

                    this.countTime()

                } else {
                    this.listLoading = false
                }
            })

        },
        openChart(questionnaire) {
            this.dialogChartVisible = true
            console.log(questionnaire)
            this.$nextTick(() => {
                if (questionnaire.type == "RADIO") this.basic_dashboard_type(questionnaire)
                if (questionnaire.type == "CHECKBOX") this.basic_dashboard_type2(questionnaire)
            })
        }
    },
}
</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>