<template>
  <div class='floor-box'>
    <div class='floor-list'>
      <div class='icon-top' v-if='floorsArr.length>8'>
        <i class="iconfont wanda-top" style="color:#9ca2a9;font-size:12px;" v-show='parseInt(marginTop) !== 0'
          v-repeat-click='increase'></i>
        <i class="iconfont wanda-top" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
          v-show='parseInt(marginTop) === 0'></i>
        <!-- @click='changeFloor(1,currIndex)' -->
        <!-- <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
        <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt /> -->
      </div>
      <div class='floor-out' :style='{ height:conHeight + "px" }'>
        <!--  放开marginTop样式  -->
        <div class='floor-center' :style='{ marginTop : marginTop }'>
          <div class='floor-item' :class='item.gcname == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
            v-for='(item,index) in floorsArr' :key='index'>{{item.code}}</div>
        </div>
      </div>
      <div class='icon-bottom' v-if='floorsArr.length>8'>
        <i class="iconfont wanda-bottom" style="color:#9ca2a9;font-size:12px;"
          v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'></i>
        <i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
          v-show='parseInt(marginTop) === marginTopMax'></i>
        <!-- v-repeat-click='decrease' -->
        <!-- <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
          src='@/assets/images/iconBlackBottom.png' alt />
        <img class='disabled' v-show='parseInt(marginTop) === marginTopMax' src='@/assets/images/iconLightBottom.png'
          alt /> -->
      </div>
    </div>
  </div>
</template>
<script>
import RepeatClick from '@/directives/repeat-click'

export default {
  directives: {
    repeatClick: RepeatClick,
  },
  data() {
    return {
      currentFloorId: null,
      marginTop: 0,
      marginTopMax: 0,
      showNumber: 8, //需要展示的楼层数   //TODO:
      height: 39, //一个楼层的高度
      currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
      conHeight: 0, // floor-out 的高度
      direction: 1, //1:竖屏;2:横屏
    }
  },
  props: {
    floorsArr: {
      type: Array,
      default: () => {
        return []
      },
    }
  },
  mounted() {
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
      setTimeout(() => {
        if (window.orientation === 0 || window.orientation === 180) {
          this.direction = 1;
          this.init()
        }
        if (window.orientation === 90 || window.orientation === -90) {
          this.direction = 2;
          this.init()
        }
      }, 300)
    },false);
  },
  methods: {
    /**
     * @description 点击上箭头,marginTop<0时执行楼层滚动
     */
    increase() {
      const marginTop = parseInt(this.marginTop)
      marginTop < 0 && this.changeFloor(1, this.currIndex)
    },
    /**
     * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
     */
    decrease() {
      const marginTop = Math.abs(parseInt(this.marginTop)),
        marginTopMax = Math.abs(parseInt(this.marginTopMax))
      marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
    },
    init() {
      if (this.direction == 1) {
        // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
        this.conHeight = this.floorsArr.length * 37.5
        this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
        this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length

        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
        // this.changeFloor(0, 0);
        // this.tabFloor(this.floorsArr[0], 0);
      } else if (this.direction == 2) {
        this.conHeight = this.floorsArr.length * 30
        this.conHeight = this.conHeight >= 230 ? 230 : this.conHeight
        this.showNumber = this.floorsArr.length > 7 ? 7 : this.floorsArr.length
        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
      }
    },
    /**
     * @name changeFloor
     * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
     * @description 点击图例下方的,上下切换按钮
     */
    changeFloor(flag, index) {
      const len = this.floorsArr.length
      this.currIndex = index
      // 点击上箭头
      if (flag === 1) {
        index--
        this.currIndex = index
      } else if (flag === -1) {
        //点击下箭头
        index++
        this.currIndex = index
      }
      this.handlePosition(flag, index, len)
    },
    /**
     * @name tabFloor
     * @param {Object} item 选中的楼层信息
     * @param {Number} index 楼层信息在floorsArr数组中的位置
     */
    tabFloor(item, index) {
      this.currentFloorId = item.gcname;
      this.$emit("emitFloor", item)
      this.handlePosition(2, index, this.floorsArr.length)
    },
    /**
     * @description 楼层位置动画处理
     * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
     * @param index 楼层 floorsArr
     * @param len floorsArr
     */
    handlePosition(flag, index, len) {
      // 取出当前 marginTop
      let marginTop = parseInt(this.marginTop)
      switch (flag) {
        // 初始化进入页面,位置处理
        case 0:
        // 直接点击楼层,滚动楼层
        case 2:
          // 将 marginTop 设置为对应的index 应滚动的距离
          marginTop = -index * this.height
          // marginTop 过大时,取最大值marginTopMax
          if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
            marginTop = parseInt(this.marginTopMax)
          }
          // marginTop＞0时,取0,防止楼层上边出现空白
          marginTop = marginTop >= 0 ? 0 : marginTop
          // index为0,marginTop设置为0
          index == 0 && (marginTop = 0)
          // index为最后一个,设置为最大marginTopMax
          index == len - 1 && (marginTop = parseInt(this.marginTopMax))
          this.marginTop = marginTop + 'px'
          break
        //  1:向上滚动楼层
        case 1:
          this.marginTop = marginTop + this.height + 'px'
          break
        // -1向下滚动楼层
        case -1:
          this.marginTop = marginTop + this.height * -1 + 'px'
          break
        default:
          break
      }
    },
  },
  watch: {
    floorsArr: {
      handler() {
        if (window.orientation === 0 || window.orientation === 180) {
          this.direction = 1;
          this.init()
        }
        if (window.orientation === 90 || window.orientation === -90) {
          this.direction = 2;
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.floor-box {
  .floor-list {
    width: 40px;
    // height: 212px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
    border-radius: 2px;
    position: relative;
    padding: 6px 4px;
    text-align: center;
    .floor-out {
      // max-height: 300px; //TODO:
      min-height: 38px;
      overflow: hidden;
      position: relative;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      .floor-center {
        transition: all linear 0.5s;
        .floor-item {
          line-height: 28px;
          height: 28px;
          cursor: pointer;
          position: relative;
          &::after {
            position: absolute;
            left: 50%;
            margin-left: -20%;
            bottom: -6px;
            content: "";
            width: 14px;
            height: 1px;
            background: rgba(195, 199, 203, 1);
            border: 0px solid rgba(228, 229, 231, 1);
          }
          & + .floor-item {
            margin-top: 10px;
          }
        }
      }
    }

    .icon-top {
      cursor: pointer;
      height: 18px;
    }
    .icon-bottom {
      cursor: pointer;
      height: 18px;
    }
    .isActive {
      border-radius: 4px;
      color: #ffffff;
      background: #025baa;
    }
  }
  .disabled {
    cursor: not-allowed !important;
  }
}
// 横屏
@media screen and (orientation: landscape) {
  .floor-box {
    .floor-list {
      width: 30px;
      .floor-out {
        .floor-center {
          .floor-item {
            line-height: 20px;
            height: 20px;
            &::after {
              position: absolute;
              left: 50%;
              margin-left: -20%;
              bottom: -2px;
              content: "";
              width: 10px;
              height: 1px;
              background: rgba(195, 199, 203, 1);
              border: 0px solid rgba(228, 229, 231, 1);
            }
            & + .floor-item {
              margin-top: 4px;
            }
          }
        }
      }
      .icon-top {
        height: 10px;
      }
      .icon-bottom {
        height: 10px;
      }
    }
  }
}
</style>