<template>
  <div class="screens-page">
    <h2 class="page-title">大屏控制</h2>
    <el-card>
      <div class="toolbar">
        <el-button type="primary" :loading="loading" @click="refresh">刷新</el-button>
      </div>
      <el-table v-if="screensStore.list.length > 0" :data="screensStore.list" stripe>
        <el-table-column prop="screenName" label="屏幕名称" width="180" />
        <el-table-column prop="currentRoomId" label="当前绑定房间" width="140">
          <template #default="{ row }">
            {{ row.currentRoomId ? `房间 ${row.currentRoomId}` : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="online" label="在线状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.online ? 'success' : 'info'" size="small">
              {{ row.online ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="投屏操作" min-width="320">
          <template #default="{ row }">
            <el-select
              v-model="bindRoomId[row.screenName]"
              placeholder="选择房间"
              clearable
              filterable
              style="width: 160px; margin-right: 8px"
            >
              <el-option
                v-for="r in roomOptions"
                :key="r.roomId"
                :label="`房间 ${r.roomId}`"
                :value="r.roomId"
              />
            </el-select>
            <el-button type="primary" :loading="binding[row.screenName]" @click="doBind(row)">
              投屏
            </el-button>
            <el-button
              v-if="row.currentRoomId"
              type="danger"
              plain
              :loading="binding[row.screenName]"
              @click="doUnbind(row)"
            >
              取消投屏
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else description="暂无大屏配置，大屏端连接后将自动出现在列表中" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useScreensStore } from '../stores/screens'
import { useRoomsStore } from '../stores/rooms'

const screensStore = useScreensStore()
const roomsStore = useRoomsStore()
const bindRoomId = reactive({})
const binding = reactive({})
const roomOptions = ref([])
const loading = ref(false)

async function loadRooms() {
  await roomsStore.fetchRooms()
  roomOptions.value = roomsStore.list ?? []
}

async function doBind(row) {
  const roomId = bindRoomId[row.screenName]
  if (!roomId) {
    ElMessage.warning('请先选择房间')
    return
  }
  binding[row.screenName] = true
  try {
    await screensStore.bindRoom(row.screenName, roomId)
    ElMessage.success('投屏成功，大屏将切换至该房间')
  } catch {
    ElMessage.error('投屏失败')
  } finally {
    binding[row.screenName] = false
  }
}

async function doUnbind(row) {
  binding[row.screenName] = true
  try {
    await screensStore.bindRoom(row.screenName, null)
    bindRoomId[row.screenName] = null
    ElMessage.success('已取消投屏，大屏将显示等待画面')
  } catch {
    ElMessage.error('取消失败')
  } finally {
    binding[row.screenName] = false
  }
}

async function refresh() {
  loading.value = true
  try {
    await Promise.all([loadRooms(), screensStore.fetchScreens()])
    ElMessage.success('已刷新')
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await loadRooms()
  await screensStore.fetchScreens()
})
</script>

<style scoped>
.page-title {
  margin-bottom: 20px;
  font-size: 20px;
}
.toolbar {
  margin-bottom: 16px;
}
</style>
