<template>
    <div class="billboard-and-LightBox">
        <div class="title-rect-group">
            <!-- <div class="title-rect" /> -->
            <h2 class="title-rect-name">{{$t('studentWeb.billboard.description')}}</h2>
        </div>
        <div class="dec">
            <p><span v-html="activityData.description"></span></p>
        </div>
        <div class="title-rect-group" v-if="this.$store.getters.getItemTitle.eventType  === 'vote'">
            <!-- <div class="title-rect" /> -->
            <h2 class="title-rect-name">{{$t("studentWeb.vote.voteRecord")}}</h2>
        </div>
        <div class="dec" v-if="this.$store.getters.getItemTitle.eventType == 'vote'">
            <Table v-if="showTable" border :columns="voteColums" :data="voteColumsData"></Table>
            <span v-else >{{$t("studentWeb.public.noData")}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BillBardandLightBox",
        props: {
            activityData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            voteRes: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        created() {
            this.openLightBox = false;
        },
        data() {
            return {
                value1: 0,
                openLightBox: false,
                targetImg: "",
                columns: [
                    {
                        title: this.$t('studentWeb.vote.voteTime'),
                        key: 'time',
                        sortable: true
                    },
                ],
                voteColums: [],
                voteColumsData:[],
                showTable:false,
                setting: {
                    autoplay: false,
                    dots: "outside",
                    radiusDot: true,
                    trigger: "click",

                },
            };
        },
        mounted() {
            if (this.voteRes.length > 0) {
                this.setVoteTable()
            }
        },
        methods: {
            setVoteTable() {
                this.showTable = false
                this.voteColums = [...this.columns]
                let info = []
                if (this.activityData.name !== undefined) {
                    this.showTable = true
                    for (let item of this.activityData.options) {
                        this.voteColums.push({
                            title: item.code,
                            key: item.code,
                            align: "center"
                        })
                    }
                    for (let items of this.voteRes) {
                        items.opt.time = this.dateFormat(items.time)
                        info.push(items.opt)
                    }
                    this.voteColumsData = [...info]
                }
            },
            dateFormat(timestamp) {
                var date = new Date(timestamp)
                var Y = date.getFullYear() + '-'
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                var D = date.getDate() + ' '
                return Y + M + D;
            },
        },
        watch: {
            voteRes: {
                handler() {
                     this.setVoteTable()
                },
                // 深度观察监听
                deep: true
            },
        }
    };
</script>

<style scoped>
    @import "~@/assets/student-web/component_styles/billboard-lightbox.css";
</style>
