<template>
    <div class="selltop-rank-box">
        <i class="iconfont icon-huangguan"></i>
        <ul>
            <li v-for="(item, index) in data" :key="index" v-if="index<10">
                <div class="head">
                    <img v-if="item.userPhoto" :src="`http://reborndev.oss-cn-hangzhou.aliyuncs.com${item.userPhoto}`" :onerror="defaultImg"/>
                    <img v-else src='../../assets/img/default_head_img.jpg' />
                </div>
                <div class="rank-content">
                    <div class="rank" v-if="index==0">今日销冠</div>
                    <div class="rank" v-else>第 {{index+1}} 名 <i class="iconfont icon-shangjiantou1" :class="{'red':item.rankState==0}"></i></div>
                    <div class="t">{{item.userName}}</div>
                    <div class="ranktrade-box">
                        交易额：{{(parseFloat(item.sales)/10000).toFixed(2)}}W &nbsp; 人头数：{{item.guestNum}}人
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        data:{
            type:Array,
            default:[]
        }
    },
    data () {
        return {
            //data:[]
            oldList: [],
            defaultImg: 'this.src="' + require('../../assets/img/default_head_img.jpg') + '"',
            addTradeInfo: {},
        }
    },
    watch:{
        data:{
            handler: function (val, oldVal) {
                if (oldVal) {
                    this.oldList = oldVal;
                }
                if (val) {
                    this.data = val;
                    this.addTradeS();
                }
            }
        }
    },
    mounted() {
        // this.data.push({
        //     name:'华国豪',
        //     money:'98000',
        //     moneyFormat:'9.8W',
        //     peoples:9,
        //     rankState:1
        // })
        this.bus.$on('addTrade',addTradeInfo=>{
            this.addTradeInfo = addTradeInfo;  // 监听报名
            // this.addTrade(addTradeInfo)
        })
    },
    methods: {
        addTradeS: function () {
            // let arr1 = [1,2,3,4,5,6,7]
            // let arr2 = [1,3,4,2,5,6,7]
            // let oldIndex = null,newIndex = null
            // arr1.forEach((x,index)=>{
            //     if (x === 2) {
            //         oldIndex = index
            //     }
            // })
            // arr2.forEach((x,index)=>{
            //     if (x === 2) {
            //         newIndex = index
            //     }
            // })
            // if (!oldIndex && newIndex || oldIndex && newIndex && (oldIndex !== newIndex)) {
            //     let superIndex = oldIndex ? oldIndex : 0
            //     let superList = arr2.slice(superIndex,newIndex)
            //     let count = 10 - newIndex
            //     let names = ''
            //     superList.forEach(x=>{
            //         names += ',' + x.userName
            //     })
            //     // this.addTrade(count, names, this.addTradeInfo.enterName)
            //     console.log(names,count)
            // }
            
            let name = this.addTradeInfo.enterName,
                oldIndex = null,
                newIndex = null
            this.oldList.forEach((x, index)=>{
                if (x.enterName === name) {
                    oldIndex = index
                }
            })
            this.data.forEach((x, index)=>{
                if (x.enterName === name) {
                    newIndex = index
                }
            })
            if (!oldIndex && newIndex || oldIndex && newIndex && (oldIndex !== newIndex)) {
                let superIndex = oldIndex ? oldIndex : 0
                let superList = this.data.slice(superIndex,newIndex)
                let count = 10 - newIndex
                let names = ''
                superList.forEach(x=>{
                    names += ',' + x.userName
                })
                this.addTrade(count, names, this.addTradeInfo.enterName)
            }
        },
        // addTrade(addTradeInfo){
        addTrade(count, names, enterName){
            // let t=null
            // this.data.forEach((x,i)=>{
            //     if(x.userName==addTradeInfo.name){
            //         t=i
            //     }
            // })
            // let obj=JSON.parse(JSON.stringify(this.data[t]))
            // obj.money=parseFloat(obj.money)+addTradeInfo.money
            // let count=obj.rankState==1?10-t:0
            // let names=''
            // for (let i = t-1; i >= 0; i--) {
            //     if(obj.money>parseFloat(this.data[i].money)){
            //         count++;
            //         names+=','+this.data[i].userName
            //     }else{
            //         break;
            //     }
            // }
            if(count>0&&names!=''){
                let newt=count
                let videoObj={
                    txt:'',
                    endVideo:''
                }
                if(newt==9){
                    videoObj.txt=`恭喜${enterName}，成功超越${names}，进入今日榜单前十`
                }else if(newt<=8 &&newt>2){
                    videoObj.txt=`恭喜${enterName}，成功超越${names}，排名上升至第${newt}`
                }else if(newt==2||newt==1){
                    videoObj.txt=`恭喜${enterName}超越了${names}，成功进入了今日榜单前三，棒棒哒！`
                }else if(newt==0){
                    videoObj.txt=`今日销冠易主啦！${enterName}成功超越了${names}，成为了今日销售冠军`
                }
                if(count==1){
                    videoObj.endVideo='http://img.oytour.com/audio/First.mp3'
                }else if(count==2){
                    videoObj.endVideo='http://img.oytour.com/audio/double.mp3'
                }else if(count==3){
                    videoObj.endVideo='http://img.oytour.com/audio/triple.mp3'
                }else if(count==4){
                    videoObj.endVideo='http://img.oytour.com/audio/quatre.mp3'
                }else if(count==5){
                    videoObj.endVideo='http://img.oytour.com/audio/penta.mp3'
                }else if(count==6){
                    videoObj.endVideo='http://img.oytour.com/audio/dominating.mp3'
                }else if(count==7){
                    videoObj.endVideo='http://img.oytour.com/audio/godlike.mp3'
                }else if(count==8){
                    videoObj.endVideo='http://img.oytour.com/audio/legendary.mp3'
                }else if(count==9){
                    videoObj.endVideo='http://img.oytour.com/audio/rampage.mp3'
                }else if(count==10){
                    videoObj.endVideo='http://img.oytour.com/audio/unstopppedable.mp3'
                }
                this.bus.$emit("addVideo",videoObj);
                // this.data.splice(t,1)
                // this.data.splice(newt,0,obj)
                this.$set(this.data,this.data)
            } else {
                // this.data[t]=obj
                // this.$set(this.data,this.data)
            }
        }
    }
}
</script>
<style>
.selltop-rank-box{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.selltop-rank-box ul{
    width: 100%;
    
}
.selltop-rank-box ul li{
    padding: 12px 0;
    margin: 0 12px;
    display: flex;
    position: relative;
    border-top: 1px dashed #242031;

}
.selltop-rank-box .icon-huangguan{
    top: -28px;
    left: 12px;
    font-size: 48px;
    color: #fedb25;
    position: absolute;
    z-index: 9;
}
.selltop-rank-box ul li:first-child{
    border-top: none;
}
.selltop-rank-box ul li .head{
    width: 40px;
    height: 40px;
    margin-right: 20px;
    position: relative;
}
.selltop-rank-box ul li:first-child .head{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    position: relative;
    border:3px solid #fedb25;
}
.selltop-rank-box ul li .head img{
    width: 100%;
    height: 100%;
}

.selltop-rank-box ul li .rank-content{
    flex: 1;
    height: 40px;
}
.selltop-rank-box ul li .rank-content:first-child{
    height: 50px;
}
.selltop-rank-box ul li .rank-content .t{
    font-size: 14px;
    color: #f1f1f1;
    text-shadow: 0 0 44px #f1f1f1;
    display: block;
}
.selltop-rank-box ul li:first-child .rank-content .t{
    color: #FFF;
    text-shadow: 0 0 44px #FFF;
}
.selltop-rank-box ul li:first-child .rank-content .t{
    font-size: 22px;
}
.selltop-rank-box ul li .rank-content .ranktrade-box{
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    font-family: 'DIN';
    display: block;
    color: #5f5d6a;
    
}
.selltop-rank-box ul li .rank-content .rank .iconfont{
    font-size: 14px;
    margin-left: 5px;
    color: green;
    display: inline-block;
     transform: rotate(180deg);
}
.selltop-rank-box ul li .rank-content .rank .iconfont.red{
    color: red;
    transform: rotate(0deg);
    margin-top: 2px;
}
.selltop-rank-box ul li .rank-content .rank{
    position: absolute;
    right: 5px;
    top: 10px;
    font-size: 12px;
    color: #5f5d6a;
}
.selltop-rank-box ul li:first-child .rank-content .rank{
    font-size: 18px;
    color: #fedb25;
}
</style>
