<template>
    <div class="max-w">
      <listBox v-if="roleInfo.navsType == 1" @liclick="liclick"></listBox>
      <detailsBox :lisdata="roleInfo.tabDetail" v-if="roleInfo.navsType == 2"></detailsBox>
    </div>
  </template>
  <script>
  import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import listBox from "./widget/list.vue";
  import detailsBox from "./widget/detail.vue";
  export default defineComponent({
    name: "Index",
    props: [ "detail" ],
    components: {
      listBox,
      detailsBox
    },
    setup(props, context) {
      let data = reactive({
        roleInfo:{
          navsType: 1,
          routeData:{},
          tabDetail: '',
        }, 
      });
      const route = useRoute();
      const router = useRouter();
      watch(
        () => router.currentRoute.value,
        (newValue) => {
          data.roleInfo.routeData = newValue.query
          data.roleInfo.navsType = newValue.query.type
        },
        { immediate: true }
      )
      watch(
        () => props.detail,
        (newValue) => {
          data.roleInfo.tabDetail = newValue
        },
        { immediate: true }
      )
      onMounted(() => {
        if(route.query.type){
          data.roleInfo.navsType = route.query.type;
        }
        data.roleInfo.routeData = route.query
        if(props.detail){
          data.roleInfo.tabDetail = props.detail
        }
      });
      let methods = {
        liclick(e){
          data.roleInfo.navsType = 2
          data.roleInfo.tabDetail = e
          let query = data.roleInfo.routeData
          query.type = 2  
        }
      };
      return {
        ...methods,
        ...toRefs(data),
      };
    },
  });
  </script>
  
  <style scoped></style>
  