<template>
    <div>
        <v-container class="mian" v-if="loaded">
            <div v-if="!lock">
                <div class="vote-title">
                    中国狮子联会哈尔滨心连心服务队
                </div>
                <div style="color: #ffffff">
                    2020-2021年度
                </div>
                <div class="vote-title">{{ vote.title }}</div>
                <div class="vote-block">
                    <div class="vote-block-title">
                        {{ vote.type == 'diff' ? '差额推举' : '等额推举' }}规则说明
                    </div>
                    <div class="vote-block-html" v-html="vote.rules"></div>
                </div>
                <div class="vote-block-btn">
                    <span @click="jump('Vote_' + vote.type, {id: vote.id})">继续</span>
                </div>
            </div>
            <div class="mian-shoeToast" v-else>
                <div class="mian-shoeToast-icon">
                    <v-icon color="#1f3c84" size="58">mdi-checkbox-marked-circle</v-icon>
                </div>
                <div class="mian-shoeToast-title">投票成功</div>
                <div class="mian-shoeToast-content">您已提交本轮次选票，为保密起见，已隐藏您的投票结果，其他人也无法查询</div>
                <div class="mian-shoeToast-btn" @click="jump('Index')">返回主页</div>
            </div>
        </v-container>
        <div v-else>
            <v-dialog
                    v-model="loading"
                    persistent
                    width="300"
            >
                <v-card
                        color="primary"
                        dark
                >
                    <v-card-text>
                        <p class="pt-4">数据加载中，请稍后</p>
                        <v-progress-linear
                                indeterminate
                                color="white"
                                class="mb-0"
                        ></v-progress-linear>
                    </v-card-text>
                </v-card>
            </v-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                vote: [],
                lock: true,
                loaded: false,
                loading: true
            }
        },
        mounted() {
            this.$api.vote.index().then(result => {
                this.vote = result.vote
                this.lock = result.lock

                this.loaded = true
            });
        },
    }
</script>

<style scoped>
    .mian {
        min-height: 100vh;
        width: 100vw;
        background-color: #1f3c84;
        background-image: url("../../assets/back_1.png");
        background-position: top center;
        background-size: 100%;
        padding: 0 30px 130px 30px;
    }

    /* 提示信息 */
    .mian-shoeToast {
        margin-top: 10vh;
        height: 80vh;
        width: calc(100vw - 60px);
        background: white;
        border-radius: 6px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        padding: 30px 20px;
        box-sizing: border-box;
    }

    .mian-shoeToast-icon {
        text-align: center;
        margin-bottom: 30px;
    }

    .mian-shoeToast-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #1f3c84;
        padding-bottom: 20px;
    }

    .mian-shoeToast-content {
        font-size: 14px;
    }

    .mian-shoeToast-btn {
        height: 45px;
        background: #1f3c84;
        color: white;
        line-height: 45px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        border-radius: 6px;
        margin-top: 30px;
    }


    .vote-block {
        background: white;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 6px;
    }

    .vote-block-title {
        line-height: 40px;
        padding-bottom: 10px;
        font-size: 18px;
        color: #1f3c84;
        font-weight: bold;
        text-align: center;
    }

    .vote-title {
        font-weight: bold;
        font-size: 20px;
        padding-bottom: 10px;
        color: white;
        padding-top: 20px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
    }

    .vote-block-btn {
        background: #1f3c84;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .vote-block-btn span {
        width: 100%;
        height: 45px;
        line-height: 45px;
        background: white;
        color: #1f3c84;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        border-radius: 6px;
        display: block;
    }
</style>