<template>
  <div>
    <h1>屠宰无害化</h1>
    
    <!-- 搜索和操作栏 -->
    <a-card style="margin-bottom: 16px;">
      <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
        <a-input v-model:value="searchKeyword" placeholder="输入屠宰场名称、批次号或处理编号" style="width: 300px;">
          <template #prefix>
            <span class="iconfont icon-sousuo"></span>
          </template>
        </a-input>
        
        <a-select v-model:value="slaughterhouseFilter" placeholder="屠宰场" style="width: 150px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option v-for="house in slaughterhouses" :key="house.id" :value="house.id">
            {{ house.name }}
          </a-select-option>
        </a-select>
        
        <a-select v-model:value="processTypeFilter" placeholder="处理类型" style="width: 120px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="slaughter">正常屠宰</a-select-option>
          <a-select-option value="harmless">无害化处理</a-select-option>
        </a-select>
        
        <a-select v-model:value="statusFilter" placeholder="处理状态" style="width: 120px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="pending">待处理</a-select-option>
          <a-select-option value="processing">处理中</a-select-option>
          <a-select-option value="completed">已完成</a-select-option>
          <a-select-option value="abnormal">异常</a-select-option>
        </a-select>
        
        <a-range-picker v-model:value="dateRange" style="width: 300px;" />
        
        <a-button type="primary" @click="handleSearch" style="margin-left: auto;">
          <span class="iconfont icon-sousuo"></span> 搜索
        </a-button>
        
        <a-button type="default" @click="handleReset">重置</a-button>
        
        <a-button type="dashed" @click="handleImport">
          <span class="iconfont icon-daoru"></span> 导入
        </a-button>
        
        <a-button type="dashed" @click="handleExport">
          <span class="iconfont icon-daochu"></span> 导出
        </a-button>
      </div>
    </a-card>
    
    <!-- 数据统计卡片 -->
    <a-row gutter={24} style="margin-bottom: 16px;">
      <a-col :span="6">
        <a-statistic title="本月屠宰量" :value="monthlySlaughterCount" suffix="头" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="本月无害化处理量" :value="monthlyHarmlessCount" suffix="头" :valueStyle="{ color: '#1890ff' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="待处理数量" :value="pendingCount" suffix="批" :valueStyle="{ color: '#faad14' }" />
     </a-col>
      <a-col :span="6">
        <a-statistic title="异常处理数量" :value="abnormalCount" suffix="批" :valueStyle="{ color: '#f5222d' }" />
       </a-col>
    </a-row>
    
    <!-- 处理趋势图表 -->
    <a-card title="屠宰与无害化处理趋势" style="margin-bottom: 16px;">
      <div style="height: 300px;" ref="trendChartRef"></div>
    </a-card>
    
    <!-- 处理列表 -->
    <a-card>
      <a-table 
        :columns="columns" 
        :data-source="processList" 
        :pagination="pagination" 
        row-key="id" 
        :row-selection="{ selectedRowKeys, onChange: onSelectChange }" 
        :scroll="{ x: 'max-content' }"
      >
        <!-- 自定义单元格渲染 -->
        <template #bodyCell="{ column, record }">
          <!-- 处理类型列 -->
          <template v-if="column.key === 'processType'">
            {{ getProcessTypeText(record.processType) }}
          </template>
          <!-- 处理状态列 -->
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
          </template>
          <!-- 操作列 -->
          <template v-if="column.key === 'action'">
            <div style="display: flex; gap: 8px;">
              <a-button size="small" @click="handleView(record)">查看</a-button>
              <a-button size="small" type="primary" @click="handleEdit(record)" v-if="record.status !== 'completed'">编辑</a-button>
              <a-button size="small" danger @click="handleDelete(record.id)" v-if="record.status !== 'completed'">删除</a-button>
              <a-button size="small" @click="handleMarkComplete(record.id)" v-if="record.status === 'processing'">标记完成</a-button>
              <a-button size="small" @click="handleReportIssue(record.id)" v-if="record.status !== 'completed' && record.status !== 'abnormal'">报告异常</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
    
    <!-- 新增/编辑处理记录模态框 -->
    <a-modal
      v-model:open="isAddEditModalOpen"
      title="新增/编辑屠宰无害化处理记录"
      :footer="null"
      width={700}
    >
      <a-form
        :model="currentProcess"
        layout="vertical"
        style="max-width: 500px; margin: 0 auto;"
      >
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="处理编号" name="processCode" :rules="[{ required: true, message: '请输入处理编号' }]">
              <a-input v-model:value="currentProcess.processCode" placeholder="请输入处理编号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="处理类型" name="processType" :rules="[{ required: true, message: '请选择处理类型' }]">
              <a-select v-model:value="currentProcess.processType" placeholder="请选择处理类型">
                <a-select-option value="slaughter">正常屠宰</a-select-option>
                <a-select-option value="harmless">无害化处理</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="屠宰场" name="slaughterhouseId" :rules="[{ required: true, message: '请选择屠宰场' }]">
              <a-select v-model:value="currentProcess.slaughterhouseId" placeholder="请选择屠宰场">
                <a-select-option v-for="house in slaughterhouses" :key="house.id" :value="house.id">
                  {{ house.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="处理数量" name="quantity" :rules="[{ required: true, message: '请输入处理数量' }]">
              <a-input-number v-model:value="currentProcess.quantity" min={1} style="width: 100%;" placeholder="处理数量" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="处理日期" name="processDate" :rules="[{ required: true, message: '请选择处理日期' }]">
              <a-date-picker v-model:value="currentProcess.processDate" style="width: 100%;" placeholder="处理日期" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人" name="manager" :rules="[{ required: true, message: '请输入负责人' }]">
              <a-input v-model:value="currentProcess.manager" placeholder="请输入负责人" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="联系电话" name="contactPhone" :rules="[{ required: true, message: '请输入联系电话' }]">
              <a-input v-model:value="currentProcess.contactPhone" placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="处理状态" name="status" :rules="[{ required: true, message: '请选择处理状态' }]">
              <a-select v-model:value="currentProcess.status" placeholder="请选择处理状态">
                <a-select-option value="pending">待处理</a-select-option>
                <a-select-option value="processing">处理中</a-select-option>
                <a-select-option value="completed">已完成</a-select-option>
                <a-select-option value="abnormal">异常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-form-item label="处理原因" name="reason">
          <a-input.TextArea v-model:value="currentProcess.reason" placeholder="请输入处理原因" :rows="3" />
        </a-form-item>
        
        <a-form-item label="处理方法" name="method" v-if="currentProcess.processType === 'harmless'">
          <a-input.TextArea v-model:value="currentProcess.method" placeholder="请输入无害化处理方法" :rows="3" />
        </a-form-item>
        
        <a-form-item label="备注信息" name="remark">
          <a-input.TextArea v-model:value="currentProcess.remark" placeholder="请输入备注信息" :rows="2" />
        </a-form-item>
        
        <div style="display: flex; justify-content: flex-end; gap: 16px;">
          <a-button @click="isAddEditModalOpen = false">取消</a-button>
          <a-button type="primary" @click="handleSave">保存</a-button>
        </div>
      </a-form>
    </a-modal>
    
    <!-- 查看处理详情模态框 -->
    <a-modal
      v-model:open="isViewModalOpen"
      title="屠宰无害化处理详情"
      :footer="null"
      width={800}
    >
      <div v-if="viewProcess" class="process-detail">
        <div class="detail-row">
          <div class="detail-label">处理编号：</div>
          <div class="detail-value">{{ viewProcess.processCode }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">处理类型：</div>
          <div class="detail-value">{{ getProcessTypeText(viewProcess.processType) }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">屠宰场：</div>
          <div class="detail-value">{{ getSlaughterhouseName(viewProcess.slaughterhouseId) }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">处理数量：</div>
          <div class="detail-value">{{ viewProcess.quantity }} 头</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">处理日期：</div>
          <div class="detail-value">{{ viewProcess.processDate }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">负责人：</div>
          <div class="detail-value">{{ viewProcess.manager }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">联系电话：</div>
          <div class="detail-value">{{ viewProcess.contactPhone }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">处理状态：</div>
          <div class="detail-value">
            <a-tag :color="getStatusColor(viewProcess.status)">{{ getStatusText(viewProcess.status) }}</a-tag>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-label">处理原因：</div>
          <div class="detail-value">{{ viewProcess.reason || '无' }}</div>
        </div>
        <div class="detail-row" v-if="viewProcess.method">
          <div class="detail-label">处理方法：</div>
          <div class="detail-value">{{ viewProcess.method }}</div>
        </div>
        <div class="detail-row" v-if="viewProcess.abnormalReason">
          <div class="detail-label">异常原因：</div>
          <div class="detail-value">{{ viewProcess.abnormalReason }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">备注信息：</div>
          <div class="detail-value">{{ viewProcess.remark || '无' }}</div>
        </div>
        
        <!-- 图片展示 -->
        <div class="detail-row" v-if="viewProcess.photos && viewProcess.photos.length > 0">
          <div class="detail-label">现场照片：</div>
          <div class="detail-value">
            <a-image
              v-for="(photo, index) in viewProcess.photos"
              :key="index"
              :src="photo"
              style="width: 100px; height: 100px; margin-right: 8px; margin-bottom: 8px;"
              :preview="{ visible: false }"
              @click="handlePreviewImage(photo)"
            />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 24px;">
        <a-button @click="isViewModalOpen = false">关闭</a-button>
      </div>
    </a-modal>
    
    <!-- 确认对话框 -->
    <a-popconfirm
      v-model:open="isConfirmModalOpen"
      title="确认操作"
      :description="confirmMessage"
      ok-text="确认"
      cancel-text="取消"
      @confirm="handleConfirmAction"
    >
      <template #reference>
        <!-- 这里是空的，通过其他按钮触发 -->
      </template>
    </a-popconfirm>
    
    <!-- 图片预览 -->
    <a-modal v-model:open="previewVisible" title="图片预览" footer={null} @cancel="previewVisible = false">
      <img alt="预览图片" style="width: 100%;" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, h } from 'vue'
import * as echarts from 'echarts'

// 搜索条件
const searchKeyword = ref('')
const slaughterhouseFilter = ref('')
const processTypeFilter = ref('')
const statusFilter = ref('')
const dateRange = ref([])

// 统计数据
const monthlySlaughterCount = ref(1256)
const monthlyHarmlessCount = ref(78)
const pendingCount = ref(12)
const abnormalCount = ref(3)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 选中的行
const selectedRowKeys = ref([])
const onSelectChange = (newSelectedRowKeys) => {
  selectedRowKeys.value = newSelectedRowKeys
}

// 图表引用
const trendChartRef = ref(null)

// 模态框状态
const isAddEditModalOpen = ref(false)
const isViewModalOpen = ref(false)
const isConfirmModalOpen = ref(false)
const confirmMessage = ref('')
const confirmAction = ref('')
const confirmTargetId = ref('')

// 图片预览
const previewVisible = ref(false)
const previewImage = ref('')

// 当前编辑的处理记录
const currentProcess = reactive({
  id: '',
  processCode: '',
  processType: 'slaughter',
  slaughterhouseId: '',
  quantity: 1,
  processDate: '',
  manager: '',
  contactPhone: '',
  status: 'pending',
  reason: '',
  method: '',
  abnormalReason: '',
  remark: '',
  photos: []
})

// 查看的处理记录
const viewProcess = ref(null)

// 屠宰场列表
const slaughterhouses = ref([
  { id: '1', name: '阳光屠宰场' },
  { id: '2', name: '绿源屠宰场' },
  { id: '3', name: '清真屠宰场' },
  { id: '4', name: '放心肉屠宰场' },
  { id: '5', name: '现代化屠宰中心' }
])

// 处理列表数据
const processList = ref([
  {
    id: '1',
    processCode: 'S2023001',
    processType: 'slaughter',
    slaughterhouseId: '1',
    quantity: 150,
    processDate: '2023-10-01',
    manager: '张三',
    contactPhone: '13800138001',
    status: 'completed',
    reason: '正常屠宰',
    remark: '',
    photos: ['https://via.placeholder.com/300x200?text=Slaughter+1']
  },
  {
    id: '2',
    processCode: 'H2023001',
    processType: 'harmless',
    slaughterhouseId: '2',
    quantity: 5,
    processDate: '2023-10-02',
    manager: '李四',
    contactPhone: '13800138002',
    status: 'completed',
    reason: '疾病死亡',
    method: '高温焚烧处理',
    remark: '严格按照无害化处理规程操作',
    photos: ['https://via.placeholder.com/300x200?text=Harmless+1', 'https://via.placeholder.com/300x200?text=Harmless+2']
  },
  {
    id: '3',
    processCode: 'S2023002',
    processType: 'slaughter',
    slaughterhouseId: '3',
    quantity: 120,
    processDate: '2023-10-03',
    manager: '王五',
    contactPhone: '13800138003',
    status: 'completed',
    reason: '正常屠宰',
    remark: '',
    photos: ['https://via.placeholder.com/300x200?text=Slaughter+2']
  },
  {
    id: '4',
    processCode: 'S2023003',
    processType: 'slaughter',
    slaughterhouseId: '4',
    quantity: 135,
    processDate: '2023-10-04',
    manager: '赵六',
    contactPhone: '13800138004',
    status: 'completed',
    reason: '正常屠宰',
    remark: '',
    photos: ['https://via.placeholder.com/300x200?text=Slaughter+3']
  },
  {
    id: '5',
    processCode: 'H2023002',
    processType: 'harmless',
    slaughterhouseId: '1',
    quantity: 8,
    processDate: '2023-10-05',
    manager: '孙七',
    contactPhone: '13800138005',
    status: 'completed',
    reason: '运输死亡',
    method: '高温焚烧处理',
    remark: '',
    photos: ['https://via.placeholder.com/300x200?text=Harmless+3']
  },
  {
    id: '6',
    processCode: 'S2023004',
    processType: 'slaughter',
    slaughterhouseId: '5',
    quantity: 200,
    processDate: '2023-10-06',
    manager: '周八',
    contactPhone: '13800138006',
    status: 'processing',
    reason: '正常屠宰',
    remark: '',
    photos: ['https://via.placeholder.com/300x200?text=Slaughter+4']
  },
  {
    id: '7',
    processCode: 'H2023003',
    processType: 'harmless',
    slaughterhouseId: '3',
    quantity: 3,
    processDate: '2023-10-07',
    manager: '吴九',
    contactPhone: '13800138007',
    status: 'pending',
    reason: '疑似疫情',
    method: '待确定',
    remark: '需进一步检验确认',
    photos: ['https://via.placeholder.com/300x200?text=Harmless+4']
  },
  {
    id: '8',
    processCode: 'S2023005',
    processType: 'slaughter',
    slaughterhouseId: '2',
    quantity: 180,
    processDate: '2023-10-08',
    manager: '郑十',
    contactPhone: '13800138008',
    status: 'pending',
    reason: '正常屠宰',
    remark: '',
    photos: []
  },
  {
    id: '9',
    processCode: 'H2023004',
    processType: 'harmless',
    slaughterhouseId: '5',
    quantity: 12,
    processDate: '2023-10-09',
    manager: '钱十一',
    contactPhone: '13800138009',
    status: 'abnormal',
    reason: '批量死亡',
    method: '高温焚烧处理',
    abnormalReason: '设备故障，处理不彻底',
    remark: '已要求整改',
    photos: ['https://via.placeholder.com/300x200?text=Harmless+5', 'https://via.placeholder.com/300x200?text=Harmless+6']
  },
  {
    id: '10',
    processCode: 'S2023006',
    processType: 'slaughter',
    slaughterhouseId: '1',
    quantity: 160,
    processDate: '2023-10-10',
    manager: '孙十二',
    contactPhone: '13800138010',
    status: 'processing',
    reason: '正常屠宰',
    remark: '',
    photos: ['https://via.placeholder.com/300x200?text=Slaughter+5']
  }
])

// 表格列定义
const columns = [
  {
    title: '处理编号',
    dataIndex: 'processCode',
    key: 'processCode',
    width: 120
  },
  {    title: '处理类型',    dataIndex: 'processType',    key: 'processType',    width: 100  },
  {    title: '屠宰场',    dataIndex: 'slaughterhouseId',    key: 'slaughterhouseId',    width: 120  },
  {
    title: '处理数量',
    dataIndex: 'quantity',
    key: 'quantity',
    width: 100
  },
  {
    title: '处理日期',
    dataIndex: 'processDate',
    key: 'processDate',
    width: 120
  },
  {
    title: '负责人',
    dataIndex: 'manager',
    key: 'manager',
    width: 80
  },
  {
    title: '联系电话',
    dataIndex: 'contactPhone',
    key: 'contactPhone',
    width: 120
  },
  {    title: '处理状态',    dataIndex: 'status',    key: 'status',    width: 100  },  {    title: '操作',    key: 'action',    width: 220,    fixed: 'right',    dataIndex: 'id'  }
]

// 获取处理类型文本
const getProcessTypeText = (processType) => {
  switch (processType) {
    case 'slaughter': return '正常屠宰'
    case 'harmless': return '无害化处理'
    default: return processType
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'pending': return 'default'
    case 'processing': return 'blue'
    case 'completed': return 'green'
    case 'abnormal': return 'red'
    default: return 'default'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'processing': return '处理中'
    case 'completed': return '已完成'
    case 'abnormal': return '异常'
    default: return status
  }
}

// 获取屠宰场名称
const getSlaughterhouseName = (id) => {
  const house = slaughterhouses.value.find(item => item.id === id)
  return house ? house.name : id
}

// 搜索处理
const handleSearch = () => {
  console.log('搜索条件:', {
    keyword: searchKeyword.value,
    slaughterhouseId: slaughterhouseFilter.value,
    processType: processTypeFilter.value,
    status: statusFilter.value,
    dateRange: dateRange.value
  })
  // 这里应该有实际的搜索逻辑
  // 模拟搜索后的总数
  pagination.total = processList.value.length
}

// 重置处理
const handleReset = () => {
  searchKeyword.value = ''
  slaughterhouseFilter.value = ''
  processTypeFilter.value = ''
  statusFilter.value = ''
  dateRange.value = []
  selectedRowKeys.value = []
}

// 导入处理
const handleImport = () => {
  console.log('导入处理记录')
  // 这里应该有实际的导入逻辑
}

// 导出处理
const handleExport = () => {
  console.log('导出处理记录')
  // 这里应该有实际的导出逻辑
}

// 新增处理记录
const handleAddProcess = () => {
  // 重置当前处理记录数据
  Object.assign(currentProcess, {
    id: '',
    processCode: '',
    processType: 'slaughter',
    slaughterhouseId: '',
    quantity: 1,
    processDate: '',
    manager: '',
    contactPhone: '',
    status: 'pending',
    reason: '',
    method: '',
    abnormalReason: '',
    remark: '',
    photos: []
  })
  isAddEditModalOpen.value = true
}

// 编辑处理记录
const handleEdit = (record) => {
  // 复制记录数据到当前处理记录
  Object.assign(currentProcess, JSON.parse(JSON.stringify(record)))
  isAddEditModalOpen.value = true
}

// 查看处理记录
const handleView = (record) => {
  viewProcess.value = JSON.parse(JSON.stringify(record))
  isViewModalOpen.value = true
}

// 删除处理记录 - 弹出确认对话框
const handleDelete = (id) => {
  confirmMessage.value = '确定要删除该处理记录吗？'
  confirmAction.value = 'delete'
  confirmTargetId.value = id
  isConfirmModalOpen.value = true
}

// 标记完成 - 弹出确认对话框
const handleMarkComplete = (id) => {
  confirmMessage.value = '确定要标记该处理为已完成吗？'
  confirmAction.value = 'markComplete'
  confirmTargetId.value = id
  isConfirmModalOpen.value = true
}

// 报告异常 - 弹出确认对话框
const handleReportIssue = (id) => {
  confirmMessage.value = '确定要报告该处理异常吗？'
  confirmAction.value = 'reportIssue'
  confirmTargetId.value = id
  isConfirmModalOpen.value = true
}

// 确认操作
const handleConfirmAction = () => {
  if (confirmAction.value === 'delete') {
    console.log('删除处理记录:', confirmTargetId.value)
    // 这里应该有实际的删除逻辑
    // 模拟删除成功
    alert(`成功删除处理记录ID: ${confirmTargetId.value}`)
  } else if (confirmAction.value === 'markComplete') {
    console.log('标记完成:', confirmTargetId.value)
    // 这里应该有实际的标记完成逻辑
    // 模拟标记成功
    alert('成功标记为已完成')
  } else if (confirmAction.value === 'reportIssue') {
    console.log('报告异常:', confirmTargetId.value)
    // 这里应该有实际的报告异常逻辑
    // 模拟报告成功
    alert('成功报告异常，相关人员将进行处理')
  }
  isConfirmModalOpen.value = false
}

// 保存处理记录
const handleSave = () => {
  console.log('保存处理记录:', currentProcess)
  // 这里应该有实际的保存逻辑
  // 模拟保存成功
  isAddEditModalOpen.value = false
  alert('保存成功')
}

// 图片预览
const handlePreviewImage = (image) => {
  previewImage.value = image
  previewVisible.value = true
}

// 初始化处理趋势图表
const initTrendChart = () => {
  if (!trendChartRef.value) return
  
  const chart = echarts.init(trendChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['正常屠宰', '无害化处理']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '正常屠宰',
        type: 'bar',
        stack: '总量',
        emphasis: {
          focus: 'series'
        },
        data: [1200, 1320, 1010, 1340, 900, 1200, 1300, 1250, 1100, 1200, 1150, 1300]
      },
      {
        name: '无害化处理',
        type: 'bar',
        stack: '总量',
        emphasis: {
          focus: 'series'
        },
        data: [60, 72, 81, 94, 120, 132, 121, 114, 100, 80, 75, 90]
      }
    ]
  }
  
  chart.setOption(option)
  
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 组件挂载时初始化图表
onMounted(() => {
  setTimeout(() => {
    initTrendChart()
  }, 100)
})

// 初始化数据
pagination.total = processList.value.length
</script>

<style scoped>
  .process-detail {
    padding: 16px;
  }
  
  .detail-row {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-start;
  }
  
  .detail-label {
    width: 120px;
    font-weight: bold;
    color: #666;
  }
  
  .detail-value {
    flex: 1;
    color: #333;
  }
</style>