<script lang="jsx">
import MyLayoutAside from './aside.vue'
import MyLayoutHeader from './header.vue'
import { ref , KeepAlive } from 'vue'
import { useRouter } from 'vue-router'


/**
 * 结构布局
 */
export default {
  name: 'Layout' ,
  setup () {
    const router = useRouter()
    const keepaliveItems = ref([])
    // 页面缓存处理
    router.beforeEach(({ name , meta , params }) => {
      if (!meta?.keepalive) {
        return true
      }
      if (!keepaliveItems.value.includes(name)) {
        // 添加页面缓存
        keepaliveItems.value = keepaliveItems.value.concat(name)
        return true
      }
      if (params.keepalive === 'update') {
        // 删除页面缓存
        keepaliveItems.value = keepaliveItems.value.filter(_name => _name !== name)
        return true
      }
    })

    // 测试更新页面缓存
    const handleKeepalive = () => {
      router.push({ name : 'MemberList' , params : { keepalive : 'update' } })
    }

    return () => [
      <a-layout class="my-layout">
        <MyLayoutHeader/>
        <a-layout class="arco-layout-has-sider">
          <MyLayoutAside/>
          <a-layout class="main-wrap">
            <my-crumb>
              <a-button size="mini" type="primary" onClick={ handleKeepalive }>常驻按钮</a-button>
            </my-crumb>
            <a-layout>
              <router-view>
                {
                  ({ Component }) => {
                    return <KeepAlive include={ keepaliveItems.value }>{ Component }</KeepAlive>
                  }
                }
              </router-view>
            </a-layout>
          </a-layout>
        </a-layout>
      </a-layout>
    ]
  }
}
</script>

<style scoped lang="less">
.my-layout,.my-layout>.arco-layout{
  overflow: hidden;
}
:deep(.main-wrap>.arco-layout){
  overflow: auto;
  padding: 20px;
}
</style>