<template>
  <div class="scroll_list" ref="scrollList">
    <vue-seamless-scroll :data="rows" class="scroll_box" :class-option="defineScroll" style="height: 100%;overflow: hidden;width: 100%;color: white;font-size: 14px;">
      <ul >
        <li v-for="(item, index) in rows" :key="index" :style="{height: 100 / rows.length + '%'}">
          <span v-if="showIcon&&!item.blankColumn" style="display: table-cell;vertical-align: middle;">
            <div class="col_number">{{ index + 1 }}</div>
          </span>
          <span class="name" style="display: table-cell;vertical-align: middle;" :style="titleIndependentStyle?item.titleStyle:columnsStyle['title']">{{item.title}}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
export default {
  name: "ScrollList",
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    titleIndependentStyle:{
      type: Boolean,
      default: false
    },
    columnsStyle:{
      type: Object,
      default: function () {
        return {};
      }
    },
    rows: {
      type: Array,
      default:function(){
        return [
          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]}
        ];
      }
    },
    colFormatter:{
      type: Object,
      default: function(){
        return {};
      }
    },
    mouseHand: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    defineScroll() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  data() {
    return {};
  },
  mounted() {
    // this.$refs.winnerList.style.cursor = this.$props.mouseHand ? "pointer" : "default"
  },
  methods: {}
};
</script>
<style scoped>

.scroll_list {

}

.scroll_list::-webkit-scrollbar { width: 0 !important }



li:nth-child(odd) {
  background-color: #0E5FFF20;
}

li:nth-child(even) {
  background-color: #0E5FFF40;
}

td {
  padding: 0 0 0 1rem;
}

.col_number {
  height: 38%;
  min-width: 38px;
  color: #19EBFF;
  font-weight: bold;
  text-align: center;
  line-height: 38px;
  background: url(../../assets/img/number_bg.png) no-repeat center;
}




</style>
