<template>
<!--  排行榜-->
  <div style="margin-top: 0.4rem;height: 100%">
    <span class="tip">- 点赞排行榜 -</span>
    <div  class="listitemDiv" :style="listitemDiv">
      <div v-if="taskUploadPraiseDetailsList.length > 0">
        <div v-for="(item, index) in taskUploadPraiseDetailsList" :key="index">
          <div class="itemDiv" :style="myPlace === index + 1 ? itemDiv : null">
            <div >
              <div v-if="index === 0" style="width:4.5%;float:left;" class="smcircular123">
                <img  src="//img10.360buyimg.com/imgzone/jfs/t1/174820/2/13465/3985/60bdf53aE67bea0ca/3730bf41e01c3541.png" />
              </div>
              <div v-else-if="index === 1" style="width:4.5%;float:left;" class="smcircular123">
                <img  src="//img10.360buyimg.com/imgzone/jfs/t1/174368/22/13644/4402/60bdf53aE6272b060/19f263e2972283c4.png" />
              </div>
              <div v-else-if="index === 2" style="width:4.5%;float:left;" class="smcircular123">
                <img  src="//img10.360buyimg.com/imgzone/jfs/t1/181628/10/7994/4826/60bdf53aE994e1877/f31f38de4af6c872.png" />
              </div>
              <div v-else style="width:4.5%;float:left;" class="smcircular">
                <div class="smcircularFont">{{index + 1}}
                </div>
              </div>
              <div style="width:45.5%;float:left;padding-left:3%">
                <div class="pictutesCss"
                     v-for="(item1, index1) in [item.link]"
                     v-show="item1"
                     :key="index1"
                >
                  <div v-if="isTemplate">
                    <van-image
                      width="2.52rem"
                      height="1.62rem"
                      fit="contain"
                      :src="item1"
                      style="background-color:white"
                      @click="getImg(item.link)"
                    />
                  </div>
                  <div v-else>
                    <van-image
                      width="2.52rem"
                      height="1.62rem"
                      fit="cover"
                      :src="item1"
                      @click="getImg(item.link)"
                    />
                  </div>
                </div>
                <div :style="myPlace === index + 1 ? usersblack : null" class="usersCss">
                  <div v-if="isTemplate">
                    <span @touchend="gotouchend">用户：{{item.nickName}}</span>
                  </div>
                  <div v-else>
                    <span @touchend="gotouchend">用户：{{item.nickName | ellipsis}}</span>
                  </div>
                </div>
              </div>
              <div style="width:50%; float:right;margin-top:0.5rem">
                <div style="width:20%;float:left;">
                  <div class="circular">
                    <img  src="//img10.360buyimg.com/imgzone/jfs/t1/186139/11/7972/1300/60bdf53aE52f7f7f7/afbb7759197e94c5.png" />
                  </div>
                </div>
                <div class="countCss" :style="myPlace === index + 1 ? countCss : null">共获得<span>{{item.praiseCount}}</span>个赞</div>
              </div>
            </div>
          </div>
        </div>
        <div class="rankingResultCss" :style="this.rankingFlag === '001' ? rankingResultCssTop : null">
          <span >{{this.rankingResult}}</span>
        </div>
        <div v-if="btnDisplay" class="btnCss">
          <Button class="start-button" :disabled="true" v-if="btnStatus==='receive2'">已领取奖品</Button>
          <Button class="start-button" v-if="btnStatus==='receive3'" @click="getPrize">领取奖品</Button>
          <Button class="start-button" :disabled="true" v-if="btnStatus==='receive4'">奖品已领光</Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import Vue from 'vue';
    import { ImagePreview } from 'vant';
    import apis1 from '../../../../util/apis1.js';
    import store from '../../../../store/store.js';
    import { PrizeResultPopComService, NoPrizeFinishedPopComService } from '../../../../util/comCreate.js';
    Vue.use(ImagePreview);
    let {immediatelyDraw1,activityQueryIndex} = apis1;
    export default {
        props: ['isTemplate','taskUploadPraiseDetailsList','myPlace','rankingFlag','prizeListId'],//可活动奖品总人数
        data() {
            return {
                itemDiv:{
                    'background-color': '#eaebf0'
                },
                countCss:{
                    'color': '#495875'
                },
                listitemDiv:{
                },
                /**
                 * 奖品领取按钮状态
                 * receive2: 已领取奖品
                 * receive3: 领取奖品
                 * receive4: 奖品已领光
                 */
                btnStatus: null,
                //按钮隐藏
                btnDisplay:false,
                //中奖说明
                rankingResult:null,
                fileList: [],//图片地址
                usersblack:{
                    'color':'#495875',
                },
            };
        },
        mounted() {
             this.listitemDiv = {
                  'height': window.innerHeight - 210 + 'px',
                  'width': window.innerWidth + 'px',
             }
             if(this.rankingFlag === "001"){
                 this.rankingResult = '很遗憾，本次点赞排行榜上您没有入榜～';
                 this.rankingResultCssTop = {
                     'padding-bottom':'1rem'
                 }
             }
             else{
                 //flag = "001"未达到领取条件;flag = "002";//已领取;flag = "003";//可以领奖;flag = "004";//奖品库存不足
                 if(this.rankingFlag === "002"){
                     this.btnStatus = 'receive2'
                 }
                 if(this.rankingFlag === "003" || this.rankingFlag === "005"){
                     this.btnStatus = 'receive3'
                 }
                 if(this.rankingFlag === "004"){
                     this.btnStatus = 'receive4'
                 }
                 if(this.myPlace != undefined){
                     this.rankingResult = '恭喜您，本次点赞排行榜上您排第' + this.myPlace + '名，领取您的专属奖品吧～';
                 }
                 //显示按钮
                 this.btnDisplay = true;
             }
        },
        methods: {
            //数据加载
            initData(message) {
                activityQueryIndex({
                    //shareUserId
                    shareUserId: store.state.shareUserId,
                    selectFlag: ''
                }).then(res => {
                    if(res.resp_code === 0){
                        if(message != ""){
                            //未达到领取条件
                            this.$toast({
                                duration: 0, // 持续展示 toast
                                forbidClick: true,
                                message: message,
                            });
                            //3秒后消失
                            var x = setTimeout(() => {
                                this.publicData.$emit('follow', true);
                                clearTimeout(x);
                                this.$toast.clear();
                            }, 3000);
                        }
                        const data = res.data;
                        //显示排行榜
                        if(data.flag !== undefined){
                            if(data.flag === "002"){
                                this.btnStatus = 'receive2'
                            }
                            if(data.flag === "003" || data.flag === "005"){
                                this.btnStatus = 'receive3'
                            }
                            if(data.flag === "004"){
                                this.btnStatus = 'receive4'
                            }
                        }
                    }
                    else if(res.resp_code === 50009){
                        location.reload();
                    }
                    else{
                        if(res.resp_code == 60010 || res.resp_code == 60008){
                            this.tipDis = true;
                            this.tip = '不满足参加条件';
                        }
                        this.$toast({
                            duration: 0, // 持续展示 toast
                            forbidClick: true,
                            message: res.resp_msg,
                        });
                        //3秒后消失
                        var x = setTimeout(() => {
                            this.publicData.$emit('follow', true);
                            clearTimeout(x);
                            this.$toast.clear()
                        }, 3000);
                    }
                });
            },
            //关闭点赞
            praiseCloseClick() {
                this.$emit('praiseCloseClick');
            },
            //点赞
            praiseClick(){
                this.$emit('praiseClick');
            },
            //查看图片
            getImg(images) {
                ImagePreview({
                    images: [images],
                    showIndex: false,
                    loop: false,
                    startPosition: 0
                });
            },
            //领取奖品
            getPrize(){
                if(this.isTemplate) {//非预览模式
                    this.$toast('活动预览，仅供查看');
                    return;
                }
                immediatelyDraw1(this.prizeListId, receiveData => {
                    if (receiveData.resp_code == 0) {
                        //领取失败提示
                        if(receiveData.data.status != 1){
                            this.initData("领取失败");
                            return;
                        }
                        if (receiveData.data.result == true) {
                            var obj = {
                                datas: {},
                                keyData: {
                                    prizeUrl: 'showImg',
                                    prizeName: 'prizeName',
                                    prizeType: 'prizeType',
                                    priceInfo: 'priceInfo',
                                    discountType: 'discountType',
                                    couponType: 'couponType'
                                }
                            };
                            obj.datas = receiveData.data;
                            PrizeResultPopComService.create(obj, receiveData.data, submit => {
                                this.initData("");
                                PrizeResultPopComService.close();
                            });
                        } else {
                            NoPrizeFinishedPopComService.create(
                                '奖品已领光啦~',
                                '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
                                submit => {
                                    this.initData("");
                                    NoPrizeFinishedPopComService.close();
                                }
                            );
                        }
                    }
                    else if (receiveData.resp_code == 50009) {
                        location.reload();
                    }
                    else if (receiveData.resp_code == 60010) {
                        NoPrizeFinishedPopComService.create(
                            '奖品已领光啦',
                            '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
                            submit => {
                                this.initData("");
                                NoPrizeFinishedPopComService.close();
                            }
                        );
                    }
                    else if (receiveData.resp_code == 1000) {
                        //未达到领取条件
                        this.$toast({
                            duration: 0, // 持续展示 toast
                            forbidClick: true,
                            message: receiveData.resp_msg,
                        });
                        //3秒后消失
                        var x = setTimeout(() => {
                            this.publicData.$emit('follow', true);
                            clearTimeout(x);
                            this.$toast.clear()
                            this.initData("");
                        }, 3000);
                    }
                });
            },
            gotouchend(){
               console.log("用户名太长啦");
            }
        },

        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 6) {
                    return value.slice(0, 6) + '...'
                }
                return value
            },
        }
    };
</script>
<style lang="scss" scoped>
  .tip {
    width: 1.93rem;
    height: 0.37rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.4rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #fefefe;
  }
  .listitemDiv{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    overflow-y: scroll;
    margin-top: 0.2rem;
    padding-left: 0.35rem;
  }
  .itemDiv{
    width: 6.9rem;
    height: 1.58rem;
    background-color: #495875;
    border-radius: 0.15rem;
    margin-top: 0.9rem;
  }
  //排名圆圈
  .smcircular123{
    width: 0.31rem;
    height: 0.31rem;
    margin-left:-0.15rem;
    margin-top:-0.13rem;
  }
  //排名圆圈
  .smcircular{
    border: 1px solid #FFFFFF;
    border-radius: 60px;
    width: 0.31rem;
    height: 0.31rem;
    background-color: #6ac5d8;
    margin-left:-0.15rem;
    margin-top:-0.13rem;
  }
  //排名圆圈字体
  .smcircularFont{
    font-family: SourceHanSansCN-Regular;
    font-size: 0.22rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #0b142b;
    margin-top: -0.03rem;
  }
  //排名赞圆圈
  .circular{
    width: 0.59rem;
    height:0.59rem;
  }
  .countCss{
    height: 0.28rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.3rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #fefefe;
    text-align: left;
    padding-left: 0.8rem;
    padding-top: 0.10rem;
  }
  .pictutesCss{
    width: 2.52rem;
    height: 1.62rem;
    border-radius: 0.05rem;
    margin-top: -0.44rem;
  }
  .usersCss{
    width: 2.52rem;
    height: 0.26rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.24rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #ffffff;
    text-align: center;
  }
  .start-button {
    width: 6.26rem;
    height: 0.94rem;
    background-image: linear-gradient(0deg,
      #fde79e 1%,
      #f9d489 50%,
      #f4c174 100%),
    linear-gradient(
        #dcaf57,
        #dcaf57);
    background-blend-mode: normal,
    normal;
    border-radius: 0.1rem;
    font-family: MicrosoftYaHei;
    font-size: 0.46rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #070a1e;

    &:disabled {
      background-image: linear-gradient(0deg, #b7b7b7 1%, #c4c4c4 50%, #d3d3d3 100%), linear-gradient(#b7b7b7, #d3d3d3);
      color: #070a1e;
      opacity: 1;
    }

  }
  .rankingResultCss{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 0.2rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #ffffff;
    margin-top: 0.81rem;
    text-align:center;
  }
  .btnCss{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.53rem;
    padding-bottom:1rem
  }
</style>

<style lang="scss">
  // TOOD: 这里不可以直接写到全局里面。
  //body{
  //  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/195335/37/2478/1252077/609a5d9cE957e265d/95a3117a1d8bb6ad.png);
  //  background-attachment: fixed;
  //  background-repeat: no-repeat;
  //  background-size: cover;
  //  height: 100vh;
  //}
  </style>
