<template>
  <div class="board-item" >
    <dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
    <div class="board-item-container" ref="board-item-container">
      <div
        class="board-item-container-item"
        v-for="(item,index) in rows"
        :key="`${item.id}-${item.scroll}`"
        :style="`
                height: ${heights[index]}px;
                line-height: ${heights[index]}px;
                transition: all .2s;
              `">
        <dv-border-box-13 style="width: 100%;height: 100%;min-height: .5px;" :style="{ 'opacity': heights[index] ? 1 : 0}">
          <div style="width: 100%;height: 100%;padding: 30px 20px;line-height: 1;" class="d-flex flex-column jc-between flex-1">
            <div class="board-item__top d-flex jc-between ai-center">
              <dv-decoration-11 style="width: 160px;height: 38px;">待执行</dv-decoration-11>
              <p class="fw-b">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
            </div>
            <div class="board-item__bottom d-flex jc-between ai-start">
              <div style="line-height: 1.5;">
                <div class="start-time">
                  执行时间：{{ item.start_time }}
                </div>
                <div class="final-time">
                  倒计时：
                </div>
              </div>
              <div @click="setTransferStatus(4,item)">
                <dv-border-box-8 reverse class="fw-b text-center" style="width: 64px;height: 38px;line-height: 38px;cursor: pointer;"
                >执行</dv-border-box-8>
              </div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
    </div>
  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import {save} from "@/api/system/baseForm";

export default {
  props: {
    transfers: Array
  },
  data() {
    return {
      dom: '',
      needCalc: false,
      rowNum: 4,
      height: 0,
      width: 0,
      avgHeight: 0,
      updater: 0,
      animationIndex: 0,
      heights: [],
      animationHandler: '',

      rows: []
    }
  },
  methods: {
    setTransferStatus (status,row) {
      let copyRow = deepCopy(row);
      copyRow.status = status;
      for (let key in copyRow) {
        if (/_relation/g.test(key)) {
          delete copyRow[key]
        }
      }
      console.log(copyRow)
      save({
        table_name: 'transfers',
        ...copyRow
      }).then(_ => {})
    },


    initWH (resize = true) {
      const { $nextTick, $refs, onResize } = this

      return new Promise(resolve => {
        $nextTick(_ => {
          const dom = this.dom = $refs['board-item-container']

          this.width = dom ? dom.clientWidth : 0
          this.height = dom ? dom.clientHeight : 0

          if (!dom) {
            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
          } else if (!this.width || !this.height) {
            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
          }

          if (typeof onResize === 'function' && resize) onResize()

          resolve()
        })
      })
    },
    calcHeights (onresize = false) {
      const { height, rowNum } = this

      let allHeight = this.height

      const avgHeight = allHeight / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(this.transfers.length).fill(avgHeight)
    },
    async animation (start = false) {
      const { needCalc, calcHeights } = this

      if (needCalc) {
        calcHeights()
        this.needCalc = false;
      }

      let { avgHeight, animationIndex, mergedConfig, animation, updater } = this

      const { waitTime, carousel, rowNum } = {
        waitTime: 5000,
        carousel: 'single',
        rowNum: this.rowNum
      }

      const rowLength = this.transfers.length

      if (rowNum >= rowLength) return

      if (start) {
        await new Promise(resolve => setTimeout(resolve, waitTime))
        if (updater !== this.updater) return
      }

      const animationNum = carousel === 'single' ? 1 : rowNum

      let rows = this.transfers.slice(animationIndex)
      rows.push(...this.transfers.slice(0, animationIndex))

      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
      this.heights = new Array(rowLength).fill(this.avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
      if (updater !== this.updater) return

      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

      animationIndex += animationNum

      const back = animationIndex - rowLength
      if (back >= 0) animationIndex = back

      this.animationIndex = animationIndex
      this.animationHandler = setTimeout(animation, waitTime - 300)
    },
    stopAnimation () {
      const { animationHandler, updater } = this

      this.updater = (updater + 1) % 999999

      if (!animationHandler) return

      clearTimeout(animationHandler)
    },
  },
  computed: {},
  watch: {
    async transfers(val) {
      if (val && val.length > 0) {
        await this.initWH(false);
        this.calcHeights();
        await this.animation(true);
      }
    }
  },
  async mounted() {
  },
  destroyed () {
    const { stopAnimation } = this

    stopAnimation();
  }
}
</script>

<style scoped lang="scss">
.board-item {
  width: 31%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &__title {
    width: 40%;
    height: 44px;
    text-align: center;
    font-size: 17px;
    line-height: 44px;
    flex: 0;

    margin: auto;
    margin-top: 20px;
  }
  &-container {
    overflow: hidden;
    flex: 1;

    margin-top: 20px;

    &-item {
      width: 100%;
    }
  }
}
::v-deep .row-item .ceil {
  width: 100%;
}

::v-deep .box-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1;

  padding: 30px 12px;

  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 10px 0 10px;

    & > div:nth-child(1) {
      background: #eccb77;
      border-radius: 30px;
      color: #333;
      padding: 6px 10px;
      font-weight: 600;
    }
    & > div:nth-child(2)  {
      font-weight: 600;
      font-size: 17px;
    }
  }
  &-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 10px 10px 0 10px;

    span {
      color: $primaryColor;
    }
    & > div:nth-child(1) {
      text-align: left;
      line-height: 2;
      font-size: 16px;
      font-weight: 600;
    }
    & > div:nth-child(2) {
      cursor: pointer;
      line-height: 2;
      font-size: 15px;
      font-weight: 600;
      background: $primaryColor;
      border-radius: 8px;
      border: 2px solid rgb(119, 232, 250);

      padding: 0 8px;
    }

  }
}
</style>
