<template>
  <!-- 装备维保页面 -->
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form
      ref="searchFormRef"
      :model="searchParams"
      :rules="searchFormRules"
      :inline="true"
      label-width="auto" size="small"
    >
      <el-card class="search-box">
        <el-row  type="flex">
          <el-col :span="5" class="flex-center">
            <el-form-item label="装备编码" prop="deviceCode" style="margin-bottom: 0 !important;">
              <el-input
                v-model.trim="searchParams.deviceCode"
                placeholder="请输入装备编码"
                clearable
                style="width:240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" class="flex-center">
            <el-form-item label="维保日期" prop="leaseStatus" style="margin-bottom: 0 !important;">
              <el-date-picker
                v-model="qcTime"
                type="daterange"
                placeholder="维保日期"
                range-separator="-"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" class="flex-center">
            <el-form-item label="更新日期" prop="createTime" style="margin-bottom: 0 !important;">
              <el-date-picker
                v-model="createTime"
                type="daterange"
                placeholder="更新日期"
                range-separator="-"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 240px"
              />
            </el-form-item>
          </el-col>

          <el-col :span="9" style="text-align: right; margin-top: 10px" >
            <el-button type="primary" icon="el-icon-search" size="mini" class="primary-lease" @click="onSearch" >查询
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" class="primary-lease" @click="onReset">重置</el-button>
          </el-col>
        </el-row>


      </el-card>
    </el-form>
    <el-card class="content-box">
      <div >
        <!-- 维保列表表格 -->
        <el-table
          :data="qualityLis"
          border
          stripe
          show-overflow-tooltip
          height="546"
        >
          <el-table-column label="序号" type="index" align="center" width="80"/>
          <el-table-column prop="deviceName" label="装备名称" align="center"/>
          <el-table-column prop="itemTypeModel" label="装备型号" align="center"/>
          <el-table-column prop="deviceCode" label="装备编码" align="center"/>
          <el-table-column prop="createBy" label="维保人" align="center" width="120"/>
          <el-table-column prop="nextCheckTime" label="下次维保日期" align="center"/>
          <el-table-column prop="phonenumber" label="维保人联系方式" align="center"/>
          <el-table-column prop="updateTime" label="更新时间" align="center"/>
          <el-table-column prop="alert" label="维保告警" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.alert == '正常'" size="mini">正常</el-tag>
              <el-tag v-if="scope.row.alert == '已超期'" type="danger" size="mini">
                已超期
              </el-tag>
              <el-tag v-if="scope.row.alert == '一月内到期'" type="warning"  size="mini">
                一月内维保到期
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="280">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                type="primary"
                class="primary-lease"
                @click="handleOpenAddDialog(row)"
              >
                新建
              </el-button>
              <el-button
                size="mini"
                type="primary"
                class="primary-lease"
                @click="handleOpenDetailDialog(row)"
              >
                维保记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrapper">
        <!-- 分页组件 -->
        <pagination
          :total="total"
          :page.sync="searchParams.pageNum"
          :limit.sync="searchParams.pageSize"
          @pagination="getLeaseListData"
        />
      </div>

    </el-card>
    <!-- 新增/详情对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="addOrEditDialogVisible"
      :width="dialogTitle === '维保操作' ? '40%' : '60%'"
      align-center
      destroy-on-close
      @close="onClose"
    >
      <!-- 新增质检表单 -->
      <template v-if="dialogTitle === '维保操作'">
        <el-form
          v-if="addOrEditDialogVisible"
          ref="addOrEditFormRef"
          :model="addOrEditForm"
          :rules="addOrEditFormRules"
          label-width="auto"
          label-position="right"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="维保人" prop="qcUser">
                <el-input
                  v-model="addOrEditForm.qcUser"
                  placeholder="请输入维保人"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="维保人联系方式" prop="phonenumber">
                <el-input
                  v-model="addOrEditForm.phonenumber"
                  placeholder="请输入维保人联系方式"
                  clearable
                  maxlength="11"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="维保日期" prop="qcTime">
                <el-date-picker
                  v-model="addOrEditForm.qcTime"
                  type="date"
                  placeholder="请选择维保日期"
                  value-format="yyyy-MM-dd"
                  clearable
                  style="width: 100%"
                  @change="onQcChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="下次维保日期" prop="nextCheckTime">
                <el-date-picker
                  v-model="addOrEditForm.nextCheckTime"
                  type="date"
                  placeholder="请选择下次维保日期"
                  value-format="yyyy-MM-dd"
                  clearable
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="维保附件" prop="fileInfoList">
                <!-- 使用el-upload替换自定义上传组件 -->
                <el-upload
                  :action="uploadUrl"
                  :headers="{ Authorization: getToken() }"
                  :file-list="fileList"
                  :on-success="handleUploadSuccess"
                  :on-error="handleUploadError"
                  :on-remove="handleRemove"
                  :before-upload="beforeUpload"
                  :limit="1"
                  :on-exceed="handleExceed"
                  accept=".jpg,.png,.pdf,.doc,.docx"
                  list-type="picture-card"
                >
                  <i class="el-icon-plus" style="font-size: 48px; color: #aaa;"></i>
                  <div slot="tip" class="el-upload__tip">
                    支持格式：.jpg、.png、.pdf、.doc、.docx 单个文件大小不能超过10M
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <!-- 质检记录详情 -->
      <template v-if="dialogTitle === '维保记录'">
        <el-row style="padding-bottom: 20px">
          <el-col :span="6">
            <span>装备编号：</span>
            <span>{{ qualityDetails.deviceCode }}</span>
          </el-col>
          <el-col :span="6">
            <span>装备名称：</span>
            <span>{{ qualityDetails.deviceName }}</span>
          </el-col>
        </el-row>

        <!-- 详情页搜索表单 -->
        <el-form
          ref="searchFormRefInDialog"
          :model="searchParamsInDialog"
          :inline="true"
          size="small"
          label-width="70px"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item prop="qcCode" label="维保编码">
                <el-input
                  v-model="searchParamsInDialog.qcCode"
                  placeholder="请输入维保编码"
                  clearable
                  style="width: 190px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维保日期">
                <el-date-picker
                  v-model="qcTime_1"
                  type="daterange"
                  placeholder="维保日期"
                  range-separator="-"
                  value-format="yyyy-MM-dd"
                  start-placeholder="维保日期"
                  end-placeholder="维保日期"
                  style="width:190px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="上传日期">
                <el-date-picker
                  v-model="createTime_1"
                  type="daterange"
                  placeholder="上传日期"
                  range-separator="-"
                  value-format="yyyy-MM-dd"
                  start-placeholder="上传日期"
                  end-placeholder="上传日期"
                  style="width: 190px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right;">
                <el-button type="primary" size="small" icon="el-icon-search" class="primary-lease" @click="getLeaseListDataInDialog">
                  查询
                </el-button>
                <el-button icon="el-icon-refresh" size="small" class="primary-lease" @click="onResetInDialog">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 详情表格 -->
        <el-table
          :data="qualityDetailsList"
          border
          stripe
          show-overflow-tooltip
          height="546"
        >
          <el-table-column label="序号" type="index" align="center" width="80"/>
          <el-table-column prop="qcCode" label="维保编码" align="center"/>
          <el-table-column prop="qcTime" label="维修保养日期" align="center"/>
          <el-table-column prop="nickName" label="上传人" align="center" width="120"/>
          <el-table-column prop="createTime" label="上传时间" align="center"/>
          <el-table-column label="附件" align="center">
            <template slot-scope="{ row }">
              <el-image
                v-if="row.url.includes('.jpg') || row.url.includes('.png')"
                :src="row.url"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[row.url]"
                :initial-index="0"
                :z-index="9999999999"
                :preview-teleported="true"
                style="width: 60px; height: 60px"
                fit="cover"
              />
              <span v-else>
                <a
                  :href="row.url"
                  target="_blank"
                  style="color: #00a288; text-decoration: underline; cursor: pointer"
                >
                  查看
                </a>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="{ row }">
              <el-popconfirm
                width="220"
                icon-color="#626AEF"
                title="确定删除该记录吗？"
                @confirm="onDelete(row)"
              >
                <template #reference>
                  <el-button size="small" type="danger"> 删除</el-button>
                </template>
                <template #actions="{ confirm }">
                  <el-button type="primary" class="primary-lease" size="small">取消</el-button>
                  <el-button type="primary" class="primary-lease" size="small" @click="confirm()">确定</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 详情页分页 -->
        <pagination
          :total="totalInDialog"
          :page.sync="searchParamsInDialog.pageNum"
          :limit.sync="searchParamsInDialog.pageSize"
          @pagination="getLeaseListDataInDialog"
        />
      </template>

      <!-- 对话框底部按钮 -->
      <template #footer v-if="dialogTitle === '维保操作'">
        <div class="dialog-footer">
          <el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
          <el-button type="primary" class="primary-lease" @click="onSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  addQualityDataApi,
  getQualityListApi,
  getQualityDetailsApi,
  qualityDeleteByIdApi,
  getAssociationListApi
} from '@/api/EquipmentServicing/index'
import { getSelectEquipmentListAPI } from '@/api/EquipmentLedger/equ-out'
import { getToken } from '@/utils/auth' // 引入获取token的工具函数

export default {
  data() {
    return {
      // 列表数据相关
      total: 0,
      qualityLis: [],
      associationList: [],

      // 详情页相关
      totalInDialog: 0,
      qualityDetailsList: [],
      qualityDetails: {},

      // 时间选择器相关
      qcTime: [],
      createTime: [],
      qcTime_1: [],
      createTime_1: [],

      // 对话框相关
      dialogTitle: '',
      addOrEditDialogVisible: false,
      isRepublish: true,

      // 搜索参数
      searchParams: {
        deviceCode: '',
        qcStartTime: '',
        qcEndTime: '',
        createStartTime: '',
        createEndTime: '',
        minNum: '',
        maxNum: '',
        pageSize: 10,
        pageNum: 1
      },

      // 详情页搜索参数
      searchParamsInDialog: {
        id: '',
        qcCode: '',
        qcStartTime: '',
        qcEndTime: '',
        createStartTime: '',
        createEndTime: '',
        maId: '',
        pageSize: 10,
        pageNum: 1
      },

      // 表单数据
      addOrEditForm: {
        maId: '',
        qcName: '',
        qcUser: '',
        phonenumber: '',
        qcTime: '',
        nextCheckTime: '',
        fileInfoList: []  // 存储上传成功的文件信息
      },

      // 文件上传相关
      fileList: [],  // el-upload使用的文件列表
      uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
      warningDays: 0
    }
  },
  computed: {
    // 搜索表单验证规则
    searchFormRules() {
      return {
        minNum: [
          {
            pattern: /^[1-9][0-9]*$/,
            message: '请输入大于0的正整数',
            trigger: 'blur'
          },
          { validator: this.checkMinNum, trigger: 'blur' }
        ],
        maxNum: [
          {
            pattern: /^[1-9][0-9]*$/,
            message: '请输入大于0的正整数',
            trigger: 'blur'
          },
          { validator: this.checkMaxNum, trigger: 'blur' }
        ]
      }
    },
    // 新增表单验证规则
    addOrEditFormRules() {
      return {
        maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
        nextCheckTime: [{ required: true, message: '请输入下次质检日期', trigger: 'blur' }],
        qcUser: [{ required: true, message: '请输入质检员', trigger: 'change' }],
        phonenumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        qcTime: [{ required: true, message: '请选择质检日期', trigger: 'change' }],
        fileInfoList: [{ required: true, message: '请上传质检附件', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getToken,
    // 验证最小次数不能大于最大次数
    checkMinNum(rule, value, callback) {
      const maxNum = parseInt(this.searchParams.maxNum)
      if (value > maxNum && maxNum > 0) {
        return callback(new Error('查询开始次数不能大于查询结束次数'))
      }
      callback()
    },
    // 验证最大次数不能小于最小次数
    checkMaxNum(rule, value, callback) {
      const minNum = parseInt(this.searchParams.minNum)
      if (value < minNum && minNum > 0) {
        return callback(new Error('查询结束次数不能小于查询开始次数'))
      }
      callback()
    },

    // 获取列表数据
    async getLeaseListData() {
      // 处理日期范围
      if (this.qcTime &&this.qcTime.length > 0) {
        console.log(this.qcTime)
        this.searchParams.qcStartTime = this.qcTime[0]
        this.searchParams.qcEndTime = this.qcTime[1]
      }else{
        this.searchParams.qcStartTime = ''
        this.searchParams.qcEndTime = ''
      }
      if (this.createTime && this.createTime.length > 0) {
        this.searchParams.createStartTime = this.createTime[0]
        this.searchParams.createEndTime = this.createTime[1]
      }else{
        this.searchParams.createStartTime = ''
        this.searchParams.createEndTime = ''
      }

      try {
        getQualityListApi(this.searchParams).then((res) => {
          console.log(res)
          this.qualityLis = res.data.rows
          this.total = res.data.total
        })
      } catch (error) {
        console.error('获取质检列表失败:', error)
        this.$message.error('获取数据失败，请重试')
      }
    },

    // 搜索
    onSearch() {
      this.$refs.searchFormRef.validate(valid => {
        if (valid) {
          this.getLeaseListData()
        }
      })
    },

    // 重置搜索条件
    onReset() {
      this.qcTime = []
      this.createTime = []
      this.searchParams = {
        deviceCode: '',
        qcStartTime: '',
        qcEndTime: '',
        createStartTime: '',
        createEndTime: '',
        minNum: '',
        maxNum: '',
        pageSize: 10,
        pageNum: 1
      }
      this.$refs.searchFormRef.resetFields()
      this.getLeaseListData()
    },

    // 获取关联装备列表
    async getAssociationListData() {
      try {
        const res = await getAssociationListApi()
        this.associationList = res.data
      } catch (error) {
        console.error('获取关联装备失败:', error)
        this.$message.error('获取关联装备失败，请重试')
      }
    },

    // 打开新增对话框
    handleOpenAddDialog(row) {
      this.isRepublish = true
      this.dialogTitle = '维保操作'
      this.addOrEditDialogVisible = true
      // 重置表单和文件列表
      this.addOrEditForm = {
        maId: row.maId,
        qcName: '',
        qcUser: '',
        qcTime: '',
        nextCheckTime: '',
        fileInfoList: []
      }
      this.fileList = []
      this.warningDays = row.maintenanceAlarmDay
    },

    // 打开详情对话框
    handleOpenDetailDialog(row) {
      this.qualityDetails = row
      this.searchParamsInDialog.maId = row.maId
      this.searchParamsInDialog.qcCode = ''
      this.qcTime_1 = []
      this.createTime_1 = []
      this.searchParamsInDialog.qcStartTime = ''
      this.searchParamsInDialog.qcEndTime = ''
      this.searchParamsInDialog.createStartTime = ''
      this.searchParamsInDialog.createEndTime = ''
      this.dialogTitle = '维保记录'
      this.addOrEditDialogVisible = true
      this.getLeaseListDataInDialog()
    },

    // 获取详情列表数据
    async getLeaseListDataInDialog() {
      // 处理日期范围
      if (this.qcTime_1 && this.qcTime_1.length > 0) {
        this.searchParamsInDialog.qcStartTime = this.qcTime_1[0]
        this.searchParamsInDialog.qcEndTime = this.qcTime_1[1]
      }else{
        this.searchParamsInDialog.qcStartTime = ''
        this.searchParamsInDialog.qcEndTime = ''
      }
      if (this.createTime_1 &&this.createTime_1.length > 0) {
        this.searchParamsInDialog.createStartTime = this.createTime_1[0]
        this.searchParamsInDialog.createEndTime = this.createTime_1[1]
      }else{
        this.searchParamsInDialog.createStartTime = ''
        this.searchParamsInDialog.createEndTime = ''
      }

      try {
        const { data: res } = await getQualityDetailsApi(this.searchParamsInDialog)
        this.qualityDetailsList = res.rows
        this.totalInDialog = res.total
      } catch (error) {
        console.error('获取质检详情失败:', error)
        this.$message.error('获取详情数据失败，请重试')
      }
    },

    // 重置详情页搜索条件
    onResetInDialog() {
      this.qcTime_1 = []
      this.createTime_1 = []
      this.searchParamsInDialog = {
        ...this.searchParamsInDialog,
        qcCode: '',
        qcStartTime: '',
        qcEndTime: '',
        createStartTime: '',
        createEndTime: '',
        pageNum: 1,
        pageSize: 10
      }
      this.$refs.searchFormRefInDialog.resetFields()
      this.getLeaseListDataInDialog()
    },

    // 删除质检记录
    async onDelete(row) {
      try {
        const res = await qualityDeleteByIdApi({
          fileId: row.fileId,
          maId: row.maId
        })
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.getLeaseListData()
          this.getLeaseListDataInDialog()
        } else {
          this.$message.error(res.msg || '删除失败')
        }
      } catch (error) {
        console.error('删除质检记录失败:', error)
        // this.$message.error('删除失败，请重试')
      }
    },

    // 提交新增表单
    onSubmit() {
      this.$refs.addOrEditFormRef.validate(async valid => {
        if (valid) {
          try {
            const res = await addQualityDataApi(this.addOrEditForm)
            if (res.code === 200) {
              this.$message.success('提交成功')
              this.addOrEditDialogVisible = false
              this.getLeaseListData()
            } else {
              this.$message.error(res.msg || '提交失败')
            }
          } catch (error) {
            console.error('提交质检数据失败:', error)
            this.$message.error('提交失败，请重试')
          }
        }
      })
    },

    // 取消
    onCancel() {
      this.addOrEditDialogVisible = false
    },

    // 关闭对话框
    onClose() {
      if (this.dialogTitle !== '维保记录') {
        this.$refs.addOrEditFormRef.resetFields()
        this.fileList = []
        this.addOrEditForm.fileInfoList = []
      }
    },

    // 文件上传成功处理
    handleUploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.$message.success('文件上传成功')
        // 按后端返回格式调整文件信息
        let fileUrl = ''
        if (process.env.VUE_APP_BASE_API !== '/iws/jxhzb-api') {
          fileUrl = response.data.url // 公司-测试环境
        } else {
          fileUrl = 'http://sgwpdm.ah.sgcc.com.cn/iws/ahbns/' + response.data.url // 宏源-测试环境
        }

        // 更新表单文件列表
        this.addOrEditForm.fileInfoList = [{
          fileName: file.name,
          fileUrl: fileUrl,
          fileId: response.data.fileId // 假设后端返回fileId
        }]
      } else {
        this.$message.error(response.msg || '文件上传失败')
        // 上传失败时从文件列表中移除
        this.fileList = this.fileList.filter(f => f.uid !== file.uid)
      }
    },

    // 文件上传失败处理
    handleUploadError(error, file, fileList) {
      this.$message.error('文件上传失败，请重试')
      // 从文件列表中移除失败的文件
      this.fileList = this.fileList.filter(f => f.uid !== file.uid)
    },

    // 移除文件处理
    handleRemove(file, fileList) {
      this.fileList = fileList
      // 同时清空表单中的文件信息
      this.addOrEditForm.fileInfoList = []
    },

    // 上传前校验
    beforeUpload(file) {
      // 校验文件大小
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }

      // 校验文件类型
      const fileExtension = file.name.split('.').pop().toLowerCase()
      const allowedTypes = ['jpg', 'png', 'pdf', 'doc', 'docx']
      if (!allowedTypes.includes(fileExtension)) {
        this.$message.error('只支持 jpg、png、pdf、doc、docx 格式的文件!')
        return false
      }

      return true
    },

    // 超过文件数量限制处理
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，已自动忽略多余文件。`)
    },

    // 质检日期变化时自动计算下次质检日期
    onQcChange(value) {
      if (!value || !this.warningDays) return
      const currentDate = new Date(value)
      currentDate.setDate(currentDate.getDate() + this.warningDays)
      this.addOrEditForm.nextCheckTime = this.formatDate(currentDate)
    },

    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  },
  mounted() {
    this.getLeaseListData()
    this.getAssociationListData()
  }
}
</script>

<style scoped>


/* 优化列的 Flex 居中细节 */
.flex-center {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平方向左对齐，保持表单整齐 */
  padding: 5px 0; /* 增加上下内边距，让居中更明显 */
}
</style>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 6px;
  width: 95%;
}

::v-deep .upload-tip .el-form-item__label {
  color: transparent;
}

/* ::v-deep .el-pagination {
  justify-content: flex-end;
  padding: 5px 0;
  margin-top: 15px;
} */

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: #3cb4a6;
}

::v-deep .el-dialog {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-height: 100vh !important;

  .el-dialog__body {
    flex: 1;
    overflow-y: scroll !important;
  }

  .dialog-content {
    padding: 20px;
  }
}

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.img-list {
  display: flex;
  align-items: center;

  .img-items {
    width: 100px;
    height: 100px;
    margin-right: 8px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .mask-img {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete-icon {
        font-size: 20px;
        cursor: pointer;
        z-index: 9;
        color: #fff;
      }
    }
  }

  .img-items:hover .mask-img {
    visibility: visible;
  }
}

.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;
}

.content-box {
  border-radius: 8px;
  height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;

    ::v-deep .pagination-container {
      padding: 0px 20px !important;
      /* margin-bottom: 30px; */
    }
  }

  ::v-deep .el-table {
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important; // 浅紫色
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}

.dialog-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  ::v-deep .el-table {
    border-radius: 6px;
    overflow: hidden;

    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 45px;
        font-size: 14px;
        border-bottom: 2px solid #e4e7ed;
      }
    }

    .el-table__body {
      tr {
        transition: all 0.2s ease;

        &:hover {
          background-color: #f8f9fa;
        }

        td {
          padding: 12px 8px;
          font-size: 13px;
          border-bottom: 1px solid #f0f2f5;
        }
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }

    // 表格边框优化
    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
}

::v-deep .el-table {
  // 启用斑马纹
  &.el-table--striped .el-table__body {
    tr.el-table__row--striped td {
      background-color: #F6FBFA !important; // 浅紫色
    }
  }

  .el-table__header {
    background: #E9F0EE;

    th {
      background: #E9F0EE !important;
      color: #606266;
      font-weight: 600;
      height: 50px;
    }
  }

  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
    background-color: #CCF1E9 !important;
  }
}


</style>

