<template>
  <m-grid
    :template="['title title title', 'left . right']"
    columns="32vw auto 32vw"
    rows="0.4rem auto"
    gap="0.05rem"
  >
    <!-- TODO 添加地图 -->
    <Title area="title"> 南东城运 </Title>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <LeftSection :info="rafflesDetail" area="left" />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <RightSection :info="rafflesDetail" area="right" />
    </m-animate>
  </m-grid>
</template>

<script lang="ts" setup>
import Title from './title.vue'
import LeftSection from './left.vue'
import RightSection from './right.vue'
import { ajax, api } from '@/ajax'
import { ref } from 'vue'

const rafflesDetail = ref<any>({})
ajax
  .get({
    url: api.GET_RAFFLES,
  })
  .then((res) => {
    rafflesDetail.value = res?.data?.content?.[0] || {}
  })
</script>

<style lang="stylus" scoped></style>
