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

<script lang="ts">
import Title from './title.vue'
import LeftSection from './left.vue'
import RightSection from './right.vue'
import { ajax, api } from '@/ajax'
import { ref, defineComponent } from 'vue'
import SiteSelector from '@/view/community/site-selector.vue'
import lfs from '@/assets/images/lfs.png'

export default defineComponent({
  name: 'Raffles',
  components: {
    SiteSelector,
    lfs,
  },
  setup() {
    return {
      lfs,
    }
  },
})
</script>
<script lang="ts" setup>
const rafflesDetail = ref<any>({})
ajax
  .get({
    url: api.GET_RAFFLES,
  })
  .then((res) => {
    rafflesDetail.value = res?.data?.content?.[0] || {}
  })
</script>
<style lang="stylus" scoped></style>
