<template>
  <div class="group-wrapper style3">
    <h5 class="group-header">
      <span v-for="(item, index) in headerList" :key="index">
        {{ item.name }}
      </span>
    </h5>
    <div
      class="group-content"
      ref="loopUl"
      @mouseenter="loop(0)"
      @mouseleave="loop(1)"
    >
      <ul class="scrolly">
        <div class="card" v-show="visible">
          <i class="el-icon-circle-close close" @click="visible = false"></i>
          <p>案件编号:{{ listArr.name }}</p>
          <p>发现时间:{{ listArr.data }}</p>
          <p>问题类型:{{ listArr.type }}</p>
          <p>地址:{{ listArr.address }}</p>
          <p>详情:{{ listArr.caseProblem }}</p>
        </div>
        <li
          class="group-item"
          v-for="(item, index) in dataList"
          :key="index"
          @click="handleClick(index)"
        >
          <p>{{ item.name }}</p>
          <p>{{ item.data }}</p>
          <p>{{ item.type }}</p>
          <p>{{ item.time }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableList',
  props: {
    headerList: Array,
    dataList: Array
  },
  data () {
    return {
      loopInterval: null,
      startTimer: null,
      visible: false,
      listArr: {}
    }
  },
  created () {
  },
  watch: {
    dataList (value) {
      if (value && value.length) {
        this.loop(1)
      }
    }
  },
  beforeDestroy () {
    if (this.loopInterval) {
      clearInterval(this.loopInterval)
      clearTimeout(this.startTimer)
    }
  },
  methods: {
    /**
     * 向上滚动内容
     * @param flag  0取消，1开始滚动
     */
    loop (flag) {
      // return;
      if (flag === 0) {
        clearInterval(this.loopInterval)
        return
      }
      clearInterval(this.loopInterval)
      this.loopInterval = setInterval(() => {
        let elLoop = this.$refs.loopUl
        if (elLoop) {
          if (elLoop.scrollTop + elLoop.clientHeight < elLoop.scrollHeight) {
            elLoop.scrollTop += 1
          } else {
            // 滚动到底部，3秒后从头开始滚动
            clearInterval(this.loopInterval)
            clearTimeout(this.startTimer)
            this.startTimer = setTimeout(() => {
              if (
                elLoop.scrollTop + elLoop.clientHeight >=
                elLoop.scrollHeight
              ) {
                elLoop.scrollTop = 0
              }
              this.loop(1)
            }, 3000)
          }
        } else {
          clearInterval(this.loopInterval)
          clearTimeout(this.startTimer)
        }
      }, 50)
    },
    /**
     * 点击某行
     */
    handleClick (value) {
      // this.$emit('click', this.dataList[value])
      // if (this.dataList[value].show === false) {
      //   this.visible = false
      // } else {
      //   this.visible = !this.visible
      // }
      // this.listArr = this.dataList[value]
    }
  }
}
</script>

<style lang="scss" scoped>
.group-wrapper {
  width: 90%;
  height: 100%;
  text-align: center;
  margin: 0 auto;
  /*font-size: 30px;*/
  font-size: 1.0625rem;
  position: relative;

  .group-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1.65rem;
    color: #fff;
    font-size: 1.0625rem;
    /*font-size: 36px;*/
    border-radius: 4px;
    background: linear-gradient(270deg, #1fb7ef, #2bfae1);
    span {
      flex: 1;
    }
  }

  .group-content {
    height: calc(100% - 1.65rem);
    overflow-y: auto;
    .scrolly {
      //  animation: scrollUp 15s 0s ease infinite;
      //  animation: circle 10s 0s ease infinite;
      //animation: shadow 10s 0s ease infinite;
    }
    .card {
      /**background: url("../../../../static/images/city/city-right/list-border2.png")
        center center / 100% 100% #000;**/
      width: 64%;
      position: absolute;
      right: 0;
      bottom: 11.4rem;
      z-index: 99;
      color: #fff;
      padding: 15px;
      text-align: left;
      font-size: 15px;
      .close {
        position: absolute;
        right: 0.5rem;
        font-size: 18px;
        cursor: pointer;
      }
    }

    .group-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0.4rem 0;
      color: #fff;
      cursor: pointer;

      p {
        flex: 1;
      }
    }
  }

  &.style3 {
    .group-item:not(:last-child) {
      padding: 0.4rem 0 !important;
      border-bottom: 0.05rem dashed rgba(240, 240, 240, 0.5);
    }
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@-webkit-keyframes scrollUp {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@-webkit-keyframes circle {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);
  }
}

@keyframes circle {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);
  }
}
</style>
