<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-12 10:30:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-09 16:00:38
 * @Description: file content
-->
<script>
import AppPage from "./AppPage.vue";
import { getKeyFramesGroup, useFocusHub } from "jsview";
import { reactive } from "vue";

export default {
  components: {
    AppPage,
  },
  props: {
    name: {
      type: String,
    },
    curIndex: {
      type: Object,
    },
    pageData: {
      type: Array,
    },
    onEdge: {
      type: Function,
    },
    layout: {
      type: Object,
    },
    duration: {
      type: Number,
      default: 0.3,
    },
  },
  inject: ["globalInfo"],
  provide() {
    return {
      animState: this.animState,
    };
  },
  setup() {
    let styleShell = getKeyFramesGroup();
    let animState = reactive({
      value: 0, //0: 不在动画， 在动画中
    });
    return {
      refName0: "page0",
      refName1: "page1",
      styleShell,
      animState,
      focusHub: useFocusHub()
    };
  },
  data() {
    return {
      curPage: 0,
      page0Show: true,
      page1Show: false,
      page0Data: this.pageData[0],
      page1Data: null,
      page0Left: 0,
      page1Left: 1280,
      page0Anim: {
        anim: "",
        onend: null,
      },
      page1Anim: {
        anim: "",
        onend: null,
      },
    };
  },
  methods: {
    $_appSwiper_onFocus() {
      let curPageData = this.curPage === 0 ? this.page0Data : this.page1Data;
      this.focusHub.setFocus(curPageData.name);
    },
    $_appSwiper_tabIdWatcher(newValue, oldValue) {
      console.log("AppSwiper curIndex changed ", newValue, oldValue);
      if (newValue != oldValue) {
        let direction = newValue > oldValue ? "left" : "right";
        if (this.curPage == 0) {
          this.curPage = 1;
          this.page1Data = this.pageData[newValue];
          this.page1Show = true;
          this.animState.value = 1;
          this.page0Anim = {
            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
            onend: () => {
              this.page0Show = false;
              this.page0Data = null;
              this.animState.value = 0;
            },
          };
          this.page1Anim = {
            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
            onend: null,
          };
        } else {
          this.curPage = 0;
          this.page0Data = this.pageData[newValue];
          this.page0Show = true;
          this.animState.value = 1;
          this.page0Anim = {
            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
            onend: null,
          };
          this.page1Anim = {
            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
            onend: () => {
              this.page1Show = false;
              this.page1Data = null;
              this.animState.value = 0;
            },
          };
        }
      }
    },
    $_appSwiper_initAnimation() {
      let leftSlideOutDefine = `@keyframes app-swiper-left-slide-out {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(${-this.layout.width}, 0, 0);
        }
      }`;
      let leftSlideInDefine = `@keyframes app-swiper-left-slide-in {
        from {
          transform: translate3d(${this.layout.width}, 0, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }`;
      let rightSlideOutDefine = `@keyframes app-swiper-right-slide-out {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(${this.layout.width}, 0, 0);
        }
      }`;
      let rightSlideInDefine = `@keyframes app-swiper-right-slide-in {
        from {
          transform: translate3d(${-this.layout.width}, 0, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }`;
      this.styleShell.insertRule(leftSlideOutDefine);
      this.styleShell.insertRule(leftSlideInDefine);
      this.styleShell.insertRule(rightSlideOutDefine);
      this.styleShell.insertRule(rightSlideInDefine);
    },
    $_appSwiper_releaseAnimation() {
      this.styleShell.removeRule("app-swiper-left-slide-out");
      this.styleShell.removeRule("app-swiper-left-slide-in");
      this.styleShell.removeRule("app-swiper-right-slide-out");
      this.styleShell.removeRule("app-swiper-right-slide-in");
    },
  },
  created() {
    console.log("AppSwiper created", this.globalInfo);
    this.$watch(() => this.globalInfo.tabId, this.$_appSwiper_tabIdWatcher);
    this.$_appSwiper_initAnimation();
  },
  beforeUnmount() {
    this.$_appSwiper_releaseAnimation();
  },
};
</script>

<template>
  <jsv-focus-block
    :name="name"
    ref="focusNode"
    :onAction="{
      onFocus: $_appSwiper_onFocus,
    }"
  >
    <div
      :style="{
        animation: page0Anim.anim,
        animationFillMode: 'forwards',
      }"
      @animationend="page0Anim.onend"
    >
      <app-page
        v-if="page0Show"
        :data="page0Data"
        :name="page0Data.name"
        :onEdge="onEdge"
      ></app-page>
    </div>
    <div
      :style="{
        animation: page1Anim.anim,
        animationFillMode: 'forwards',
      }"
      @animationend="page1Anim.onend"
    >
      <app-page
        v-if="page1Show"
        :data="page1Data"
        :name="page1Data.name"
        :onEdge="onEdge"
      ></app-page>
    </div>
  </jsv-focus-block>
</template>