<template>
    <div class="index-aside aside" :class="{ 'sticky top': isActive }">
        <div class="sidebar-block signin-tip signin">
            <div class="first-line">
                <div class="icon-text">
                    <span class="title">
                        {{ hoursTip }}
                        <!-- <span class="title-days">77天</span> -->
                    </span>
                    <div class="second-line">点亮在商城的每一天</div>
                </div>
                <button class="btn signedin-btn">
                    <span @click="goToSignIn" v-if="userInfo.signStatus == 0" class="btn-text sign-text">去签到</span>
                    <span v-else class="btn-text signed-text">已签到</span>
                </button>
            </div>
        </div>
        <div class="sidebar-block">
            <div class="awardTitle">中奖名单</div>
            <list-scroll :listData="listScrollData"></list-scroll>

            <!-- <div class="avatar">
                <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
                <span class="name">{{ userInfo.userName }}</span>
            </div>
            <div class="info">
                <div class="info-item">
                    <div class="item-title">部门：</div>
                    <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ userInfo.deptName }}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">积分：</div>
                    <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
                </div>
            </div> -->
        </div>
        <div class="sidebar-block banner-block" v-for="(item, index) in activitykist" :key="index">
            <div class="banner banner">
                <img :src="item.sideImgUrl" class="banner-image">
                <div class="ctrl-box">
                    <!-- <div class="label">
                            <span>{{ item.title }}</span>
                        </div> -->
                    <div class="status" v-if="item.title == '每日答题' && item.joinStatus == 1"
                        @click="goFestiveEvents(item)">
                        <img width="88.5" height="21" src="../assets/image/day.png" alt="每日答题">
                    </div>
                    <div class="status" v-if="item.title == '每周竞技' && item.joinStatus == 1"
                        @click="goFestiveEvents(item)">
                        <img width="88.5" height="21" src="../assets/image/week.png" alt="每周竞技">
                    </div>
                    <div class="status" v-if="item.title == '每月抽奖' && item.joinStatus == 1"
                        @click="goFestiveEvents(item)">
                        <img width="88.5" height="21" src="../assets/image/month.png" alt="每月抽奖">
                    </div>
                    <div class="status" v-if="item.title == '每日抽奖' && item.joinStatus == 1"
                        @click="goFestiveEvents(item)">
                        <img width="88.5" height="21" src="../assets/image/dayD.png" alt="每日抽奖">
                    </div>
                    <div class="status" v-if="item.joinStatus == 0">
                        <img width="88.5" height="21" src="../assets/image/weikaiqi.png" alt="未开启">
                    </div>
                    <div class="status" v-if="item.joinStatus == 2">
                        <img width="88.5" height="21" src="../assets/image/yicanyu.png" alt="已参与">
                    </div>
                </div>
            </div>
        </div>
        <div class="sticky-block">
            <!-- <div class="sidebar-block signin-tip">
                <div class="avatar">
                    <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
                    <span class="name">{{ userInfo.userName }}</span>
                </div>
                <div class="info">
                    <div class="info-item">
                        <div class="item-title">部门：</div>
                        <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{
                            userInfo.deptName }}</div>
                    </div>
                    <div class="info-item">
                        <div class="item-title">积分：</div>
                        <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
                    </div>
                </div>
            </div> -->
            <div class="sidebar-block banner-block" v-for="(item, index) in activitykist" :key="index">
                <div class="banner banner">
                    <img :src="item.sideImgUrl" width="240" height="200" class="banner-image">
                    <div class="ctrl-box">
                        <!-- <div class="label">
                            <span>{{ item.title }}</span>
                        </div> -->
                        <div class="status" v-if="item.title == '每日答题' && item.joinStatus == 1"
                            @click="goFestiveEvents(item)">
                            <img width="88.5" height="21" src="../assets/image/day.png" alt="每日答题">
                        </div>
                        <div class="status" v-if="item.title == '每周竞技' && item.joinStatus == 1"
                            @click="goFestiveEvents(item)">
                            <img width="88.5" height="21" src="../assets/image/week.png" alt="每周竞技">
                        </div>
                        <div class="status" v-if="item.title == '每月抽奖' && item.joinStatus == 1"
                            @click="goFestiveEvents(item)">
                            <img width="88.5" height="21" src="../assets/image/month.png" alt="每月抽奖">
                        </div>
                        <div class="status" v-if="item.title == '每日抽奖' && item.joinStatus == 1"
                            @click="goFestiveEvents(item)">
                            <img width="88.5" height="21" src="../assets/image/dayD.png" alt="每日抽奖">
                        </div>
                        <div class="status" v-if="item.joinStatus == 0">
                            <img width="88.5" height="21" src="../assets/image/weikaiqi.png" alt="未开启">
                        </div>
                        <div class="status" v-if="item.joinStatus == 2">
                            <img width="88.5" height="21" src="../assets/image/yicanyu.png" alt="已参与">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { indexList,winningList } from "@/api/allApi";
import listScroll from '@/components/list-scroll.vue';
export default {
    components: {
        listScroll
    },
    data() {
        return {
            timer: null,
            listScrollData: [],
            activitykist: [],
            hoursTip: '你好！',
            isActive: false,
        };
    },
    computed: {
        // 将 getter 映射到当前组件的计算属性
        ...mapGetters(['userInfo', 'avatar'])
    },
    created() {
        this.getHoursTip()
        indexList().then(response => {
            this.activitykist = response.data.data
        });
        this.getWinningList();
        this.initWinningList();
    },
    methods: {
        initWinningList(){
            setInterval(() => {
                this.getWinningList();
            }, 300000);
        
        },
        getWinningList(){
            winningList().then(response => {
            this.listScrollData = response.data.data.items;
            })
        },
        goFestiveEvents(val) {

            if (val.title == '每日答题') {
                this.$router.push({
                    path: '/home/festiveEvents/answerGame',
                    query: {
                        actId: val.actId
                    }
                });
                return;
            }
            if (val.title == '每周竞技') {
                this.$router.push({
                    path: '/home/festiveEvents/game',
                    query: {
                        url: val.activityUrl,
                        actId: val.actId
                    }
                });
                return;
            }
            if (val.title == '每月抽奖' || val.title == '每日抽奖') {
                this.$router.push({
                    path: '/home/festiveEvents/drawCarouselGame',
                    query: {
                        actId: val.actId
                    }
                });
                return;
            }
        },
        goToSignIn() {
            this.$router.push({
                path: '/home/signIn',
            });
        },
        getHoursTip() {
            let date = new Date();
            if (date.getHours() >= 0 && date.getHours() < 12) {
                this.hoursTip = "上午好！"
            } else if (date.getHours() >= 12 && date.getHours() < 18) {
                this.hoursTip = "下午好！"
            } else {
                this.hoursTip = "晚上好！"
            }
        },

        // 保存滚动值，这是兼容的写法
        handleScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop >= 950) {
                this.isActive = true
            } else {
                this.isActive = false
            }
        },
    },

    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    destroyed() {
        // 离开该页面需要移除这个监听的事件，不然会报错
        window.removeEventListener('scroll', this.handleScroll)
    }
}
</script>
<style>
.awardTitle {
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #fff;
    background-color:#ff9170;
    color: #fff;
}

.aside {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.aside.index-aside {
    width: 16.3rem;
}

.hot-list-wrap {
    /* padding: 1.33rem 0 0.66rem; */
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 1.25rem;
}

.timeline-index-view.sidebar-block {
    box-shadow: none;
}

.sidebar-block {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    border-radius: 2px;
    margin-bottom: 1rem;
    font-size: 1.16rem;
    line-height: 1.29;
    border-radius: 4px;
    color: #333;
}

.signin-tip {
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.first-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.first-line .icon-text {
    display: flex;
    flex-direction: column;
}

.first-line .btn {
    cursor: pointer;
    border-radius: 4px;
    height: 36px;
    width: 74px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(30, 128, 255, .3);
    background-color: rgba(30, 128, 255, .05);
}

.first-line .signed-text {
    color: #abcdff;
}

.first-line .sign-text {
    color: #1e80ff;
}

.first-line .btn-text {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.first-line .title {
    color: #1d2129;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.second-line {
    color: #8a919f;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 2px;
}

.first-line .title-days {
    margin-left: 4px;
    color: #1e80ff;
}

.sidebar-block .avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.avatar .name {
    margin-top: 2px;
    font-size: 1rem;
    font-weight: 600;
    color: #252933;
}

.sidebar-block .info {
    margin-top: 5px;
}

.info .info-item {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    line-height: 1.5rem;
}

.info-item .item-title {
    width: 62px;
}

.info-item .text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-item .blue {
    color: #1e80ff;
}

.sticky-block {
    background-color: transparent;
    box-sizing: border-box;
    position: fixed;
    box-shadow: none;
    opacity: 0;
    transition: all .2s;
    width: 16.3rem;
    z-index: -1;
    top: 67px;
    pointer-events: none;
}

.index-aside.sticky.top .sticky-block {
    top: 20px;
}

.index-aside.sticky .sticky-block {
    opacity: 1;
    top: 80px;
    z-index: 5;
    pointer-events: all;
}

.el-avatar>img {
    width: 100%;
}

.sidebar-block.banner-block {
    overflow: hidden;
}

.sidebar-block {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    border-radius: 2px;
    margin-bottom: 1.66rem;
    font-size: 1.16rem;
    line-height: 1.29;
    border-radius: 4px;
    color: #252933;
}

.sidebar-block.banner-block .banner {
    height: 120px;
}

.banner {
    position: relative;
    font-size: 0;
    cursor: pointer;
}

a {
    margin: initial;
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    color: #909090;
}

.banner .banner-image {
    width: 100%;
    height: 100%;
}

.banner .ctrl-box .label {
    position: absolute;
    left: 20px;
    top: 20px;
    line-height: 32px;
    height: 32px;
    width: 100px;
    text-align: center;
    font-size: 16px;
    z-index: 1;
    color: black;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 6px;
    font-weight: 500;
}

.banner .ctrl-box .status {
    position: absolute;
    left: 10px;
    top: 80px;
    /* line-height: 32px;
    height: 32px;
    width: 100px;
    text-align: center;
    font-size: 16px;
    z-index: 1;
    color: black;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 6px;
    font-weight: 500; */
}

/* .banner .ctrl-box .label:hover {
    background-color: rgba(0, 0, 0, .4);
}
.banner .ctrl-box .status:hover {
    background-color: rgba(0, 0, 0, .4);
} */
</style>