<template>
  <div class="home">
    <!-- 如果配置需要异步获取建议大家用v-if 来判断是否开始渲染组件,自己可以根据情况做一个loading 或者文本提示进行等待组件渲染 -->
    <mv-full-page v-if="isInit" ref="myFullPage" :pages="pages" v-model:page="page" :config="config"
      @rollEnd="onRollEnd" @pointerMouseover="pointerMouseover" @loaded="onLoaded">
      <!-- <template #loading>
        <div style="text-align:center;color:#000;">加载中....</div>
      </template> -->

      <!-- 动态插槽 -->
      <!-- <template v-slot:[dynamicSlotName+page] v-for="page in pages">
        <div :class="`page${page}`" :key="page">
          {{ `页面${page}` }}
        </div>
      </template> -->
      <!-- 静态插槽 -->
      <template #page1>
        <div class="page1" style="line-height: 30px">
          <h2>mv-full-page</h2>
          <h3 style="margin-bottom: 10px">
            一款兼容PC端移动端的Vue全屏滚动组件
          </h3>

          <m-panel title="切换方向">
            <button class="btn btn-s1" @click="switchDire">
              切换滑动方向(默认垂直方向)
            </button>
          </m-panel>

          <m-panel title="手动切换到具体页码">
            <input type="text" v-model="tempPage" />
            <p>
              <button class="btn btn-s1" @click="toPage">切换</button>
            </p>
          </m-panel>

          <m-panel title="自动播放">
            时间间隔：
            <input type="text" v-model="config.autoPlay.interval" />
            <button class="btn btn-s1" @click="
              () => {
                config.loop = true;
                config.autoPlay.play = true;
              }
            ">
              开启自动且循环播放
            </button>
          </m-panel>

          <m-panel title="移动端局部列表滚动demo">
            <div class="sub_scroll-test-box" data-scroll="true">
              <p v-for="item in 99" :key="item">滚动测试数据</p>
            </div>
          </m-panel>
        </div>
      </template>

      <template #page2>
        <div class="page2">
          2
          <div>
            <input type="text" style="width: 80px; height: 80px;" />
          </div>
        </div>
      </template>

      <template #page3>
        <div class="page3">3</div>
      </template>

      <template #page4>
        <div class="page4">4</div>
      </template>
    </mv-full-page>
    <p v-else style="font-size: 30px;text-align:center;padding: 30px;color: #656565;">加载中...</p>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import MPanel from "./components/MPanel.vue";
// 本地测试组件，实际使用npm i mv-full-page@next 安装后导入
import MvFullPage from "../lib";
// 实际使用直接用 上面 MvFullPage 就可以了
import { default as MvFullPageRef } from "../types/index";

import imageDemo1 from './images/demo1.jpg'
import imageDemo2 from './images/demo2.jpg'
import imageDemo3 from './images/demo3.jpg'
import imageDemo4 from './images/demo4.jpg'

export default defineComponent({
  components: {
    MPanel,
    [MvFullPage.name]: MvFullPage,
  },
  setup() {
    const state = reactive({
      dynamicSlotName: "page",
      loading: false,
      pages: 4,
      tempPage: 1,
      page: 1,
      config: {
        disabled: false,
        direction: "v",
        cache: true,
        bgArr: [
          {
            image: imageDemo1,
          },
          {
            image: imageDemo2,
          },
          {
            image: imageDemo3,
          },
          {
            image: imageDemo4,
          }
        ],
        //  循环播放
        loop: true,
        // 自动轮播
        autoPlay: {
          play: false,
          // 切换间隔
          interval: 1000,
        },
        arrow: {
          // 上一页箭头
          last: true,
          // 下一页箭头
          next: true,
        },
        poi: {
          className: "my-poi",
        },
      } as any,
      isInit: false
    });
    const myFullPage = ref();
    const pointerMouseover = ({ event, index }: any) => {
      console.log(event, index);
    };
    const onRollEnd = (page: any) => {
      console.log("当前页面为", page);
    };
    const toPage = () => {
      state.page = state.tempPage;
      (myFullPage.value as MvFullPageRef).goPage(state.page, true);
    };
    const switchDire = () => {
      state.config.direction == "v"
        ? (state.config.direction = "h")
        : (state.config.direction = "v");
    };

    const onLoaded = () => {
      // 所有资源已经加载完毕

    }
    onMounted(() => {
      setTimeout(() => {
        state.config.bgArr = [
          {
            image: imageDemo1,
          },
          {
            image: imageDemo2,
          },
          {
            image: imageDemo3,
          },
          {
            image: imageDemo4,
          }
        ]
        state.isInit = true;
      }, 1000);
    })

    return {
      ...toRefs(state),
      pointerMouseover,
      onRollEnd,
      toPage,
      switchDire,
      myFullPage,
      onLoaded
    };
  },
});
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.home {
  text-align: center;
  color: #ffffff;
  line-height: 30px;

  a {
    color: #ffffff;
  }

  position: relative;
  height: 300px;
}

.block {
  height: 300px;
  width: 200px;
  background: #ff715e;
}

.page2 {
  // position: absolute;
  width: 100%;
  height: 100%;
}

.img-test {
  background: url("~@/assets/logo.png") no-repeat;
  width: 300px;
  height: 300px;
  background-size: cover;
}

.sub_scroll-test-box {
  margin: 0px auto;
  height: 30vw;
  width: 300px;
  border: 1px solid #ff715e;
  color: #ffffff;
  background: #ff715e;
  overflow-y: auto;
  overflow-x: hidden;
}

.color-red {
  color: aquamarine;
}
</style>
<style lang="scss">
input[type="text"] {
  height: 30px;
}

.btn {
  vertical-align: top;
  margin: 10px 15px;
  display: inline-block;
  text-align: center;
  width: auto;
  padding: 0px 30px;
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  border: none;
}

.btn-s1 {
  transition: 0.5s;
  background-size: 200% auto;
  background-image: linear-gradient(to right,
      #84fab0 0%,
      #8fd3f4 51%,
      #84fab0 100%);

  &:hover {
    background-position: right center;
  }
}
</style>