<template>
    <div :style="styleData.auctionRankBox" ref="auctionRank" @click="styleClick('click', 'auctionRank')"
        @mousemove="styleClick('mousemove', 'auctionRank')" @mouseout="styleClick('mouseout', 'auctionRank')">
        <div class="userListBox" :style="styleData.rankColor">
            <div class="title"></div>
            <div class="list">
                <div class="item" v-for="(item, index) in userListBox" :key="index">
                    <div>
                        <img :src="item.userImage" alt="">
                        <span class="nick">{{ item.nickName ? item.nickName : item.nick }}</span>
                    </div>
                    <span class="prizeName" :style="styleData.goodsName">{{ item.prizeName }}</span>
                </div>
                <div style="margin-top:.2rem;color: white;">没有更多了~</div>
            </div>
        </div>
    </div>
</template>

<script>
import apis1 from '../../../util/apis1.js';
import {
    // 弹窗?
    TaskPopComServiceNew2,
} from '../../../util/hdzxtcomCreate.js';
import { Toast } from "vant";
let {
    getAuctionUserInfo
} = apis1;

export default {
    props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
    data() {
        return {
            userListBox: []
        };
    },
    created() {
        this.isShowRedCicle = this.datas.isShowRedCicle;

        this.publicData.$on('xhyFollowSkuTask', xhyFollowSkuTask => {
            if (xhyFollowSkuTask) {
                this.initData(true);
            }
        });
        this.initData(false);
    },
    methods: {
        styleClick(type, refName) {
            if (this.isWebClick) {
                //传值给B端
                let byValue = {
                    modifyContent: this.modifyContent,
                    refName: refName,
                    styleData: this.styleData,
                    c_this: this,
                    styleDataOld: this.styleDataOld
                };
                this.$emit('opertaionCom', type, byValue);
            }
        },

        initData(isCallBack) {
            if (this.isTemplate) {
                this.userListBox = [
                    {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }, {
                        imgUrl: '//img10.360buyimg.com/imgzone/jfs/t1/201153/28/20773/320290/63a3b8e5E12adecee/82193157827ba579.png',
                        nick: '爱***喵',
                        prizeName: '笔记本电脑'
                    }
                ]
                // if (!this.isWebClick) {
                //     this.$toast('活动预览，仅供查看');
                // }
            } else {
                getAuctionUserInfo(1, data => {
                    this.userListBox = data.data;
                })
            }
        }
    },
    mounted() {

    }
};
</script>

<style lang="scss" scoped="scoped">
.userListBox {
    width: 7.06rem;
    margin-left: calc(50% - 7.06rem/2);
    height: 6.2rem;
    padding: .3rem .55rem;
    background: #1f2020;
    margin-top: .3rem;
    border-radius: .24rem;
    box-sizing: border-box;

    .title {
        width: 3.4rem;
        height: .61rem;
        background: url('//img10.360buyimg.com/imgzone/jfs/t1/156296/27/33532/11812/63a41136E0565c5db/f14d9e34bab9749f.png');
        background-size: 100% 100%;
        margin-left: calc(50% - 3.4rem/2);
        margin-bottom: .3rem;
    }

    .list {
        width: 6rem;
        height: 4.5rem;
        overflow-y: auto;
        font-size: .24rem;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            // width: 100%;
            height: 1rem;
            padding: .25rem .3rem;
            background: white;
            border-radius: .05rem;
            margin-bottom: .05rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &:last-child {
                margin-bottom: 0;
            }

            img {
                width: .5rem;
                height: .5rem;
                border-radius: 50%;
                vertical-align: middle;
                margin-right: .15rem;
            }

            .nick {}

            .prizeName {}
        }
    }
}
</style>
