<template>
  <div
    class="w-full h-full absolute left-0 top-0 box-border overflow-hidden pointer-events-none"
    :style="styleMap?.mainStyle"
  >
    <!-- 网格背景 -->
    <div class="canvas-grid" v-show="pageState?.showBgGrid"></div>
    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import ImageBg from '../ImageBg.vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'

const props = defineProps<{
  width?: number
  height?: number
  styles: any
  state?: string
  part?: string
}>()

const pageState = inject<any>('state')

const styleMap = useWidgetStyle({
  widget: 'page',
  props
})
</script>
<style scoped lang="less">
.canvas-grid {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 20px 20px;
  background-position: 0 0;
  background-image:
    linear-gradient(to right, #c5c3c3 1px, transparent 1px),
    linear-gradient(to bottom, #c5c3c3 1px, transparent 1px);
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100px 100px;
    background-position: 0 0;
    background-image:
      linear-gradient(to right, #8d8b8b 2px, transparent 1px),
      linear-gradient(to bottom, #8d8b8b 2px, transparent 1px);
  }
}
</style>
