<!--
 * @Descripttion: (工作记录/cam_workrecord)
 * @Author: (admin)
 * @Date: (2025-08-18)
-->
<template>
  <div>
    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
      <el-form-item label="拍照时间">
        <el-date-picker
          style="width: 200px"
          v-model="dateRangeRecordTime"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="拍照地址" prop="address">
        <el-input v-model="queryParams.address" placeholder="请输入拍照地址" />
      </el-form-item>
      <el-form-item label="工作内容" prop="content">
        <el-input v-model="queryParams.content" placeholder="请输入工作内容" />
      </el-form-item>
      <el-form-item label="状态" prop="statusName">
        <el-select clearable v-model="queryParams.statusName" placeholder="请选择状态">
          <el-option v-for="item in options.sys_construction_status" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            <span class="fl">{{ item.dictLabel }}</span>
            <span class="fr" style="color: var(--el-text-color-secondary)">{{ item.dictValue }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 工具区域 -->
    <el-row :gutter="15" class="mb10">
      <el-col :span="1.5">
        <el-button type="primary" v-hasPermi="['camworkrecord:add']" plain icon="plus" @click="handleAdd">
          {{ $t('btn.add') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" :disabled="single" v-hasPermi="['camworkrecord:edit']" plain icon="edit" @click="handleUpdate">
          {{ $t('btn.edit') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" :disabled="multiple" v-hasPermi="['camworkrecord:delete']" plain icon="delete" @click="handleDelete">
          {{ $t('btn.delete') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['camworkrecord:export']"> 导出 </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table
      :data="dataList"
      v-loading="loading"
      ref="table"
      border
      stripe
      header-cell-class-name="table-header-cell"
      row-class-name="table-row-cell"
      highlight-current-row
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      class="work-record-table">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="id" label="主键" width="80" align="center" v-if="columns.showColumn('id')" />
      <el-table-column
        prop="deptName"
        width="120"
        label="部门名称"
        align="center"
        :show-overflow-tooltip="true"
        v-if="columns.showColumn('deptName')" />
      <el-table-column prop="imageUrl" width="140" label="图片" align="center" v-if="columns.showColumn('imageUrl')">
        <template #default="scope">
          <div class="image-container">
            <ImagePreview class="table-image" :src="scope.row.imageUrl"></ImagePreview>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="address"
        width="220"
        label="地址信息"
        align="center"
        :show-overflow-tooltip="true"
        v-if="columns.showColumn('address')">
        <template #default="scope">
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">拍照时间：</span>
              <span class="info-value">{{ scope.row.recordTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">经度：</span>
              <span class="info-value">{{ scope.row.longitude }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">纬度：</span>
              <span class="info-value">{{ scope.row.latitude }}</span>
            </div>
            <div class="info-item address-item">
              <span class="info-label">位置：</span>
              <span class="info-value address-value">{{ scope.row.address }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="content"
        width="200"
        label="工作内容"
        align="center"
        :show-overflow-tooltip="true"
        v-if="columns.showColumn('content')">
        <template #default="scope">
          <div class="content-cell">
            <span class="content-text">{{ scope.row.content || '-' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="workers"
        width="120"
        label="施工人员"
        align="center"
        :show-overflow-tooltip="true"
        v-if="columns.showColumn('workers')">
        <template #default="scope">
          <div class="worker-cell">
            <span class="worker-name">{{ scope.row.worker || '-' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="statusName" width="100" label="状态" align="center" v-if="columns.showColumn('statusName')">
        <template #default="scope">
          <dict-tag :options="options.sys_construction_status" :value="scope.row.statusName" />
        </template>
      </el-table-column>

      <el-table-column prop="createTime" width="200" label="时间信息" :show-overflow-tooltip="true" v-if="columns.showColumn('createTime')">
        <template #default="scope">
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">拍照时间：</span>
              <span class="info-value">{{ scope.row.recordTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">创建时间：</span>
              <span class="info-value">{{ scope.row.createTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">修改时间：</span>
              <span class="info-value">{{ scope.row.updateTime }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        width="240"
        label="其它信息"
        align="center"
        :show-overflow-tooltip="true"
        v-if="columns.showColumn('remarks')">
        <template #default="scope">
          <div class="info-group">
            <div class="coordinate-section">
              <div class="section-title">WGS84坐标系</div>
              <div class="info-item">
                <span class="info-label">经度：</span>
                <span class="info-value">{{ scope.row.remarksDic?.location?.lng || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">纬度：</span>
                <span class="info-value">{{ scope.row.remarksDic?.location?.lat || '-' }}</span>
              </div>
            </div>
            <div class="coordinate-section">
              <div class="section-title">GCJ02坐标系</div>
              <div class="info-item">
                <span class="info-label">经度：</span>
                <span class="info-value">{{ scope.row.remarksDic?.translate?.lng || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">纬度：</span>
                <span class="info-value">{{ scope.row.remarksDic?.translate?.lat || '-' }}</span>
              </div>
              <div class="info-item address-item">
                <span class="info-label">位置：</span>
                <span class="info-value address-value">{{ scope.row.remarksDic?.translate?.locationInfo || '-' }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" align="center" fixed="right">
        <template #default="scope">
          <div class="action-buttons">
            <el-button type="primary" size="small" icon="view" title="详情" @click="handlePreview(scope.row)"></el-button>
            <el-button
              type="success"
              size="small"
              icon="edit"
              title="编辑"
              v-hasPermi="['camworkrecord:edit']"
              @click="handleUpdate(scope.row)"></el-button>
            <el-button
              type="danger"
              size="small"
              icon="delete"
              title="删除"
              v-hasPermi="['camworkrecord:delete']"
              @click="handleDelete(scope.row)"></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <el-dialog :title="title" :lock-scroll="false" v-model="open">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :lg="12">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>

          <el-col :lg="24">
            <el-form-item label="图片" prop="imageUrl">
              <el-upload class="upload-demo" drag :auto-upload="false" :show-file-list="false" accept="image/*" @change="handleImageChange">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
                </template>
              </el-upload>
              <div v-if="form.imageUrl" class="image-preview">
                <img :src="form.imageUrl" alt="预览图片" style="max-width: 200px; max-height: 200px" />
              </div>
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="拍照时间" prop="recordTime">
              <el-date-picker v-model="form.recordTime" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="拍照地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入拍照地址" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="工作内容" prop="content">
              <el-input v-model="form.content" placeholder="请输入工作内容" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="状态" prop="statusName">
              <el-select v-model="form.statusName" placeholder="请选择状态">
                <el-option
                  v-for="item in options.sys_construction_status"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="施工人员" prop="worker">
              <el-input v-model="form.worker" placeholder="请输入施工人员，多个人员用逗号分隔" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="opertype != 3">
        <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" :loading="state.submitLoading" @click="submitForm">{{ $t('btn.submit') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="camworkrecord">
import { listCamWorkrecord, addCamWorkrecord, delCamWorkrecord, updateCamWorkrecord, getCamWorkrecord } from '@/api/business/camworkrecord.js'
import { UploadFilled } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  sort: 'Id',
  sortType: 'desc',
  deptName: undefined,
  address: undefined,
  content: undefined,
  statusName: undefined
})
const columns = ref([
  { visible: true, align: 'center', type: '', prop: 'id', label: '主键' },
  { visible: true, align: 'center', type: '', prop: 'deptName', label: '部门名称', showOverflowTooltip: true },
  { visible: true, align: 'center', type: 'img', prop: 'imageUrl', label: '图片', showOverflowTooltip: true },

  { visible: true, align: 'center', type: '', prop: 'address', label: '拍照信息', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'content', label: '工作内容', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'workers', label: '施工人员', showOverflowTooltip: true },

  {
    visible: true,
    align: 'center',
    type: 'dict',
    prop: 'statusName',
    label: '状态',
    showOverflowTooltip: true,
    dictType: 'sys_construction_status'
  },

  { visible: true, align: 'center', type: '', prop: 'createTime', label: '创建时间', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'remarks', label: '其它信息', showOverflowTooltip: true }
  //{ visible: false, prop: 'actions', label: '操作', type: 'slot', width: '160' }
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])

// 拍照时间时间范围
const dateRangeRecordTime = ref([])

var dictParams = ['sys_construction_status']

proxy.getDicts(dictParams).then((response) => {
  response.data.forEach((element) => {
    state.options[element.dictType] = element.list
  })
})

function getList() {
  proxy.addDateRange(queryParams, dateRangeRecordTime.value, 'RecordTime')
  loading.value = true
  listCamWorkrecord(queryParams).then((res) => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data.result
      total.value = data.totalNum
      loading.value = false
    }
  })
}

// 查询
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

// 重置查询操作
function resetQuery() {
  dateRangeRecordTime.value = []
  proxy.resetForm('queryRef')
  handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
// 自定义排序
function sortChange(column) {
  var sort = undefined
  var sortType = undefined

  if (column.prop != null && column.order != null) {
    sort = column.prop
    sortType = column.order
  }
  queryParams.sort = sort
  queryParams.sortType = sortType
  handleQuery()
}

/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
  single: true,
  multiple: true,
  submitLoading: false,
  form: {},
  rules: {},
  options: {
    // 状态 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
    sys_construction_status: []
  }
})

const { form, rules, options, single, multiple } = toRefs(state)

// 关闭dialog
function cancel() {
  open.value = false
  reset()
}

// 重置表单
function reset() {
  form.value = {
    id: null,
    deptName: null,
    imageUrl: null,
    recordTime: null,
    longitude: null,
    latitude: null,
    address: null,
    content: null,
    statusName: null,
    workers: null,
    remarks: null,
    createTime: null,
    updateTime: null
  }
  proxy.resetForm('formRef')
}

// 处理图片上传，转换为Base64
function handleImageChange(file) {
  const isImage = file.raw.type.startsWith('image/')
  const isLt10M = file.raw.size / 1024 / 1024 < 10

  if (!isImage) {
    proxy.$modal.msgError('上传文件只能是图片格式!')
    return
  }
  if (!isLt10M) {
    proxy.$modal.msgError('上传图片大小不能超过 10MB!')
    return
  }

  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = (e) => {
    form.value.imageUrl = e.target.result
    form.value.image = e.target.result
  }
}

// 将图片地址转换为Base64
function convertImageUrlToBase64(imageUrl) {
  // 创建一个新的Image对象
  const img = new Image()
  img.crossOrigin = 'anonymous' // 处理跨域问题

  img.onload = function () {
    // 创建canvas
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    // 设置canvas尺寸
    canvas.width = img.width
    canvas.height = img.height

    // 在canvas上绘制图片
    ctx.drawImage(img, 0, 0)

    // 转换为Base64
    try {
      const base64 = canvas.toDataURL('image/jpeg', 0.8)
      form.value.imageUrl = base64
      form.value.image = base64
    } catch (error) {
      console.error('转换Base64失败:', error)
      proxy.$modal.msgError('图片转换失败，请重新上传')
    }
  }

  img.onerror = function () {
    console.error('图片加载失败:', imageUrl)
    proxy.$modal.msgError('图片加载失败，请重新上传')
  }

  // 设置图片源
  img.src = imageUrl
}

/**
 * 查看
 * @param {*} row
 */
function handlePreview(row) {
  reset()
  const id = row.id
  getCamWorkrecord(id).then((res) => {
    const { code, data } = res
    if (code == 200) {
      open.value = true
      title.value = '查看'
      opertype.value = 3
      form.value = {
        ...data
      }

      // 如果存在图片地址，转换为Base64用于显示
      if (data.imageUrl) {
        convertImageUrlToBase64(data.imageUrl)
      }
    }
  })
}

// 添加按钮操作
function handleAdd() {
  reset()
  open.value = true
  state.submitLoading = false
  title.value = '添加工作记录'
  opertype.value = 1
}
// 修改按钮操作
function handleUpdate(row) {
  reset()
  state.submitLoading = false
  const id = row.id || ids.value
  getCamWorkrecord(id).then((res) => {
    const { code, data } = res
    if (code == 200) {
      open.value = true
      title.value = '修改工作记录'
      opertype.value = 2

      form.value = {
        ...data
      }

      // 如果存在图片地址，转换为Base64
      if (data.imageUrl) {
        convertImageUrlToBase64(data.imageUrl)
      }
    }
  })
}

// 添加&修改 表单提交
function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      state.submitLoading = true

      if (form.value.worker != '') {
        form.value.workers = form.value.worker.split(',')
      }
      // console.log(form.value)
      // // 暂时显示成功消息，不调用后端接口
      // setTimeout(() => {
      //   proxy.$modal.msgSuccess('提交成功')
      //   open.value = false
      //   state.submitLoading = false
      // }, 1000)

      // 注释掉原有的提交逻辑

      if (form.value.id != undefined && opertype.value === 2) {
        updateCamWorkrecord(form.value).then((res) => {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
        })
      } else {
        addCamWorkrecord(form.value)
          .then((res) => {
            proxy.$modal.msgSuccess('新增成功')
            open.value = false
            getList()
          })
          .finally(() => {
            setTimeout(() => {
              state.submitLoading = false
            }, 800)
          })
      }
    }
  })
}

// 删除按钮操作
function handleDelete(row) {
  const Ids = row.id || ids.value

  proxy
    .$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？', '警告', {
      confirmButtonText: proxy.$t('common.ok'),
      cancelButtonText: proxy.$t('common.cancel'),
      type: 'warning'
    })
    .then(function () {
      return delCamWorkrecord(Ids)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
}

// 导出按钮操作
function handleExport() {
  proxy
    .$confirm('是否确认导出工作记录数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      await proxy.downFile('/business/CamWorkrecord/export', { ...queryParams })
    })
}

handleQuery()
</script>

<style lang="scss" scoped>
.work-record-table {
  // 表格整体样式
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  // 表头样式
  :deep(.table-header-cell) {
    background-color: var(--el-table-header-bg-color);
    color: var(--el-table-header-text-color);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    border: none;
  }

  // 表格行样式
  :deep(.table-row-cell) {
    transition: all 0.3s ease;

    &:hover {
      background-color: #f5f7fa !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  // 图片容器样式
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;

    .table-image {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      object-fit: cover;
      border: 2px solid #e4e7ed;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.05);
        border-color: #409eff;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }
  }

  // 施工人员单元格样式
  .worker-cell {
    padding: 8px;
    text-align: center;

    .worker-name {
      display: inline-block;
      padding: 4px 8px;
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      color: #1976d2;
      border: 1px solid #90caf9;
      transition: all 0.3s ease;

      &:hover {
        background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
      }
    }
  }

  // 工作内容单元格样式
  .content-cell {
    padding: 8px;
    text-align: left;

    .content-text {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
      font-size: 13px;
      color: #303133;
      word-break: break-word;
    }
  }

  // 信息组样式
  .info-group {
    padding: 8px;
    text-align: left;

    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 4px;
      font-size: 12px;
      line-height: 1.4;

      &:last-child {
        margin-bottom: 0;
      }

      &.address-item {
        align-items: flex-start;
        margin-bottom: 8px;
      }

      .info-label {
        color: #606266;
        font-weight: 500;
        min-width: 60px;
        margin-right: 4px;
        flex-shrink: 0;

        .address-item & {
          margin-top: 2px;
        }
      }

      .info-value {
        color: #303133;
        flex: 1;
        word-break: break-all;

        &.address-value {
          white-space: pre-wrap;
          word-wrap: break-word;
          line-height: 1.5;
          max-height: 80px;
          overflow-y: auto;
          padding: 4px;
          background-color: #f8f9fa;
          border-radius: 4px;
          border: 1px solid #e9ecef;
          font-size: 11px;
        }
      }
    }

    .coordinate-section {
      margin-bottom: 8px;
      padding: 6px;
      background: #f8f9fa;
      border-radius: 4px;
      border-left: 3px solid #409eff;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 11px;
        font-weight: 600;
        color: #409eff;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }
  }

  // 操作按钮样式
  .action-buttons {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;

    .el-button {
      padding: 6px 8px;
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #36a3f7 0%, #2d8cf0 100%);
        }
      }

      &.el-button--success {
        background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #5daf34 0%, #529b2e 100%);
        }
      }

      &.el-button--danger {
        background: linear-gradient(135deg, #f56c6c 0%, #e74c3c 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        }
      }
    }
  }

  // 状态标签样式
  :deep(.el-tag) {
    border-radius: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border: none;

    &.el-tag--success {
      background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
      color: white;
    }

    &.el-tag--warning {
      background: linear-gradient(135deg, #e6a23c 0%, #d68910 100%);
      color: white;
    }

    &.el-tag--danger {
      background: linear-gradient(135deg, #f56c6c 0%, #e74c3c 100%);
      color: white;
    }

    &.el-tag--info {
      background: linear-gradient(135deg, #909399 0%, #7a7e83 100%);
      color: white;
    }
  }

  // 选择框样式
  :deep(.el-table__selection) {
    .el-checkbox {
      .el-checkbox__input {
        .el-checkbox__inner {
          border-radius: 4px;
          border: 2px solid #dcdfe6;

          &:hover {
            border-color: #409eff;
          }
        }
      }
    }
  }

  // 加载状态样式
  :deep(.el-loading-mask) {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
  }
}

// 图片上传样式
.upload-demo {
  :deep(.el-upload-dragger) {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;

    &:hover {
      border-color: #409eff;
    }
  }

  :deep(.el-upload__text) {
    color: #606266;
    font-size: 14px;
    text-align: center;

    em {
      color: #409eff;
      font-style: normal;
    }
  }

  :deep(.el-upload__tip) {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
  }
}

.image-preview {
  margin-top: 10px;
  text-align: center;

  img {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .work-record-table {
    .info-group {
      .info-item {
        font-size: 11px;

        .info-label {
          min-width: 50px;
        }

        .info-value.address-value {
          font-size: 10px;
          max-height: 60px;
          padding: 2px;
        }
      }
    }

    .action-buttons {
      flex-direction: column;
      gap: 2px;

      .el-button {
        padding: 4px 6px;
        font-size: 12px;
      }
    }
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .work-record-table {
    :deep(.table-row-cell) {
      &:hover {
        background-color: #2d3748 !important;
      }
    }

    .info-group {
      .info-item {
        .info-label {
          color: #a0aec0;
        }

        .info-value {
          color: #e2e8f0;

          &.address-value {
            background-color: #2d3748;
            border-color: #4a5568;
          }
        }
      }

      .coordinate-section {
        background: #2d3748;
        border-left-color: #63b3ed;

        .section-title {
          color: #63b3ed;
        }
      }
    }
  }
}
</style>
