<template>
  <m-grid
    :template="['title title title', 'left . right']"
    columns="16vw auto 49vw"
    rows="0.4rem auto"
    gap="0.05rem"
  >
    <m-title area="title">南东城运</m-title>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <LeftComponent area="left" />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <PublicManage v-show="curTheme === 'manage'" area="right" />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <PublicService v-show="curTheme === 'service'" area="right" />
    </m-animate>
  </m-grid>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import LeftComponent from './left/left-component.vue'
import PublicManage from './right/public-manage.vue'
import PublicService from './right/public-service.vue'
import store from '@/store'

export default defineComponent({
  name: 'Main',
  components: { LeftComponent, PublicManage, PublicService },
  setup() {
    const curTheme = computed(() => store.state.curTheme)
    return {
      curTheme,
    }
  },
})
</script>

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