<template>
  <div class="list-scroll-column">
    <div class="list-scroll-title">
      <h4>序号</h4>
      <h4>站点名称</h4>
      <h4>预警级别</h4>
      <h4>预警内容</h4>
    </div>
    <div
      class="list-scroll-main"
      :class="{ length_5: num === 5, length_6: num === 6 }"
    >
      <vue-seamless-scroll
        class="seamless-scroll-column"
        :data="listScrollData"
        :class-option="listScrollOption"
        ref="seamlessScrollColumn"
      >
        <slot />
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Scroll1',
  props: {
    listScrollData: {
      type: Array,
      default: () => []
    },
    listScrollOption: {
      type: Object,
      default: () => ({})
    },
    num: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    // this.timer1 = setTimeout(() => {
    //   for (let i = 1; i <= 3; i++) {
    //     // 更新原有数据
    //     this.listScrollData[i - 1] = {
    //       uname: `第${i}条数据更新`,
    //       status: `第${i}条数据更新`,
    //       place: `第${i}条数据更新`,
    //       people: `第${i}条数据更新`
    //     }
    //     // 追加新数据
    //     this.listScrollData.push({
    //       uname: `追加的新数据${i}`,
    //       status: `追加的新数据${i}`,
    //       place: `追加的新数据${i}`,
    //       people: `追加的新数据${i}`
    //     })
    //   }
    //   // 只更新原有数据不追加新数据的情况下要调用此方法
    //   // this.listScrollData.push()
    //   this.$refs.seamlessScrollColumn.reset()
    // }, 1000)
  },
  data () {
    return {
      // 控制弹层显示关闭
      popupShow: false,
      // 关闭弹层定时器
      timer: 0,
      // 修改数据定时器
      timer1: 0
    }
  },
  methods: {
  },
  destroyed () {
    // clearTimeout(this.timer1)
  }
}
</script>

<style lang="scss" scoped>
.list-scroll-column {
  position: relative;
  width: 100%;
  .list-scroll-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 40px;
    background-color: rgba(96, 255, 246, 0.2);
    h4 {
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
    }
    h4:nth-child(1) {
      width: 40px;
    }
    h4:nth-child(2) {
      width: 70px;
    }
    h4:nth-child(3) {
      width: 66px;
    }
    h4:nth-child(4) {
      width: 160px;
    }
  }
  .list-scroll-main {
    position: relative;
    width: 100%;
    &.length_6 {
      height: 50px * 6;
    }
    &.length_5 {
      height: 50px * 5;
    }
    .seamless-scroll-column {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #d1d5d9;
        .column {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          text-align: center;
        }
        .column1 {
          width: 40px;
        }
        .column2 {
          width: 70px;
        }
        .column3 {
          width: 66px;
          &.blue {
            color: #388cff;
          }
          &.yellow {
            color: #ffcc00;
          }
          &.orange {
            color: #ff9c00;
          }
          &.red {
            color: #ff6060;
          }
        }
        .column4 {
          width: 160px;
        }
      }
      .row:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .row:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
  }
}
</style>
