<template>
  <a-modal
    v-bind="$attrs"
    :bodyStyle="{ background: '#233741', color: '#fff' }"
    :width="modelWidth"
  >
    <template #closeIcon>
      <img
        class="w-22px h-22px inline text-0"
        src="../../assets/images/model-close-icon.png"
        alt=""
        srcset=""
      />
    </template>
    <div>
      <div class="relative -mt-6px h-30px flex items-center">
        <div class="flex items-center">
          <span class="block w-8px h-8px bg-[#6CCDDA] rounded-full mr-10px"></span>
          <span
            class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-18px"
            >2022年</span
          >
        </div>
        <div
          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
        >
          隆昌基地情况
        </div>
      </div>
      <div
        class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
        ><span>总面积：1000亩</span> <span class="mx-20px">就业人数：5人</span>
        <span>总产值：￥54000000</span></div
      >
      <div class="bg-[#1D2D35] mt-14px p-10px">
        <div class="grid grid-cols-2 gap-10px">
          <Fisheries :width="`${boxWidth}px`" height="235px" />
          <Husbandry :width="`${boxWidth}px`" height="235px" />
          <Agriculture :width="`${boxWidth}px`" height="235px" />
          <Forestry :width="`${boxWidth}px`" height="235px" />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { Modal } from 'ant-design-vue'
  import { defineComponent, computed } from 'vue'
  import Fisheries from './components/Fisheries.vue'
  import Husbandry from './components/Husbandry.vue'
  import Forestry from './components/Forestry.vue'
  import Agriculture from './components/Agriculture.vue'
  const boxWidth = 275
  export default defineComponent({
    components: {
      [Modal.name]: Modal,
      Fisheries,
      Husbandry,
      Forestry,
      Agriculture,
    },
    setup() {
      const modelWidth = computed(() => boxWidth * 2 + 78)
      return {
        boxWidth,
        modelWidth,
      }
    },
  })
</script>

<style scoped></style>
