<template>
  <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="true">
    <!-- <div class="overflow-y-scroll"> -->
    <!-- w-3120px h-760px -->
    <div class="flex flex-col h-full bg-img relative">
      <canvas
        class="absolute left-0 top-0 w-full h-full overflow-hidden"
        ref="cavsRef"
        id="canv"
      ></canvas>
      <div class="flex flex-col h-full w-full z-100">
        <Head />
        <div class="flex-1 flex justify-between px-20px">
          <div class="flex">
            <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
              <DXJG width="440px" height="353px" />
              <DXCY width="440px" height="353px" />
              <DXLX width="440px" height="353px" />
              <DZWZ width="440px" height="353px" />
            </div>
          </div>
          <div class="flex-1 flex ml-15px justify-between bg-[#03293f] bg-opacity-55">
            <div class="bg-gradient-to-l from-transparent to-[#10272f50]">
              <NYQK />
              <NCZQS class="mt-20px" />
            </div>
            <div class="flex-1">
              <Map />
            </div>
            <div class="bg-gradient-to-r from-transparent to-[#10272f50]">
              <CZNYCY />
            </div>
          </div>
          <div class="flex">
            <div class="mx-16px">
              <JK width="440px" height="387px" />
              <SBYXZT class="mt-16px" width="440px" height="310px" />
            </div>
            <div class="">
              <QXSZ width="440px" height="200px" />
              <SZJCSJ class="mt-11px" width="440px" height="245px" />
              <TRJCSJ class="mt-11px" width="440px" height="245px" />
            </div>
          </div>
        </div>
        <Footer />
      </div>
    </div>
    <MapModal
      v-model:visible="visibleMapModal"
      :footer="null"
      :baseId="baseId"
      :baseData="baseData"
    />
    <!-- </div> -->
  </ScaleScreen>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onBeforeMount,
    reactive,
    toRefs,
    onMounted,
    onBeforeUnmount,
  } from 'vue'
  import Map from './components/Map.vue'
  import ScaleScreen from '/@/components/ScaleScreen'
  import DXJG from './components/DXJG.vue'
  import DXCY from './components/DXCY.vue'
  import DZWZ from './components/DZWZ.vue'
  import DXLX from './components/DXLX.vue'
  import Head from './components/Head.vue'
  import Footer from './components/Footer.vue'
  import NYQK from './components/NYQK.vue'
  import NCZQS from './components/NCZQS.vue'
  import CZNYCY from './components/CZNYCY.vue'
  import JK from './components/JK.vue'
  import SBYXZT from './components/SBYXZT.vue'
  import QXSZ from './components/QXSZ.vue'
  import SZJCSJ from './components/SZJCSJ.vue'
  import TRJCSJ from './components/TRJCSJ.vue'
  import { Modal } from 'ant-design-vue'
  import MapModal from './MapModal.vue'
  import { createVContext } from './useVContext'
  import mitt from '/@/utils/mitt'
  import Build from './components/cavas'
  // import Am from './components/Star'

  export default defineComponent({
    components: {
      [Modal.name]: Modal,
      Map,
      ScaleScreen,
      DXJG,
      DXCY,
      DZWZ,
      DXLX,
      NYQK,
      NCZQS,
      CZNYCY,
      JK,
      SBYXZT,
      QXSZ,
      SZJCSJ,
      TRJCSJ,
      Head,
      Footer,
      MapModal,
    },
    setup() {
      const cavsRef = ref<HTMLDivElement | null>(null)

      const vEmitter = mitt()

      const obj = reactive({
        baseId: ref(''),
        baseData: reactive({}),
      })

      createVContext({
        rootEmitter: vEmitter,
      })

      let timer1: any = null
      let timer2: any = null
      let timer3: any = null

      const visibleMapModal = ref<boolean>(false)
      onMounted(() => {
        timer1 = setInterval(() => vEmitter.emit('interval:auto'), 1000 * 60)
        timer2 = setInterval(() => vEmitter.emit('interval:tab'), 1000 * 30)
        timer3 = setInterval(() => vEmitter.emit('interval:tab1'), 1000 * 10)
        new Build(cavsRef).run()
        // Am(unref(cavsRef))
      })
      onBeforeMount(() => {
        vEmitter.on('map:click', () => {
          // visibleMapModal.value = true
        })
        vEmitter.on('base:click', (e) => {
          obj.baseId = e.id
          obj.baseData = e
          visibleMapModal.value = true
        })
      })

      onBeforeUnmount(() => {
        timer1 && clearInterval(timer1)
        timer2 && clearInterval(timer2)
        timer3 && clearInterval(timer3)
      })

      return {
        cavsRef,
        ...toRefs(obj),
        visibleMapModal,
      }
    },
  })
</script>

<style scoped lang="less">
  .bg-img {
    // background-image: url('../../assets/images/map-bg.png') no-repeat;
    // background-position: center;
    background: url('../../assets/images/map-bg.png') no-repeat, #020603;
    background-position: center center;
    background-attachment: scroll;
    background-size: auto 100%;
  }

  // .bg {
  //   background: linear-gradient(90deg, #658eb4 1%, #658eb4 100%);
  //   opacity: 0.2;
  // }
</style>
