<template>
  <div class="sample-collection-man-page">
    <!-- 固定顶部导航栏 -->
    <NavBar class="nav-bar" />
    <van-tabs @click="onClickTab">
      <van-tab v-for="tab in tagInfo" :title="tab.tagName" :key="tab.id" :name="tab.id">
      </van-tab>
    </van-tabs>
    <!-- 使用原生 sticky 定位的公告栏 -->
    <div class="sticky-notice">
      <van-notice-bar left-icon="volume-o" :scrollable="true" text="所有标价均为款式价格，如需延长需补差价喔~~~（半贴：￥90,浅贴：￥130）" />
    </div>
    <van-cell-group @click="handleAddCard()">
      <van-cell title="新增" value="新增" />
    </van-cell-group>
    <!-- 内容容器 -->
    <div class="cards-container">
      <div class="card_loading" v-if="this.card_loading" style="width: 100%;display: flex;justify-content: center;">
        <van-loading size="24px">加载中...</van-loading>
      </div>
      <div class="card-grid">
        <!-- 卡片列表 -->
        <div v-for="(card, index) in cards" :key="index" class="card"
          :class="{ 'card-active': activeCardIndex === index }" @touchstart="handleTouchStart(index)"
          @touchend="handleTouchEnd(index)" @click="handleCardClick(card)">

          <div class="card-image-container">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, imgIndex) in card.images" :key="imgIndex">
                <van-image lazy-load fit="fill" :src="image" class="card-image">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </van-swipe-item>
            </van-swipe>
          </div>

          <div class="card-content">
            <h2 class="card-title">{{ card.title }}</h2>
            <p class="card-description">{{ card.description }}</p>
            <div class="card-tag">
              <van-tag v-for="(tag, tagIndex) in card.tagInfo" :key="tagIndex" round type="primary"
                :text-color="tag.tagColor" :color="tag.tagBgColor" style="margin-left: 5px;">
                {{ tag.tagName }}
              </van-tag>
            </div>
            <div class="card-footer">
              <span class="card-meta">
                <span>款式价格:￥</span><i class="fa fa-calendar-o mr-1"></i> {{ card.amt }}
              </span>
              <!-- <div class="heart" @click.stop>
                                <label class="action-btn heart-label">
                                    <input type="checkbox" class="heart-checkbox" v-model="card.checked"
                                        @change="handleClickLove(card)">
                                    <span class="heart-btn">
                                        <span class="heart-icon"></span>
                                    </span>
                                </label>
                                <span class="like-count">{{ card.loves }}</span>
                            </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card_loading" v-if="this.card_loading1" style="width: 100%;display: flex;justify-content: center;">
      <van-loading size="24px">加载中...</van-loading>
    </div>
    <!-- 回到顶部按钮 -->
    <div v-show="showBackToTop" class="back-to-top" @click="backToTop">
      <van-icon name="arrow-up" size="16" color="#fff" />
    </div>
    <!-- 固定底部TabBar -->
    <ManTabBar class="tab-bar" />
    <van-popup v-model="showPopup" round position="bottom" :close-on-click-overlay="false">

      <div class="popupCard">
        <!-- 卡片列表 -->
        <div class="card" @click="handleChange()">
          <div class="card-image-container">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, imgIndex) in this.popupCard.images" :key="imgIndex">
                <van-image lazy-load fit="fill" :src="image" class="card-image">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </van-swipe-item>
            </van-swipe>
          </div>

          <div class="card-content">
            <h2 class="card-title">{{ this.popupCard.title }}</h2>
            <p class="card-description">{{ this.popupCard.description }}</p>
            <div class="card-tag">
              <van-tag v-for="(tag, tagIndex) in this.popupCard.tagInfo" :key="tagIndex" round type="primary"
                :text-color="tag.tagColor" :color="tag.tagBgColor" style="margin-left: 5px;">
                {{ tag.tagName }}
              </van-tag>
            </div>
            <div class="card-footer">
              <span class="card-meta">
                <span>款式价格:￥</span><i class="fa fa-calendar-o mr-1"></i> {{ this.popupCard.amt }}
              </span>
              <div class="heart" @click.stop>
                <label class="action-btn heart-label">
                  <input type="checkbox" class="heart-checkbox" v-model="this.popupCard.checked">
                  <span class="heart-btn">
                    <span class="heart-icon"></span>
                  </span>
                </label>
                <span class="like-count">{{ this.popupCard.loves }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <van-button round type="warning" @click=cancelChange()>取消</van-button>
          <van-button round type="warning" @click=deleteCart() v-if="showDeleteBtn">删除</van-button>

          <van-button round type="info" @click="saveChange()">保存</van-button>
        </div>

      </div>
    </van-popup>
    <van-popup v-model="showForm" round position="bottom" close-on-popstate closeable :close-on-click-overlay="false"
      @closed="handleCloseFormPopup">
      <div class="formpopup">
        <van-form @submit="onSubmit">
          <van-field name="imagesUrl" label="图片编辑">
            <template #input>
              <van-uploader v-model="cardChange.imagesUrl" :after-read="afterRead" />
            </template>
          </van-field>
          <van-field v-model="cardChange.title" name="title" label="标题" placeholder="标题"
            :rules="[{ required: true, message: '标题不能为空' }]" />
          <van-field v-model="cardChange.description" name="description" label="描述" placeholder="描述"
            :rules="[{ required: false, message: '描述不能为空' }]" />
          <van-field v-model="cardChange.amt" type="digit" name="amt" label="价格" placeholder="价格"
            :rules="[{ required: true, message: '价格不能为空' }]" />
          <van-field name="tagInfo" label="选择标签" :rules="[{ required: true, message: '至少需要一个标签' }]">
            <template #input>
              <van-checkbox-group v-model="choseTagResult" ref="tagCheckboxGroup" direction="horizontal">
                <van-checkbox v-for="tag in tagInfo.slice(1)" :key="tag.id" :name="tag.id"
                  style="margin-bottom: 5px;">{{ tag.tagName }}</van-checkbox>
              </van-checkbox-group>
              <van-button native-type="button" type="primary" size="mini" @click="checkAll">全选</van-button>
              <van-button native-type="button" type="info" size="mini" @click="toggleAll">反选</van-button>
            </template>
          </van-field>

          <van-button round block type="info" native-type="submit" style="margin-top: 10px;">确认</van-button>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import ManTabBar from '@/components/ManTabBar.vue';


export default {
  name: 'SampleCollectionManPage',
  components: {
    ManTabBar,
    NavBar
  },
  data() {
    return {
      //作品卡片数组
      cards: [],
      //弹出层卡片作品数据
      popupCard: {
        id: 0,
        title: '',
        description: '',
        images: [],
        tagInfo: [],
        amt: 0,
        loves: 0,
        checked: false,
      },
      //初始化加载动画控制
      card_loading: false,
      //加载更多动画控制
      card_loading1: false,
      //点击动画控制
      activeCardIndex: -1,
      //初始化当前页
      pageNum: 1,
      //每页数据大小
      pageSize: 20,
      //插槽加载动画
      loading: false,
      //点赞数变化数记录
      changes: [],
      //总页数
      totalPages: 0,
      // 控制回到顶部按钮显示/隐藏
      showBackToTop: false,
      // 滚动容器
      scrollContainer: null,
      // 滚动处理函数
      scrollHandler: null,
      // 标签信息数组
      tagInfo: [{ "id": 0, "tagName": "全部" }],
      // 标签格式为key为id，值为数据的对象数组方便快速通过id获取数据
      tagMapById: {},
      // 标签格式为key为标签名字，值为数据的对象数组方便快速通过标签名字获取数据
      tagMapByName: {},
      // 当前选中的筛选栏标签id。默认为0，全部
      tagID: 0,
      // 修改页面弹窗
      showPopup: false,
      //修改表单页面弹窗
      showForm: false,
      // 修改页面数据
      cardChange: {
        imagesUrl: [],
        title: '',
        description: '',
        tagInfo: [],
        amt: 0,
      },
      // 修改页面标签选择结果
      choseTagResult: [],
      // 修改页面标签下拉
      choseTagInfo: [],
      //修改页面选择器是否展开控制
      showPicker: false,
      cartDTO: {},
      uploadFileResult: [],
      storageUrl: 'http://xiaowangnas.com:9000/yumiartnail',
      showDeleteBtn: true
    };
  },
  methods: {
    /**
     * 删除方法
     */
    deleteCart() {
      this.$dialog.confirm({
        title: '删除作品',
        message: '点击确认将删除该作品，是否确认？',
      })
        .then(async () => {
          const res = await this.$axios.post(`/sampleCollection/delete?id=${this.popupCard.id}`);
          console.log(res);

          if (res.code === 200) {
            this.$toast.success('删除成功');
            this.cards = this.cards.filter(item => item.id !== this.popupCard.id);
            this.showPopup = false;
            this.showDeleteBtn = true;
          } else {
            this.$toast.fail('删除失败');
          }
        }).catch(() => {

        })

    },

    checkAll() {
      this.$refs.tagCheckboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.tagCheckboxGroup.toggleAll();
    },
    //上传文件
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      try {
        const filePath = `sampleCollection/${Date.now()}-${file.file.name}`;
        let result = await this.$fileService.uploadFile({
          bucketName: 'yumiartnail',
          filePath: filePath,
          file: file.file,

        });

        // this.uploadResult = `文件上传成功: ${result}`;
        this.uploadFileResult.push(result);
        result = `${this.storageUrl}/${result}`;
        this.cardChange.imagesUrl.pop();
        this.cardChange.imagesUrl.push({ url: result });
      } catch (error) {
        // this.uploadResult = `上传失败: ${error.message}`;
        this.$toast.fail('上传失败');
        console.error(error);
      } finally {
        this.uploading = false;
      }

    },
    /**
     * 关闭修改表单弹窗的时候清除数据
     */
    handleCloseFormPopup() {
      this.cardChange = {
        imagesUrl: [],
        title: '',
        description: '',
        tagInfo: [],
        amt: 0,
      }
    },
    //取消修改按钮方法
    cancelChange() {
      this.$dialog.confirm({
        title: '取消修改',
        message: '点击确认将取消修改，是否确认？',
      })
        .then(() => {
          this.showPopup = false;
          this.showDeleteBtn = true;
          this.popupCard = {
            id: 0,
            title: '',
            description: '',
            images: [],
            tagInfo: [],
            amt: 0,
            loves: 0,
            checked: false,
          }
        })
        .catch(() => {
        });
    },
    //保存按钮方法
    saveChange() {
      this.$dialog.confirm({
        title: '保存修改',
        message: '点击确认将保存修改，请确认？',
      })
        .then(async () => {
          console.log('保存', this.cartDTO);
          let res = null;
          if (this.cartDTO.id != null) {
            res = await this.$axios.post('/sampleCollection/update', this.cartDTO)
            console.log(res);
          } else {
            this.cartDTO.loves = Math.floor(Math.random() * (100 - 30 + 1)) + 30;
            this.cartDTO.imgUrl = this.storageUrl
            this.cartDTO.status = 0;
            res = await this.$axios.post('/sampleCollection/add', this.cartDTO)
            console.log(res);

          }
          if (res.code == 200) {
            this.showPopup = false;
            this.showDeleteBtn = true;
            this.popupCard = {
              id: 0,
              title: '',
              description: '',
              images: [],
              tagInfo: [],
              amt: 0,
              loves: 0,
              checked: false,
            }
            this.tagID = 0;
            this.pageNum = 1;
            this.pageSize = 20;
            this.cards = [];
            this.getCarts(this.tagID, this.pageNum, this.pageSize || 20);
          } else {
            this.$toast.fail('保存失败');
          }

        })
        .catch(() => {

        });
    },
    //打开修改界面数据处理
    handleChange() {
      for (let i of this.popupCard.images) {
        this.cardChange.imagesUrl.push({ url: i })
      }
      this.cardChange.title = this.popupCard.title;
      this.cardChange.description = this.popupCard.description;
      this.cardChange.tagInfo = this.popupCard.tagInfo;
      this.choseTagResult = [];
      for (let i of this.popupCard.tagInfo) {
        this.choseTagResult.push(i.id)
      }
      this.cardChange.amt = this.popupCard.amt;
      this.showForm = true;
    },
    //修改数据的提交方法
    onSubmit(values) {
      this.cartDTO = {
        id: this.popupCard.id,
        title: this.cardChange.title,
        description: this.cardChange.description,
        imgFilename: this.cardChange.imagesUrl.map(item => item.url.replace(this.storageUrl, '')).join('&&'),
        tagId: this.choseTagResult.join('&&'),
        amt: this.cardChange.amt
      }
      this.popupCard.tagInfo = [];
      for (let i of values.tagInfo) {
        this.popupCard.tagInfo.push(this.tagMapById[i]);
      }

      this.popupCard.title = this.cardChange.title;
      this.popupCard.description = this.cardChange.description;
      this.popupCard.images = this.cardChange.imagesUrl.map(item => item.url);
      this.popupCard.amt = this.cardChange.amt;
      this.showForm = false;
    },
    /**
     * 获取作品信息
     * @param tagID 
     * @param pageNum 
     * @param size 
     */
    async getCarts(tagID, pageNum, size) {
      try {
        this.loading = true;
        let res = null;
        if (tagID == 0) {
          res = await this.$axios.get('/sampleCollection/list', {
            params: {
              page: pageNum,
              size: size
            }
          })
        } else {
          res = await this.$axios.get('/sampleCollection/getsampleCollectionByTag', {
            params: {
              tagID: tagID,
              page: pageNum,
              size: size
            }
          })
        }
        if (res.code !== 200) {
          const errorMsg = res.msg || '获取数据失败';
          this.$toast.fail(errorMsg);
          return;
        }

        const records = res.data.records || [];
        if (records.length === 0) {
          this.$toast('没有更多数据了');
          return;
        }

        const formattedCards = records.map(item => {
          const images = item.imgFilename
            ? item.imgFilename.split('&&').map(filename => `${item.imgUrl}/${filename}`)
            : [];
          let tagInfo = [];
          for (let tagID of item.tagId.split("&&")) {
            tagInfo.push(this.tagMapById[tagID])
          }
          return {
            id: item.id,
            title: item.title,
            description: item.description,
            images,
            duration: '',
            tagInfo,
            loves: item.loves || 0,
            changes: 0,
            checked: false,
            amt: item.amt || 0,
          };
        });

        this.cards = [...this.cards, ...formattedCards];
        this.loading = false;
        this.card_loading = false;
        this.card_loading1 = false;
        this.totalPages = res.data.pages;
        this.pageNum++;
      } catch (error) {
        console.error('获取卡片数据失败:', error);
        this.loading = false;
        this.card_loading = false;

        this.$toast.fail('网络错误，请稍后重试');
      }
    },
    /**
     * 获取标签信息
     */
    async getTagInfo() {
      try {
        let res = await this.$axios.get('/tagInfo/getAll');
        if (res.code !== 200) {
          const errorMsg = res.msg || '获取数据失败';
          this.$toast.fail(errorMsg);
          return;
        }
        this.tagInfo = [...this.tagInfo, ...res.data];
        // 创建映射对象

        res.data.forEach(obj => {
          this.tagMapById[obj.id] = obj;
          this.tagMapByName[obj.tagName] = obj;


        });


      } catch (error) {
        console.error('获取标签信息失败:', error);
        this.$toast.fail('网络错误，获取标签信息失败，请稍后重试');
      }

    },
    //筛选标签点击事件
    onClickTab(name, title) {
      console.log(title);
      this.card_loading = true;
      this.cards = [];
      this.tagID = name;
      this.pageNum = 1;
      this.getCarts(this.tagID, this.pageNum, this.pageSize);
    },
    /**
     * 回到顶部
     * @param index 
     */
    handleTouchStart(index) {
      this.activeCardIndex = index;
    },
    /**
     * 处理触摸结束事件
     */
    handleTouchEnd() {
      setTimeout(() => {
        this.activeCardIndex = -1;
      }, 300);
    },
    /**
     * 修改界面调出
     */
    handleAddCard() {
      this.showPopup = true;
      this.showDeleteBtn = false;
      this.popupCard = {
        title: '',
        description: '',
        images: [],
        tagInfo: [],
        amt: 0,
        loves: 0,
        checked: false,
      };
    },
    /**
     * 卡片点击弹出修改预览界面
     * @param card 点击的卡片
     */
    handleCardClick(card) {
      this.showPopup = true;
      this.popupCard = card;
    },
    /**
     * 点赞处理
     * @param card  点击的卡片
     */
    handleClickLove(card) {
      if (card.checked) {
        card.loves++;
        card.changes++;
      } else {
        if (card.loves > 0) {
          card.loves--;
          card.changes--;
        }
      }
      this.changes.push({
        id: card.id,
        changes: card.changes
      });
    },
    /**
     * 保存点赞数
     */

    /**
     * 当滚动距离超过300px时显示回到顶部按钮
     */
    handleScroll() {
      if (!this.scrollContainer) return;
      const scrollTop = this.scrollContainer.scrollTop;
      // 当滚动距离超过300px时显示回到顶部按钮
      this.showBackToTop = scrollTop > 300;

      const clientHeight = this.scrollContainer.clientHeight;
      const scrollHeight = this.scrollContainer.scrollHeight;

      if (scrollTop + clientHeight >= scrollHeight - 50) {
        if (this.pageNum == this.totalPages) {
          this.$toast.fail('已经到底啦~~');
          return;
        }
        if (!this.loading && this.pageNum < this.totalPages) {
          this.card_loading1 = true;
          this.getCarts(this.tagID, this.pageNum + 1, this.pageSize);
        }
      }
    },
    // 回到顶部方法
    backToTop() {
      if (!this.scrollContainer) return;

      // 使用平滑滚动回到顶部
      this.scrollContainer.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  },
  mounted() {
    this.getTagInfo();
    this.tagID = 0;
    this.getCarts(this.tagID, this.pageNum, this.pageSize || 2);
    this.scrollContainer = document.querySelector('.cards-container');
    if (this.scrollContainer) {
      this.scrollHandler = () => this.handleScroll();
      this.scrollContainer.addEventListener('scroll', this.scrollHandler);
    }
  },
  beforeDestroy() {
    if (this.scrollContainer && this.scrollHandler) {
      this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
    }
  },

};
</script>
<style lang="less" scoped>
// 变量定义
@base-bg: #f9fafb;
@card-bg: white;
@text-primary: #1f2937;
@text-secondary: #6b7280;
@accent-color: #3b82f6;
@accent-dark: #2563eb;
@danger-color: #ef4444;
@gray-light: #d1d5db;
@shadow-base: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@shadow-active: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

// 页面容器（最外层）
.sample-collection-man-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;

  // 粘性公告栏
  .sticky-notice {
    position: sticky;
    top: 50px;
    z-index: 100;
    margin-bottom: 10px;
  }

  // 卡片容器（滚动区域）
  .cards-container {
    padding:10px;
    overflow: auto;

    // 卡片网格布局
    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      // // 移动端适配
      // @media (max-width: 600px) {
      //     grid-template-columns: 1fr;
      // }

      // 卡片样式（核心内容区）
      .card {
        background-color: @card-bg;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: @shadow-base;
        transition: all 0.3s ease;
        cursor: pointer;
        padding-bottom: 5px;

        // 悬停与激活状态
        &:hover {
          transform: translateY(-5px);
          box-shadow: @shadow-active;
        }

        &.card-active {
          transform: translateY(-5px);
          box-shadow: @shadow-active;
        }

        // 卡片图片容器
        .card-image-container {
          position: relative;

          .card-image {
            width: 100%;
            min-height: 100px;
          }

          // 卡片标签
          .card-tag {
            transform: translateX(-5px);
          }
        }

        // 卡片内容区（标题、描述、底部）
        .card-content {
          padding: 5px;
          position: relative;

          // 卡片标题
          .card-title {
            padding-left: 5px;
            font-size: 1.2rem;
            font-weight: bold;
            color: @text-primary;
            margin-bottom: 10px;
          }

          // 卡片描述
          .card-description {
            color: @text-secondary;
            text-wrap: balance;
            margin-bottom: 10px;
            line-height: 1.5;
            font-size: 10px;
            padding-left: 5px;
          }

          // 卡片底部（价格与点赞）
          .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            position: relative;
            bottom: 0px;

            // 价格信息
            .card-meta {
              color: #FFFAFA;
              font-weight: 500;
              font-size: 0.9rem;
              background-color: #8470FF;
              border-radius: 8px;
              padding: 5px;

              // 日历图标
              .fa {
                margin-right: 1px;
              }
            }

            // 点赞区域
            .heart {
              display: flex;
              align-items: center;
              gap: 4px;

              // 点赞数量
              .like-count {
                font-size: 13px;
                color: @text-secondary;
              }

              // 点赞按钮容器
              .action-btn {
                position: relative;
                cursor: pointer;
              }

              // 隐藏原生复选框
              .heart-checkbox {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
              }

              // 点赞按钮样式
              .heart-btn {
                position: relative;
                width: 10px;
                height: 10px;
                transition: transform 0.2s;
                display: inline-flex;
                align-items: center;
                justify-content: center;

                &:hover {
                  transform: scale(1.1);
                }
              }

              // 爱心图标
              .heart-icon {
                position: absolute;
                top: 0;
                left: -5px;
                width: 100%;
                height: 100%;
                transition: color 0.3s;
                display: flex;
                align-items: center;
                justify-content: center;

                &::before {
                  content: '❤';
                  font-size: 1.25rem;
                  color: @gray-light;
                  transition: color 0.3s, transform 0.3s;
                  position: relative;
                  line-height: 1;
                  vertical-align: middle;
                  transform-origin: center;
                }
              }

              // 选中状态（点赞效果）
              .heart-checkbox:checked~.heart-btn .heart-icon::before {
                color: @danger-color;
                animation: heartBeat 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.49);
              }
            }
          }
        }
      }
    }

    // 加载动画（备用）
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
    }
  }

  // 回到顶部按钮样式
  .back-to-top {
    position: fixed;
    bottom: 60px;
    right: 20px;
    background-color: rgba(243, 148, 227, 0.8); // 使用主色调
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;

    &:hover {
      background-color: @accent-dark;
      transform: translateY(-2px);
    }
  }

  .popupCard {
    height: 98%;
    padding: 20px;

    .btn {
      display: flex;
      width: 60%;
      margin: auto;
      justify-content: space-between;
      padding-top: 20px;
      padding-bottom: 70px;
    }

    // 卡片样式（核心内容区）
    .card {
      background-color: @card-bg;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: @shadow-base;
      transition: all 0.3s ease;
      cursor: pointer;
      padding-bottom: 5px;

      // 悬停与激活状态
      &:hover {
        transform: translateY(-5px);
        box-shadow: @shadow-active;
      }

      &.card-active {
        transform: translateY(-5px);
        box-shadow: @shadow-active;
      }

      // 卡片图片容器
      .card-image-container {
        position: relative;

        .card-image {
          width: 100%;
          min-height: 100px;
        }

        // 卡片标签
        .card-tag {
          transform: translateX(-5px);
        }
      }

      // 卡片内容区（标题、描述、底部）
      .card-content {
        padding: 5px;
        position: relative;

        // 卡片标题
        .card-title {
          padding-left: 5px;
          // font-size: 14px;
          font-size: 1.5rem;
          font-weight: bold;
          color: @text-primary;
          margin-bottom: 10px;
        }

        // 卡片描述
        .card-description {
          color: @text-secondary;
          text-wrap: balance;
          margin-bottom: 10px;
          line-height: 1.5;
          font-size: 10px;
        }

        // 卡片底部（价格与点赞）
        .card-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12px;
          position: relative;
          bottom: 0px;

          // 价格信息
          .card-meta {
            color: #FFFAFA;
            font-weight: 500;
            font-size: 10px;
            background-color: #8470FF;
            border-radius: 8px;
            padding: 5px;

            // 日历图标
            .fa {
              margin-right: 1px;
            }
          }

          // 点赞区域
          .heart {
            display: flex;
            align-items: center;
            gap: 4px;

            // 点赞数量
            .like-count {
              font-size: 13px;
              color: @text-secondary;
            }

            // 点赞按钮容器
            .action-btn {
              position: relative;
              cursor: pointer;
            }

            // 隐藏原生复选框
            .heart-checkbox {
              position: absolute;
              opacity: 0;
              cursor: pointer;
              height: 0;
              width: 0;
            }

            // 点赞按钮样式
            .heart-btn {
              position: relative;
              width: 10px;
              height: 10px;
              transition: transform 0.2s;
              display: inline-flex;
              align-items: center;
              justify-content: center;

              &:hover {
                transform: scale(1.1);
              }
            }

            // 爱心图标
            .heart-icon {
              position: absolute;
              top: 0;
              left: -5px;
              width: 100%;
              height: 100%;
              transition: color 0.3s;
              display: flex;
              align-items: center;
              justify-content: center;

              &::before {
                content: '❤';
                font-size: 1.25rem;
                color: @gray-light;
                transition: color 0.3s, transform 0.3s;
                position: relative;
                line-height: 1;
                vertical-align: middle;
                transform-origin: center;
              }
            }

            // 选中状态（点赞效果）
            .heart-checkbox:checked~.heart-btn .heart-icon::before {
              color: @danger-color;
              animation: heartBeat 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.49);
            }
          }
        }
      }
    }
  }

  .formpopup {
    height: 80%;
    padding: 10px;


  }
}

// 爱心动画
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>