<template>
  <div class="list-scroll-column">
    <div class="list-scroll-title">
      <h4 class="column column1">名称</h4>
      <h4 class="column column2">推荐方案</h4>
      <h4 class="column column3">方案2</h4>
      <h4 class="column column4">方案3</h4>
      <h4 class="column column5">自定义</h4>
      <h4 class="column column6">堤(岸)顶高程</h4>
    </div>
    <div
      class="list-scroll-main"
      :class="{ length_4: num === 4, length_5: num === 5, length_6: num === 6 }"
      @click="rowBtn"
    >
      <vue-seamless-scroll
        class="seamless-scroll-column"
        :data="listScrollData"
        :class-option="listScrollOption"
        ref="seamlessScrollColumn"
      >
        <div class="row" v-for="(item, index) in listScrollData" :key="index">
          <div class="column column1">{{ item.name }}</div>
          <div class="column column2" :class="{ red: item.one > item.height }">
            {{ Number(item.one).toFixed(1) }}
          </div>
          <div class="column column3" :class="{ red: item.two > item.height }">
            {{ Number(item.two).toFixed(1) }}
          </div>
          <div
            class="column column4"
            :class="{ red: item.three > item.height }"
          >
            {{ Number(item.three).toFixed(1) }}
          </div>
          <div class="column column5" :class="{ red: item.zi > item.height }">
            {{ item.zi }}
          </div>
          <div class="column column6">{{ Number(item.height).toFixed(1) }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Scroll4',
  props: {
    listScrollData: {
      type: Array,
      default: () => []
    },
    listScrollOption: {
      type: Object,
      default: () => ({})
    },
    num: {
      type: Number,
      default: 0
    },
    scrollUpdate: {
      type: Function,
      default: () => { }
    }
  },
  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: {
    rowBtn (e) {
      this.$emit('place-name', e.target.parentNode.children[0].innerText)
    }
  },
  destroyed () {
    // clearTimeout(this.timer1)
  }
}
</script>

<style lang="scss" scoped>
.list-scroll-column {
  position: relative;
  width: 100%;
  .list-scroll-title {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 40px;
    background-color: rgba(96, 255, 246, 0.2);
    .column {
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .list-scroll-main {
    position: relative;
    width: 100%;
    &.length_4 {
      height: 50px * 4;
    }
    &.length_6 {
      height: 50px * 6;
    }
    &.length_5 {
      height: 50px * 5;
    }
    .seamless-scroll-column {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .row {
        display: flex;
        align-items: center;
        width: 100%;
        color: #d1d5d9;
        cursor: pointer;
        &:hover .column {
          background-color: rgba(96, 255, 246, 0.2);
        }
        .column {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          text-align: center;
          &.red {
            color: #ff5757 !important;
          }
        }
      }
      .row:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .row:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
  }
  .column1 {
    width: 90px;
  }
  .column2 {
    width: 60px;
  }
  .column3 {
    width: 55px;
  }
  .column4 {
    width: 55px;
  }
  .column5 {
    width: 55px;
  }
  .column6 {
    flex: 1;
  }
}
</style>
