<template>
    <div v-if="!loaded">
        <v-dialog
                v-model="lock"
                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>
    <v-container class="mian" v-else>
        <!-- 已投票提示信息 -->
        <div class="mian-shoeToast" v-if="lock">
            <div class="mian-shoeToast-icon">
                <v-icon color="#1f3c84" size="58">{{ message.icon }}</v-icon>
            </div>
            <div class="mian-shoeToast-title">{{ message.msg }}</div>
            <div class="mian-shoeToast-content">{{ message.tips }}</div>
            <div class="mian-shoeToast-btn" @click="jump('Index')">返回主页</div>
        </div>
        <!-- 投票列表 -->
        <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 class="list">
                <div class="vote-title">
                    中国狮子联会哈尔滨心连心服务队
                </div>
                <div style="color: #ffffff">
                    2020-2021年度
                </div>
                <div class="vote-title">{{ info.title }}</div>

                <div class="list-card" v-for="(item, index) in list" :key="index">
                    <v-img
                            :src="item.cover"
                            width="110"
                            height="160"
                            position="top center"
                            style="position: absolute"
                    >
                    </v-img>
                    <div class="list-card-content">
                        <div class="list-card-content-name">{{ item.name }}</div>
                        <div class="list-card-content-item"><label>参选职务:</label>{{ item.desc }}</div>
<!--                        <div class="list-card-content-item"><label>服务队:</label>{{ item.desc2 }}</div>-->
                        <!--                                :disabled="tomax && !(item.id in selected)"-->

                        <v-checkbox
                                v-model="selected"
                                :value="item.id"
                                class="radioGroup"
                                :disabled="tomax && !inArray(item.id)"
                        >
                            <template v-slot:label>
                                <div class="list-radio-text">赞成</div>
                            </template>
                        </v-checkbox>
                    </div>
                </div>
            </div>
            <v-dialog v-model="sure" persistent>
                <v-card>
                    <v-card-title>确认提交</v-card-title>
<!--                    <v-card-text>-->
<!--                        确认您选择无误，立即提交么？-->
<!--                    </v-card-text>-->
                    <v-card-actions>
                        <v-btn color="primary" text @click="sure=false">我再想想</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" @click="submitForm">确认提交</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
            <div class="list-footer">
                <div class="list-footer-text">最多可选{{ info.max }}项，您已经选择{{ selected.length }}项</div>
                <v-btn
                        class="list-footer-btn"
                        :disabled="disable"
                        @click="sure = true"
                >
                    提交推举票
                </v-btn>
            </div>
        </div>
    </v-container>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                loaded: false,
                id: 0,
                info: [],
                list: [],
                submitData: [],
                lock: true,
                selected: [],
                disable: true,
                loading: false,
                message: '',
                tomax: false,
                sure: false
            }
        },
        watch: {
            selected: function () {
                if (this.selected.length >= this.info.max) {
                    this.tomax = true
                } else {
                    this.tomax = false
                }
                if (this.selected.length > 0 && this.selected.length <= this.info.max) {
                    this.disable = false;
                } else {
                    this.disable = true;
                }
            }
        },
        mounted() {
            this.id = this.$route.params.id;
            this.$api.vote.show(this.id).then(result => {
                this.lock = result.lock
                this.info = result.info
                this.list = result.list
                this.loaded = true
            })
        },
        methods: {
            inArray: function (id) {
                for (let i in this.selected) {
                    if (this.selected[i] == id) {
                        return true
                    }
                }
                return false
            },
            submitForm: function (e) {
                e.preventDefault()
                this.loading = true
                this.$api.vote.submit(this.id, this.selected).then((res) => {
                    this.message = res
                    this.loading = false
                    this.lock = true
                })
            }
        }
    }
</script>

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

    .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;
    }

    /* 提示信息 */
    .mian-shoeToast {
        margin-top: 10vh;
        margin-left: 30px;
        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;
    }

    /* 列表 */
    .list-header b {
        color: #1f3c84;
        margin-left: 5px;
    }

    .list-footer {
        background: #1f3c84;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .list-footer-text {
        text-align: center;
        color: white;
        line-height: 20px;
        padding-bottom: 15px;
        font-size: 14px;
    }

    .list-footer-btn {
        font-size: 1rem;
        height: 45px !important;
        line-height: 45px;
        width: 100%;
        background: white;
        color: #1f3c84;
        border-radius: 6px;
        font-weight: bold;
    }

    .list {
        padding: 0px 15px 110px;
    }

    .list-card {
        background: white;
        margin-top: 15px;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 10px;
        position: relative;
        min-height: 180px;
    }

    .list-card-content {
        margin-left: 130px;
        height: 160px;
        position: relative;
    }

    .radioGroup {
        position: absolute;
        left: 0;
        bottom: -20px;
    }

    .list-card-content-name {
        font-size: 22px;
        font-weight: bold;
        color: #1f3c84;
    }

    .list-card-content-item {
        padding-top: 5px;
        font-size: 14px;
        position: relative;
        padding-left: 80px;
        font-weight: bold;
    }

    .list-card-content-item label {
        position: absolute;
        left: 0;
        top: 5px;
        color: gray;
    }

    .list-radio-text {
        font-size: 14px;
    }
</style>