<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:08
 * @Description: file content
-->
<script setup>
import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
import Item from "./Item.vue";
import { onMounted, ref } from "vue";
import FullscreenPoster from "./FullscreenPoster.vue";
import { provide } from "vue";

const focusHub = useFocusHub();

const imageUrl =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/FullscreenPoster/App/element_228475_icon2_20230608194600.png";

const fullScreenVisibility = ref(false);
provide("fullScreenVisibility", fullScreenVisibility)

const data = [
  {
    width: 100,
    height: 190,
    marginRight: 10,
    marginBottom: 10,
    color: "#AABB33",
    content: 0,
    showFull: false,
  },
  {
    width: 200,
    height: 190,
    marginRight: 10,
    marginBottom: 10,
    color: "#0077AA",
    content: "显示霸屏",
    showFull: true,
  },
  {
    width: 100,
    height: 190,
    marginRight: 10,
    marginBottom: 10,
    color: "#BB00AA",
    showFull: false,
    content: 2,
  },
];
const provideData = () => {
  return data;
};

const measures = (data) => {
  return {
    width: data.width,
    height: data.height,
    marginRight: data.marginRight,
    marginBottom: data.marginBottom,
  };
};

const widgetLayout = {
  left: 400,
  top: 50,
  width: 500,
  height: 300,
};

onMounted(() => {
  //组件mount后设置焦点
  focusHub.setFocus("mainMw");
});
</script>

<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  />
  <metro-widget
    name="mainMw"
    :left="widgetLayout.left"
    :top="widgetLayout.top"
    :width="widgetLayout.width"
    :height="widgetLayout.height"
    :provideData="provideData"
    :direction="HORIZONTAL"
    :measures="measures"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>

  <fullscreen-poster
    v-if="fullScreenVisibility"
    :src="imageUrl"
    :width="1280"
    :duration="800"
  ></fullscreen-poster>
</template>
