<template>
    <div class="account">
        <div class="account-top">
            <van-image class="bg" width="100%" :src="require('@assets/account_bg.png')" fit="scale-down" />
            <div class="account-content">
                <van-image width="58" height="58" radius="2" :src="gameInfo.pic" fit="cover" />
                <div class="title">{{ gameInfo.name }}</div>
                <div class="type-list">
                    <div class="type prim">QQ区</div>
                    <div class="type" @click="wait">微信区</div>
                </div>
            </div>
        </div>

        <div class="account-list">
            <div class="account-title">已绑定{{ accounts.length }}个账号</div>
            <div class="account-box" v-if="accounts.length !== 0">
                <div class="account-info" v-for="(item, index) in accounts" :key="index">
                    <div class="account-img">
                        <van-image
                            width="44"
                            height="44"
                            fit="cover"
                            radius="4"
                            :src="item.rongYaoRole.icon || require('@assets/img_default_photo.png')"
                        />
                        <div class="account-btn" @click="remove(item.id)">解绑</div>
                    </div>
                    <div class="account-right">
                        <div class="text1">{{ item.rongYaoRole.roleName }}</div>
                        <div class="text2">营地ID:{{ item.rongYaoRole.userId }}</div>
                    </div>
                    <div class="account-btn" @click="activate(item.active, item.id)" :class="{ active: item.active }">
                        {{ item.active ? '使用中' : '空闲' }}
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom" v-if="accounts.length === 0">
            <van-button type="primary" block @click="bind">绑定账号</van-button>
        </div>

        <bind-accound ref="bind" @update="getInfo"></bind-accound>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import BindAccound from '../../components/BindAccound.vue';
export default {
    name: 'userAccount',
    inject: ['setKeeps', 'scrollWrapper', 'changeScroll'],
    components: { BindAccound },
    data() {
        return {
            accounts: [],
            gameInfo: {},
            zone: 'QQ'
        };
    },
    computed: {
        ...mapState(['userInfo'])
    },
    mounted() {
        this.$http.post('/game/all', { size: 1000, query: { del: false } }, { body: 'json' }).then(res => {
            if (!res.empty) {
                this.gameInfo = res.content[0];
            }
        });
        this.getInfo();
    },
    methods: {
        getInfo() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/bindGame/my').then(res => {
                this.$toast.clear();
                this.accounts = res.filter(item => {
                    return !!item.rongYaoRole;
                });
            });
        },
        bind() {
            this.$refs.bind.init(this.gameInfo, this.zone);
        },
        remove(id) {
            this.$dialog
                .confirm({
                    title: '提示',
                    message: '确认要解绑该账号吗？',
                    confirmButtonText: '立即解绑'
                })
                .then(() => {
                    this.$toast.loading({
                        message: '加载中...',
                        forbidClick: true
                    });
                    this.$http
                        .post('/bindGame/unbind', {
                            id: id
                        })
                        .then(res => {
                            this.$toast.success('解绑成功');
                            this.getInfo();
                            // this.accounts = res;
                        });
                });

            // this.wait();
        },
        activate(active, id) {
            if (active) {
                return;
            }
            this.$http
                .post('/bindGame/activate', {
                    id: id
                })
                .then(res => {
                    this.getInfo();
                });
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/accountDes') {
            this.setKeeps(['userAccount']);
        } else {
            this.setKeeps(['userAccount'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.account {
    padding: 16px;
}
.account-top {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    .bg {
        position: relative;
        z-index: 0;
    }
    .account-content {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .flex-col();
        justify-content: center;
        align-items: center;
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            margin-top: 6px;
        }
        .type-list {
            .flex();
            width: 123px;
            height: 24px;
            background: #25283d;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 24px;
            .type {
                font-size: 12px;
                color: #ffffff;
                line-height: 24px;
                width: 50%;
                text-align: center;
                border-radius: 2px;

                &.prim {
                    background: linear-gradient(225deg, #f6abf0 0%, #10f7ee 100%);
                    color: #1a1c2b;
                }
            }
        }
    }
}

.account-list {
    margin-top: 20px;
    background: #25283d;

    .account-title {
        height: 56px;
        border-radius: 4px;
        line-height: 56px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        position: relative;
    }

    .account-box {
        position: relative;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 16px;
            right: 16px;
            height: 1px;
            background: #313346;
        }
    }
}

.bottom {
    padding: 9px 28px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .bottom(9px);
    background-color: @bg;
    z-index: 20;
}
.account-info {
    .flex();
    padding: 10px 16px;
    .account-img {
        height: 44px;
        position: relative;
        .account-btn {
            position: absolute;
            font-size: 10px;
            color: #ffffff;
            line-height: 12px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
        }
    }
    .account-right {
        flex-grow: 1;
        margin-left: 10px;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 12px;
            color: #6a6d83;
            line-height: 17px;
            margin-top: 3px;
        }
    }
}
.account-box {
    padding: 10px 0;
}
.account-btn {
    font-size: 12px;
    color: #ffffff;
    line-height: 24px;
    &.active {
        color: #ffe3a3;
    }
}
</style>
