<template>
  <div>
    <DeviceList v-show="!showDetail" @select-device="handleSelectDevice" />
    <DeviceDetail v-show="showDetail" :device="currentDevice" @back="handleBack" />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import DeviceList from './components/list/index.vue'
  import DeviceDetail from './components/detail/index.vue'

  const showDetail = ref(false)
  const currentDevice = ref(null)

  const handleSelectDevice = (device) => {
    currentDevice.value = device
    showDetail.value = true
  }

  const handleBack = () => {
    showDetail.value = false
    currentDevice.value = null
  }
</script>
