<template>
  <div class="work-order-export">
    <h2>井盖设备处置工单导出</h2>
    <el-card>
      <el-table
          :data="workOrders"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
        <el-table-column prop="purpose" label="用途"></el-table-column>
        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 16px;">
        <el-button type="primary" @click="exportSelected">导出选中</el-button>
        <el-button type="success" @click="exportAll">导出全部</el-button>
      </el-row>
    </el-card>
  </div>
</template>

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

// 模拟数据
const workOrders = ref([
  {
    orderNumber: 'W20230915001',
    caseNumber: 'C20230915001',
    alarmLevel: '紧急',
    alarmType: '损坏',
    alarmDescription: '井盖破损严重，存在安全隐患。',
    purpose: '排水',
    assignedUnit: '水务局',
    address: '上海市浦东新区陆家嘴环路1000号',
  },
  // 更多模拟数据...
]);

const selectedOrders = ref([]);

// 处理表格选择变化
function handleSelectionChange(val) {
  selectedOrders.value = val;
}

// 导出选中的工单
function exportSelected() {
  console.log('导出选中的工单:', selectedOrders.value);
  // 在这里可以调用 API 或使用文件导出库来导出选中的工单
}

// 导出全部工单
function exportAll() {
  console.log('导出全部工单:', workOrders.value);
  // 在这里可以调用 API 或使用文件导出库来导出全部工单
}

onMounted(() => {
  // 在这里可以调用 API 获取实际的数据
});
</script>

<style scoped>
.work-order-export {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
