<template>

    <div class="mian">
        <div class="footer">
            <div class="footer-title">尊敬的 {{ user.name }} 狮友</div>
            <div class="footer-subtitle">欢迎您参加中国狮子联会哈尔滨心连心服务队2020-2021年度队长、副队长、秘书和队长团队成员推举会议</div>
            <div v-if="dested">
                <v-btn
                        block
                >
                    投票已结束，您的投票记录已销毁
                </v-btn>
            </div>
            <div v-else>
                <div v-if="vote">
                    <v-btn
                            block
                            x-large
                            class="footer-btn"
                            @click="jump('VoteIndex')"
                    >
                        开始投票
                    </v-btn>
                </div>
                <div v-else>
                    <v-btn
                            block
                            x-large
                            class="footer-btn"
                            @click="reload"
                    >
                        等待开始
                    </v-btn>
                </div>
            </div>
        </div>

        <v-dialog
                v-model="dialog"
                width="500"
                persistent
        >
            <v-card
                    class="cns"
                    tile
            >
                <v-card-title>
                    <div class="flex-grow-1"></div>
                    签署承诺书及签到环节
                    <div class="flex-grow-1"></div>
                </v-card-title>
                <v-card-text v-html="html">
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <div class="flex-grow-1"></div>
                    <v-btn
                            @click="signPost"
                            color="primary"
                            text
                    >
                        我同意并签到
                    </v-btn>
                    <div class="flex-grow-1"></div>
                </v-card-actions>
            </v-card>
        </v-dialog>
<!--                <v-btn-->
<!--                        color="primary"-->
<!--                        block-->
<!--                        @click="logout"-->
<!--                >-->
<!--                    注销登录,正式版本会取消-->
<!--                </v-btn>-->
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import router from "@/router";

    export default {
        name: "index",
        data() {
            return {
                user: [],
                dialog: false,
                vote: false,
                dested: false,
                html: ''
            }
        },
        mounted() {
            this.$api.index.index().then(result => {
                this.user = result.user
                this.html = result.license
                this.dialog = !result.sign
                this.vote = result.vote
                this.dested = result.dested
            });
        },
        methods: {
            ...mapActions(['doLogout']),
            reload() {
                this.$api.index.index().then(result => {
                    this.user = result.user
                    this.html = result.license
                    this.dialog = !result.sign
                    this.vote = result.vote
                    this.dested = result.dested
                });
            },
            signPost: function () {
                this.$api.index.sign().then(() => {
                    this.dialog = false
                })
            },
            logout: function () {
                this.toast('退出成功');
                this.doLogout();
                setTimeout(() => {
                    router.push({
                        name: 'AuthLogin'
                    })
                }, 1000)
            }
        }
    }
</script>

<style scoped>
    .mian {
        background-color: #1f3c84;
        height: 100vh;
        width: 100vw;
        background-image: url("../../assets/back_2.png");
        background-position: top center;
        background-size: cover;
    }

    .footer {
        position: absolute;
        top: 40vh;
        width: 100vw;
        padding: 30px;
        box-sizing: border-box;
        color: white;
    }

    .footer-title,
    .footer-subtitle {
        text-align: center;
        text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
    }

    .footer-title {
        font-weight: bold;
        padding-bottom: 10px;
        font-size: 20px;
    }

    .footer-subtitle {
        margin-bottom: 20px;
        font-size: 14px;
    }

    .footer-btn {
        width: 100%;
        height: 45px;
        background: white;
        color: #1f3c84;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border-radius: 6px;
    }

    .cns {
        background-image: url("../../assets/logo.png");
        background-size: 100%;
        background-position: center;
    }

    .v-card__text p {
        margin-bottom: 0px;
    }
</style>