<!--
 * @Author: ChenChanghua
 * @Date: 2022-01-24 19:35:59
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 17:04:35
 * @Description: file content
-->
<script setup>
import {
  jJsvRuntimeBridge,
  JsvMaskClipDiv,
} from "jsview";
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import mask1_pic from "./images/mask-025/res/1.png";
import mask2_pic from "./images/mask-025/res/2.png";
import mask3_pic from "./images/mask-025/res/3.png";
import mask4_pic from "./images/mask-025/res/4.png";
import bg_pic from "./images/php.jpg";

const router = useRouter();
const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};
onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
  >
    <div :style="{ width: 1280, height: 720, backgroundColor: '#334C4C' }">
      <div
        :style="{
          left: 20,
          top: 20,
          width: 1200,
          height: 100,
          color: '#FFFFFF',
          fontSize: 30,
        }"
      >
        原始图片通过四个拼图形状的遮罩切成四种形状以形成拼图效果
      </div>
      <div
        :style="{
          textAlign: 'center',
          fontSize: 30,
          lineHeight: 50,
          color: '#ffffff',
          left: 10,
          top: 100,
          width: 654 / 2,
          height: 50,
          backgroundColor: 'rgba(27,38,151,0.8)',
        }"
      >
        {{ `原始图片` }}
      </div>
      <div
        :style="{
          left: 10,
          top: (720 - 654 / 2) / 2,
          width: 654 / 2,
          height: 654 / 2,
          backgroundImage: `url(${bg_pic})`,
        }"
      ></div>
      <div :style="{ left: 654 / 2 + 150 }">
        <jsv-mask-clip-div
          :style="{ top: 120, left: 10, width: 196, height: 256 }"
          :viewSrc="bg_pic"
          :maskSrc="mask1_pic"
          :maskLeft="0 / 654"
          :maskTop="0 / 654"
          :maskWidth="327 / 654"
          :maskHeight="427 / 654"
        />
        <jsv-mask-clip-div
          :style="{ top: 120, left: 10 + 196, width: 256, height: 196 }"
          :viewSrc="bg_pic"
          :maskSrc="mask2_pic"
          :maskLeft="227 / 654"
          :maskTop="0 / 654"
          :maskWidth="427 / 654"
          :maskHeight="327 / 654"
        />
        <jsv-mask-clip-div
          :style="{ top: 120 + 256 + 10, left: 10, width: 256, height: 196 }"
          :viewSrc="bg_pic"
          :maskSrc="mask3_pic"
          :maskLeft="0 / 654"
          :maskTop="327 / 654"
          :maskWidth="427 / 654"
          :maskHeight="327 / 654"
        />
        <jsv-mask-clip-div
          :style="{
            top: 120 + 196 + 10,
            left: 10 + 256,
            width: 196,
            height: 256,
          }"
          :viewSrc="bg_pic"
          :maskSrc="mask4_pic"
          :maskLeft="327 / 654"
          :maskTop="227 / 654"
          :maskWidth="327 / 654"
          :maskHeight="427 / 654"
        />
      </div>
    </div>
  </jsv-focus-block>
</template>
