<template>
  <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
  <div class="overflow-y-scroll bg-[#020603] bg-img">
    <div class="flex flex-col h-full w-3120px h-760px">
      <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">
            <Fisheries width="440px" height="353px" />
            <Husbandry width="440px" height="353px" />
            <Agriculture width="440px" height="353px" />
            <Forestry width="440px" height="353px" />
          </div>
        </div>
        <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-5">
          <div class="bg-[10272f] bg-opacity-50">
            <NYQK />
            <NCZQS class="mt-37px" />
          </div>
          <div class="flex-1">
            <Map />
          </div>
          <div class="bg-[10272f] bg-opacity-50">
            <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="230px" />
            <SZJCSJ class="mt-11px" width="440px" height="230px" />
            <TRJCSJ class="mt-11px" width="440px" height="230px" />
          </div>
        </div>
      </div>
    </div>
    <MapModal v-model:visible="visibleMapModal" :footer="null" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onBeforeMount, reactive } from 'vue'
  import Map from './components/Map.vue'
  import ScaleScreen from '/@/components/ScaleScreen'
  import Fisheries from './components/Fisheries.vue'
  import Husbandry from './components/Husbandry.vue'
  import Forestry from './components/Forestry.vue'
  import Agriculture from './components/Agriculture.vue'
  import Head from './components/Head.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'
  export default defineComponent({
    components: {
      [Modal.name]: Modal,
      Map,
      ScaleScreen,
      Fisheries,
      Husbandry,
      Forestry,
      Agriculture,
      NYQK,
      NCZQS,
      CZNYCY,
      JK,
      SBYXZT,
      QXSZ,
      SZJCSJ,
      TRJCSJ,
      Head,
      MapModal,
    },
    setup() {
      const mapData = reactive([])
      const vEmitter = mitt()

      createVContext({
        rootEmitter: vEmitter,
      })

      const visibleMapModal = ref<boolean>(false)

      function onMapChange(e) {
        vEmitter.emit('map:click')
      }

      onBeforeMount(() => {
        vEmitter.on('map:click', (e) => {
          console.log(e)
        })
      })

      return {
        visibleMapModal,
        onMapChange,
      }
    },
  })
</script>

<style scoped lang="less">
  .bg-img {
    // background-image: url('../../assets/images/map-bg.png') no-repeat;
    // background-position: center;
  }

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