<template>
  <!-- 移动端布局 -->
  <div v-if="isMobile" class="mobile-batch-list">
    <!-- 顶部操作栏 -->
    <div class="mobile-header">
      <div class="mobile-header__search">
        <el-input
          v-model="queryParams.workOrderCode"
          placeholder="搜索批号"
          clearable
          @keyup.enter="handleQuery"
          :prefix-icon="Search"
        />
      </div>
      <div class="mobile-header__actions">
        <el-button :icon="Filter" circle @click="filterVisible = true" />
      </div>
    </div>

    <!-- 快捷筛选 -->
    <div class="mobile-quick-filter">
      <div
        class="quick-filter-item"
        :class="{ active: queryParams.status === undefined }"
        @click="handleQuickFilter(undefined)"
      >全部</div>
      <div
        class="quick-filter-item"
        :class="{ active: queryParams.status === 3 }"
        @click="handleQuickFilter(3)"
      >已入库</div>
      <div
        class="quick-filter-item"
        :class="{ active: queryParams.status === 4 }"
        @click="handleQuickFilter(4)"
      >已出库</div>
    </div>

    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
        <el-empty description="暂无数据" />
      </div>
      <div
        v-for="row in list"
        :key="row.id"
        class="mobile-card"
        @click="viewDetails(row)"
      >
        <div class="mobile-card__header">
          <span class="mobile-card__code">{{ row.workOrderCode }}</span>
          <el-tag :type="getStatusTagType(row.status)" size="small">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </div>
        <div class="mobile-card__body">
          <div class="mobile-card__main-info">
            <div class="info-item">
              <span class="info-label">产量</span>
              <span class="info-value">{{ row.weight }} 吨</span>
            </div>
            <div class="info-item">
              <span class="info-label">糖苷</span>
              <span class="info-value highlight">{{ formatPercent(row.steviaGlycosidesPercent) }}%</span>
            </div>
          </div>
          <div class="mobile-card__indicators">
            <span class="indicator">RD: {{ formatDecimal(row.steviaRd) }}</span>
            <span class="indicator">RA: {{ formatDecimal(row.steviaRa) }}</span>
            <span class="indicator">STV: {{ formatDecimal(row.steviaStv) }}</span>
            <span class="indicator">水分: {{ formatPercent(row.steviaMoisture) }}%</span>
          </div>
        </div>
        <div class="mobile-card__footer">
          <span class="mobile-card__time">{{ formatTime(row.inspectionTime) }}</span>
          <el-button size="small" type="primary" link>查看详情 &gt;</el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="mobile-pagination" v-if="total > 0">
      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" />
    </div>

    <!-- 筛选抽屉 -->
    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="70%">
      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
        <el-form-item label="批号" prop="workOrderCode">
          <el-input v-model="queryParams.workOrderCode" placeholder="请输入批号" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
            <el-option label="已入库" :value="3" />
            <el-option label="已出库" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="产量范围(吨)">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input v-model="queryParams.weightMin" placeholder="最小值" clearable />
            </el-col>
            <el-col :span="12">
              <el-input v-model="queryParams.weightMax" placeholder="最大值" clearable />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="甘菊糖糖苷(%)">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input v-model="queryParams.steviaGlycosidesPercentMin" placeholder="最小值" clearable />
            </el-col>
            <el-col :span="12">
              <el-input v-model="queryParams.steviaGlycosidesPercentMax" placeholder="最大值" clearable />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="质检时间" prop="inspectionTime">
          <el-date-picker
            v-model="queryParams.inspectionTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
      </template>
    </el-drawer>
  </div>

  <!-- PC端布局 -->
  <template v-else>
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="批号" prop="workOrderCode">
          <el-input
            v-model="queryParams.workOrderCode"
            placeholder="请输入批号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            class="!w-240px"
          >
            <el-option label="已入库" :value="3" />
            <el-option label="已出库" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="产量范围(吨)" prop="weightRange">
          <el-input
            v-model="queryParams.weightMin"
            placeholder="最小值"
            clearable
            class="!w-100px"
            style="margin-right: 10px"
          />
          <el-input
            v-model="queryParams.weightMax"
            placeholder="最大值"
            clearable
            class="!w-100px"
          />
        </el-form-item>
        <el-form-item label="甘菊糖糖苷(%)" prop="steviaGlycosidesPercentRange">
          <el-input
            v-model="queryParams.steviaGlycosidesPercentMin"
            placeholder="最小值"
            clearable
            class="!w-100px"
            style="margin-right: 10px"
          />
          <el-input
            v-model="queryParams.steviaGlycosidesPercentMax"
            placeholder="最大值"
            clearable
            class="!w-100px"
          />
        </el-form-item>
        <el-form-item label="质检时间" prop="inspectionTime">
          <el-date-picker
            v-model="queryParams.inspectionTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
          >
            <Icon icon="ep:download" class="mr-5px" /> 导出
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
    >
      <el-table-column label="批号" align="center" prop="workOrderCode" min-width="120" />
      <el-table-column label="状态" align="center" prop="status" width="100">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="产量(吨)" align="center" prop="weight" min-width="100">
        <template #default="scope">
          {{ scope.row.weight }}
        </template>
      </el-table-column>
      <el-table-column label="甜菊糖糖苷(%)" align="center" prop="steviaGlycosidesPercent" min-width="120">
        <template #default="scope">
          {{ formatPercent(scope.row.steviaGlycosidesPercent) }}
        </template>
      </el-table-column>
      <el-table-column label="RD" align="center" prop="steviaRd" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaRd) }}
        </template>
      </el-table-column>
      <el-table-column label="RA" align="center" prop="steviaRa" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaRa) }}
        </template>
      </el-table-column>
      <el-table-column label="STV" align="center" prop="steviaStv" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaStv) }}
        </template>
      </el-table-column>
      <el-table-column label="RF" align="center" prop="steviaRf" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaRf) }}
        </template>
      </el-table-column>
      <el-table-column label="RC" align="center" prop="steviaRc" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaRc) }}
        </template>
      </el-table-column>
      <el-table-column label="DA" align="center" prop="steviaDa" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaDa) }}
        </template>
      </el-table-column>
      <el-table-column label="RV" align="center" prop="steviaRv" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaRv) }}
        </template>
      </el-table-column>
      <el-table-column label="RB" align="center" prop="steviaRb" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaRb) }}
        </template>
      </el-table-column>
      <el-table-column label="SB" align="center" prop="steviaSb" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaSb) }}
        </template>
      </el-table-column>
      <el-table-column label="水分(%)" align="center" prop="steviaMoisture" min-width="100">
        <template #default="scope">
          {{ formatPercent(scope.row.steviaMoisture) }}
        </template>
      </el-table-column>
      <el-table-column label="灰份(%)" align="center" prop="steviaAshPercent" min-width="100">
        <template #default="scope">
          {{ formatPercent(scope.row.steviaAshPercent) }}
        </template>
      </el-table-column>
      <el-table-column label="PH" align="center" prop="steviaPhValue" min-width="80">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaPhValue) }}
        </template>
      </el-table-column>
      <el-table-column label="比吸光" align="center" prop="steviaSpecificAbsorbance" min-width="100">
        <template #default="scope">
          {{ formatDecimal(scope.row.steviaSpecificAbsorbance) }}
        </template>
      </el-table-column>
      <el-table-column label="透光率(%)" align="center" prop="steviaTransmittance" min-width="100">
        <template #default="scope">
          {{ formatPercent(scope.row.steviaTransmittance) }}
        </template>
      </el-table-column>
      <el-table-column
        label="质检时间"
        align="center"
        prop="inspectionTime"
        :formatter="dateFormatter"
        width="160px"
      />
      <el-table-column label="操作" align="center" min-width="100px">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="viewDetails(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  </template>

  <!-- 详情弹窗 -->
  <QualityDetailDialog ref="detailDialogRef" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { getWarehousedFinishedProductQualityPage, exportWarehousedFinishedProductQuality, FinishedProductQuality } from '@/api/mes/quality/productquality'
import QualityDetailDialog from './QualityDetailDialog.vue'
import { useWindowSize } from '@vueuse/core'
import { Search, Filter } from '@element-plus/icons-vue'

/** 质检批次数据 列表 */
defineOptions({ name: 'QualityBatch' })

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<FinishedProductQuality[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const filterVisible = ref(false) // 筛选抽屉
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  workOrderCode: undefined,
  status: undefined,
  weightMin: undefined,
  weightMax: undefined,
  steviaGlycosidesPercentMin: undefined,
  steviaGlycosidesPercentMax: undefined,
  inspectionTime: [],
  createTime: [],
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await getWarehousedFinishedProductQualityPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 快捷筛选 */
const handleQuickFilter = (status: number | undefined) => {
  queryParams.status = status
  queryParams.pageNo = 1
  getList()
}

/** 筛选确认 */
const handleFilterConfirm = () => {
  filterVisible.value = false
  handleQuery()
}

/** 格式化时间 */
const formatTime = (time: string) => {
  if (!time) return '-'
  const date = new Date(time)
  return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + ' ' + 
         date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await exportWarehousedFinishedProductQuality(queryParams)
    download.excel(data, '质检批次数据.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 查看详情 */
const detailDialogRef = ref()
const viewDetails = (row: FinishedProductQuality) => {
  detailDialogRef.value.open(row)
}

/** 格式化重量 */
const formatWeight = (weight: number) => {
  if (!weight) return '-'
  return (weight / 1000).toFixed(3) // 转换为吨，保留3位小数
}

/** 格式化百分比 */
const formatPercent = (value: number) => {
  if (value === null || value === undefined) return '-'
  return value.toFixed(2)
}

/** 格式化小数 */
const formatDecimal = (value: number) => {
  if (value === null || value === undefined) return '-'
  return value.toFixed(2)
}

/** 获取状态标签类型 */
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0: return 'warning' // 待检
    case 1: return 'info'    // 检验中
    case 2: return 'success' // 已完成
    case 3: return 'success' // 已入库
    default: return ''
  }
}

/** 获取状态标签文本 */
const getStatusLabel = (status: number) => {
  switch (status) {
    case 0: return '待检'
    case 1: return '检验中'
    case 2: return '已完成'
    case 3: return '已入库'
    case 4: return '已出库'
    default: return '未知'
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
// 响应式设计
@media (max-width: 1200px) {
  .el-form {
    .el-form-item {
      margin-bottom: 16px;
      
      .el-input {
        width: 200px !important;
      }
      
      .el-select {
        width: 200px !important;
      }
      
      .el-date-picker {
        width: 200px !important;
      }
    }
  }
}

@media (max-width: 992px) {
  .el-form {
    padding: 16px;
    
    .el-form-item {
      margin-bottom: 20px;
      display: block !important;
      margin-right: 0 !important;
      
      .el-form-item__label {
        display: block;
        text-align: left;
        width: auto !important;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      .el-form-item__content {
        margin-left: 0 !important;
        
        .el-input {
          width: 100% !important;
          max-width: 300px;
        }
        
        .el-select {
          width: 100% !important;
          max-width: 300px;
        }
        
        .el-date-picker {
          width: 100% !important;
          max-width: 300px;
        }
      }
      
      // 范围输入特殊处理
      &:has(.el-input + .el-input) {
        .el-form-item__content {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          
          .el-input {
            flex: 1;
            min-width: 120px;
            max-width: 145px;
          }
        }
      }
      
      // 按钮组处理
      &:last-child {
        .el-form-item__content {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          justify-content: center;
          
          .el-button {
            min-width: 80px;
            flex: 1;
            max-width: 120px;
          }
        }
      }
    }
  }
  
  .el-table {
    font-size: 13px;
    
    .el-table__header {
      font-size: 12px;
    }
  }
}

@media (max-width: 768px) {
  .el-form {
    padding: 12px;
    margin-bottom: 12px;
    
    .el-form-item {
      margin-bottom: 16px;
      
      .el-form-item__label {
        font-size: 14px;
        margin-bottom: 6px;
      }
      
      .el-form-item__content {
        .el-input {
          font-size: 14px;
          
          .el-input__inner {
            height: 40px;
          }
        }
        
        .el-select {
          font-size: 14px;
          
          .el-input__inner {
            height: 40px;
          }
        }
        
        .el-date-picker {
          font-size: 14px;
          
          .el-input__inner {
            height: 40px;
          }
        }
      }
      
      // 范围输入移动端优化
      &:has(.el-input + .el-input) {
        .el-form-item__content {
          flex-direction: column;
          gap: 8px;
          
          .el-input {
            max-width: none;
          }
        }
      }
      
      // 按钮组移动端优化
      &:last-child {
        .el-form-item__content {
          flex-direction: column;
          
          .el-button {
            max-width: none;
            height: 44px;
            font-size: 14px;
            touch-action: manipulation;
          }
        }
      }
    }
  }
  
  // 表格容器添加横向滚动
  :deep(.el-table) {
    .el-table__body-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .el-table__header-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    table {
      min-width: 1400px;
    }
    
    .el-table__header {
      font-size: 11px;
      
      th {
        padding: 8px 6px;
        white-space: nowrap;
      }
    }
    
    .el-table__body {
      font-size: 11px;
      
      td {
        padding: 8px 6px;
        white-space: nowrap;
      }
    }
    
    // 固定操作列
    .el-table__fixed-right {
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    }
  }
  
  // 分页组件优化
  :deep(.el-pagination) {
    padding: 12px 0;
    justify-content: center;
    
    .el-pagination__total,
    .el-pagination__jump {
      display: none;
    }
    
    .el-pager {
      li {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
      }
    }
    
    .btn-prev,
    .btn-next {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
    }
    
    .el-pagination__sizes {
      .el-select {
        .el-input {
          width: 80px !important;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .el-form {
    padding: 8px;
    
    .el-form-item {
      margin-bottom: 12px;
      
      .el-form-item__label {
        font-size: 13px;
        margin-bottom: 4px;
      }
      
      .el-form-item__content {
        .el-input,
        .el-select,
        .el-date-picker {
          font-size: 13px;
          
          .el-input__inner {
            height: 36px;
          }
        }
      }
      
      // 按钮组小屏优化
      &:last-child {
        .el-form-item__content {
          .el-button {
            height: 40px;
            font-size: 13px;
          }
        }
      }
    }
  }
  
  :deep(.el-table) {
    table {
      min-width: 1200px;
    }
    
    .el-table__header {
      font-size: 10px;
      
      th {
        padding: 6px 4px;
      }
    }
    
    .el-table__body {
      font-size: 10px;
      
      td {
        padding: 6px 4px;
      }
    }
  }
  
  :deep(.el-pagination) {
    .el-pager {
      li {
        min-width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 11px;
      }
    }
    
    .btn-prev,
    .btn-next {
      min-width: 28px;
      height: 28px;
      line-height: 28px;
    }
  }
}

// 横屏优化
@media (max-width: 768px) and (orientation: landscape) {
  .el-form {
    .el-form-item {
      // 范围输入横屏优化
      &:has(.el-input + .el-input) {
        .el-form-item__content {
          flex-direction: row;
          gap: 10px;
          
          .el-input {
            flex: 1;
            min-width: 100px;
            max-width: 140px;
          }
        }
      }
      
      // 按钮组横屏优化
      &:last-child {
        .el-form-item__content {
          flex-direction: row;
          justify-content: center;
          
          .el-button {
            flex: 1;
            max-width: 100px;
          }
        }
      }
    }
  }
}

// 触摸设备优化
@media (hover: none) and (pointer: coarse) {
  .el-form {
    .el-form-item {
      .el-form-item__content {
        .el-button {
          min-height: 44px;
          touch-action: manipulation;
        }
        
        .el-input,
        .el-select,
        .el-date-picker {
          .el-input__inner {
            min-height: 44px;
          }
        }
      }
    }
  }
  
  :deep(.el-table) {
    .el-table__body {
      tr:hover {
        background-color: inherit;
      }
      
      tr:active {
        background-color: #f5f7fa;
      }
    }
  }
}

.mobile-batch-list {
  padding: 12px;
  background: #f5f5f5;
  min-height: 100vh;
}

.mobile-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  &__search { flex: 1; }
  &__actions { display: flex; gap: 4px; flex-shrink: 0; }
}

.mobile-quick-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  overflow-x: auto;
  
  .quick-filter-item {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 16px;
    cursor: pointer;
    color: #909399;
    background: #fff;
    white-space: nowrap;
    transition: all 0.2s;
    
    &.active {
      color: #fff;
      background: #409eff;
    }
  }
}

.mobile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-empty { padding: 40px 0; }

.mobile-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  &__code {
    font-weight: 600;
    font-size: 15px;
    color: #303133;
  }
  
  &__body {
    font-size: 13px;
  }
  
  &__main-info {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    
    .info-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .info-label {
      font-size: 11px;
      color: #909399;
    }
    
    .info-value {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      
      &.highlight {
        color: #409eff;
      }
    }
  }
  
  &__indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    
    .indicator {
      font-size: 12px;
      color: #606266;
      background: #f5f7fa;
      padding: 2px 8px;
      border-radius: 4px;
    }
  }
  
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }
  
  &__time {
    font-size: 12px;
    color: #909399;
  }
}

.mobile-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>
