<template>
  <div class="broadcast-task-management">
    <!-- 查询条件 -->
    <el-card class="filter-section">
      <el-form :model="queryParams" ref="searchForm" :inline="true" class="search-form">
        <!-- 控制对象条件 -->
        <el-form-item label="目标分区" style="width: 220px;">
          <el-select v-model="queryParams.targetZone" placeholder="请选择目标分区">
            <el-option label="全部" value="" />
            <el-option label="全区" value="ZONE-ALL" />
            <el-option label="分区1" value="ZONE-001" />
            <el-option label="分区2" value="ZONE-002" />
            <el-option label="分区3" value="ZONE-003" />
            <el-option label="分区4" value="ZONE-004" />
          </el-select>
        </el-form-item>

        <!-- 广播任务条件 -->
        <el-form-item label="内容类型" style="width: 220px;">
          <el-select v-model="queryParams.contentType" placeholder="请选择内容类型">
            <el-option label="全部" value="" />
            <el-option label="紧急通知" value="EMG" />
            <el-option label="寻呼广播" value="PAGE" />
            <el-option label="普通通知" value="NOTICE" />
          </el-select>
        </el-form-item>

        <!-- 执行状态条件 -->
        <el-form-item label="任务状态" style="width: 220px;">
          <el-select v-model="queryParams.broadcastStatus" placeholder="请选择任务状态">
            <el-option label="全部" value="" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已完成" value="已完成" />
            <el-option label="未开始" value="未开始" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          <el-button icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="data-table">
      <el-table
          :data="broadcastList"
          border
          v-loading="isLoading"
      >
        <el-table-column label="任务ID" prop="taskId" align="center" width="120" />
        <el-table-column label="目标分区" prop="targetZoneIds" align="center">
          <template #default="scope">
            {{ scope.row.targetZoneIds === 'ZONE-ALL' ? '全区' : scope.row.targetZoneIds.split(',').join('、') }}
          </template>
        </el-table-column>
        <el-table-column label="当前音量" prop="currentVolume" align="right" width="100">
          <template #default="scope">
            <span>{{ scope.row.currentVolume }} dB</span>
          </template>
        </el-table-column>
        <el-table-column label="设定音量" prop="setVolume" align="right" width="100">
          <template #default="scope">
            <span>{{ scope.row.setVolume }} dB</span>
          </template>
        </el-table-column>
        <el-table-column label="开关状态" prop="switchStatus" align="center" width="100">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.switchStatus)">
              {{ scope.row.switchStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="内容类型" prop="contentCode" align="center">
          <template #default="scope">
            {{ getContentName(scope.row.contentCode) }}
          </template>
        </el-table-column>
        <el-table-column label="优先级" prop="priority" align="center" width="80">
          <template #default="scope">
            <el-badge :value="scope.row.priority" :type="priorityToType(scope.row.priority)" />
          </template>
        </el-table-column>
        <el-table-column label="任务状态" prop="broadcastStatus" align="center" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.broadcastStatus)">
              {{ scope.row.broadcastStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="operator" align="center" width="120" />
        <el-table-column label="开始时间" prop="startTime" align="center" width="180" />
      </el-table>

      <!-- 分页器 -->
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getBroadcastTaskList } from "@/api/publicBroadcasting/publicBroadcasting"; // 假设API路径

// 查询参数
const queryParams = reactive({
  targetZone: '', // 目标分区（ZONE-ALL或分区ID）
  contentType: '', // 内容类型（EMG/PAGE/NOTICE）
  broadcastStatus: '', // 任务状态
  pageNum: 1,
  pageSize: 10,
  interfaceName: "广播控制中心"
});

// 表格数据
const broadcastList = ref([]);
const total = ref(0);
const isLoading = ref(false);

const getList = async () => {
  isLoading.value = true;
  try {
    const mockData = getBroadcastTaskList(queryParams);
    // 过滤条件处理
    let filteredData = (await mockData).data.list;

    // 目标分区过滤
    if (queryParams.targetZone) {
      filteredData = filteredData.filter(item =>
          item.targetZoneIds.includes(queryParams.targetZone) ||
          (queryParams.targetZone === 'ZONE-ALL' && item.targetZoneIds === 'ZONE-ALL')
      );
    }

    // 内容类型过滤（前缀匹配）
    if (queryParams.contentType) {
      filteredData = filteredData.filter(item =>
          item.contentCode.startsWith(queryParams.contentType)
      );
    }

    // 任务状态过滤
    if (queryParams.broadcastStatus) {
      filteredData = filteredData.filter(item =>
          item.broadcastStatus === queryParams.broadcastStatus
      );
    }

    // 分页处理
    const start = (queryParams.pageNum - 1) * queryParams.pageSize;
    const end = start + queryParams.pageSize;
    broadcastList.value = filteredData.slice(start, end);
    total.value = filteredData.length;
  } catch (error) {
    console.error("获取数据失败", error);
  } finally {
    isLoading.value = false;
  }
};

// 搜索方法
const handleSearch = () => {
  queryParams.pageNum = 1; // 重置页码
  getList();
};

// 重置查询
const resetSearch = () => {
  queryParams.targetZone = '';
  queryParams.contentType = '';
  queryParams.broadcastStatus = '';
  queryParams.pageNum = 1;
  getList();
};

// 状态标签类型映射
const getTagType = (status) => {
  return status === '开启' ? 'success' : status === '关闭' ? 'danger' : '';
};

// 内容类型转名称（完整映射）
const getContentName = (code) => {
  return {
    'EMG-ALARM': '紧急警报',
    'EMG-FIRE': '消防紧急',
    'EMG-EVACUATION': '紧急疏散',
    'PAGE-ANNOUNCE': '寻呼广播',
    'PAGE-STAFF': '员工寻呼',
    'PAGE-GUEST': '访客寻呼',
    'NOTICE-INFO': '普通通知',
    'NOTICE-MAINTENANCE': '维修通知',
    'NOTICE-FESTIVAL': '节日通知',
    'NOTICE-REMINDER': '提醒通知',
    'NOTICE-UPDATE': '系统更新'
  }[code] || '未知类型';
};

// 优先级转标签类型
const priorityToType = (priority) => {
  return priority === 1 ? 'danger' : priority === 2 ? 'warning' : 'success';
};

// 任务状态标签类型
const getStatusType = (status) => {
  return {
    '进行中': 'info',
    '已完成': 'success',
    '未开始': 'warning'
  }[status] || '';
};

// 初始化加载
getList();
</script>

<style scoped>
/* 样式保持不变 */
.filter-section {
  margin-bottom: 20px;
  padding: 20px;
}

.data-table {
  min-height: 400px;
}

.el-table .cell {
  white-space: nowrap;
  padding: 8px 12px;
}

.el-tag {
  margin-right: 5px;
}

.el-badge {
  margin-left: 5px;
}
</style>
