<template>
    <div
            class="pa-4 mbody"
    >
        <v-list
                three-line
        >
            <v-list-item>
                <v-list-item-content>
                    <v-list-item-title>尊敬的 {{ user.name }} 狮兄/狮姐：</v-list-item-title>
                    <v-list-item-subtitle>欢迎您参与中国狮子联会哈尔滨代表处第六次联席会议</v-list-item-subtitle>
                </v-list-item-content>
            </v-list-item>
            <v-list-item v-if="now_vote">
                <v-list-item-content>
                    <v-list-item-title>当前投票轮次</v-list-item-title>
                    <v-list-item-subtitle>{{ now_vote }}</v-list-item-subtitle>
                </v-list-item-content>
            </v-list-item>
        </v-list>
        <v-simple-table>
            <template v-slot:default>
                <thead>
                <tr>
                    <th class="text-left">姓名</th>
                    <th class="text-left">手机号</th>
                    <th class="text-left">签到</th>
                    <th class="text-left">投票</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in desserts" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td><a :href="`tel:` + item.mobile">{{ item.mobile }}</a></td>
                    <td>
                        <v-icon
                                v-if="item.sign"
                                color="green"
                        >
                            mdi-check
                        </v-icon>
                        <v-icon
                                v-else
                                color="red"
                        >
                            mdi-close
                        </v-icon>
                    </td>
                    <td>
                        <v-icon
                                v-if="item.vote"
                                color="green"
                        >
                            mdi-check
                        </v-icon>
                        <v-icon
                                v-else
                                color="red"
                        >
                            mdi-close
                        </v-icon>
                    </td>
                </tr>
                </tbody>
            </template>
        </v-simple-table>
        <v-btn
                absolute
                dark
                fab
                right
                color="#1f3c84"
                style="bottom: 16px"
                @click="reload"
        >
            <v-icon>mdi-refresh</v-icon>
        </v-btn>
<!--        <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: [],
                desserts: [],
                now_vote: '当前无投票'
            }
        },
        mounted() {
            this.$api.index.index().then(result => {
                this.user = result.user
                this.now_vote = result.now_vote
                this.desserts = result.desserts
            });
        },
        methods: {
            ...mapActions(['doLogout']),
            reload() {
                this.$api.index.index().then(result => {
                    this.user = result.user
                    this.now_vote = result.now_vote
                    this.desserts = result.desserts
                });
            },
            logout: function () {
                this.toast('退出成功');
                this.doLogout();
                setTimeout(() => {
                    router.push({
                        name: 'AuthLogin'
                    })
                }, 1000)
            }
        }
    }
</script>

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

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