<template>
  <a-form
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 19 }"
    class="share-form"
  >
    <a-form-item label="作品链接">
      <a-input disabled :value="url" />
    </a-form-item>
    <!-- <a-form-item label="作品葵花码">
      <img :src="room.leaderMiniCode" class="mini-code" />
    </a-form-item> -->
  </a-form>
</template>

<script lang="ts" setup>
import { useRoomStore } from '@/store'
import type { Room } from '@/store'

defineOptions({ name: 'RoomShare' })
const props = defineProps<{ room: Room; num: string }>()
const roomStore = useRoomStore()
const url = roomStore.getShareUrl({
  roomId: props.room.id,
  num: props.num,
  role: 'customer'
})
</script>

<style lang="scss" scoped>
.share-form {
  margin: 20px 0;
}
.mini-code {
  width: 120px;
  height: 120px;
}
</style>
