<template>
  <div>
    <home-header></home-header>
    <div id="container">
      <aside>
        <aside-menu></aside-menu>
      </aside>
      <article>
        <div class="form-container">
          <!-- <on-the-right-side-of-the-list
            v-if="showFlag === 'collect'"
          ></on-the-right-side-of-the-list> -->
          <my-apply v-if="showFlag === 'apply'"></my-apply>
          <my-publish v-if="showFlag === 'push'"></my-publish>
          <purchase-vehicle
            v-if="showFlag === 'PurchaseVehicle'"
          ></purchase-vehicle>
          <collection v-else-if="showFlag === 'collect'"></collection>
          <my-application v-else-if="showFlag === 'demand'"></my-application>
          <my-comments v-else-if="showFlag === 'remark'"></my-comments>
          <my-browse v-else-if="showFlag === 'recent'"></my-browse>
        </div>
      </article>
    </div>
  </div>
</template>

<script setup>
  import HomeHeader from '@/views/home/components/header'
  import asideMenu from '@/views/personalCenter/components/asideMenu'
  // import OnTheRightSideOfTheList from './OnTheRightSideOfTheList'
  import MyApply from '@/views/personalCenter/components/MyApply'
  import MyApplication from '@/views/personalCenter/components/MyApplication'
  import MyComments from '@/views/personalCenter/components/MyComments'
  import MyPublish from '@/views/personalCenter/components/MyPublish'
  import MyBrowse from '@/views/personalCenter/components/MyBrowse'
  import PurchaseVehicle from '@/views/personalCenter/components/PurchaseVehicle'
  import Collection from '@/views/personalCenter/components/Collection'
  import mybus from '@/myplugins/mybus'
  import { onBeforeUnmount, ref } from 'vue'

  const type = JSON.parse(window.sessionStorage.getItem('type'))
  const showFlag = ref('PurchaseVehicle')
  if (type) {
    showFlag.value = type
    console.log('type================>', type, showFlag)
  }
  const delFlag = ref(true)
  mybus.on('tabsChange', (e) => {
    console.log('进入详情', e)
    if (e.flag) {
      delFlag.value = false
    } else {
      console.log('tabsChange', e.key)
      showFlag.value = e.key
      window.sessionStorage.setItem('type', JSON.stringify(showFlag.value))
      console.log('showFlag.value', showFlag.value)
    }
  })
  onBeforeUnmount(() => {
    mybus.off('tabsChange')
    if (delFlag.value) {
      window.sessionStorage.setItem('type', JSON.stringify(''))
    }
  })
</script>

<style scoped lang="less">
  #container {
    background-color: #f5f8fc;
    height: 100%;
    width: 100%;
    margin: 64px auto 0;
    display: flex;
    justify-content: center;
    position: relative;
    aside {
      width: 282px;
      height: 96%;
      overflow-y: auto;
      background-color: #fff;
      margin: 1% 0 3%;
    }
    article {
      width: 1090px;
      height: 99%;
      overflow-y: auto;
      background-color: #fff;
      margin: 1% 0 1% 14px;
    }
    .form-container {
      .title {
        font-size: 20px;
        color: #000;
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
  }
</style>

<style>
  html,
  body {
    height: unset;
  }
</style>
