<template>
  <el-container>
    <!-- 任务下发 -->
    <el-main>
      <div class="task-management">
        <h2>任务下发</h2>
        <el-form :model="searchForm" ref="searchFormRef" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="终端编号">
                <el-input v-model="searchForm.deviceId" placeholder="请输入终端编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="问题状态">
                <el-select v-model="searchForm.status" placeholder="请选择问题状态">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="searchTasks">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table :data="filteredTasks" style="width: 100%" border>
          <el-table-column prop="deviceId" label="终端编号" width="180" />
          <el-table-column prop="problem" label="问题描述" width="300" />
          <el-table-column prop="status" label="问题状态" width="180" />
          <el-table-column prop="lastUpdate" label="最后更新时间" width="180" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="assignTask(row)">下发任务</el-button>
              <el-button size="small" type="info" @click="viewMaintenanceRecord(row)">查看维护记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
  <!-- 维护记录 -->
  <el-main>
    <div class="maintenance-record">
      <h2>维护记录</h2>
      <el-table :data="maintenanceRecords" style="width: 100%" border>
        <el-table-column prop="maintenanceDate" label="维护日期" width="180" />
        <el-table-column prop="description" label="维护描述" width="300" />
        <el-table-column prop="location" label="位置信息" width="180" />
        <el-table-column prop="maintainer" label="维护人员" width="180" />
      </el-table>
    </div>
  </el-main>
</template>

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

// 模拟数据
const tasks = ref([
  {
    deviceId: 'D20230915001',
    problem: '信号弱',
    status: '未处理',
    lastUpdate: '2023-09-15',
  },
  {
    deviceId: 'D20230915002',
    problem: '无法连接',
    status: '已处理',
    lastUpdate: '2023-09-16',
  },
  // 更多模拟数据...
]);

const maintenanceRecords = ref([
  {
    maintenanceDate: '2023-09-15',
    description: '更换电池',
    location: '上海市浦东新区陆家嘴环路1000号',
    maintainer: '张三',
  },
  // 更多模拟数据...
]);

// 搜索表单
const searchForm = ref({
  deviceId: '',
  status: '',
});

// 问题状态选项
const statusOptions = ref([
  { value: '未处理', label: '未处理' },
  { value: '已处理', label: '已处理' },
]);

// 过滤后的任务列表
const filteredTasks = ref(tasks.value);

// 查询任务
function searchTasks() {
  const { deviceId, status } = searchForm.value;
  filteredTasks.value = tasks.value.filter(task => {
    return (
        (deviceId === '' || task.deviceId.includes(deviceId)) &&
        (status === '' || task.status === status)
    );
  });
}

// 重置搜索表单
function resetForm() {
  searchForm.value = {
    deviceId: '',
    status: '',
  };
  filteredTasks.value = tasks.value;
}

// 下发任务
function assignTask(row) {
  // 假设这里有逻辑处理任务下发
  ElMessage.success(`任务已下发给 ${row.deviceId}`);
}

// 查看维护记录
function viewMaintenanceRecord(row) {
  // 假设这里有逻辑处理维护记录的展示
  console.log(`查看维护记录: ${row.deviceId}`);
}

// 初始化
onMounted(() => {
  // 初始化操作
});
</script>
