<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="农品标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入农品标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发布人" prop="createBy">
        <el-input v-model="queryParams.createBy" placeholder="请输入发布人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="农品分类" prop="categoryId">
        <el-select v-model="queryParams.categoryId" placeholder="请选择农品分类" clearable>
          <el-option v-for="dict in dict.type.agricultural_category" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="交易类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择交易类型" clearable>
          <el-option label="销售" :value="0" />
          <el-option label="收购" :value="1" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="交易类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择交易类型" clearable>
          <el-option v-for="dict in dict.type.agricultural_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-right: 15px;">
        <span slot="label" style="white-space: nowrap;">单价</span>
        <div style="display: inline-flex; align-items: center; white-space: nowrap;">
          <el-input v-model="queryParams.minPrice" placeholder="最低价" style="width: 100px" clearable size="small" />
          <span style="margin: 0 8px; color: #666;">-</span>
          <el-input v-model="queryParams.maxPrice" placeholder="最高价" style="width: 100px" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="所在地" prop="location">
        <!-- <el-cascader
          v-model="queryParams.areaCode"
          :options="areaOptions"
          placeholder="请选择省市区"
          clearable
          style="width: 200px"
          @change="handleAreaChange"
        /> -->
        <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
        </el-cascader>

      </el-form-item>
      <!-- <el-form-item label="发布状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择发布状态" clearable>
          <el-option label="未通过" :value="0" />
          <el-option label="待审核" :value="1" />
          <el-option label="已上架" :value="2" />
          <el-option label="已下架" :value="3" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="发布状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择发布状态" clearable>
          <el-option v-for="dict in dict.type.agricultural_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model="queryParams.contactName" placeholder="请输入联系人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="queryParams.contactPhone" placeholder="请输入联系电话" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="queryParams.publishTimeRange" type="datetimerange" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计面板 -->
    <div class="statistics-panel">
      <el-row :gutter="8">
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card total-card">
            <div class="stat-content">
              <div class="stat-title">农品信息总数</div>
              <div class="stat-number">{{ statistics.totalCount || 0 }}</div>
              <div class="stat-desc">累计发布信息</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card sale-card">
            <div class="stat-content">
              <div class="stat-title">销售信息</div>
              <div class="stat-number">{{ statistics.saleCount || 0 }}</div>
              <div class="stat-desc">销售类型农品</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card purchase-card">
            <div class="stat-content">
              <div class="stat-title">收购信息</div>
              <div class="stat-number">{{ statistics.purchaseCount || 0 }}</div>
              <div class="stat-desc">收购类型农品</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card pending-card">
            <div class="stat-content">
              <div class="stat-title">待审核</div>
              <div class="stat-number">{{ statistics.pendingCount || 0 }}</div>
              <div class="stat-desc">等待审核发布</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card on-sale-card">
            <div class="stat-content">
              <div class="stat-title">已上架</div>
              <div class="stat-number">{{ statistics.onSaleCount || 0 }}</div>
              <div class="stat-desc">正在交易中</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card off-sale-card">
            <div class="stat-content">
              <div class="stat-title">已下架</div>
              <div class="stat-number">{{ statistics.offSaleCount || 0 }}</div>
              <div class="stat-desc">暂停交易信息</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="3" :xl="3">
          <div class="stat-card rejected-card">
            <div class="stat-content">
              <div class="stat-title">未通过</div>
              <div class="stat-number">{{ statistics.rejectedCount || 0 }}</div>
              <div class="stat-desc">审核未通过</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['base:productInfo:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['base:productInfo:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['base:productInfo:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['base:productInfo:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productInfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" width="60">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="农品标题" align="center" prop="title" />
      <el-table-column label="发布人" align="center" prop="createBy" width="120" />
      <el-table-column label="农品分类" align="center" prop="categoryId" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.agricultural_category" :value="scope.row.categoryId + ''" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="交易类型" align="center" prop="type" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type === 0 ? 'success' : 'warning'">
            {{ scope.row.type === 0 ? '销售' : scope.row.type === 1 ? '收购' : scope.row.type }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="交易类型" align="center" prop="type" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.agricultural_type" :value="scope.row.type + ''" />
        </template>
      </el-table-column>
      <el-table-column label="详情说明" align="center" prop="description" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :title="scope.row.description">
            {{ truncateText(scope.row.description, 30) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="price" width="120" />
      <el-table-column label="数量" align="center" prop="quantity" />
      <el-table-column label="单位" align="center" prop="unit" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.agricultural_unit" :value="scope.row.unit + ''" />
        </template>
      </el-table-column>
      <el-table-column label="所在地" align="center" prop="location" />
      <el-table-column label="农品图片" align="center" prop="imageUrl" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.imageUrl" :src="getFirstImage(scope.row.imageUrl)"
            :preview-src-list="getImageList(scope.row.imageUrl)" style="width: 50px; height: 50px" fit="cover">
          </el-image>
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="发布状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="发布状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.agricultural_status" :value="scope.row.status + ''" />
        </template>
      </el-table-column>
      <el-table-column label="联系人" align="center" prop="contactName" />
      <el-table-column label="联系电话" align="center" prop="contactPhone" width="130" />
      <el-table-column label="发布时间" align="center" prop="publishTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <!-- 待审核状态：审核、修改、删除 -->
          <template v-if="scope.row.status === 1">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleOpenAudit(scope.row)"
              v-hasPermi="['base:productInfo:audit']">审核</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['base:productInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['base:productInfo:remove']">删除</el-button>
          </template>

          <!-- 已上架状态：下架、修改、删除 -->
          <template v-else-if="scope.row.status === 2">
            <el-button size="mini" type="text" icon="el-icon-bottom" @click="handleShelve(scope.row, 3)"
              v-hasPermi="['base:productInfo:shelve']">下架</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['base:productInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['base:productInfo:remove']">删除</el-button>
          </template>

          <!-- 已下架状态：上架、修改、删除 -->
          <template v-else-if="scope.row.status === 3">
            <el-button size="mini" type="text" icon="el-icon-top" @click="handleShelve(scope.row, 2)"
              v-hasPermi="['base:productInfo:shelve']">上架</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['base:productInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['base:productInfo:remove']">删除</el-button>
          </template>

          <!-- 未通过状态：修改、删除 -->
          <template v-else-if="scope.row.status === 0">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['base:productInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['base:productInfo:remove']">删除</el-button>
          </template>

          <!-- 其他状态：默认显示修改、删除 -->
          <template v-else>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['base:productInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['base:productInfo:remove']">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改交易信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="农品标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入农品标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="农品分类" prop="categoryId">
              <el-select v-model="form.categoryId" placeholder="请选择农品分类" style="width: 100%">
                <el-option v-for="dict in dict.type.agricultural_category" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <!-- <el-form-item label="交易类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择交易类型" style="width: 100%">
                <el-option label="销售" :value="0" />
                <el-option label="收购" :value="1" />
              </el-select>
            </el-form-item> -->

            <el-form-item label="交易类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择交易类型" style="width: 100%">
                <el-option v-for="dict in dict.type.agricultural_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input v-model="form.price" placeholder="请输入单价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input v-model="form.quantity" placeholder="请输入数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-select v-model="form.unit" placeholder="请选择单位" style="width: 100%">
                <el-option v-for="dict in dict.type.agricultural_unit" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所在地">
          <el-cascader size="large" :options="optionsAdd" v-model="selectedOptionsAdd" @change="handleChangeAdd">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详情说明" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入详情说明" />
        </el-form-item>
        <el-form-item label="农品图片" prop="imageUrl">
          <image-upload v-model="form.imageUrl" :limit="5" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="form.contactName" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="form.contactPhone" placeholder="请输入联系电话" @input="handlePhoneInput" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="审核农品信息" :visible.sync="auditOpen" width="900px" append-to-body>
      <!-- 农品信息展示 -->
      <div class="audit-container">
        <!-- 标题区域 -->
        <div class="audit-header">
          <div class="product-title">
            <i class="el-icon-goods"></i>
            <span>{{ auditForm.productInfo.title || '农品信息' }}</span>
          </div>
          <div class="product-status">
            <el-tag :type="getStatusType(auditForm.productInfo.status)" size="small">
              {{ getStatusText(auditForm.productInfo.status) }}
            </el-tag>
          </div>
        </div>

        <!-- 基础信息卡片 -->
        <el-card class="info-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-info"></i>
            <span>基础信息</span>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="basic-info-item">
                <div class="basic-info-label">农品分类</div>
                <div class="basic-info-value">
                  <el-tag size="small" type="primary">
                    <span v-if="isDictLoaded">{{ getCategoryText(auditForm.productInfo.categoryId) }}</span>
                    <span v-else>{{ auditForm.productInfo.categoryId || '-' }}</span>
                  </el-tag>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic-info-item">
                <div class="basic-info-label">交易类型</div>
                <div class="basic-info-value">
                  <el-tag :type="auditForm.productInfo.type === 0 ? 'success' : 'warning'" size="small">
                    {{ auditForm.productInfo.type === 0 ? '销售' : auditForm.productInfo.type === 1 ? '收购' : '-' }}
                  </el-tag>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic-info-item">
                <div class="basic-info-label">发布时间</div>
                <div class="basic-info-value">
                  <i class="el-icon-time"></i>
                  {{ parseTime(auditForm.productInfo.publishTime, '{y}-{m}-{d} {h}:{i}') }}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 价格与数量信息 -->
        <el-card class="info-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-money"></i>
            <span>价格信息</span>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="price-info-item">
                <div class="price-info-label">单价</div>
                <div class="price-info-value">
                  <span class="price-number">{{ auditForm.productInfo.price || '0' }}</span>
                  <span class="price-unit">元</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="price-info-item">
                <div class="price-info-label">数量</div>
                <div class="price-info-value">
                  <span class="quantity-number">{{ auditForm.productInfo.quantity || '-' }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="price-info-item">
                <div class="price-info-label">单位</div>
                <div class="price-info-value">
                  <el-tag size="small">
                    <span v-if="isDictLoaded">{{ getUnitText(auditForm.productInfo.unit) }}</span>
                    <span v-else>{{ auditForm.productInfo.unit || '-' }}</span>
                  </el-tag>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 详细描述 -->
        <el-card class="info-card" shadow="never" v-if="auditForm.productInfo.description">
          <div slot="header" class="card-header">
            <i class="el-icon-document"></i>
            <span>详细说明</span>
          </div>
          <div class="description-content">
            {{ auditForm.productInfo.description }}
          </div>
        </el-card>

        <!-- 农品图片 -->
        <el-card class="info-card" shadow="never" v-if="auditForm.productInfo.imageUrl">
          <div slot="header" class="card-header">
            <i class="el-icon-picture"></i>
            <span>农品图片</span>
          </div>
          <div class="image-gallery">
            <div v-for="(img, index) in getImageList(auditForm.productInfo.imageUrl)" :key="index" class="image-item">
              <el-image :src="img" :preview-src-list="getImageList(auditForm.productInfo.imageUrl)" fit="cover"
                class="product-image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </el-card>

        <!-- 联系信息 -->
        <el-card class="info-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-user"></i>
            <span>联系信息</span>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="contact-center-item">
                <div class="contact-center-icon">
                  <i class="el-icon-user-solid"></i>
                </div>
                <div class="contact-center-label">联系人</div>
                <div class="contact-center-value">{{ auditForm.productInfo.contactName || '-' }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="contact-center-item">
                <div class="contact-center-icon">
                  <i class="el-icon-phone"></i>
                </div>
                <div class="contact-center-label">联系电话</div>
                <div class="contact-center-value">{{ auditForm.productInfo.contactPhone || '-' }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="contact-center-item">
                <div class="contact-center-icon">
                  <i class="el-icon-location"></i>
                </div>
                <div class="contact-center-label">所在地</div>
                <div class="contact-center-value">{{ auditForm.productInfo.location || '-' }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 审核操作区域 -->
      <el-divider></el-divider>
      <h4 style="margin-bottom: 15px; color: #303133;">审核操作</h4>
      <el-form ref="auditForm" :model="auditForm" :rules="auditRules" label-width="100px">
        <el-form-item label="审核结果" prop="auditResult">
          <el-radio-group v-model="auditForm.auditResult">
            <el-radio :label="2">
              <span style="color: #67C23A;">通过</span>
            </el-radio>
            <el-radio :label="4">
              <span style="color: #F56C6C;">驳回</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注" prop="auditRemark">
          <el-input v-model="auditForm.auditRemark" type="textarea" :rows="4" placeholder="请填写审核备注（必填）" maxlength="200"
            show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAudit">确 定</el-button>
        <el-button @click="cancelAudit">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProductInfo, getProductInfo, delProductInfo, addProductInfo, updateProductInfo, getCount } from "@/api/base/productInfo"
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: "ProductInfo",
  dicts: ['agricultural_category', 'agricultural_unit', 'agricultural_type', 'agricultural_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 交易信息表格数据
      productInfoList: [],
      // 统计数据
      statistics: {
        totalCount: 0,
        pendingCount: 0,
        onSaleCount: 0,
        offSaleCount: 0,
        rejectedCount: 0,
        saleCount: 0,
        purchaseCount: 0
      },
      options: regionData,
      optionsAdd: regionData,
      selectedOptions: [],
      selectedOptionsAdd: [],
      // 地区选项数据（简化版本，实际项目中可能需要从后台获取）
      areaOptions: [
        {
          value: '11',
          label: '北京市',
          children: [
            {
              value: '1101',
              label: '市辖区',
              children: [
                { value: '110101', label: '东城区' },
                { value: '110102', label: '西城区' },
                { value: '110105', label: '朝阳区' },
                { value: '110106', label: '丰台区' }
              ]
            }
          ]
        },
        {
          value: '31',
          label: '上海市',
          children: [
            {
              value: '3101',
              label: '市辖区',
              children: [
                { value: '310101', label: '黄浦区' },
                { value: '310104', label: '徐汇区' },
                { value: '310105', label: '长宁区' },
                { value: '310106', label: '静安区' }
              ]
            }
          ]
        },
        {
          value: '44',
          label: '广东省',
          children: [
            {
              value: '4401',
              label: '广州市',
              children: [
                { value: '440103', label: '荔湾区' },
                { value: '440104', label: '越秀区' },
                { value: '440105', label: '海珠区' },
                { value: '440106', label: '天河区' }
              ]
            },
            {
              value: '4403',
              label: '深圳市',
              children: [
                { value: '440303', label: '罗湖区' },
                { value: '440304', label: '福田区' },
                { value: '440305', label: '南山区' },
                { value: '440306', label: '宝安区' }
              ]
            }
          ]
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 审核弹出层
      auditOpen: false,
      // 审核表单数据
      auditForm: {
        id: null,
        title: '',
        auditResult: null,
        auditRemark: '',
        productInfo: {}
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        categoryId: null,
        type: null,
        title: null,
        description: null,
        minPrice: null,
        maxPrice: null,
        location: null,
        imageUrl: null,
        status: null,
        contactName: null,
        contactPhone: null,
        publishTimeRange: null,
        areaCode: null,
        createBy: null,
        minPrice: null,
        maxPrice: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: "农品标题不能为空", trigger: "blur" }
        ],
        categoryId: [
          { required: true, message: "请选择农品分类", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选择交易类型", trigger: "change" }
        ],
        price: [
          { required: true, message: "单价不能为空", trigger: "blur" },
          { pattern: /^\d+(\.\d{1,2})?$/, message: "请输入正确的价格格式", trigger: "blur" }
        ],
        quantity: [
          { required: true, message: "数量不能为空", trigger: "blur" },
          { pattern: /^\d+(\.\d+)?$/, message: "请输入正确的数量", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "请选择单位", trigger: "change" }
        ],
        areaCode: [
          { required: true, message: "请选择所在地", trigger: "change" }
        ],
        imageUrl: [
          { required: true, message: "请上传农品图片", trigger: "change" }
        ],
        contactName: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
      },
      // 审核表单校验
      auditRules: {
        auditResult: [
          { required: true, message: "请选择审核结果", trigger: "change" }
        ],
        auditRemark: [
          { required: true, message: "请填写审核备注", trigger: "blur" },
          { min: 5, message: "审核备注至少5个字符", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getStatistics()
  },
  computed: {
    // 确保字典数据已加载
    isDictLoaded() {
      return this.dict && this.dict.type &&
        this.dict.type.agricultural_category &&
        this.dict.type.agricultural_unit
    }
  },

  methods: {
    /* this.queryParams.location = value[2] */
    handleChange(value) {
      this.queryParams.location = value[2]
    },
    handleChangeAdd(value) {
      this.form.location = value[2]
    },

    /** 获取统计数据 */
    getStatistics() {
      // 调用不带分页参数的API获取全部数据进行统计
      getCount({}).then(response => {
        this.statistics = response.data || []

        /* this.statistics = {
          totalCount: data.length,
          pendingCount: data.filter(item => item.status === 1).length,  // 待审核
          onSaleCount: data.filter(item => item.status === 2).length,   // 已上架
          offSaleCount: data.filter(item => item.status === 3).length,  // 已下架
          rejectedCount: data.filter(item => item.status === 0).length, // 未通过
          saleCount: data.filter(item => item.type === 0).length,       // 销售类型
          purchaseCount: data.filter(item => item.type === 1).length    // 收购类型
        } */
      }).catch(() => {
        this.statistics = {
          totalCount: 0,
          pendingCount: 0,
          onSaleCount: 0,
          offSaleCount: 0,
          rejectedCount: 0,
          saleCount: 0,
          purchaseCount: 0
        }
      })
    },
    /** 查询交易信息列表 */
    getList() {
      this.loading = true
      listProductInfo(this.queryParams).then(response => {
        /* this.productInfoList = response.rows */
        this.productInfoList = response.rows.map(item => {
          // 调用 CodeToText 转换 location 字段
          item.location = CodeToText[item.location];
          return item;
        });
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        categoryId: null,
        type: null,
        title: null,
        description: null,
        price: null,
        quantity: null,
        unit: null,
        location: null,
        areaCode: null,
        imageUrl: null,
        status: null,
        contactName: null,
        contactPhone: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        minPrice: null,
        maxPrice: null,
        updateTime: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1


      // 检查原始价格范围是否完整且有效
      if (this.queryParams.minPrice !== null && this.queryParams.maxPrice === null) {
        this.$message.error('请填写价格最大值');
        return;
      }
      if (this.queryParams.minPrice === null && this.queryParams.maxPrice !== null) {
        this.$message.error('请填写价格最小值');
        return;
      }
      if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null) {
        if (this.queryParams.minPrice > this.queryParams.maxPrice) {
          this.$message.error('价格最小值不能大于最大值');
          return;
        }
      }


      // 处理时间范围查询
      if (this.queryParams.publishTimeRange && this.queryParams.publishTimeRange.length === 2) {
        this.queryParams.publishTimeStart = this.queryParams.publishTimeRange[0]
        this.queryParams.publishTimeEnd = this.queryParams.publishTimeRange[1]
      } else {
        this.queryParams.publishTimeStart = null
        this.queryParams.publishTimeEnd = null
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.queryParams.minPrice = null,
        this.queryParams.maxPrice = null,
        this.queryParams.location = null,
        this.queryParams.publishTimeRange = []

      this.selectedOptions = [],
        this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加交易信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getProductInfo(id).then(response => {
        this.form = response.data
        // 确保字典字段的数据类型与字典值匹配
        if (this.form.categoryId !== null && this.form.categoryId !== undefined) {
          this.form.categoryId = String(this.form.categoryId)
        }
        if (this.form.unit !== null && this.form.unit !== undefined) {
          this.form.unit = String(this.form.unit)
        }
        if (this.form.type !== null && this.form.type !== undefined) {
          this.form.type = String(this.form.type)
        }
        const districtCode = response.data.location
      

        if (!districtCode || districtCode.length !== 6) {
          throw new Error('Invalid district code');
        }

        // 省代码：取前2位
        const provinceCode = districtCode.substring(0, 2) + '0000';

        // 市代码：取前4位
        const cityCode = districtCode.substring(0, 4) + '00';
        this.selectedOptionsAdd = [provinceCode,cityCode,districtCode]
        this.open = true
        this.title = "修改交易信息"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProductInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
              this.getStatistics()
            })
          } else {
            addProductInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
              this.getStatistics()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除交易信息编号为"' + ids + '"的数据项？').then(function () {
        return delProductInfo(ids)
      }).then(() => {
        this.getList()
        this.getStatistics()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => { })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('base/productInfo/export', {
        ...this.queryParams
      }, `productInfo_${new Date().getTime()}.xlsx`)
    },
    /** 获取第一张图片 */
    getFirstImage(imageUrl) {
      if (!imageUrl) return ''
      // 如果是多张图片用逗号分隔，取第一张
      const images = imageUrl.split(',')
      return images[0].trim()
    },
    /** 获取图片列表用于预览 */
    getImageList(imageUrl) {
      if (!imageUrl) return []
      // 分割多张图片并过滤空值
      return imageUrl.split(',').map(img => img.trim()).filter(img => img)
    },
    /** 截断文本显示 */
    truncateText(text, maxLength) {
      if (!text) return ''
      if (text.length <= maxLength) return text
      return text.substring(0, maxLength) + '...'
    },
    /** 获取状态文字 */
    getStatusText(status) {
      const statusMap = {
        0: '未通过',
        1: '待审核',
        2: '已上架',
        3: '已下架'
      }
      return statusMap[status] || status
    },
    /** 获取状态标签类型 */
    getStatusType(status) {
      const typeMap = {
        0: 'danger',    // 未通过 - 红色
        1: 'warning',   // 待审核 - 橙色
        2: 'success',   // 已上架 - 绿色
        3: 'info'       // 已下架 - 灰色
      }
      return typeMap[status] || ''
    },
    /** 处理搜索地区选择变化 */
    handleAreaChange(value) {
      if (value && value.length > 0) {
        // 可以根据需要设置具体的地区查询逻辑
        this.queryParams.location = value[value.length - 1] // 使用最后一级的code
      } else {
        this.queryParams.location = null
      }
    },
    /** 处理表单地区选择变化 */
    handleFormAreaChange(value) {
      if (value && value.length > 0) {
        this.form.location = value[value.length - 1] // 使用最后一级的code
      } else {
        this.form.location = null
      }
    },
    /** 处理电话号码输入限制 */
    handlePhoneInput(value) {
      // 只允许输入数字
      this.form.contactPhone = value.replace(/[^\d]/g, '')
    },
    /** 获取农品分类文字 */
    getCategoryText(categoryId) {
      if (!categoryId && categoryId !== 0) return '-'
      if (!this.dict || !this.dict.type || !this.dict.type.agricultural_category) {
        return categoryId
      }
      const categoryItem = this.dict.type.agricultural_category.find(item => {
        return item.value == categoryId || parseInt(item.value) === parseInt(categoryId)
      })
      return categoryItem ? categoryItem.label : categoryId
    },
    /** 获取单位文字 */
    getUnitText(unit) {
      if (!unit && unit !== 0) return '-'
      if (!this.dict || !this.dict.type || !this.dict.type.agricultural_unit) {
        return unit
      }
      const unitItem = this.dict.type.agricultural_unit.find(item => {
        return item.value == unit || parseInt(item.value) === parseInt(unit)
      })
      return unitItem ? unitItem.label : unit
    },
    /** 打开审核对话框 */
    handleOpenAudit(row) {
      this.auditForm = {
        id: row.id,
        title: row.title,
        auditResult: null,
        auditRemark: '',
        productInfo: { ...row }
      }
      this.auditOpen = true
    },
    /** 取消审核 */
    cancelAudit() {
      this.auditOpen = false
      this.resetAuditForm()
    },
    /** 重置审核表单 */
    resetAuditForm() {
      this.auditForm = {
        id: null,
        title: '',
        auditResult: null,
        auditRemark: '',
        productInfo: {}
      }
      if (this.$refs.auditForm) {
        this.$refs.auditForm.resetFields()
      }
    },
    /** 提交审核 */
    submitAudit() {
      this.$refs.auditForm.validate(valid => {
        if (valid) {
          const statusText = this.auditForm.auditResult === 2 ? '通过' : '驳回'
          const params = {
            id: this.auditForm.id,
            status: this.auditForm.auditResult,
            auditRemark: this.auditForm.auditRemark
          }
          // 这里调用审核API，根据实际后端接口调整
          updateProductInfo(params).then(response => {
            this.$modal.msgSuccess(`审核${statusText}成功`)
            this.auditOpen = false
            this.resetAuditForm()
            this.getList()
            this.getStatistics()
          }).catch(() => {
            this.$modal.msgError(`审核${statusText}失败`)
          })
        }
      })
    },
    /** 上架/下架操作 */
    handleShelve(row, status) {
      const statusText = status === 2 ? '上架' : '下架'
      this.$modal.confirm(`是否确认${statusText}农品标题为"${row.title}"的数据项？`).then(() => {
        const params = {
          id: row.id,
          status: status
        }
        // 这里调用上架/下架API，根据实际后端接口调整
        updateProductInfo(params).then(response => {
          this.$modal.msgSuccess(`${statusText}成功`)
          this.getList()
          this.getStatistics()
        }).catch(() => {
          this.$modal.msgError(`${statusText}失败`)
        })
      }).catch(() => { })
    }
  }
}
</script>

<style scoped>
/* 审核容器样式 */
.audit-container {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 8px;
}

/* 标题区域 */
.audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.product-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.product-title i {
  margin-right: 8px;
  color: #409eff;
  font-size: 16px;
}

.product-status {
  margin-left: auto;
}

/* 信息卡片样式 */
.info-card {
  margin-bottom: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.info-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

.card-header i {
  margin-right: 8px;
  color: #409eff;
  font-size: 16px;
}

/* 基础信息项样式 - 居中对齐 */
.basic-info-item {
  padding: 16px 0;
  text-align: center;
}

.basic-info-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.basic-info-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.basic-info-value i {
  margin-right: 6px;
  color: #909399;
  font-size: 14px;
}

/* 保留原始样式用于其他地方 */
.info-item {
  padding: 12px 0;
}

.info-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.info-value i {
  margin-right: 6px;
  color: #909399;
  font-size: 14px;
}

/* 价格信息统一样式 */
.price-info-item {
  padding: 16px 0;
  text-align: center;
}

.price-info-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-info-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.price-number {
  font-size: 18px;
  font-weight: 600;
  color: #f56c6c;
  margin-right: 4px;
}

.price-unit {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

.quantity-number {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 描述内容 */
.description-content {
  line-height: 1.6;
  color: #606266;
  background-color: #fafafa;
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
  font-size: 14px;
}

/* 图片画廊 */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
}

.image-item {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.image-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

/* 联系信息样式 - 居中对齐 */
.contact-center-item {
  padding: 16px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-center-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.contact-center-icon i {
  color: white;
  font-size: 14px;
}

.contact-center-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-center-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  min-height: 20px;
}

/* 保留原始联系信息样式用于其他地方 */
.contact-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.contact-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.contact-icon i {
  color: white;
  font-size: 14px;
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

/* 滚动条样式 */
.audit-container::-webkit-scrollbar {
  width: 6px;
}

.audit-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.audit-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.audit-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 统一标签样式 */
.audit-container .el-tag {
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}

/* 价格信息区域标签特殊样式 */
.price-info-value .el-tag {
  height: 28px;
  line-height: 26px;
  font-size: 13px;
  padding: 0 12px;
}

/* 统一卡片内容字体 */
.audit-container .el-card__body {
  font-size: 14px;
  line-height: 1.5;
}

/* 统一所有文本颜色 */
.audit-container .info-value,
.audit-container .contact-value,
.audit-container .basic-info-value,
.audit-container .contact-center-value,
.audit-container .description-content {
  color: #303133;
}

/* 统一所有标签字体 */
.audit-container .info-label,
.audit-container .contact-label,
.audit-container .price-label,
.audit-container .price-info-label,
.audit-container .basic-info-label,
.audit-container .contact-center-label {
  color: #909399;
  font-size: 12px;
  font-weight: 500;
}

/* 统计面板样式 */
.statistics-panel {
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.statistics-panel .el-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.statistics-panel .el-col {
  flex: 1;
  min-width: 0;
  max-width: none !important;
}

.stat-card {
  border-radius: 8px;
  padding: 12px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  color: #fff;
  margin-bottom: 8px;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.stat-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0;
  margin: 4px 0;
  color: #fff;
}

.stat-desc {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

/* 不同卡片的主题色 */
.total-card {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.pending-card {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.on-sale-card {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.off-sale-card {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
}

.rejected-card {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.sale-card {
  background: linear-gradient(135deg, #06b6d4 0%, #67e8f9 100%);
}

.purchase-card {
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .stat-card {
    padding: 10px;
    height: 90px;
  }

  .stat-title {
    font-size: 11px;
  }

  .stat-number {
    font-size: 20px;
    margin: 3px 0;
  }

  .stat-desc {
    font-size: 9px;
  }
}

@media (max-width: 1200px) {
  .statistics-panel .el-row {
    flex-wrap: wrap;
  }

  .statistics-panel .el-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .stat-card {
    padding: 12px;
    height: 100px;
    margin-bottom: 8px;
  }

  .stat-title {
    font-size: 12px;
  }

  .stat-number {
    font-size: 24px;
    margin: 4px 0;
  }

  .stat-desc {
    font-size: 10px;
  }
}

@media (max-width: 992px) {
  .statistics-panel .el-col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .stat-card {
    padding: 14px;
    height: 110px;
  }

  .stat-title {
    font-size: 12px;
  }

  .stat-number {
    font-size: 26px;
  }

  .stat-desc {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .statistics-panel .el-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .stat-card {
    padding: 16px;
    height: 120px;
    margin-bottom: 12px;
  }

  .stat-title {
    font-size: 13px;
  }

  .stat-number {
    font-size: 28px;
    margin: 6px 0;
  }

  .stat-desc {
    font-size: 11px;
  }

  .audit-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .product-status {
    margin-left: 0;
  }

  .contact-item {
    padding: 12px 0;
  }

  .image-item {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 576px) {
  .statistics-panel .el-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .stat-card {
    padding: 20px;
    height: 100px;
    margin-bottom: 12px;
  }

  .stat-title {
    font-size: 14px;
  }

  .stat-number {
    font-size: 32px;
    margin: 8px 0;
  }

  .stat-desc {
    font-size: 12px;
  }
}
</style>
