<template>
  <com-head :options="tabList" showCtrl v-model="tab">
    <component :is="head" :parentVM="identification" />
  </com-head>

  <component :is="body" :parentVM="identification" />
</template>

<script>
import comHead from "@/components/head";
import CommunityBody from './community/body'
import CommunityHead from './community/head'
import SecondHouseBody from './second-house/body'
import SecondHouseHead from './second-house/head'

const tabs = [
  { name: '小区航拍', value: 1, type: 'community' },
  { name: '房源VR', value: 2, type: 'secondHouse' },
]
const queryTab = (data) => 
  typeof data === 'number' 
    ? tabs.find(({value}) => value === data)
    : tabs.find(({type}) => type === data)


export default {
  setup() {
    return {
      tabList: tabs,
      identification: {} 
    };
  },
  data() {
    return {
      tab: queryTab(this.$route.params.type).value
    }
  },
  watch: {
    tab() {
      this.identification = {}
      this.$router.push({
        name: 'otherExamine',
        params: { 
          type: queryTab(this.tab).type
        }
      })
    }
  },
  computed: {
    head() {
      return queryTab(this.tab).value === 1 ? 'CommunityHead' : 'SecondHouseHead'
    },
    body() {
      return queryTab(this.tab).value === 1 ? 'CommunityBody' : 'SecondHouseBody'
    }
  },
  components: {
    comHead,
    CommunityBody,
    CommunityHead,
    SecondHouseBody,
    SecondHouseHead
  }
}
</script>