<template>
  <view class="page-container">
    <z-paging ref="home" refresher-only  bg-color="radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%)"
              :show-empty="false" :show-footer="false" @onRefresh="refresh">
      <template #refresher="{refresherStatus}">
        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
        <custom-refresher :status="refresherStatus" />
      </template>
      <template #top>
        <uni-row class="demo-uni-row" >
          <uni-col :span="7">
            <uni-data-select align="left" :clear="false" v-model="value" @change="change" :localdata="range" ></uni-data-select>
          </uni-col>
          <uni-col :span="17">
            <!-- confirm:confirm; input:change; cancel:点击取消；
            clear：点击清除；focus:获取焦点；blur：失去焦点   -->
            <uni-search-bar bgColor="#fbfdfe"
                            v-model="searchValue"
                            cancelButton="always"
                            @input="input"
                            clearButton="always"
                            @cancel="cancel"
                            @clear="cancel"
                            placeholder="请输入搜索内容">
              <template v-slot:searchIcon>
                <yt-scanCode  @getScanCode="getScanCode"></yt-scanCode>
              </template>
            </uni-search-bar>
          </uni-col>
        </uni-row>
      </template>

    <uni-section class="mb-10" title="温室列表" style="background:transparent;"  type="line">
      <template v-slot:right>
        <view>
          <text style="color: #f64040">{{ dataDetails.online }} 在线 </text>
          <text style="color: #2d56d8;margin-left: 10rpx">{{ dataDetails.offline }} 离线</text>
        </view>
      </template>
      <scroll-view
          scroll-y
          class="list-scroll"
          @scrolltolower="loadMore"
          lower-threshold="50"
          scroll-with-animation
      >
        <uni-swipe-action>
        <uni-swipe-action-item
            v-for="(item, index) in listData"
            :key="index"
            @click="onDeleteItem($event, item)"
            :class="['list-item', { 'list-item-disabled': item.online === '离线' }]"
            :right-options="options">
          <view class="item-card"
              @click="onItemTap(item)">
            <view class="item-title">
              <view class="title-text">{{ item.agriName }}</view>
              <text :class="['tag','tag-status',{'tag-manual':item.workModeDesc==='手动模式'}]" v-if="item.workModeDesc">{{ item.workModeDesc }}</text>
              <text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]"  v-if="item.online">{{ item.online }}</text>
            </view>

            <view class="item-subtitle">
              设备编号：{{ item.imei }}
            </view>

            <view class="item-tags">
              <text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
              <text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
              <text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
              <text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
            </view>
          </view>
        </uni-swipe-action-item>

        <view v-if="isLoading" class="loading-more">
          <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
          <text>加载中...</text>
        </view>
        <view v-else-if="noMore" class="no-more">没有更多数据了</view>
<!--        v-if="store.getters.name !== 'admin'"-->
        <view class="add-agri" @tap="handleAddAgri" v-if="!isLoading">
          <image :src="imageSrc" :style="'width:'+80+'rpx;height:'+80+'rpx'"></image>
          <text class="text">点击添加大棚</text>
        </view>
        </uni-swipe-action>
      </scroll-view>
    </uni-section>
<!--    <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
<!--             :direction="direction" @trigger="trigger" @fabClick="fabClick" />-->

    </z-paging>
    <add-agri ref="addAgri" @reload="getListData"/>


    <uni-popup :mask-click="false" ref="renameAgri" mode="center">
      <!-- 新增：修改运行时间的弹窗 -->
      <view class="modal-container">
        <view class="modal-title">{{ `『 ${agriName} 』重命名设置` }}</view>
        <view class="modal-input-wrap">
          <text class="modal-label">旧名称：</text>
          <text class="modal-label">{{ agriName }}</text>
        </view>
        <view class="modal-input-wrap">
          <text class="modal-label">新名称：</text>
          <uni-easyinput style="width: 100px" v-model="newAgriName" placeholder="请填写新名称"/>
        </view>
        <view class="modal-btn-wrap">
          <button class="modal-btn cancel" @click="closeWindow">取消</button>
          <button class="modal-btn confirm" @click="updateAgriName">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import ZPaging from "../uni_modules/z-paging/components/z-paging/z-paging.vue";
import CustomRefresher from "../components/custom-refresher/custom-refresher.vue";
import {getAgriInfo, renameAgriName} from "../api/system/assets/agri";
import store from "../store";
import TimeUtil from "../utils/TimeUtil";
import {getNewSpecialData} from "../api/data/specialData";
import AddAgri from "../components/addAgri/addAgri.vue";
import {removeAgri} from "../api/system/assets/userAgri";
import * as mqttUtil from "../utils/mqtt";
import {getAgriStatus} from "../api/system/mqtt";
import UniPopup from "../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  computed: {
    store() {
      return store
    }
  },
  components: {UniPopup, AddAgri, CustomRefresher, ZPaging},
  data() {
    return {
      listData: [],
      datas: [],
      pageSize: 6,
      isLoading: false,
      noMore: false,
      total: 20, // 模拟总条数
      value: 0,
      options: [
        {
          text: '重命名',
          style: {
            backgroundColor: '#2d56d8'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#E83A30'
          }
        }
      ],
      range: [{
        "value": 0,
        "text": "大棚名称",
      }, {
        "value": 1,
        "text": "设备编号",
      }],
      imageSrc:'https://img.xiaoces.com/photos/agri.png',
      scrollHeight: 0,
      // horizontal: 'right',
      // vertical: 'bottom',
      // direction: 'horizontal',
      searchValue: null,
      imeiToDeviceMap: new Map(),
      dataDetails: {
        tip: null,
        online: 0,
        offline: 0
      },
      /* pattern: {
         color: '#7A7E83',
         backgroundColor: '#fff',
         selectedColor: '#007AFF',
         buttonColor: '#007AFF',
         iconColor: '#fff'
       },
       content: [{
         iconPath: '/static/image.png',
         selectedIconPath: '/static/image-active.png',
         text: '添加大棚',
         active: false
       },
         {
           iconPath: '/static/home.png',
           selectedIconPath: '/static/home-active.png',
           text: '',
           active: false
         },
         {
           iconPath: '/static/star.png',
           selectedIconPath: '/static/star-active.png',
           text: '收藏',
           active: false
         }
       ]*/
      agriName:null,
      imei:null,
      newAgriName:null
    }

  },
  onBackPress() {
   /* if (this.$refs.fab.isShow) {
      this.$refs.fab.close()
      return true
    }
    return false*/
  },
  onShow() {
    console.info("首页在线状态注册回调")
    this.$modal.loading("数据加载中，请耐心等待...")
    this.refresh();
  },
  onLoad() {
  },
  onHide() {
    console.info("首页在线状态注销回调")
    mqttUtil.removeOnMessageCallback();
  },
  onReady() {

  },
  methods: {
    getScanCode(res){
      this.searchValue = res;
      this.value = 1;
      if (this.searchValue) {
        this.change(this.searchValue)
      }
    },
    handleAddAgri() {
      this.$refs.addAgri.open();
      // 这里可以添加跳转到添加大棚页面的逻辑
      // uni.navigateTo({ url: '/pages/add-agri/add-agri' })
    },
    change(e) {
      this.input(this.searchValue)
    },
    input(res) {
      if (!res) {
        this.cancel(res)
        return;
      }

      this.listData = this.datas.filter(item =>
          item[this.value === 0 ? 'agriName' : 'imei'].includes(res));
    },
    cancel(res) {
      this.listData = [...this.datas]
    },
    /*trigger(e) {
      console.log(e)
      this.content[e.index].active = !e.item.active
      uni.showModal({
        title: '提示',
        content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    fabClick() {
      uni.showToast({
        title: '点击了悬浮按钮',
        icon: 'none'
      })
    },*/

    // 模拟获取列表数据
    getListData() {
      this.noMore = false;
      this.listData = [];
      this.isLoading = true

      getAgriInfo().then(response => {
        if (response.code === 200) {
          // 先清空旧索引
          this.imeiToDeviceMap.clear();
          // 1. 用 map 处理数据，返回新数组，避免 forEach 返回 undefined
          // 2. 区分刷新/加载更多，更新 listData
          this.listData = response.data.map(item => {
            const deviceItem = {
              ...item,
              deviceStatus: TimeUtil.isLessThanSpecifiedSeconds(item.time, 90) ? '在线' : '离线',
              online: '在线',
              agriName: item.agriName || '未知大棚',
              imei: `${item.imei || '未知'}`,
              workModeDesc: item.workMode === 0 ? '手动模式':'自动模式',
              workMode: item.workMode,
              temp1: item.temp1,
              temp2: item.temp2,
              temp3: item.temp3,
              temp4: item.temp4
            };
            // 存入索引Map
            this.imeiToDeviceMap.set(deviceItem.imei, deviceItem);
            return deviceItem;
          });
          // 5. 判断是否还有更多数据
          this.noMore = this.listData.length >= this.total;
          if (store.getters && store.getters.name === 'admin') {
            this.getNewSpecialData();
          }
          // 左上角详情
          this.getDataDetails();
          this.datas = [...this.listData]
          // 下拉刷新
          this.getAgriStatus();
        }
      }).catch(err => {
        console.error("获取大棚信息失败:", err);
      }).finally(() => {
        // 4. 无论成功失败，都结束加载状态
        this.isLoading = false;
        this.$modal.closeLoading()
        this.$refs.home.complete();
      });
    },
    // 加载更多（防抖：避免快速上拉重复触发）
    loadMore() {
      if (!this.isLoading && !this.noMore) {

      }
    },
    refresh() {
      mqttUtil.setOnMessageCallback(this.ackMessage);
      this.getListData();
    },
    onDeleteItem(e, item) {
      if (e.content.text === '重命名') {  // 通过事件对象的 content.text 判断
        setTimeout(() => {
          this.agriName = item.agriName;
          this.imei = item.imei;
          this.$refs.renameAgri.open();
        }, 300)
      } else if (e.content.text === '删除') {  // 删除操作
        uni.showModal({
          title: '操作提示：',
          content: `确定删除大棚【${item.agriName}】？`,
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              removeAgri(item).then(response => {
                if (response.code === 200) {
                  this.$modal.msgSuccess("删除成功！");
                  this.getListData();
                } else {
                  this.$modal.msgError("删除失败！");
                }
              });
            }
          }
        });
      }
    },
    // 点击列表项
    onItemTap(item) {
      var agri = JSON.stringify(
          {
            imei:item.imei,
            agriName:item.agriName,
            agriId:item.id,
            workMode: item.workMode
          }
      );
      this.$tab.navigateTo('/pages/home/control/index?agriInfo='+encodeURIComponent(agri))
    },
    getNewSpecialData() {
      getNewSpecialData().then(response => {
        if (response.code === 200 && response.data) {
          this.makeSpecialData(response.data);
        }
        this.datas = [...this.listData]
      })
    },

    makeSpecialData: function (msgData){
      const online  = TimeUtil.isLessThanSpecifiedSeconds(msgData.ts,90)?'在线':'离线';
      const deviceConfigs = [
        { agriName: "八方南棚", imei: "A", temps: [1,2,3,4] },
        { agriName: "九方春棚", imei: "B", temps: [5,6,7,8] },
        { agriName: "十二方棚", imei: "C", temps: [9,10,11,12] }
      ];

      const devices = deviceConfigs.map(({agriName, imei, temps}) => ({
        agriName,
        imei,
        temp1: msgData[`temp${temps[0]}`],
        temp2: msgData[`temp${temps[1]}`],
        temp3: msgData[`temp${temps[2]}`],
        temp4: msgData[`temp${temps[3]}`],
        online
      }));

      this.listData.push(...devices);
      // 状态和温度不需要监听不需要搞
      // devices.forEach(d => this.imeiToDeviceMap.set(d.imei, d));
    },
    ackMessage(topic, payload) {
      const regex = /^device\/\d+\/status$/;
      const regex1 = /^frontend\/.+\/dtu\/\d+\/listener$/;

      if (!regex.test(topic) && !regex1.test(topic)) return;

      let msgData = {};
      // 优化：捕获JSON解析异常
      try {
        msgData = JSON.parse(payload);
      } catch (e) {
        console.error("MQTT消息解析失败：", e, payload);
        return;
      }
      // 设备在线状态
      if (regex.test(topic) && msgData.online && "time" in msgData && "imei" in msgData) {
        this.updateDeviceStatusFast(msgData.imei, msgData.online)
      }
      // 温度
      const allKeysNumeric2 = Object.keys(msgData).every(key => /^\d+$/.test(key));
      if (regex1.test(topic) && Object.keys(msgData).length > 0 && allKeysNumeric2) {
        this.updateTempFast(msgData, topic)
      }
      this.getDataDetails();
    },
    // 离线状态查询  是先获取大棚表，无线表不存在大棚表里
    updateDeviceStatusFast(targetImei, isOnline) {
      console.info("监听到状态",targetImei, isOnline)
      // 直接从Map里取设备项，无需遍历数组
      const targetDevice = this.imeiToDeviceMap.get(targetImei);
      if (!targetDevice) return;
      // 直接修改对象属性，响应式正常生效
      targetDevice.deviceStatus = isOnline;
      targetDevice.online = isOnline;
    },

    updateTempFast: function (msgData,topic) {
      const regexWithGroup = /^frontend\/(.+)\/dtu\/(\d+)\/listener$/;
      const matchResult = topic.match(regexWithGroup);
      const imei = matchResult[2];     // 提取结果：'1234567890'
      // 直接从Map里取设备项，无需遍历数组
      const targetDevice = this.imeiToDeviceMap.get(imei);
      if (!targetDevice) return;
      const div10 = (v) => (v == null ? null : Math.round((Number(v) / 10) * 10) / 10);
      // 直接修改对象属性，响应式正常生效

      targetDevice.temp1 = div10(msgData['201']);
      targetDevice.temp2 = div10(msgData['202']);
      targetDevice.temp3 = div10(msgData['203']);
      targetDevice.temp4 = div10(msgData['204']);

      // if (imei === '862538065276061') {
      //   const deviceConfigs = [
      //     { agriName: "八方南棚", imei: "A", temps: [1,2,3,4] },
      //     { agriName: "九方春棚", imei: "B", temps: [5,6,7,8] },
      //     { agriName: "十二方棚", imei: "C", temps: [9,10,11,12] }
      //   ];
      //
      //   deviceConfigs.forEach(({agriName, imei, temps}) => {
      //     var target = this.imeiToDeviceMap.get(imei);
      //     target.temp1 = div10(msgData[`20${temps[0]}`]);
      //     target.temp2 = div10(msgData[`20${temps[1]}`]);
      //     target.temp3 = div10(msgData[`20${temps[2]}`]);
      //     target.temp4 = div10(msgData[`20${temps[3]}`]);
      //   })
      // }
    },
    getDataDetails() {
      this.dataDetails = {
        tip: null,
        online: 0,
        offline: 0
      }
      var online = 0;
      var offline = 0;
      this.listData.forEach(item => {
        if (item.online === '离线') {
          offline += 1;
        } else {
          online += 1;
        }
      })
      this.dataDetails = {
        tip: null,
        online: online,
        offline: offline,
      }
    },
    getAgriStatus() {
      if (!this.listData || this.listData.length === 0) return []; // 空列表处理
      const allImei = this.listData.map(item => item.imei).filter(imei => imei);
      getAgriStatus([...new Set(allImei)])
    },
    closeWindow() {
      this.agriName = null;
      this.imei = null;
      this.newAgriName = null;
      this.$refs.renameAgri.close();
    },
    updateAgriName() {
      if (!this.newAgriName || (this.newAgriName === this.agriName)) {
        this.$modal.msgError("请输入新名称！");
        return;
      }
      uni.showModal({
        title: '操作提示：',
        content: `确定将大棚【${this.agriName}】重命名为【${this.newAgriName}】？`,
        cancelText: '取消',
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            renameAgriName({
              imei: this.imei,
              newAgriName: this.newAgriName
            }).then(response => {
              if (response.code === 200) {
                this.$modal.msgSuccess("大棚重命名成功！");
                this.getListData();  // 刷新列表
                this.closeWindow()  // 关闭弹窗
              } else {
                this.$modal.msgError("大棚重命名失败！");
              }
            });
          }
        }
      });
    }

  }
}
</script>

<style scoped>
/* 适配小程序/H5的盒模型，避免padding导致宽度溢出 */
page {
  box-sizing: border-box;
}
.page-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.list-scroll {
  /* 把背景色改为透明，才能透出背景渐变 */
  background-color: transparent;
  border-radius: 8rpx;
  overflow: hidden;
  margin-top: 10rpx;
  /* 新增：H5端避免滚动条样式不一致 */
  scrollbar-width: thin;
  /* 去掉固定高度，改为自适应（避免小程序滚动异常） */
  height: calc(100vh - 180rpx);
  /* #ifdef MP-WEIXIN */
  height: calc(100vh - var(--status-bar-height) - 180rpx);
  /* #endif */
}
/* H5端滚动条样式优化（可选） */
.list-scroll::-webkit-scrollbar {
  width: 4rpx;
}
.list-scroll::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 2rpx;
}
.item-card {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  box-shadow: 8rpx 5rpx 10rpx #999;
  margin-bottom: 20rpx;
  // #ifndef H5
  //margin-right: 10rpx;
  // #endif
}
/deep/ .uni-swipe {
  // #ifdef MP-WEIXIN
  height: 214rpx !important;
  // #endif
}
/deep/ .uni-swipe_button {
  // #ifdef MP-WEIXIN
  height: 198rpx !important;
  // #endif
  // #ifdef H5
  height: 192rpx !important;
  // #endif
  border-radius: 12rpx;
  box-shadow: 8rpx 5rpx 10rpx #999;
}

/deep/ .uni-swipe_button:nth-child(even) {
  margin-right: 10rpx
}
.list-item,/deep/.tn-swipe-action-item {
  height: 190rpx !important;
  /* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
  // #ifdef H5
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  /* 新增：点击态样式，双端统一 */
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: 8rpx 5rpx 10rpx #999;
  pointer-events: auto !important;
  // #endif
}
.list-item:active {
  transform: scale(0.98);
}
.item-card:active {
  background-color: #F5F5F5;
  // #ifdef MP-WEIXIN
  transform: scale(0.98);
  // #endif
}

.item-title {
  font-size: 28rpx;
  line-height: 52rpx;
  font-weight: bolder;
  color: #333;
  /* 核心：flex布局，让文字和标签在同一行 */
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 14rpx 25rpx 0 25rpx;
}
.title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 在线标签样式 */
.tag-online {
  font-size: 20rpx;
  border-radius: 4rpx;
  background-color: #f0f9eb;
  color: #67c23a;
  white-space: nowrap;
  line-height: 30rpx;
  /* 兜底：如果flex失效，用margin-left:auto强制居右 */
  margin-left: auto;
  display: inline-block; /* 确保样式生效 */
}
.tag-status.tag-manual {
  background-color: #dde3f6;
  color: #7491ef;
}
/* 离线：深灰色系 */
.tag-offline {
  background-color: #f2f2f2;
  color: #c5c3c3;
}
.item-subtitle {
  font-size: 26rpx;
  color: #666;
  line-height: 52rpx;
  display: block;
  padding: 0 25rpx;
}

.item-tags {
  display: flex;
  gap: 8rpx;
  flex-wrap: wrap; /* 新增：标签过多时换行，避免溢出 */
  padding: 14rpx 25rpx 28rpx 25rpx;
}

.tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  display: inline-block; /* 修复H5端padding不生效问题 */
}
.tag-status {
  background-color: #f8f1f1;
  color: #e66060;
  margin-left: 20rpx;
  font-weight: lighter;
  line-height: 30rpx;
  padding: 4rpx 6rpx;
  font-size: 20rpx;
}

.tag-temp1 {
  background-color: #e8f4ff;
  color: #409eff;
}

.tag-temp2 {
  background-color: #fdf4e4;
  color: #f5961d;
}

.tag-temp3 {
  background-color: #f4f4f5;
  color: #909399;
}

.tag-temp4 {
  background-color: #e7faf4;
  color: #1bd1a7;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
  gap: 10rpx;
  margin-top: 20rpx;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12rpx;
}

.no-more {
  /* 核心：flex布局实现居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 占满滚动容器剩余高度，保证垂直居中 */
  min-height: 200rpx; /* 最小高度，避免内容太少时不居中 */
  /* 文字样式保留 */
  color: #999;
  font-size: 26rpx;
  /* 可选：增加上下内边距，视觉更舒适 */
  padding: 30rpx 0;
  margin-top: 20rpx;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12rpx;
}

/* 新增：禁用状态样式 */
.list-item-disabled {
  /* 文字置灰 */
  color: #999;
  /* 禁用光标 */
  cursor: not-allowed;
  /* 背景色变浅，视觉区分 */
  background-color: #fafafa;
  /* 可选：添加透明度 */
  opacity: 0.7;
}

/* 禁用状态下的子元素也置灰 */
.list-item-disabled .tag {
  color: #ccc;
  background-color: #f8f8f8;
}

/deep/ .uni-searchbar {
  padding: 20rpx 0;
}
/deep/ .uni-searchbar__box, /deep/ .uni-select {
  box-shadow: 8rpx 5rpx 10rpx #999;
  background: #fbfdfe;
  border-radius: 0 !important;
  height: 70rpx !important;
}
/deep/ .uni-searchbar__box {
  border-radius: 0 10rpx 10rpx 0 !important;
}
.uni-stat__select {
  padding: 20rpx 0;
}
/deep/ .uni-select {
  border: 0;
  // #ifdef MP-WEIXIN
  margin-top: 20rpx !important;
  // #endif
  border-radius: 10rpx 0 0 10rpx !important;
}
/deep/ .uni-section {
  background: transparent !important;
}
/* 强制隐藏搜索图标容器 */
/*/deep/ .uni-searchbar__box-icon-search {
  display: none !important;
}*/
/deep/ .uni-section .uni-section-header {
  padding: 12rpx 10rpx;
}

/* 添加大棚容器样式 */
.add-agri {
  /* 核心：flex布局实现一行显示 + 垂直居中 */
  display: flex;
  align-items: center;
  /* 水平居中（可选，根据需求调整） */
  justify-content: center;
  /* 内边距，增加点击区域和视觉间距 */
  padding: 30rpx 0;
  /* 可选：添加背景和圆角，和列表项风格统一 */
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12rpx;
  /* 点击态效果，和列表项保持一致 */
  transition: all 0.2s ease;
}
.add-agri:active {
  background-color: rgba(255, 255, 255, 0.95);
  transform: scale(0.98);
}

/* 图片和文字的间距 */
.add-agri image {
  margin-right: 20rpx;
  /* 可选：图片垂直对齐，兜底兼容 */
  vertical-align: middle;
}

/* 文字样式优化 */
.add-agri .text {
  /* 文字大小，和标签风格统一 */
  font-size: 26rpx;
  /* 文字颜色（保留原有绿色） */
  color: #1AAD19;
  /* 可选：加粗，突出按钮感 */
  font-weight: 500;
  /* 兜底：垂直对齐 */
  vertical-align: middle;
}

/deep/ .z-paging-content-fixed {
  padding: 20rpx !important;
  /* 可选：防止margin塌陷，加overflow */
  overflow: hidden;
}

</style>