<template>
  <div class="exception-workorder-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="form-row">
          <div class="form-item">
            <label>工单编号:</label>
            <el-input
              v-model="searchParams.workorderNo"
              placeholder="请输入工单编号"
              clearable
              class="search-input"
            />
          </div>
          <div class="form-item">
            <label>关联订单号:</label>
            <el-input
              v-model="searchParams.orderNo"
              placeholder="请输入关联订单号"
              clearable
              class="search-input"
            />
          </div>
          <div class="form-item">
            <label>经销商编码:</label>
            <el-input
              v-model="searchParams.dealerCode"
              placeholder="请输入经销商编码"
              clearable
              class="search-input"
            />
          </div>
          <div class="form-item">
            <label>经销商名称:</label>
            <el-input
              v-model="searchParams.dealerName"
              placeholder="请输入经销商名称"
              clearable
              class="search-input"
            />
          </div>
        </div>
        <div class="form-row">
          <div class="form-item">
            <label>工单状态:</label>
            <el-select
              v-model="searchParams.workorderStatus"
              placeholder="请选择工单状态"
              clearable
              class="search-select"
            >
              <el-option
                v-for="(name, value) in WORKORDER_STATUS"
                :key="value"
                :label="name"
                :value="Number(value)"
              />
            </el-select>
          </div>
          <div class="form-item">
            <label>异常类型:</label>
            <el-select
              v-model="searchParams.exceptionType"
              placeholder="请选择异常类型"
              clearable
              class="search-select"
            >
              <el-option
                v-for="(name, value) in EXCEPTION_TYPE"
                :key="value"
                :label="name"
                :value="Number(value)"
              />
            </el-select>
          </div>
          <div class="form-item">
            <label>严重程度:</label>
            <el-select
              v-model="searchParams.severityLevel"
              placeholder="请选择严重程度"
              clearable
              class="search-select"
            >
              <el-option
                v-for="(name, value) in SEVERITY_LEVEL"
                :key="value"
                :label="name"
                :value="Number(value)"
              />
            </el-select>
          </div>
          <div class="form-item">
            <label>处理人:</label>
            <el-input
              v-model="searchParams.handlerUser"
              placeholder="请输入处理人"
              clearable
              class="search-input"
            />
          </div>
        </div>
        <div class="form-row">
          <div class="form-item">
            <label>开始日期:</label>
            <el-date-picker
              v-model="searchParams.startTime"
              type="datetime"
              placeholder="选择开始日期"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              class="search-date"
            />
          </div>
          <div class="form-item">
            <label>结束日期:</label>
            <el-date-picker
              v-model="searchParams.endTime"
              type="datetime"
              placeholder="选择结束日期"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              class="search-date"
            />
          </div>
          <div class="form-item">
            <el-button type="primary" @click="handleSearch" class="search-btn">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset" class="reset-btn">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <div class="action-buttons">
        <el-button type="warning" @click="handleAdd" class="add-btn">
          <el-icon><Plus /></el-icon>
          新增数据
        </el-button>
        <el-button type="success" @click="handleBatchProcess" class="batch-btn">
          <el-icon><Operation /></el-icon>
          批量处理
        </el-button>
        <el-button @click="handleExport" class="export-btn">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-table
        :data="workorderList"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        class="data-table"
        stripe
        border
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="workorderId" label="工单ID" width="120" />
        <el-table-column prop="workorderNo" label="工单编号" width="180" />
        <el-table-column prop="orderNo" label="关联订单号" width="180" />
        <el-table-column prop="dealerName" label="经销商名称" width="150" />
        <el-table-column prop="workorderStatusName" label="工单状态" width="100">
          <template #default="{ row }">
            <el-tag :color="getWorkorderStatusColor(row.workorderStatus)">
              {{ row.workorderStatusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="exceptionTypeName" label="异常类型" width="120" />
        <el-table-column prop="severityLevelName" label="严重程度" width="100">
          <template #default="{ row }">
            <el-tag :color="getSeverityLevelColor(row.severityLevel)">
              {{ row.severityLevelName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="日期" width="180" sortable>
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="handleEditStatus(row)"
              class="action-btn"
            >
              编辑状态
            </el-button>
            <el-button
              type="info"
              size="small"
              @click="handleViewLogs(row)"
              class="action-btn"
            >
              处理日志
            </el-button>
            <el-button
              type="success"
              size="small"
              @click="handleViewDetail(row)"
              class="action-btn"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination"
      />
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      :title="isEdit ? '编辑异常工单' : '新增异常工单'"
      width="600px"
      class="add-dialog"
    >
      <el-form
        ref="addFormRef"
        :model="addFormData"
        :rules="addFormRules"
        label-width="120px"
        class="add-form"
      >
        <el-form-item label="工单编号" prop="workorderNo">
          <el-input v-model="addFormData.workorderNo" placeholder="请输入工单编号" />
        </el-form-item>
        <el-form-item label="关联订单号" prop="orderNo">
          <el-input v-model="addFormData.orderNo" placeholder="请输入关联订单号" />
        </el-form-item>
        <el-form-item label="经销商编码" prop="dealerCode">
          <el-input v-model="addFormData.dealerCode" placeholder="请输入经销商编码" />
        </el-form-item>
        <el-form-item label="经销商名称" prop="dealerName">
          <el-input v-model="addFormData.dealerName" placeholder="请输入经销商名称" />
        </el-form-item>
        <el-form-item label="异常类型" prop="exceptionType">
          <el-select v-model="addFormData.exceptionType" placeholder="请选择异常类型">
            <el-option
              v-for="(name, value) in EXCEPTION_TYPE"
              :key="value"
              :label="name"
              :value="Number(value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="严重程度" prop="severityLevel">
          <el-select v-model="addFormData.severityLevel" placeholder="请选择严重程度">
            <el-option
              v-for="(name, value) in SEVERITY_LEVEL"
              :key="value"
              :label="name"
              :value="Number(value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工单状态" prop="workorderStatus">
          <el-select v-model="addFormData.workorderStatus" placeholder="请选择工单状态">
            <el-option
              v-for="(name, value) in WORKORDER_STATUS"
              :key="value"
              :label="name"
              :value="Number(value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理人" prop="handlerUser">
          <el-input v-model="addFormData.handlerUser" placeholder="请输入处理人" />
        </el-form-item>
        <el-form-item label="预计完成时间" prop="expectCompleteTime">
          <el-date-picker
            v-model="addFormData.expectCompleteTime"
            type="datetime"
            placeholder="选择预计完成时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="异常描述" prop="exceptionDesc">
          <el-input
            v-model="addFormData.exceptionDesc"
            type="textarea"
            :rows="3"
            placeholder="请输入异常描述"
          />
        </el-form-item>
        <el-form-item label="处理建议" prop="handleSuggest">
          <el-input
            v-model="addFormData.handleSuggest"
            type="textarea"
            :rows="3"
            placeholder="请输入处理建议"
          />
        </el-form-item>
        <el-form-item label="数据来源" prop="dataSource">
          <el-input v-model="addFormData.dataSource" placeholder="请输入数据来源" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAddDialog">取消</el-button>
          <el-button type="primary" @click="handleSubmitAdd">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 状态更新对话框 -->
    <el-dialog
      v-model="statusDialogVisible"
      title="编辑状态"
      width="500px"
      class="status-dialog"
    >
      <el-form
        ref="statusFormRef"
        :model="statusFormData"
        :rules="statusFormRules"
        label-width="100px"
        class="status-form"
      >
        <el-form-item label="工单状态" prop="workorderStatus">
          <el-select v-model="statusFormData.workorderStatus" placeholder="请选择工单状态">
            <el-option
              v-for="(name, value) in WORKORDER_STATUS"
              :key="value"
              :label="name"
              :value="Number(value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理人" prop="handlerUser">
          <el-input v-model="statusFormData.handlerUser" placeholder="请输入处理人" />
        </el-form-item>
        <el-form-item label="处理意见" prop="handleOpinion">
          <el-input
            v-model="statusFormData.handleOpinion"
            type="textarea"
            :rows="3"
            placeholder="请输入处理意见"
          />
        </el-form-item>
        <el-form-item label="附件URL" prop="attachUrl">
          <el-input v-model="statusFormData.attachUrl" placeholder="请输入附件URL" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeStatusDialog">取消</el-button>
          <el-button type="primary" @click="handleSubmitStatus">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="异常工单详情"
      width="800px"
      class="detail-dialog"
    >
      <div v-if="workorderDetail" class="detail-content">
        <div class="detail-section">
          <h4>工单基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label>工单编号:</label>
              <span>{{ workorderDetail.workorderNo }}</span>
            </div>
            <div class="detail-item">
              <label>关联订单号:</label>
              <span>{{ workorderDetail.orderNo }}</span>
            </div>
            <div class="detail-item">
              <label>经销商编码:</label>
              <span>{{ workorderDetail.dealerCode }}</span>
            </div>
            <div class="detail-item">
              <label>经销商名称:</label>
              <span>{{ workorderDetail.dealerName }}</span>
            </div>
            <div class="detail-item">
              <label>异常类型:</label>
              <span>{{ workorderDetail.exceptionTypeName }}</span>
            </div>
            <div class="detail-item">
              <label>严重程度:</label>
              <span>{{ workorderDetail.severityLevelName }}</span>
            </div>
            <div class="detail-item">
              <label>工单状态:</label>
              <span>{{ workorderDetail.workorderStatusName }}</span>
            </div>
            <div class="detail-item">
              <label>处理人:</label>
              <span>{{ workorderDetail.handlerUser || '未分配' }}</span>
            </div>
            <div class="detail-item">
              <label>创建时间:</label>
              <span>{{ formatDateTime(workorderDetail.createTime) }}</span>
            </div>
            <div class="detail-item">
              <label>预计完成时间:</label>
              <span>{{ workorderDetail.expectCompleteTime ? formatDateTime(workorderDetail.expectCompleteTime) : '未设置' }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section" v-if="workorderDetail.exceptionDesc">
          <h4>异常描述</h4>
          <p class="detail-text">{{ workorderDetail.exceptionDesc }}</p>
        </div>

        <div class="detail-section" v-if="workorderDetail.handleSuggest">
          <h4>处理建议</h4>
          <p class="detail-text">{{ workorderDetail.handleSuggest }}</p>
        </div>

        <div class="detail-section" v-if="workorderDetail.workorderLogs && workorderDetail.workorderLogs.length > 0">
          <h4>处理日志</h4>
          <el-table :data="workorderDetail.workorderLogs" class="log-table">
            <el-table-column prop="handleUser" label="处理人" width="120" />
            <el-table-column prop="handleTime" label="处理时间" width="180">
              <template #default="{ row }">
                {{ formatDateTime(row.handleTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="beforeStatusName" label="处理前状态" width="120" />
            <el-table-column prop="afterStatusName" label="处理后状态" width="120" />
            <el-table-column prop="handleOpinion" label="处理意见" />
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 处理日志对话框 -->
    <el-dialog
      v-model="logsDialogVisible"
      title="处理日志"
      width="900px"
      class="logs-dialog"
    >
      <el-table :data="workorderLogs" class="logs-table">
        <el-table-column prop="handleUser" label="处理人" width="120" />
        <el-table-column prop="handleTime" label="处理时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.handleTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="beforeStatusName" label="处理前状态" width="120" />
        <el-table-column prop="afterStatusName" label="处理后状态" width="120" />
        <el-table-column prop="handleOpinion" label="处理意见" />
        <el-table-column prop="attachUrl" label="附件" width="100">
          <template #default="{ row }">
            <el-button v-if="row.attachUrl" type="primary" size="small" @click="handleDownload(row.attachUrl)">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Operation, Download } from '@element-plus/icons-vue'
import { 
  exceptionWorkorderApi, 
  type ExceptionWorkorderInfo, 
  type ExceptionWorkorderQueryReq,
  type ExceptionWorkorderAddReq,
  type ExceptionWorkorderStatusUpdateReq,
  EXCEPTION_TYPE,
  SEVERITY_LEVEL,
  WORKORDER_STATUS,
  getSeverityLevelColor,
  getWorkorderStatusColor
} from '../../api/exceptionWorkorder'
import dayjs from 'dayjs'

// 响应式数据
const loading = ref(false)
const workorderList = ref<ExceptionWorkorderInfo[]>([])
const selectedWorkorders = ref<ExceptionWorkorderInfo[]>([])
const workorderDetail = ref<ExceptionWorkorderInfo | null>(null)
const workorderLogs = ref<any[]>([])

// 分页数据
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 搜索参数
const searchParams = reactive<ExceptionWorkorderQueryReq>({
  workorderNo: '',
  orderNo: '',
  dealerCode: '',
  dealerName: '',
  workorderStatus: undefined,
  exceptionType: undefined,
  severityLevel: undefined,
  handlerUser: '',
  startTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 10
})

// 对话框状态
const addDialogVisible = ref(false)
const statusDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const logsDialogVisible = ref(false)
const isEdit = ref(false)

// 新增表单数据
const addFormData = reactive<ExceptionWorkorderAddReq>({
  workorderNo: '',
  orderNo: '',
  dealerCode: '',
  dealerName: '',
  exceptionType: 1,
  severityLevel: 1,
  workorderStatus: 1,
  expectCompleteTime: '',
  handlerUser: '',
  exceptionDesc: '',
  handleSuggest: '',
  dataSource: ''
})

// 状态更新表单数据
const statusFormData = reactive<ExceptionWorkorderStatusUpdateReq>({
  workorderId: 0,
  workorderStatus: 1,
  handlerUser: '',
  handleOpinion: '',
  attachUrl: ''
})

// 表单验证规则
const addFormRules = {
  workorderNo: [
    { required: true, message: '请输入工单编号', trigger: 'blur' }
  ],
  exceptionType: [
    { required: true, message: '请选择异常类型', trigger: 'change' }
  ],
  severityLevel: [
    { required: true, message: '请选择严重程度', trigger: 'change' }
  ]
}

const statusFormRules = {
  workorderStatus: [
    { required: true, message: '请选择工单状态', trigger: 'change' }
  ]
}

// 获取异常工单列表
const fetchWorkorders = async () => {
  try {
    loading.value = true
    const params = {
      ...searchParams,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize
    }
    const response = await exceptionWorkorderApi.getExceptionWorkorderList(params) as any
    console.log('异常工单列表API响应:', response)
    
    if (response && response.records) {
      workorderList.value = response.records
      pagination.total = response.total
    } else {
      workorderList.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('获取异常工单列表失败:', error)
    ElMessage.error('获取异常工单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.pageNum = 1
  fetchWorkorders()
}

// 重置
const handleReset = () => {
  Object.assign(searchParams, {
    workorderNo: '',
    orderNo: '',
    dealerCode: '',
    dealerName: '',
    workorderStatus: undefined,
    exceptionType: undefined,
    severityLevel: undefined,
    handlerUser: '',
    startTime: '',
    endTime: ''
  })
  pagination.pageNum = 1
  fetchWorkorders()
}

// 新增
const handleAdd = () => {
  isEdit.value = false
  Object.assign(addFormData, {
    workorderNo: '',
    orderNo: '',
    dealerCode: '',
    dealerName: '',
    exceptionType: 1,
    severityLevel: 1,
    workorderStatus: 1,
    expectCompleteTime: '',
    handlerUser: '',
    exceptionDesc: '',
    handleSuggest: '',
    dataSource: ''
  })
  addDialogVisible.value = true
}

// 编辑状态
const handleEditStatus = (row: ExceptionWorkorderInfo) => {
  statusFormData.workorderId = row.workorderId
  statusFormData.workorderStatus = row.workorderStatus
  statusFormData.handlerUser = row.handlerUser || ''
  statusFormData.handleOpinion = ''
  statusFormData.attachUrl = ''
  statusDialogVisible.value = true
}

// 查看详情
const handleViewDetail = async (row: ExceptionWorkorderInfo) => {
  try {
    const response = await exceptionWorkorderApi.getExceptionWorkorderDetail(row.workorderId) as any
    console.log('异常工单详情API响应:', response)
    
    if (response && response.workorderId) {
      workorderDetail.value = response
      detailDialogVisible.value = true
    } else {
      ElMessage.error('获取异常工单详情失败')
    }
  } catch (error) {
    console.error('获取异常工单详情失败:', error)
    ElMessage.error('获取异常工单详情失败, 请重试')
  }
}

// 查看处理日志
const handleViewLogs = async (row: ExceptionWorkorderInfo) => {
  try {
    const response = await exceptionWorkorderApi.getExceptionWorkorderDetail(row.workorderId) as any
    console.log('处理日志API响应:', response)
    
    if (response && response.workorderLogs) {
      workorderLogs.value = response.workorderLogs
      logsDialogVisible.value = true
    } else {
      ElMessage.error('获取处理日志失败')
    }
  } catch (error) {
    console.error('获取处理日志失败:', error)
    ElMessage.error('获取处理日志失败, 请重试')
  }
}

// 批量处理
const handleBatchProcess = () => {
  if (selectedWorkorders.value.length === 0) {
    ElMessage.warning('请选择要处理的工单')
    return
  }
  
  ElMessageBox.confirm(
    `确定要批量处理选中的 ${selectedWorkorders.value.length} 个工单吗？`,
    '批量处理确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const workorderIds = selectedWorkorders.value.map(item => item.workorderId)
      await exceptionWorkorderApi.batchUpdateWorkorderStatus(workorderIds, 2, '系统管理员')
      ElMessage.success('批量处理成功')
      fetchWorkorders()
    } catch (error) {
      console.error('批量处理失败:', error)
      ElMessage.error('批量处理失败')
    }
  })
}

// 导出
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 提交新增
const handleSubmitAdd = async () => {
  try {
    await exceptionWorkorderApi.addExceptionWorkorder(addFormData)
    ElMessage.success('新增异常工单成功')
    closeAddDialog()
    fetchWorkorders()
  } catch (error) {
    console.error('新增异常工单失败:', error)
    ElMessage.error('新增异常工单失败')
  }
}

// 提交状态更新
const handleSubmitStatus = async () => {
  try {
    await exceptionWorkorderApi.updateWorkorderStatus(statusFormData)
    ElMessage.success('更新工单状态成功')
    closeStatusDialog()
    fetchWorkorders()
  } catch (error) {
    console.error('更新工单状态失败:', error)
    ElMessage.error('更新工单状态失败')
  }
}

// 关闭对话框
const closeAddDialog = () => {
  addDialogVisible.value = false
}

const closeStatusDialog = () => {
  statusDialogVisible.value = false
}

// 选择变化
const handleSelectionChange = (selection: ExceptionWorkorderInfo[]) => {
  selectedWorkorders.value = selection
}

// 分页变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  fetchWorkorders()
}

const handleCurrentChange = (page: number) => {
  pagination.pageNum = page
  fetchWorkorders()
}

// 下载附件
const handleDownload = (url: string) => {
  window.open(url, '_blank')
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss')
}

// 组件挂载
onMounted(() => {
  fetchWorkorders()
})
</script>

<style scoped>
.exception-workorder-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}

.form-item label {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  min-width: 80px;
}

.search-input,
.search-select,
.search-date {
  width: 200px;
}

.search-btn,
.reset-btn {
  margin-left: 10px;
}

.action-section {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
}

.action-btn {
  margin-right: 5px;
}

.pagination-section {
  display: flex;
  justify-content: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add-dialog,
.status-dialog,
.detail-dialog,
.logs-dialog {
  .el-dialog__body {
    padding: 20px;
  }
}

.add-form,
.status-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}

.detail-content {
  .detail-section {
    margin-bottom: 30px;
  }
  
  .detail-section h4 {
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #409eff;
  }
  
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .detail-item label {
    font-weight: 500;
    color: #666;
    min-width: 120px;
  }
  
  .detail-item span {
    color: #333;
  }
  
  .detail-text {
    color: #333;
    line-height: 1.6;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #409eff;
  }
  
  .log-table,
  .logs-table {
    margin-top: 15px;
  }
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>