<template>
  <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
  <div class="overflow-y-scroll bg-[#020603]">
    <div class="flex flex-col h-full w-3120px h-760px">
      <Head />
      <div class="flex-1 flex justify-between py-11px px-20px">
        <div class="flex">
          <div class="grid grid-cols-2 gap-x-16px gap-y-16px">
            <Fisheries width="440px" height="337px" />
            <Husbandry width="440px" height="337px" />
            <Agriculture width="440px" height="337px" />
            <Forestry width="440px" height="337px" />
          </div>
          <div class="bg-[#10272F] bg-opacity-80 ml-16px">
            <NYQK />
            <NCZQS class="mt-37px" />
          </div>
        </div>
        <div class="flex-1">
          <Map @onMapChange="onMapChange" />
        </div>
        <div class="flex">
          <div class="bg-[#10272F] bg-opacity-80">
            <CZNYCY />
          </div>
          <div class="mx-16px">
            <JK width="440px" height="379px" />
            <SBYXZT class="mt-16px" width="440px" height="295px" />
          </div>
          <div class="">
            <QXSZ width="440px" height="222px" />
            <SZJCSJ class="mt-11px" width="440px" height="222px" />
            <TRJCSJ class="mt-11px" width="440px" height="222px" />
          </div>
        </div>
      </div>
    </div>

    <a-modal v-model:visible="visible" :bodyStyle="{ background: '#233741', color: '#fff' }">
      <template #closeIcon> 1 </template>
    </a-modal>
  </div>
  <!-- </ScaleScreen> -->
</template>

<script lang="ts">
  import { defineComponent, ref } 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'
  export default defineComponent({
    components: {
      [Modal.name]: Modal,
      Map,
      ScaleScreen,
      Fisheries,
      Husbandry,
      Forestry,
      Agriculture,
      NYQK,
      NCZQS,
      CZNYCY,
      JK,
      SBYXZT,
      QXSZ,
      SZJCSJ,
      TRJCSJ,
      Head,
    },
    setup() {
      const visible = ref<boolean>(false)

      function onMapChange(e) {
        console.log(e)
        visible.value = true
      }

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

<style scoped lang="less">
  .cu {
  }
</style>
