<template>
  <Layout>
    <template #content>
      <div class="item">
        <n-upload
          action="#"
          :max="1"
          :show-file-list="false"
        >
          <n-image
            width="100%"
            height="200px"
            :preview-disabled="true"
            :src="data.erUrl"
          />
        </n-upload>
        <n-form>
          <n-form-item label="取个好名字">
            <n-input
              v-model:value="data.name"
              placeholder="输入房间名称"
            />
          </n-form-item>
        </n-form>
      </div>
    </template>
    <template #bottom>
      <span>给房间取个名</span>
      <n-button
        type="warning"
        @click="change"
      >
        继续
      </n-button>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/Layout.vue'
import { useRouter } from 'vue-router'
import useStore from '@/store'
import { reactive } from 'vue'

const router = useRouter()
const store = useStore()
const data = reactive({
  erUrl: new URL('./img/2.png', import.meta.url).href,
  name: ''
})

function change() {
  router.push('/device')
  store.setRoomData({ name: 'test', id: 1 })
}
</script>
<style lang="scss" scoped>
.item {
  height: 100%;
  flex: 1 0 160px;
  padding: 40px 0;

  :deep(.n-upload-trigger) {
    cursor: pointer;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 330px;

    &>div {
      width: 100%;
      cursor: pointer;
    }
  }

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