<template>
  <view
    class="content"
    :style="{
      'padding-top': `calc(${$sys().statusBarHeight}px + 350rpx)`
    }"
  >
    <view class="header">
      <uni-nav-bar
        left-icon="left"
        title="榜单"
        color="#fff"
        backgroundColor="transparent"
        :fixed="true"
        :statusBar="true"
        :border="false"
        @clickLeft="$c.back"
      ></uni-nav-bar>

      <view class="qiehuan_box">
        <view class="qiehuan">
          <view @click="getlist(v.id)" v-for="(v, i) in arr" :key="i">
            <view :class="show == v.id ? 'xzs' : 'wzs'">{{ v.show }}</view>
            <view class="qiehuan_line" v-if="show == v.id"></view>
          </view>
        </view>
      </view>
      <view class="header_title">
        <!-- <view>
          <text>{{ date }}</text>
        </view> -->
        <view class="flex_center">
          结算倒计时:

          <xwCountDown
            v-if="end_date"
            :is-day="true"
            :datatime="end_date"
          ></xwCountDown>
        </view>

        <view class="rule-btn" @click="$refs.rulePop.getRule(9, '购买说明')">
          <view class="icon">
            <image :src="$img('/static/img/bd.png')" lazy-load></image>
          </view>

          榜单说明
        </view>
      </view>
    </view>
    <view
      class="jiedi common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img/1_rank_tai.png')})`
      }"
    >
      <view class="jiedi_item one" v-if="listdata.length > 0">
        <view class="jiedi_item_user">
          <view
            class="common_bg"
            :style="{
              'background-image': `url(${listdata[0].headimg})`
            }"
          >
            <image :src="$img('/static/img/4_rank_1.png')"></image>
          </view>
          <text class="hang1">{{ listdata[0].nickname }}</text>
        </view>
        <view class="jiedi_item_prize">
          <image :src="listdata[0].prize_imgurl"></image>
          <view class="hang1">{{ listdata[0].prize_title }}</view>
        </view>
      </view>
      <view
        class="jiedi_item two"
        style="margin-top: 30rpx; margin-left: 30rpx"
        v-if="listdata.length > 1"
      >
        <view class="jiedi_item_user">
          <view
            :style="{
              'background-image': `url(${listdata[1].headimg})`
            }"
          >
            <image :src="$img('/static/img/4_rank_2.png')"></image>
          </view>
          <text class="hang1">{{ listdata[1].nickname }}</text>
        </view>
        <view class="jiedi_item_prize">
          <image :src="listdata[1].prize_imgurl"></image>
          <view class="hang1">{{ listdata[1].prize_title }}</view>
        </view>
      </view>
      <view
        class="jiedi_item three"
        style="margin-top: 40rpx; margin-right: 30rpx"
        v-if="listdata.length > 2"
      >
        <view class="jiedi_item_user">
          <view
            :style="{
              'background-image': `url(${listdata[2].headimg})`
            }"
          >
            <image :src="$img('/static/img/4_rank_3.png')"></image>
          </view>
          <text class="hang1">{{ listdata[2].nickname }}</text>
        </view>
        <view class="jiedi_item_prize">
          <image :src="listdata[2].prize_imgurl"></image>
          <view class="hang1">{{ listdata[2].prize_title }}</view>
        </view>
      </view>
    </view>
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view v-for="(item, index) in listdata" :key="index" class="qbt_con_item">
        <view class="rank-num">{{ index + 1 }}</view>

        <view class="avatar">
          <image :src="item.headimg" lazy-load></image>
        </view>

        <view class="info">
          <view class="name hang1">{{ item.nickname }}</view>

          <view class="title hang1">{{ item.prize_title }}</view>
        </view>

        <view class="pic">
          <image :src="item.prize_imgurl" lazy-load></image>
        </view>

        <!-- <view class="paiming">{{ index + 1 }}</view>
        <image :src="item.headimg" class="headimg"></image>
        <view class="hang2" style="width: 150rpx">{{ item.nickname }}</view>
        <image :src="item.prize_imgurl" class="jiangpin"></image>
        <view
          class="hang2"
          style="width: 200rpx; font-size: 20rpx; font-weight: bold"
        >
          {{ item.prize_title }}
        </view> -->
      </view>
    </mescroll-body>
    <!-- 我的排名 -->
    <view
      class="my_paiming common_bg"
      :style="{
        'background-image': `url(${$img('/static/img/1_bd_my.png')})`
      }"
    >
      <view class="user-info">
        <view class="avatar">
          <image :src="my_rank.my_headimg" lazy-load></image>
        </view>

        <view class="name hang1">{{ my_rank.my_nickname }}</view>
      </view>

      <view class="rank-num">
        当前排名:
        <text>{{ my_rank.my_rank || '暂无' }}</text>
      </view>

      <!-- <view>
        <text>我的当前排名:</text>
        {{ my_rank.my_rank }}
      </view>
      <view>
        <image :src="my_rank.my_prize_imgurl" class="jiangpin"></image>

        <view class="prize-title hang1">{{ my_rank.my_prize_title }}</view>
      </view> -->
    </view>

    <uni-popup ref="shuoming" type="center">
      <view
        class="pop common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }"
      >
        <view class="pop_title">榜单规则</view>
        <view class="pop_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view v-html="news"></view>
          </scroll-view>
        </view>

        <image
          @click="$refs.shuoming.close()"
          class="close"
          :src="$img('/static/icon/close.png')"
        ></image>
      </view>
    </uni-popup>

    <rule-pop ref="rulePop"></rule-pop>
  </view>
</template>

<script>
import xwCountDown from '@/components/xw-CountDown'
export default {
  components: {
    xwCountDown
  },
  data() {
    return {
      z_imgPath: this.$z_img2 + 'shouye/',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      arr: [
        {
          // img: 'zhou01.png',
          // sel: 'zhouSel01.png',
          show: '周榜单',
          id: 1
        },
        {
          // img: 'yue02.png',
          // sel: 'yueSel02.png',
          show: '月榜单',
          id: 2
        }
      ],
      show: 1,

      listdata: [],
      downOption: {
        auto: false
      },
      date: '',
      end_date: 0,
      my_rank: {},

      news: '',
      border_arr: [
        'border: 3rpx solid #FF2626;',
        'border: 3rpx solid #FFF226;',
        'border: 3rpx solid #0F39EA;'
      ]
    }
  },
  onLoad() {
    this.getDanye(7)
  },

  methods: {
    back() {
      var pages = getCurrentPages()
      // console.log(pages)

      if (pages.length == 1 && pages[0].route == 'pages/shouye/bangdan') {
        uni.redirectTo({
          url: '/pages/shouye/index'
        })
      } else {
        uni.navigateBack()
      }
    },
    getDanye(e) {
      let that = this
      that.req({
        url: 'danye',
        data: {
          type: e
        },
        success(res) {
          if (res.status == 1) {
            that.news = res.data
          }
        }
      })
    },
    getlist(v) {
      this.show = v
      this.listdata = []
      this.mescroll.resetUpScroll()
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.loadData(page.num)
    },
    loadData(pageNo) {
      // 模拟接口
      let that = this
      that.req({
        url: that.show == 1 ? 'rank_week' : 'rank_month',
        Loading: true,
        data: {
          page: pageNo
        },
        success(res) {
          that.mescroll.endByPage(res.data.data.length, 1)
          that.date = res.data.date
          that.end_date = res.data.end_date
          that.my_rank = res.data.my_rank
          if (pageNo == 1) {
            that.listdata = res.data.data
          } else {
            that.listdata = that.listdata.concat(res.data.data)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.pop_title {
  font-size: 48rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-bottom: 30rpx;
}
.jiedi {
  background-size: 690rpx;
  height: 124rpx;
  background-position: center 120rpx;

  height: 400rpx;
  margin: 0 30rpx 0 28rpx;
  position: relative;
  .one {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 220rpx;
    background-size: 201rpx 208rpx;
    background-position: center 80rpx;
  }
  .two {
    width: 178rpx;
    position: absolute;
    background-size: 177rpx 184rpx;
    background-position: center 80rpx;
  }
  .three {
    width: 178rpx;
    position: absolute;
    right: 0;
    background-size: 201rpx 208rpx;
    background-position: center 80rpx;
  }
  &_bg {
    width: 692rpx;
    height: 256rpx;
    position: absolute;
    top: 150rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  &_item {
    position: relative;
    z-index: 1;
    &_user {
      width: 124rpx;
      text-align: center;
      margin: 0 auto;
      > view {
        width: 100rpx;
        height: 100rpx;
        position: relative;
        border-radius: 50%;
        border: 1rpx solid #fff;
        margin: 0 auto 30rpx;
        image {
          width: 46rpx;
          height: 46rpx;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -100%);
        }
      }
      text {
        display: block;
        font-size: 28rpx;
        color: #fff;
      }
    }
    &_prize {
      text-align: center;
      margin-top: 20rpx;
      // margin-left: 30rpx;
      image {
        width: 120rpx;
        height: 120rpx;
        background: #292929;
        border: 1px solid;
        border-image: linear-gradient(0deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
      }
      view {
        font-size: 24rpx;
        color: #fff;
        opacity: 0.4;
        padding: 0 30rpx;
      }
    }
  }
}
.time {
  color: #85dfff !important;
}

.my_paiming {
  position: fixed;
  left: 20rpx;
  bottom: 30rpx;
  width: 710rpx;
  height: 130rpx;
  z-index: 10;
  box-sizing: border-box;
  padding: 0 40rpx;
  display: flex;
  align-items: center;

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 70rpx;
      height: 70rpx;
      background: #9d9d9d;
      border: 1px solid #cccccc;
      border-radius: 50%;

      image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }

    .name {
      width: 250rpx;
      padding-left: 20rpx;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .rank-num {
    flex: 1;
    text-align: right;

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #dddddd;

    text {
      color: #d0d1ff;
    }
  }
}

.pop {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}

.qbt_con_item {
  margin: 30rpx auto;
  box-sizing: border-box;
  width: 690rpx;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx 20rpx 10rpx;
  border: 1px solid #ccc;
  box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(176, 128, 255, 0.8);

  .rank-num {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #dddddd;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    background: #9d9d9d;
    border: 1px solid #cccccc;
    border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }

  .info {
    flex: 1;
    padding: 0 20rpx;

    .name,
    .title {
      width: 230rpx;
    }

    .name {
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    .title {
      margin-top: 8rpx;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #dddddd;
    }
  }

  .pic {
    width: 80rpx;
    height: 80rpx;
    background: #292929;
    border: 1px solid;
    border-image: linear-gradient(0deg, #6adeff, #7ab5ff, #ff7feb) 10 10;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.qbt_con {
  margin: 0rpx auto;
  width: 710rpx;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
}

.wzs {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.xzs {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: transparent;

  background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
  background-clip: text;
}

.qiehuan_line {
  width: 32rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
  border-radius: 2rpx;
  margin: 8rpx auto 0;
}

.qiehuan > view {
  // flex: 1;
  text-align: center;

  font-size: 32rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #9c9c9c;
}

.qiehuan {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  font-family: 'YouSheBiaoTiHei';
}

.qiehuan_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
}

.header_title {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background: rgba(208, 209, 255, 0.1);
  border-radius: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  color: #ffffff;
  position: relative;

  .rule-btn {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0;
    bottom: 0;
    transform: translateY(130%);

    .icon {
      width: 24rpx;
      height: 24rpx;
      margin-right: 6rpx;
    }

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
.header_bar > view:nth-of-type(2) {
  width: 520rpx;
  text-align: center;
  /* margin: auto; */
}

.header_bar > view:nth-of-type(1) {
  display: flex;
  align-items: center;
}
.header_bar image {
  width: 48rpx;
  height: 48rpx;
}

.header_bar {
  height: 70rpx;
  line-height: 70rpx;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  box-sizing: border-box;
  color: #fff;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.head {
  // position: fixed;
  // top: 0;
  // z-index: 20;
}
.header {
  width: 750rpx;
  top: 0;
  left: 0;
  // height: 450rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  position: fixed;
  // background: #161616;
  z-index: 15;
}

.content {
  // background: #161616;
  width: 100vw;
  min-height: 100vh;
  padding-top: 350rpx;
  box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  background-attachment: fixed;
}
</style>
