<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- 顶部导航 -->
    <div class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">会议管理</h1>
          <div class="flex space-x-4">
            <button @click="showAddMeetingModal = true" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              预约会议
            </button>
            <button @click="showAddRoomModal = true" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">
              添加会议室
            </button>
            <button @click="exportMeetingData" class="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700">
              导出数据
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 会议统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">今日会议</h3>
          <p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">{{ todayMeetings }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">进行中</h3>
          <p class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">{{ ongoingMeetings }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">待开始</h3>
          <p class="mt-2 text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ upcomingMeetings }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">会议室数</h3>
          <p class="mt-2 text-3xl font-bold text-red-600 dark:text-red-400">{{ totalRooms }}</p>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议室</label>
            <select v-model="filters.room" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="room in meetingRooms" :key="room.id" :value="room.id">{{ room.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议状态</label>
            <select v-model="filters.status" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="status in meetingStatuses" :key="status.id" :value="status.id">{{ status.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">日期范围</label>
            <div class="flex space-x-2">
              <input type="date" v-model="filters.startDate" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <input type="date" v-model="filters.endDate" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">搜索</label>
            <input type="text" v-model="filters.search" placeholder="会议主题/主持人" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
        </div>
      </div>

      <!-- 会议列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">会议信息</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">时间地点</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">参会人员</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <tr v-for="meeting in filteredMeetings" :key="meeting.id">
              <td class="px-6 py-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ meeting.title }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">主持人: {{ meeting.host }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">类型: {{ getMeetingTypeName(meeting.type) }}</div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 dark:text-white">{{ formatDate(meeting.date) }}</div>
                <div class="text-sm text-gray-900 dark:text-white">{{ meeting.startTime }} - {{ meeting.endTime }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ getRoomName(meeting.roomId) }}</div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 dark:text-white">参会人数: {{ meeting.participants.length }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">已确认: {{ meeting.confirmedParticipants }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">待确认: {{ meeting.pendingParticipants }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getStatusClass(meeting.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                  {{ getStatusName(meeting.status) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button @click="viewMeeting(meeting)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</button>
                <button @click="editMeeting(meeting)" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300 mr-3">编辑</button>
                <button @click="cancelMeeting(meeting)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">取消</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 预约会议模态框 -->
    <div v-if="showAddMeetingModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">预约会议</h2>
        <form @submit.prevent="addMeeting">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议主题</label>
            <input type="text" v-model="newMeeting.title" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议类型</label>
            <select v-model="newMeeting.type" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="type in meetingTypes" :key="type.id" :value="type.id">{{ type.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议室</label>
            <select v-model="newMeeting.roomId" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="room in availableRooms" :key="room.id" :value="room.id">{{ room.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">日期</label>
            <input type="date" v-model="newMeeting.date" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">时间</label>
            <div class="flex space-x-2">
              <input type="time" v-model="newMeeting.startTime" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <input type="time" v-model="newMeeting.endTime" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">参会人员</label>
            <select v-model="newMeeting.participants" multiple class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="user in users" :key="user.id" :value="user.id">{{ user.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议描述</label>
            <textarea v-model="newMeeting.description" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="4"></textarea>
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showAddMeetingModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
              预约
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 添加会议室模态框 -->
    <div v-if="showAddRoomModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">添加会议室</h2>
        <form @submit.prevent="addRoom">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会议室名称</label>
            <input type="text" v-model="newRoom.name" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">位置</label>
            <input type="text" v-model="newRoom.location" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">容量</label>
            <input type="number" v-model="newRoom.capacity" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">设备</label>
            <div class="space-y-2">
              <label class="inline-flex items-center">
                <input type="checkbox" v-model="newRoom.equipment.projector" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">投影仪</span>
              </label>
              <label class="inline-flex items-center">
                <input type="checkbox" v-model="newRoom.equipment.whiteboard" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">白板</span>
              </label>
              <label class="inline-flex items-center">
                <input type="checkbox" v-model="newRoom.equipment.videoConference" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">视频会议</span>
              </label>
            </div>
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showAddRoomModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
              添加
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 会议数据
const meetings = ref([
  {
    id: 1,
    title: '项目进度汇报',
    type: 1,
    roomId: 1,
    date: '2024-03-20',
    startTime: '14:00',
    endTime: '15:30',
    host: '张三',
    participants: [1, 2, 3],
    confirmedParticipants: 2,
    pendingParticipants: 1,
    status: 1,
    description: '汇报项目最新进展和下一步计划'
  },
  {
    id: 2,
    title: '技术方案讨论',
    type: 2,
    roomId: 2,
    date: '2024-03-21',
    startTime: '10:00',
    endTime: '11:30',
    host: '李四',
    participants: [2, 3, 4],
    confirmedParticipants: 1,
    pendingParticipants: 2,
    status: 2,
    description: '讨论系统架构和技术选型'
  }
])

// 会议室数据
const meetingRooms = ref([
  {
    id: 1,
    name: '会议室A',
    location: '3楼',
    capacity: 10,
    equipment: {
      projector: true,
      whiteboard: true,
      videoConference: false
    }
  },
  {
    id: 2,
    name: '会议室B',
    location: '4楼',
    capacity: 20,
    equipment: {
      projector: true,
      whiteboard: true,
      videoConference: true
    }
  }
])

// 会议类型
const meetingTypes = [
  { id: 1, name: '项目会议' },
  { id: 2, name: '技术会议' },
  { id: 3, name: '部门会议' },
  { id: 4, name: '客户会议' },
  { id: 5, name: '其他会议' }
]

// 会议状态
const meetingStatuses = [
  { id: 1, name: '待开始' },
  { id: 2, name: '进行中' },
  { id: 3, name: '已结束' },
  { id: 4, name: '已取消' }
]

// 用户列表
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' }
]

// 筛选条件
const filters = ref({
  room: '',
  status: '',
  startDate: '',
  endDate: '',
  search: ''
})

// 模态框状态
const showAddMeetingModal = ref(false)
const showAddRoomModal = ref(false)

// 新会议表单
const newMeeting = ref({
  title: '',
  type: '',
  roomId: '',
  date: '',
  startTime: '',
  endTime: '',
  participants: [],
  description: ''
})

// 新会议室表单
const newRoom = ref({
  name: '',
  location: '',
  capacity: '',
  equipment: {
    projector: false,
    whiteboard: false,
    videoConference: false
  }
})

// 计算属性
const filteredMeetings = computed(() => {
  return meetings.value.filter(meeting => {
    const matchesRoom = !filters.value.room || meeting.roomId === filters.value.room
    const matchesStatus = !filters.value.status || meeting.status === filters.value.status
    const matchesDate = (!filters.value.startDate || meeting.date >= filters.value.startDate) &&
                       (!filters.value.endDate || meeting.date <= filters.value.endDate)
    const matchesSearch = !filters.value.search ||
      meeting.title.toLowerCase().includes(filters.value.search.toLowerCase()) ||
      meeting.host.toLowerCase().includes(filters.value.search.toLowerCase())
    return matchesRoom && matchesStatus && matchesDate && matchesSearch
  })
})

const todayMeetings = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  return meetings.value.filter(meeting => meeting.date === today).length
})

const ongoingMeetings = computed(() => {
  return meetings.value.filter(meeting => meeting.status === 2).length
})

const upcomingMeetings = computed(() => {
  return meetings.value.filter(meeting => meeting.status === 1).length
})

const totalRooms = computed(() => {
  return meetingRooms.value.length
})

const availableRooms = computed(() => {
  return meetingRooms.value.filter(room => {
    const isAvailable = !meetings.value.some(meeting => 
      meeting.roomId === room.id && 
      meeting.date === newMeeting.value.date &&
      (
        (newMeeting.value.startTime >= meeting.startTime && newMeeting.value.startTime < meeting.endTime) ||
        (newMeeting.value.endTime > meeting.startTime && newMeeting.value.endTime <= meeting.endTime)
      )
    )
    return isAvailable
  })
})

// 获取会议类型名称
const getMeetingTypeName = (typeId) => {
  const type = meetingTypes.find(t => t.id === typeId)
  return type ? type.name : '未知类型'
}

// 获取会议室名称
const getRoomName = (roomId) => {
  const room = meetingRooms.value.find(r => r.id === roomId)
  return room ? `${room.name} (${room.location})` : '未知会议室'
}

// 获取状态名称
const getStatusName = (statusId) => {
  const status = meetingStatuses.find(s => s.id === statusId)
  return status ? status.name : '未知'
}

// 获取状态样式
const getStatusClass = (statusId) => {
  const classes = {
    1: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-300',
    2: 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-300',
    3: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
    4: 'bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-300'
  }
  return classes[statusId] || classes[1]
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 添加会议
const addMeeting = () => {
  const meeting = {
    id: meetings.value.length + 1,
    status: 1, // 默认待开始
    confirmedParticipants: 0,
    pendingParticipants: newMeeting.value.participants.length,
    ...newMeeting.value
  }
  
  meetings.value.push(meeting)
  showAddMeetingModal.value = false
  resetNewMeeting()
}

// 添加会议室
const addRoom = () => {
  const room = {
    id: meetingRooms.value.length + 1,
    ...newRoom.value
  }
  
  meetingRooms.value.push(room)
  showAddRoomModal.value = false
  resetNewRoom()
}

// 重置新会议表单
const resetNewMeeting = () => {
  newMeeting.value = {
    title: '',
    type: '',
    roomId: '',
    date: '',
    startTime: '',
    endTime: '',
    participants: [],
    description: ''
  }
}

// 重置新会议室表单
const resetNewRoom = () => {
  newRoom.value = {
    name: '',
    location: '',
    capacity: '',
    equipment: {
      projector: false,
      whiteboard: false,
      videoConference: false
    }
  }
}

// 查看会议
const viewMeeting = (meeting) => {
  // 实现查看会议的逻辑
  console.log('查看会议:', meeting)
}

// 编辑会议
const editMeeting = (meeting) => {
  // 实现编辑会议的逻辑
  console.log('编辑会议:', meeting)
}

// 取消会议
const cancelMeeting = (meeting) => {
  if (confirm(`确定要取消会议 ${meeting.title} 吗？`)) {
    const index = meetings.value.findIndex(m => m.id === meeting.id)
    if (index !== -1) {
      meetings.value[index].status = 4 // 设置为已取消
    }
  }
}

// 导出会议数据
const exportMeetingData = () => {
  // 实现导出会议数据的逻辑
  console.log('导出会议数据')
}
</script> 