<template>
  <div class="room-service-container">
    <vab-card>
      <template #header>
        <div class="header-box">
          <span>房务状态监控</span>
          <div class="actions">
            <el-button type="warning" @click="handleMockCheckout"> <vab-icon icon="logout-box-r-line" /> 模拟退房触发清洁</el-button>
            <el-button type="primary" @click="handleAutoDispatch"> <vab-icon icon="flashlight-line" /> 智能派单</el-button>
          </div>
        </div>
      </template>

      <!-- 房态统计 -->
      <el-row :gutter="20" class="mb-20">
        <el-col :span="6">
          <div class="status-card dirty">
            <div class="title">待清洁 (脏房)</div>
            <div class="count">{{ getStatusCount('dirty') }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="status-card cleaning">
            <div class="title">清洁中</div>
            <div class="count">{{ getStatusCount('cleaning') }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="status-card checking">
            <div class="title">待验收</div>
            <div class="count">{{ getStatusCount('checking') }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="status-card clean">
            <div class="title">今日已完成</div>
            <div class="count">{{ getStatusCount('clean') }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 任务列表 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="清洁任务" name="task">
          <el-table :data="taskList" border stripe>
            <el-table-column prop="taskNo" label="任务编号" />
            <el-table-column prop="roomNo" label="房间号" width="120" />
            <el-table-column prop="type" label="任务类型" width="120">
              <template #default="{ row }">
                <el-tag :type="row.type === 'normal' ? '' : 'warning'">{{ row.type === 'normal' ? '退房清洁' : '二次返工' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cleaner" label="保洁员" width="120" />
            <el-table-column prop="status" label="当前状态" width="120">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button v-if="row.status === 'dirty'" type="primary" size="small" @click="handleStart(row)">开始清洁</el-button>
                <el-button v-if="row.status === 'cleaning'" type="success" size="small" @click="handleFinish(row)">完成清洁</el-button>
                <el-button v-if="row.status === 'checking'" type="warning" size="small" @click="handleCheck(row)">验收</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </vab-card>

    <!-- 验收弹窗 -->
    <el-dialog v-model="checkDialogVisible" title="房务验收" width="500px">
      <el-form label-width="80px">
        <el-form-item label="房间号">{{ currentTask?.roomNo }}</el-form-item>
        <el-form-item label="验收结果">
          <el-radio-group v-model="checkResult">
            <el-radio label="pass">合格 (变更为干净房)</el-radio>
            <el-radio label="fail">不合格 (发起二次清扫)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注说明" v-if="checkResult === 'fail'">
          <el-input type="textarea" v-model="checkRemark" placeholder="请说明不合格原因..." />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="checkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCheck">提交验收</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'RoomService',
})

const activeTab = ref('task')
const checkDialogVisible = ref(false)
const currentTask = ref(null)
const checkResult = ref('pass')
const checkRemark = ref('')

const taskList = ref([
  { id: 1, taskNo: 'RW2026012401', roomNo: '305', type: 'normal', cleaner: '张阿姨', status: 'dirty', createTime: '2026-01-24 10:00' },
  { id: 2, taskNo: 'RW2026012402', roomNo: '201', type: 'normal', cleaner: '李阿姨', status: 'cleaning', createTime: '2026-01-24 10:30' },
  { id: 3, taskNo: 'RW2026012403', roomNo: '102', type: 'normal', cleaner: '王阿姨', status: 'checking', createTime: '2026-01-24 09:00' },
  { id: 4, taskNo: 'RW2026012404', roomNo: '405', type: 'rework', cleaner: '张阿姨', status: 'clean', createTime: '2026-01-23 16:00' },
])

// Helpers
const getStatusLabel = (status) => {
  const map = { dirty: '待清洁', cleaning: '清洁中', checking: '待验收', clean: '已完成' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { dirty: 'danger', cleaning: 'primary', checking: 'warning', clean: 'success' }
  return map[status]
}
const getStatusCount = (status) => {
  return taskList.value.filter(t => t.status === status).length
}

// Methods
const handleMockCheckout = () => {
  const newTask = {
    id: Date.now(),
    taskNo: `RW${Date.now()}`,
    roomNo: `${Math.floor(Math.random() * 5 + 1)}0${Math.floor(Math.random() * 9 + 1)}`,
    type: 'normal',
    cleaner: '待分配',
    status: 'dirty',
    createTime: new Date().toLocaleString()
  }
  taskList.value.unshift(newTask)
  ElMessage.success(`模拟退房成功，已生成 ${newTask.roomNo} 房间的清洁任务`)
}

const handleAutoDispatch = () => {
  taskList.value.forEach(task => {
    if (task.cleaner === '待分配') {
      task.cleaner = '智能派单员'
    }
  })
  ElMessage.success('已自动分配所有待分配任务')
}

const handleStart = (row) => {
  row.status = 'cleaning'
  ElMessage.success('开始清洁')
}

const handleFinish = (row) => {
  row.status = 'checking'
  ElMessage.success('清洁完成，等待验收')
}

const handleCheck = (row) => {
  currentTask.value = row
  checkResult.value = 'pass'
  checkRemark.value = ''
  checkDialogVisible.value = true
}

const confirmCheck = () => {
  if (checkResult.value === 'pass') {
    currentTask.value.status = 'clean'
    ElMessage.success('验收通过，房间已变更为干净房')
  } else {
    // Re-create task or reset status
    currentTask.value.status = 'dirty'
    currentTask.value.type = 'rework' // Mark as rework
    ElMessage.warning('验收不合格，已退回重做')
  }
  checkDialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.room-service-container {
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .mb-20 { margin-bottom: 20px; }

  .status-card {
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;

    &:hover { transform: translateY(-5px); }

    .title { font-size: 14px; opacity: 0.9; margin-bottom: 10px; }
    .count { font-size: 32px; font-weight: bold; }

    &.dirty { background: linear-gradient(135deg, #f56c6c, #f78989); }
    &.cleaning { background: linear-gradient(135deg, #409eff, #66b1ff); }
    &.checking { background: linear-gradient(135deg, #e6a23c, #f3d19e); }
    &.clean { background: linear-gradient(135deg, #67c23a, #85ce61); }
  }
}
</style>
