<template>
  <div class="rotate_screen">
    <router-view :key="activeTime" />
    <div class="left_arrow" @click="toLeft()">
      <Icon type="ios-arrow-back" :size="66" />
    </div>
    <div class="right_arrow" @click="toRight()">
      <Icon type="ios-arrow-forward" :size="66" />
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { setTimeout, setInterval, clearTimeout, clearInterval } from "timers";

export default {
  inject: ["reload"],
  data() {
    return {
      rotatedata: {
        dataroute: [],
        alltime: 0,
      },
      objtime: {},
      activeTime: "",
      echo_timer: 0,
      // 当前组合轮播列表缓存
      rotateList: [],
      // 标志位
      flag: true,
    };
  },
  computed: {
    ...mapState(["user"]),
    combId() {
      return this.$route.query.combId;
    },
  },
  mounted() {
    let _this = this;
    // 设置一个定时器定时刷新轮播容器
    if (_this.echo_timer) {
      clearInterval(_this.echo_timer);
    } else {
      // 两个小时刷新一下浏览器
      _this.echo_timer = setInterval(() => {
        location.reload();
      }, 1000 * 60 * 60 * 2);
    }
    let params = {
      id: _this.combId,
      projectid: _this.user.projectId,
    };
    this.axios
      .request({
        url: "/dashboard/DashboardShow/getallcombpages",
        params,
        method: "get",
      })
      .then((res) => {
        let result = res.data;
        if (result.ret == 1) {
          let dataArr = result.data;
          // 将组合轮播列表缓存起来
          _this.rotateList = dataArr;
          let dataroute = [];
          let datarouteObj = {};
          let cycle;
          dataArr.forEach(function (item, index) {
            datarouteObj = {};
            switch (item.page_code) {
              case "slice_status":
                datarouteObj.path = `/dashboard/rotating_screen/slicestatus`;
                break;
              case "production_line":
                datarouteObj.path = `/dashboard/rotating_screen/totalscreenpage`;
                break;
              case "workshop_kanban":
                datarouteObj.path = `/dashboard/rotating_screen/workshopkanban`;
                break;
              case "all_production":
                datarouteObj.path = `/dashboard/rotating_screen/productionline`;
                break;
              case "acc_quality_display":
                datarouteObj.path = `/dashboard/rotating_screen/qualityKanban`;
                break;
              case "output_analysis":
                datarouteObj.path = `/dashboard/rotating_screen/equipmentoutput`;
                break;
              case "equipment_status":
                datarouteObj.path = `/dashboard/rotating_screen/equipmentstatus`;
                break;
            }
            datarouteObj.settime = index * item.cycle;
            datarouteObj.pageId = item.id;
            datarouteObj.page_code = item.page_code;
            datarouteObj.projectid = params.projectid;
            datarouteObj.condition = item.condition;
            datarouteObj.patial_code = item.page_patial_code;
            datarouteObj.title = item.title;
            dataroute.push(datarouteObj);
            cycle = item.cycle;
          });
          _this.rotatedata.dataroute = dataroute;
          _this.rotatedata.alltime = dataArr.length * cycle;
          _this.initdata();
        }
      });
  },
  methods: {
    initdata() {
      const _this = this;
      if (this.rotatedata.dataroute.length) {
        this.rotatedata.dataroute.forEach((item, i) => {
          this.objtime["str" + i] = item.path;
          this.objtime["time" + i] = setTimeout(
            () => {
              _this.activeTime = new Date().getTime();
              this.$router.replace({
                path: item.path,
                query: {
                  combId: _this.combId,
                  pageId: item.pageId,
                  page_code: item.page_code,
                  projectid: item.projectid,
                  condition: item.condition,
                  patial_code: item.patial_code,
                  title: item.title,
                },
              });
              this.objtime["timex" + i] = setInterval(() => {
                _this.activeTime = new Date().getTime();
                this.$router.replace({
                  path: item.path,
                  query: {
                    combId: _this.combId,
                    pageId: item.pageId,
                    page_code: item.page_code,
                    projectid: item.projectid,
                    condition: item.condition,
                    patial_code: item.patial_code,
                    title: item.title,
                  },
                });
              }, this.rotatedata.alltime * 1000);
            },
            item.settime * 1000,
            i
          );
        });
      }
    },
    // 向左
    toLeft() {
      const _this = this;
      // 首先清除之前的定时器
      clearInterval(_this.echo_timer);
      if (_this.rotatedata.dataroute.length) {
        _this.rotatedata.dataroute.forEach((v, i) => {
          clearTimeout(_this.objtime["time" + i]);
          clearInterval(_this.objtime["timex" + i]);
        });
      }
      // 对缓存起来的组合轮播列表进行向右迁移一位的操作
      let { rotateList } = this;
      let len = rotateList.length;
      let temp = rotateList[len - 1];
      // 深拷贝
      let tmp = JSON.parse(JSON.stringify(rotateList));
      for (let i = 1; i < len; i++) {
        rotateList[i] = tmp[i - 1];
      }
      rotateList[0] = temp;
      _this.flag = true;
      // 重新生成轮播
      let dataroute = [];
      let datarouteObj = {};
      let cycle;
      rotateList.forEach((item, index) => {
        datarouteObj = {};
        switch (item.page_code) {
          case "slice_status":
            datarouteObj.path = `/dashboard/rotating_screen/slicestatus`;
            break;
          case "production_line":
            datarouteObj.path = `/dashboard/rotating_screen/totalscreenpage`;
            break;
          case "workshop_kanban":
            datarouteObj.path = `/dashboard/rotating_screen/workshopkanban`;
            break;
          case "all_production":
            datarouteObj.path = `/dashboard/rotating_screen/productionline`;
            break;
          case "acc_quality_display":
            datarouteObj.path = `/dashboard/rotating_screen/qualityKanban`;
            break;
          case "output_analysis":
            datarouteObj.path = `/dashboard/rotating_screen/equipmentoutput`;
            break;
          case "equipment_status":
            datarouteObj.path = `/dashboard/rotating_screen/equipmentstatus`;
            break;
        }
        datarouteObj.settime = index * item.cycle;
        datarouteObj.pageId = item.id;
        datarouteObj.page_code = item.page_code;
        datarouteObj.projectid = _this.user.projectId;
        datarouteObj.condition = item.condition;
        datarouteObj.patial_code = item.page_patial_code;
        datarouteObj.title = item.title;
        dataroute.push(datarouteObj);
        cycle = item.cycle;
      });
      _this.rotatedata.dataroute = dataroute;
      _this.rotatedata.alltime = rotateList.length * cycle;
      _this.initdata();
    },
    // 向右
    toRight() {
      const _this = this;
      // 首先清除之前的定时器
      clearInterval(_this.echo_timer);
      if (_this.rotatedata.dataroute.length) {
        _this.rotatedata.dataroute.forEach((v, i) => {
          clearTimeout(_this.objtime["time" + i]);
          clearInterval(_this.objtime["timex" + i]);
        });
      }
      // 对缓存起来的组合轮播列表进行向左迁移一位的操作
      let { rotateList } = this;
      let temp = rotateList[0];
      let len = rotateList.length;
      for (let i = 0; i < len - 1; i++) {
        rotateList[i] = rotateList[i + 1];
      }
      rotateList[len - 1] = temp;
      _this.flag = true;
      // 重新生成轮播
      let dataroute = [];
      let datarouteObj = {};
      let cycle;
      rotateList.forEach((item, index) => {
        datarouteObj = {};
        switch (item.page_code) {
          case "slice_status":
            datarouteObj.path = `/dashboard/rotating_screen/slicestatus`;
            break;
          case "production_line":
            datarouteObj.path = `/dashboard/rotating_screen/totalscreenpage`;
            break;
          case "workshop_kanban":
            datarouteObj.path = `/dashboard/rotating_screen/workshopkanban`;
            break;
          case "all_production":
            datarouteObj.path = `/dashboard/rotating_screen/productionline`;
            break;
          case "acc_quality_display":
            datarouteObj.path = `/dashboard/rotating_screen/qualityKanban`;
            break;
          case "output_analysis":
            datarouteObj.path = `/dashboard/rotating_screen/equipmentoutput`;
            break;
          case "equipment_status":
            datarouteObj.path = `/dashboard/rotating_screen/equipmentstatus`;
            break;
        }
        datarouteObj.settime = index * item.cycle;
        datarouteObj.pageId = item.id;
        datarouteObj.page_code = item.page_code;
        datarouteObj.projectid = _this.user.projectId;
        datarouteObj.condition = item.condition;
        datarouteObj.patial_code = item.page_patial_code;
        datarouteObj.title = item.title;
        dataroute.push(datarouteObj);
        cycle = item.cycle;
      });
      _this.rotatedata.dataroute = dataroute;
      _this.rotatedata.alltime = rotateList.length * cycle;
      _this.initdata();
    },
  },
  watch: {
    // 监听路由变化
    $route: function (v) {
      // 防止第一次进入就向左迁移一位，导致数据不一致
      if (this.flag) {
        this.flag = false;
        return false;
      }
      // 对缓存起来的组合轮播列表进行向左迁移一位的操作
      let { rotateList } = this;
      let temp = rotateList[0];
      let len = rotateList.length;
      for (let i = 0; i < len - 1; i++) {
        rotateList[i] = rotateList[i + 1];
      }
      rotateList[len - 1] = temp;
    },
  },
  destroyed() {
    clearInterval(this.echo_timer);
    if (this.rotatedata.dataroute.length) {
      this.rotatedata.dataroute.forEach((item, i) => {
        clearTimeout(this.objtime["time" + i]);
        clearInterval(this.objtime["timex" + i]);
      });
    }
  },
};
</script>

<style lang="less" scoped>
.rotate_screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  .left_arrow {
    position: absolute;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    top: 50%;
    left: 24px;
    margin-top: -33px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0);
    background-color: rgba(31, 45, 61, 0);
  }
  .left_arrow:hover {
    color: #fff;
    background-color: rgba(31, 45, 61, 0.6);
    border-radius: 50%;
  }
  .right_arrow {
    position: absolute;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    top: 50%;
    right: 24px;
    margin-top: -33px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0);
    background-color: rgba(31, 45, 61, 0);
  }
  .right_arrow :hover {
    color: #fff;
    background-color: rgba(31, 45, 61, 0.6);
    border-radius: 50%;
  }
}

.v-enter-active,
.v-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 300ms;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}

.v-enter,
.v-enter-active {
  animation: bounce-right-in 300ms;
}

.v-leave-active {
  animation: bounce-right-out 300ms;
}

@keyframes bounce-right-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0px, 0, 0);
  }
}
@keyframes bounce-right-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes bounce-left-in {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0px, 0, 0);
  }
}
@keyframes bounce-left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
</style>
