<template>
  <Layout>
    <template #title>
      <n-breadcrumb>
        <n-breadcrumb-item>
          <RouterLink to="/room">
            房间名称
          </RouterLink>
        </n-breadcrumb-item>
        <n-breadcrumb-item>
          <RouterLink to="/list">
            设备列表
          </RouterLink>
        </n-breadcrumb-item>
        <n-breadcrumb-item>
          设备名称
        </n-breadcrumb-item>
      </n-breadcrumb>
    </template>
    <template #content>
      <div class="item">
        <n-upload
          action="#"
          :max="1"
          :show-file-list="false"
        >
          <n-image
            width="100%"
            height="200px"
            :preview-disabled="true"
            :src="device.url"
          />
        </n-upload>
        <n-form>
          <n-form-item
            label="状态"
            label-placement="left"
          >
            <n-switch />
          </n-form-item>
          <n-form-item label="WIFI">
            <n-input placeholder="输入WIFI" />
          </n-form-item>
          <n-form-item label="WIFI密码">
            <n-input placeholder="输入WI-FI密码" />
          </n-form-item>
          <n-form-item>
            <n-button
              type="info"
              block
            >
              保存
            </n-button>
          </n-form-item>
        </n-form>
      </div>
    </template>
  </Layout>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter, RouterLink } from 'vue-router'
import Layout from '@/components/Layout.vue'

const router = useRouter()
const device = reactive({ check: false, url: new URL('./img/3.png', import.meta.url).href })
</script>
<style lang="scss" scoped>
.item {
  height: 100%;
  flex: 1 0 160px;
  padding: 40px 0;

  :deep(.n-upload-trigger) {
    cursor: pointer;
  }

  :deep(.n-form) {
    min-width: 300px;
    max-width: 50%;
    margin: 0 auto;
  }
}
</style>
