<template>
  <Transition
    name="custom-classes"
    enter-active-class="animate__animated animate__zoomIn"
    leave-active-class="animate__animated animate__zoomOut"
  >
    <div class="online-pop" v-if="showOnLine">
      <div class="online-view">
        <div class="title">
          <small class="small">{{ Lang[Type].nearly_20 }}</small>
          {{ Lang[Type].player_list }}
          <van-icon class="close" name="cross" @click="closeOnLine" />
        </div>
        <div class="view">
          <div class="list" v-for="(item, index) in list" :key="item">
            <div class="ranking" :class="[Type]">
              {{ index != 0 ? index + 1 : "" }}
            </div>
            <div class="head" :class="[`head_${item.head}`]">
              <span class="frame" :class="[`frame_${item.frame}`]"></span>
            </div>
            <div class="box">
              <div class="name">{{ item.name }}</div>
              <div class="money">{{ item.money }}</div>
            </div>
            <div class="box">
              <div class="item down">
                <span class="lab">{{ Lang[Type].place_bet }}</span>
                <span>{{ item.win }}</span>
              </div>
              <div class="item time">
                <span class="lab">{{ Lang[Type].to_win }}</span>
                <span>{{ item.time }}{{ Lang[Type].games }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script>
import { computed } from "vue"
import { useStore } from "vuex"
export default {
  name: "OnLinePop",
  props: {},
  setup() {
    const store = useStore()
    const showOnLine = computed(() => store.state.config.showOnLine)
    const Type = computed(() => store.state.config.$Type)
    const Lang = computed(() => store.state.config.$lang)
    let list = []
    const getRndInteger = (min, max) => {
      return Math.floor(Math.random() * (max - min)) + min
    }
    const genUid = () => {
      const length = 9
      const soupLength = genUid.soup_.length
      let id = []
      for (let i = 0; i < length; i++) {
        id[i] = genUid.soup_.charAt(Math.random() * soupLength)
      }
      return `EZ` + id.join("")
    }
    genUid.soup_ = "0123456789"

    for (let i = 0; i < 20; i++) {
      const time = getRndInteger(5, 20)
      const money = getRndInteger(4000, 99999)
      const drop = getRndInteger(1, 99) / 100
      const item = {
        name: genUid(),
        head: getRndInteger(1, 7),
        frame: getRndInteger(1, 5),
        time: time,
        win: parseInt(time * 3.14 * 800) + drop,
        money: (money + drop + parseInt(time * 3.14 * 800)).toFixed(2)
      }
      list.push(item)
    }
    const compare = (key, desc) => {
      //key:  用于排序的数组的key值
      //desc： 布尔值，为true是升序排序，false是降序排序
      return function (a, b) {
        let value1 = a[key]
        let value2 = b[key]
        if (desc == true) {
          // 升序排列
          return value1 - value2
        } else {
          // 降序排列
          return value2 - value1
        }
      }
    }
    list = list.sort(compare("money", false))
    const closeOnLine = () => {
      store.commit("config/showOnLine")
    }
    return { Type, Lang, list, showOnLine, closeOnLine }
  }
}
</script>
<style lang="scss" scoped>
.online-pop {
  position: absolute;
  transform: rotateX(0deg);
  z-index: 36;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  .online-view {
    width: 13.5rem;
    border: 1px solid #ddd;
    margin-top: 1.5rem;
    border-radius: 0.5rem;
    background: #fff;
    position: relative;
    overflow: hidden;
    left: 50%;
    margin-left: -6.75rem;
    padding-bottom: 0rem;
    font-size: 0.35rem;
    .title {
      font-size: 0.5rem;
      font-weight: 600;
      color: #333;
      text-align: center;
      width: 100%;
      margin-top: 0.5rem;
      margin-bottom: 0.52rem;
      position: relative;
      z-index: 2;
      transform: rotateX(0deg);
      .small {
        position: absolute;
        left: 0.4rem;
        font-size: 0.36rem;
        top: 0.1rem;
      }
      .close {
        position: absolute;
        right: 0.25rem;
        top: -0.2rem;
        font-size: 1rem;
        color: #999;
        z-index: 2;
        &:active {
          opacity: 0.6;
        }
      }
    }
    .view {
      height: 7.3rem;
      overflow-y: auto;
    }
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.3rem 0.4rem;
      border-bottom: 1px solid #eee;
      &:first-child .ranking {
        background-image: url("~@/assets/images/cn_no_1.png");
        &.en,
        &.kr,
        &.yn {
          background-image: url("~@/assets/images/en_no_1.png");
          padding-left: 2rem;
        }
        &.tw {
          background-image: url("~@/assets/images/tw_no_1.png");
        }
      }
      .ranking {
        padding-left: 1.7rem;
        background: url("~@/assets/images/cn_no_x.png") left center no-repeat;
        background-size: 2rem auto;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.65rem;
        font-weight: bold;
        color: #e2900a;
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
        min-width: 1.1rem;
        &.en,
        &.kr,
        &.yn {
          background-image: url("~@/assets/images/en_no_x.png");
          padding-left: 2rem;
        }
        &.tw {
          background-image: url("~@/assets/images/tw_no_x.png");
        }
      }
      .head {
        width: 1.1rem;
        height: 1.1rem;
        background: url("~@/assets/images/user.png") no-repeat;
        background-size: 1.1rem auto;
        position: relative;
        margin: 0.2rem;

        @for $i from 1 through 7 {
          &.head_#{$i} {
            background-position: 0 -#{1.12 * $i}rem;
          }
        }
        .frame {
          width: 1.6rem;
          height: 1.5rem;
          position: absolute;
          top: -0.21rem;
          left: -0.25rem;
          background: url("~@/assets/images/frame.png") no-repeat;
          background-size: 1.6rem auto;
          @for $i from 1 through 5 {
            &.frame_#{$i} {
              background-position: 0 -#{1.6 * $i}rem;
            }
          }
        }
      }
      .box {
        min-width: 3.2rem;
        .name {
          font-size: 0.38rem;
          font-weight: 600;
          color: #333;
          line-height: 1;
        }
        .money {
          border: 1px solid #eeefef;
          color: #c56718;
          border-radius: 0.5rem;
          margin-top: 0.2rem;
          padding: 0.1rem 0.1rem 0.1rem 0.7rem;
          line-height: 1;
          background: url("~@/assets/images/icon/money.png") no-repeat 0.13rem
            center;
          background-size: 0.4rem auto;
        }
      }
      .down {
        color: #c56718;
        font-weight: bold;
        .lab {
          background: linear-gradient(#f0ab5b, #c56718);
          color: #fff;
          padding: 0.05rem 0.1rem;
          line-height: 1;
          border-radius: 0.05rem;
          font-weight: normal;
          margin-right: 0.1rem;
        }
      }
      .time {
        color: #338d5f;
        font-weight: bold;
        margin-top: 0.2rem;
        .lab {
          background: linear-gradient(#3caf81, #338d5f);
          color: #fff;
          padding: 0.05rem 0.1rem;
          line-height: 1;
          border-radius: 0.05rem;
          font-weight: normal;
          margin-right: 0.1rem;
        }
      }
    }
  }
}
</style>
