<template>
  <div class="list">
    <div class="list-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>
    </div>
    <div class="list-content">
      <div class="list-content-item">
        <n-image
          width="200"
          height="200"
          :preview-disabled="true"
          :src="device.url"
        />
        <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>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter, RouterLink } from 'vue-router'

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

  &-title {
    font-size: 18px;
  }

  &-content {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: calc(100% - 47px);
    overflow-y: auto;
    gap: 15px;

    &-item {
      height: 100%;
      flex: 1 0 160px;
      padding: 40px 5%;
      background: #383d43;
      box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
      border-radius: 12px;
      overflow: hidden;
      text-align: center;

      :deep(.n-image) {
        margin: 0 auto;
      }

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

  }
}
</style>
