<!--
 * @Author: ChenChanghua
 * @Date: 2021-10-13 14:44:03
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 10:09:50
 * @Description: file content
-->
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  LoopType,
  JsvApic,
  JsvApic2,
  getTextWidth,
  VERTICAL,
  MetroWidget,
  useFocusHub,
  ApicEndState,
} from "jsview";
import Item from "./Item.vue";

import catRun from "./assets/animated_webp.webp";
import girlRun from "./assets/girl_run.gif";
import quan from "./assets/quan.webp";
import ball from "./assets/ball_3.webp";

const focusHub = useFocusHub();
let catRunPlay = ref(false);
let girlRunPlay = ref(false);
let quanPlay = ref(false);
let ballPlay = ref(false);

const catRunCallback = {
  onStart: () => {
    catRunPlay.value = true;
  },
  onEnd: () => {
    catRunPlay.value = false;
  },
};
const girlRunCallback = {
  onStart: () => {
    girlRunPlay.value = true;
  },
  onEnd: () => {
    girlRunPlay.value = false;
  },
};
const quanCallback = {
  onStart: () => {
    quanPlay.value = true;
  },
  onEnd: () => {
    quanPlay.value = false;
  },
};
const ballCallback = {
  onStart: () => {
    ballPlay.value = true;
  },
  onEnd: () => {
    ballPlay.value = false;
  },
};
let catRunRef = ref(null);
let girlRunRef = ref(null);
let quanRef = ref(null);
let ballRef = ref(null);

let preClickIndex = -1;
const data = [
  {
    index: 0,
    content: "彩虹猫",
    onClick() {
      if (catRunRef.value) {
        if (catRunPlay.value) {
          catRunRef.value.stop();
          catRunPlay.value = false;
        } else {
          catRunRef.value.play();
          catRunPlay.value = true;
        }
      }
    },
  },
  {
    index: 1,
    content: "小女孩",
    onClick() {
      if (girlRunRef.value) {
        if (girlRunPlay.value) {
          girlRunRef.value.stop();
          girlRunPlay.value = false;
        } else {
          girlRunRef.value.play();
          girlRunPlay.value = true;
        }
      }
    },
  },
  {
    index: 2,
    content: "优惠券",
    onClick() {
      if (quanRef.value) {
        if (quanPlay.value) {
          quanRef.value.stop();
          quanPlay.value = false;
        } else {
          quanRef.value.play();
          quanPlay.value = true;
        }
      }
    },
  },
  {
    index: 3,
    content: "球:跳至第5帧",
    onClick() {
      if (preClickIndex != this.index) {
        ballRef.value.show(5);
        ballPlay.value = true;
      } else {
        if (ballRef.value) {
          if (ballPlay.value) {
            ballRef.value.stop();
            ballPlay.value = false;
          } else {
            ballRef.value.show(5);
            ballPlay.value = true;
          }
        }
      }
      preClickIndex = this.index;
    },
  },
  {
    index: 4,
    content: "球:部分循环",
    onClick() {
      const play = () => {
        ballRef.value.play(LoopType.LOOP_PART, [
          [2, 3, 6],
          [2, 10, 15],
        ]);
        ballPlay.value = true;
      };
      if (preClickIndex != this.index) {
        play();
      } else {
        if (ballRef.value) {
          if (ballPlay.value) {
            ballRef.value.stop();
            ballPlay.value = false;
          } else {
            play();
          }
        }
      }
      preClickIndex = this.index;
    },
  },
  {
    index: 5,
    content: "球:完成后消失",
    onClick() {
      const play = () => {
        ballRef.value.play(
          LoopType.LOOP_PART,
          [
            [2, 3, 6],
            [2, 10, 15],
          ],
          ApicEndState.HIDE
        );
        ballPlay.value = true;
      };
      if (preClickIndex != this.index) {
        play();
      } else {
        if (ballRef.value) {
          if (ballPlay.value) {
            ballRef.value.stop();
            ballPlay.value = false;
          } else {
            play();
          }
        }
      }
      preClickIndex = this.index;
    },
  },
];

const provideData = () => {
  return data;
};

const measures = (item) => {
  return {
    width: 150,
    height: 70,
    marginRight: 10,
    marginBottom: 10,
  };
};

onMounted(() => {
  catRunRef.value.play();
  focusHub.setFocus("myWidget");
});
</script>

<template>
  <div :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
    <div :style="{ left: 20, top: 20 }">
      <JsvApic2
        ref="catRunRef"
        :src="`url(${catRun})`"
        :style="{ width: 250, height: 250 }"
        :onStart="catRunCallback.onStart"
        :onEnd="catRunCallback.onEnd"
      />
      <div className="text" :style="{ top: 270, width: 250 }">
        {{ `WEBP(${catRunPlay ? "运行" : "停止"})` }}
      </div>
    </div>

    <div :style="{ left: 280, top: 20 }">
      <JsvApic
        ref="girlRunRef"
        :src="`url(${girlRun})`"
        :style="{ width: 250, height: 214 }"
        :autoPlay="true"
        :loopType="LoopType.LOOP_DEFAULT"
        :onStart="girlRunCallback.onStart"
        :onEnd="girlRunCallback.onEnd"
      />
      <div className="text" :style="{ top: 219, width: 250 }">
        {{ `GIF(${girlRunPlay ? "运行" : "停止"})` }}
      </div>
    </div>

    <div :style="{ left: 540, top: 20 }">
      <JsvApic
        ref="quanRef"
        :src="`url(${quan})`"
        :style="{ width: 250, height: 296 }"
        :autoPlay="true"
        :loopType="LoopType.LOOP_DEFAULT"
        :onStart="quanCallback.onStart"
        :onEnd="quanCallback.onEnd"
      />
      <div className="text" :style="{ top: 301, width: 250 }">
        {{ `单次播放WEBP(${quanPlay ? "运行" : "停止"})` }}
      </div>
    </div>

    <div :style="{ left: 800, top: 20 }">
      <JsvApic2
        ref="ballRef"
        :src="`url(${ball})`"
        :style="{ width: 300, height: 200 }"
        :onStart="ballCallback.onStart"
        :onEnd="ballCallback.onEnd"
      />
      <div class="text" :style="{ top: 205, width: 300, height: 200 }">
        {{ `局部循环WEBP(${ballPlay ? "运行" : "停止"})` }}
      </div>
    </div>

    <div
      :style="{
        left: 50,
        top: 590,
        width: 1180,
        textAlign: 'center',
        color: '#000000',
        fontSize: 30,
      }"
    >
      {{ `按钮可以控制对应图播放/停止` }}
    </div>
  </div>
  <metro-widget
    name="myWidget"
    :left="20"
    :top="400"
    :width="1280"
    :height="300"
    :provideData="provideData"
    :direction="VERTICAL"
    :measures="measures"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>

<style scoped>
.text {
  font-size: 25;
  height: 68;
  line-height: 34;
  color: #000000;
  text-align: center;
}
</style>
