<template>
  <div class="scroll-ranking-board">
    <div class="scroll-ranking-board-first scroll-ranking-board-item" v-if="first">
      <div class="scroll-ranking-board-item-info">
        <div class="scroll-ranking-board-item-rank">No.{{ first.ranking }}</div>
        <div class="scroll-ranking-board-item-name" v-html="first.name" />
        <div class="scroll-ranking-board-item-value">{{ first.value }}</div>
      </div>
      <div class="ranking-column">
        <div class="inside-column" :style="`width: ${first.percent}%;`">
          <div class="shine" />
        </div>
      </div>
    </div>
    <div class="scroll-ranking-board-scroll">
      <vue-seamless-scroll :data="items" class="seamless-warp" :class-option="classOption">
        <div class="scroll-ranking-board-list">
          <div class="scroll-ranking-board-item"
               v-for="(item, i) in items"
               :key="item.name">
            <div class="scroll-ranking-board-item-info">
              <div class="scroll-ranking-board-item-rank">No.{{ item.ranking }}</div>
              <div class="scroll-ranking-board-item-name" v-html="item.name" />
              <div class="scroll-ranking-board-item-value">{{ item.value }}</div>
            </div>
            <div class="ranking-column">
              <div class="inside-column" :style="`width: ${item.percent}%;`">
                <div class="shine" />
              </div>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll';

export default {
  name: 'DvScrollRankingBoard',
  components: {
    VueSeamlessScroll
  },
  props: {
    first: null,
    items: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  computed: {
    classOption () {
      return {
        step: 1,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 38,
        waitTime: 2000
      };
    }
  },
  data () {
    return {

    };
  }
};
</script>
