<template>
  <div class="search-platform container-height">
    <div v-if="!isChildRoute">
      <!-- HERO -->
      <section class="wtd-hero" aria-label="WorkflowTrade Hero">
        <!-- 背景装饰层 -->
        <div class="wtd-hero__grid"></div>
        <div class="wtd-hero__orb wtd-hero__orb--1"></div>
        <div class="wtd-hero__orb wtd-hero__orb--2"></div>
        <div class="wtd-hero__orb wtd-hero__orb--3"></div>

        <!-- 面包屑 -->
        <div class="container wtd-hero__breadcrumb-wrap">
          <Breadcrumb />
        </div>

        <!-- 底部波浪 Canvas（放在内容前，z-index 低于内容）-->
        <canvas ref="waveCanvasRef" class="wtd-hero__wave-canvas"></canvas>

        <!-- 主标题区 -->
        <div class="container wtd-hero__content">
          <div class="wtd-hero__badge">
            <span class="wtd-hero__badge-dot"></span>
            <span>{{ $t('workflowTrade.heroBadge') }}</span>
          </div>
          <h1 class="wtd-hero__title">{{ $t('workflowTrade.heroTitle') }}</h1>
          <p class="wtd-hero__subtitle">
            {{ $t('workflowTrade.heroDesc') }}
          </p>

          <!-- 统计数字装饰 -->
          <div class="wtd-hero__stats">
            <div class="wtd-hero__stat">
              <span class="wtd-hero__stat-num">12,847</span>
              <span class="wtd-hero__stat-label">{{ $t('workflowTrade.statPublished') }}</span>
            </div>
            <div class="wtd-hero__stat-divider"></div>
            <div class="wtd-hero__stat">
              <span class="wtd-hero__stat-num">9,632</span>
              <span class="wtd-hero__stat-label">{{ $t('workflowTrade.statSuccess') }}</span>
            </div>
            <div class="wtd-hero__stat-divider"></div>
            <div class="wtd-hero__stat">
              <span class="wtd-hero__stat-num">98.6%</span>
              <span class="wtd-hero__stat-label">{{ $t('workflowTrade.statRate') }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- MAIN: left filter + right results -->
      <div class="wtd-main container">
        <aside class="wtd-filter-panel">
          <div class="search-platform-top bg_color_fff border_radius_16 box_shadow_card">
            <div class="wtd-search-card">
              <!-- 搜索与创建区域 -->
              <div class="wtd-search-create">
                <div class="wtd-search-inputWrap">
                  <input type="text" v-model="searchFom.title"
                    :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')" @keyup.enter="getList('init')" class="wtd-search-input" />
                </div>
                <button class="wtd-search-button" @click.stop.prevent="getList('init')">
                  <img :src="searchIcon" alt="" class="wtd-search-button__icon">
                  <!-- <span>{{$t('common.shousuo')}}</span> -->
                </button>
                <button class="wtd-publish-button" @click.stop.prevent="goWorkflowAdd">
                  <img :src="addIcon" alt="" class="wtd-publish-button__icon">
                  <span>{{ $t('common.fabuxuqiu') }}</span>
                </button>
              </div>
            </div>
            <!-- 平台分类 -->
            <div class="wtd-filter-group">
              <div class="wtd-filter-label">
                <span class="wtd-filter-label__dot" style="background: linear-gradient(135deg,#0055FE,#C832FA)"></span>
                <span class="wtd-filter-label__text">{{ $t('common.platform') }}</span>
              </div>

              <div class="wtd-filter-tags" :class="{ 'is-expanded': expandedFilters.category }">
                <span class="wtd-tag" :class="{ 'is-active': searchFom.categoryId1 === '' }"
                  @click="searchFom.categoryId1 = ''; getList('init')">
                  {{ $t('common.all') }}
                </span>

                <span v-for="item in CategoryList" :key="item.categoryId" class="wtd-tag"
                  :class="{ 'is-active': item.categoryId === searchFom.categoryId1 }"
                  @click="searchFom.categoryId1 = item.categoryId; getList('init')">
                  {{ item.categoryName }}
                </span>
              </div>

              <button class="wtd-filter-expand" @click="expandedFilters.category = !expandedFilters.category">
                {{ expandedFilters.category ? $t('common.collapse') : $t('common.expand') }}
                <svg :class="{ 'is-expanded': expandedFilters.category }" width="12" height="12" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="6 9 12 15 18 9" />
                </svg>
              </button>
            </div>

            <!-- 需求状态 -->
            <div class="wtd-filter-group">
              <div class="wtd-filter-label">
                <span class="wtd-filter-label__dot" style="background: linear-gradient(135deg,#7c3aed,#c084fc)"></span>
                <span class="wtd-filter-label__text">{{ $t('common.demandStatus') }}</span>
              </div>

              <div class="wtd-filter-tags">
                <span class="wtd-tag" :class="{ 'is-active': searchFom.applyStatus === '' }"
                  @click="searchFom.applyStatus = ''; getList('init')">
                  {{ $t('common.all') }}
                </span>

                <span
                  v-for="(value, key) in { '1': $t('workflowTrade.demandStatusSignUping'), '2': $t('workflowTrade.demandStatusEnded') }"
                  :key="key" class="wtd-tag" :class="{ 'is-active': key === searchFom.applyStatus }"
                  @click="searchFom.applyStatus = key; getList('init')">
                  {{ value }}
                </span>
              </div>
            </div>

            <!-- 发布时间 -->
            <div class="wtd-filter-group">
              <div class="wtd-filter-label">
                <span class="wtd-filter-label__dot" style="background: linear-gradient(135deg,#C832FA,#f472b6)"></span>
                <span class="wtd-filter-label__text">{{ $t('common.publishTime') }}</span>
              </div>

              <div class="wtd-date-wrap">
                <el-date-picker size="large" v-model="publishTime" type="daterange" :placeholder="$t('common.qingxuanze')"
                  format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="time => time.getTime() > Date.now()"
                  @change="getList('init')" class="wtd-date-picker" />
              </div>
            </div>
          </div>
        </aside>

        <section class="wtd-results-panel">
          <!-- 列表 -->
          <div class="course-list mt20">
            <div class="font_size20 bold mb10">
              {{ $t('common.total') }} <span class="color_theme">{{ listTotal }}</span> {{ $t('common.demandCount') }}
            </div>
            <div v-if="list.length > 0" class="course-item">
              <div class="market-card mb20 list_item_animation" v-for="item in list" :key="item.questId">
                <!-- 卡片内容 -->
                <div class="market-card-body">
                  <div class="market-card-top">
                    <h4 class="market-title">{{ item.title }}</h4>
                    <div class="market-rating">￥{{ item.budgetMin }}-{{ item.budgetMax }}</div>
                  </div>
                  
                  <div class="wtd-status-tag" :class="{ 'wtd-status-tag--ended': item.applyStatus == 2 || item.applyStatus == null }">
                    {{ item.applyStatus == 1 ? $t('workflowTrade.demandStatusSignUping') :
                      $t('workflowTrade.demandStatusEnded')}} 
                  </div>
                  
                  <p class="market-desc">{{ item.background || '' }}</p>
                  
                  <div class="market-tags">
                    <span class="market-tag">{{ item.categoryName1 }}</span>
                    <span class="market-tag">{{ item.categoryName2 }}</span>
                    <span class="market-tag">{{ item.categoryName3 }}</span>
                  </div>
                  
                  <div class="wtd-result-metaRow">
                    <div class="wtd-result-inline">
                      <div class="wtd-inline-item">
                        <img :src="yuangong" alt="" style="width: 16px; height: 16px;">
                        <span class="font_size14">{{ item.questApplyCount || 0 }} {{ $t('common.renbaoming') }}</span>
                      </div>
                      <div class="wtd-inline-item">
                        <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
                        <span class="font_size14">{{ $t('common.signUpDeadline') }}：{{ item.deadline }}</span>
                      </div>
                    </div>
                  </div>
                  
                  <div class="market-footer">
                    <div class="market-author">
                      <el-avatar :size="22" :src="appStore.avatar" />
                      <span class="market-author-name">{{ item.nickName }}</span>
                    </div>
                    <div class="market-btn-group">
                      <button class="market-use-btn" v-if="item.applyStatus === '1'" @click="isLogin({ callback: openLoginDialog, t }) && submitSignUp({ questId: item.questId, questUserId: item.questUserId }, t)">
                      {{ $t('common.zaixianbaoming') }}
                      </button>
                      <button class="market-detail-btn" @click="goworkflowTradeDetail(item)">
                        {{ $t('common.viewDetails') }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div v-else class="wtd-empty-state">
              {{ $t('common.noData') }}
            </div> -->
            <EmptyState v-else />
          </div>

          <!-- 分页 -->
          <Pagination v-if="listTotal>0" :total="listTotal" :page-size="searchFom.pageSize" :current-page="searchFom.pageNum"
            @page-change="handlePageChange" />
        </section>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script setup>
import searchIcon from '@/assets/imgs/search.png'
import addIcon from '@/assets/imgs/add.png'
import yuangong from '@/assets/imgs/yuangong.png'
import riliIcon from '@/assets/imgs/rili.png'
import shiyongIcon from '@/assets/imgs/shiyong.png'
import yunIcon from '@/assets/imgs/yun.png'
import biaoqianIcon from '@/assets/imgs/biaoqian.png'
import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
import { submitSignUp, isLogin, openFullScreenLoading } from '@/utils/util.js'
import EmptyState from '@/components/EmptyState.vue'
import Pagination from '@/components/Pagination.vue'
import { getQuestList } from '@/api/workflowTrade.js'
import { getCategoryList } from '@/api/category.js'



import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log(router, route)
import { ref, computed, reactive, onMounted, inject, watch } from 'vue'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore();
const openLoginDialog = inject('openLoginDialog')
//获取参数
const query = route.query;
//获取当前路由路径
// const currentPath = ref(router.currentRoute.value.path)
const isChildRoute = computed(() => {
  return route.matched.length > 1
});

// 波浪 Canvas 引用
const waveCanvasRef = ref(null)
const applyStatusInfo = {
  '1': t('workflowTrade.demandStatusSignUping'),
  '2': t('workflowTrade.demandStatusEnded'),
}
// 一级分类列表
const CategoryList = ref([]);

// UI：分类标签展开/收起
const expandedFilters = reactive({
  category: false,
})

// 添加分页相关数据
const list = ref([]);
const listTotal = ref(0);
const publishTime = ref(['', '']);
const searchFom = reactive({
  categoryId1: '',
  title: '',
  applyStatus: '',//1：报名中，2：已结束
  publishTimeBegin: '',
  publishTimeEnd: '',
  pageNum: 1,
  pageSize: 10,
  orderByColumn: 'questId',
  isAsc: 'desc'
})

//新增返回后，刷新列表
// 监听路由变化，当从子路由返回到父路由时刷新列表
watch(
  () => route.matched.length,
  (newLength, oldLength) => {
    // 当路由从子路由（长度>1）返回到父路由（长度=1）时刷新列表
    if (oldLength > 1 && newLength === 1) {
      getList('init');
    }
  }
)


onMounted(() => {
  getList('init');
  getCategoryListFn();
  initWaveCanvas();
})

// 初始化波浪 Canvas
const initWaveCanvas = () => {
  const canvas = waveCanvasRef.value
  if (!canvas) return
  const ctx = canvas.getContext('2d')
  let W = 0, H = 0
  function resize() {
    W = canvas.width = canvas.offsetWidth
    H = canvas.height = canvas.offsetHeight
  }
  resize()
  window.addEventListener('resize', resize)

  const waves = [
    { amp: 40, freq: 0.004, speed: 0.0012, phase: 0,   color: 'rgba(99,102,241,0.28)' },
    { amp: 28, freq: 0.006, speed: 0.0025, phase: 2.1, color: 'rgba(167,139,250,0.22)' },
    { amp: 18, freq: 0.008, speed: 0.004,  phase: 4.3, color: 'rgba(255,255,255,1)' },
  ]

  function draw() {
    ctx.clearRect(0, 0, W, H)
    waves.forEach(w => {
      w.phase += w.speed
      ctx.beginPath()
      ctx.moveTo(0, H)
      for (let x = 0; x <= W; x += 2) {
        // 起始位置改为 60%，让波浪基线更靠下，波浪紧贴步骤条
        const y = H * 0.60 + Math.sin(x * w.freq + w.phase) * w.amp
        ctx.lineTo(x, y)
      }
      ctx.lineTo(W, H)
      ctx.closePath()
      ctx.fillStyle = w.color
      ctx.fill()
    })
    requestAnimationFrame(draw)
  }
  draw()
}
const handlePageChange = (page, pageSize) => {
  searchFom.pageNum = page
  // 这里可以添加获取数据的逻辑
  if (pageSize) searchFom.pageSize = pageSize;
  console.log('当前页:', page);
  getList();
}
// 查询寻找工作流列表
const getList = async (type) => {
  if (type === 'init') {
    searchFom.pageNum = 1
  }
  searchFom.publishTimeBegin = publishTime.value && publishTime.value[0] ? publishTime.value[0] : '';
  searchFom.publishTimeEnd = publishTime.value && publishTime.value[1] ? publishTime.value[1] : '';
  // 打开loading
  const loading = openFullScreenLoading();
  const res = await getQuestList(searchFom)
  // 关闭loading
  loading.close();
  if (res.code === 200) {
    listTotal.value = res.total
    list.value = res.rows
  }
}

const goworkflowTradeDetail = (item = {}) => {
  if (!isLogin({ callback: openLoginDialog, t })) {
    return
  }
  //增加参数名称
  router.push({
    path: `/workflow-trade/workflow-trade-detail`,
    query: {
      questId: item.questId,
      metaTitle: item.title || '详情'
    }
  })
};
const goWorkflowAdd = () => {
  if (!isLogin({ callback: openLoginDialog, t })) {
    return
  }
  //增加参数名称
  router.push({
    path: `/workflow-trade/workflow-trade-add`,
    query: {
    }
  })
};
const getCategoryListFn = async () => {
  console.log('获取一级分类列表')
  const res = await getCategoryList({ categoryLevel: 1 })
  if (res.code === 200) {
    console.log('一级分类列表', res.data)
    CategoryList.value = res.rows || []
  }
};
</script>

<style scoped lang="scss">
.container {
  // max-width: 1200px;
  width: 100%;
  min-width: auto;
  margin: 0 auto;
  padding: 0 24px;
  position: relative; z-index: 1;
}
// 2. 混合器：按钮通用样式
@mixin btn-style() {
  padding: 0 16px;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;

  &:hover {
    opacity: 0.9;
  }
}

// ===============================
// wtd: Hero + 两栏布局（glass）
// ===============================
.wtd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 25%, #7c3aed 55%, #a855f7 80%, #ec4899 100%);
  padding-bottom: 80px;
  color: #fff;
}

/* 网格背景 */
.wtd-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* 光晕球 */
.wtd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.wtd-hero__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.4), transparent 70%);
  top: -150px;
  right: 5%;
}

.wtd-hero__orb--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(240, 171, 252, 0.35), transparent 70%);
  bottom: -100px;
  left: 3%;
}

.wtd-hero__orb--3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(251, 207, 232, 0.3), transparent 70%);
  top: 30px;
  left: 40%;
}

.wtd-hero__breadcrumb-wrap {
  position: relative;
  z-index: 2;
  padding-top: 18px;

  :deep(.el-breadcrumb__inner),
  :deep(.el-breadcrumb__separator) {
    color: rgba(255, 255, 255, 0.65) !important;
  }

  :deep(.el-breadcrumb__inner.is-link:hover) {
    color: #fff !important;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #fff !important;
    font-weight: 600;
  }
}

.wtd-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 8px 20px 0;
}

.wtd-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 18px;
}

.wtd-hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a5f3fc;
  box-shadow: 0 0 10px #a5f3fc;
  animation: wtd-pulse 2s ease-in-out infinite;
}

@keyframes wtd-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.wtd-hero__title {
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 12px;
  line-height: 1.15;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.wtd-hero__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.wtd-hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 14px 28px;
  gap: 24px;
}

.wtd-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wtd-hero__stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.wtd-hero__stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

.wtd-hero__stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
}

/* 波浪 Canvas */
.wtd-hero__wave-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
  pointer-events: none;
  display: block;
}

:deep(.el-breadcrumb__inner),
:deep(.el-breadcrumb__separator) {
  color: rgba(255,255,255,0.65) !important;
  font-weight: 600;
}

:deep(.el-breadcrumb__inner.is-link:hover) {
  color: #fff !important;
}

.wtd-main {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: start;
  padding-bottom: 60px;
}

.wtd-filter-panel {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  border: 1px solid rgba(79, 70, 229, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 50px rgba(79, 70, 229, 0.10);
  overflow: hidden;
  position: sticky;
  top: 90px;
}

.wtd-search-card {
  padding: 16px 18px 12px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(79, 70, 229, 0.08);
}

.wtd-search-create {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.wtd-search-inputWrap {
  flex: 1 1 180px;
  min-width: 0;
}

.wtd-search-input {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1.5px solid rgba(224, 224, 240, 1);
  background: rgba(250, 250, 254, 0.96);
  box-shadow: none !important;
  padding: 0 14px;
  outline: none;
  color: rgba(17, 24, 39, 0.92);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wtd-search-input::placeholder {
  color: rgba(107, 114, 128, 0.8);
}

.wtd-search-input:focus {
  border-color: rgba(99, 102, 241, 0.9);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10) !important;
  background: #fff;
}

.wtd-search-button,
.wtd-publish-button {
  height: 50px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.wtd-search-button {
  background: linear-gradient(90deg, #4f46e5 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18);
  font-size: 13px;
}

.wtd-publish-button {
  width: 100%;
  background: linear-gradient(90deg, #4f46e5 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18);
  font-size: 13px;
  flex: 0 0 auto;
}

.wtd-search-button:hover,
.wtd-publish-button:hover {
  transform: translateY(-2px);
}

.wtd-search-button__icon,
.wtd-publish-button__icon {
  width: 16px;
  height: 16px;
}

.wtd-search-button:active,
.wtd-publish-button:active {
  transform: translateY(0);
}

.wtd-results-panel {
  min-width: 0;
}

// ===============================
// 左侧筛选：标签化 UI
// ===============================
.wtd-filter-group {
  padding: 18px 18px 12px;
}

.wtd-filter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 800;
  color: #1a1a2e;
  font-size: 14px;
}

.wtd-filter-label__dot {
  width: 4px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.wtd-filter-label__text {
  line-height: 1;
}

.wtd-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 46px;
  overflow: hidden;
  // padding: 6px 2px;
  padding:6px 4px;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.wtd-filter-tags.is-expanded {
  max-height: 220px;
}

.wtd-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  background: rgba(245, 246, 250, 1);
  border: 1px solid rgba(229, 231, 240, 1);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.wtd-tag:hover {
  border-color: rgba(0, 85, 254, 0.28);
  color: #4f46e5;
  background: linear-gradient(135deg, rgba(0, 85, 254, 0.08), rgba(200, 50, 250, 0.06));
  box-shadow: 0 2px 5px rgba(0,85,254,0.15);
  transform: translateY(-1px);
}

.wtd-tag.is-active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #0055FE, #C832FA);
  box-shadow: 0 2px 5px rgba(0,85,254,0.15);
  transform: translateY(-1px);
}

.wtd-filter-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  background: rgba(0, 85, 254, 0.05);
  border: 1px solid rgba(0, 85, 254, 0.14);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: #0055FE;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

.wtd-filter-expand:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 85, 254, 0.14);
  border-color: rgba(0, 85, 254, 0.28);
}

.wtd-filter-expand svg {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wtd-filter-expand svg.is-expanded {
  transform: rotate(180deg);
}

.wtd-date-wrap {
  padding-bottom: 8px;
}

.wtd-date-picker {
  width: 100%;
}

:deep(.wtd-date-picker .el-input__wrapper),
:deep(.wtd-date-picker .el-date-editor) {
  width: 100%;
}

:deep(.el-date-editor.el-input),
:deep(.el-date-editor.el-input__wrapper){
  width: 100%;
}

:deep(.wtd-date-picker .el-input__wrapper) {
  border-radius: 14px;
  border: 1.5px solid rgba(224, 224, 240, 1);
  background: rgba(250, 250, 254, 0.96);
  box-shadow: none !important;
}

:deep(.wtd-date-picker .el-input__wrapper:hover) {
  border-color: rgba(99, 102, 241, 0.55);
  background: #fff;
}

:deep(.wtd-date-picker .el-input__wrapper.is-focus) {
  border-color: rgba(99, 102, 241, 0.9);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10) !important;
  background: #fff;
}

// Element Plus 分页：让激活态更接近主色
:deep(.el-pagination.is-background .el-pager li.is-active) {
  background: linear-gradient(90deg, #0055FE, #C832FA) !important;
  border-radius: 8px;
}

:deep(.el-pagination.is-background .el-pager li) {
  background-color: rgba(255, 255, 255, 0.9);
}

// ===============================
// 右侧列表：卡片样式
// ===============================
.wtd-results-panel .course-list {
  min-height: 300px;
}

/* 卡片网格 */
.wtd-results-panel {
  // display: grid;
  // grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.course-item{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}

/* 大屏（≥1400px）强制 3 列 */
@media (min-width: 1400px) {
  .wtd-results-panel {
    grid-template-columns: repeat(3, 1fr);
  }
}

.market-card {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
}

.market-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

.market-card.hidden {
  opacity: 0.3;
  transform: scale(0.95);
}

/* 卡片内容 */
.market-card-body {
  padding: 16px;
}

.market-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.market-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  flex: 1;
  margin-right: 8px;
  line-height: 1.3;
}

.market-rating {
  font-size: 12px;
  color: #F59E0B;
  font-weight: 600;
  white-space: nowrap;
}

.market-desc {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
  min-height: 36px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.market-tag {
  padding: 2px 8px;
  background: #F3F4F6;
  border-radius: 100px;
  font-size: 10px;
  color: #6B7280;
}

.market-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.market-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
  overflow: hidden; 
  flex-shrink: 0;
  width: 30%;
  flex: 1;
  :deep(.el-avatar){
    flex-shrink: 0;
  }
}



.market-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.market-author-name{
  font-size: 12px;
  display: inline-block;
  color: #6B7280;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.market-btn-group{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 50%;
  flex: 1;
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 180px;
}

.market-use-btn {
  padding: 5px 12px;
  background: #F5F3FF;
  color: #6366F1;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 8px;
}

.market-use-btn:hover {
  background: #6366F1;
  color: white;
}

.market-detail-btn {
  padding: 5px 12px;
  background: #F3F4F6;
  color: #6B7280;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.market-detail-btn:hover {
  background: #6B7280;
  color: white;
}

.wtd-status-tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  white-space: nowrap;
  margin-bottom: 8px;
}

.wtd-status-tag--ended {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

.wtd-result-metaRow {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.wtd-result-inline {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.wtd-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
}

.wtd-empty-state {
  padding: 46px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  border: 1px dashed rgba(79, 70, 229, 0.18);
  background: rgba(255, 255, 255, 0.65);
  color: #6b7280;
  grid-column: 1 / -1;
}

@media (max-width: 1200px) {
  .wtd-results-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 小平板（≤900px）：2 列 */
@media (max-width: 900px) {
  .wtd-hero {
    padding: 26px 0 40px;
  }

  .wtd-hero__title {
    font-size: 30px;
  }

  .wtd-hero__stats {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }

  .wtd-hero__stat-divider {
    display: none;
  }

  .wtd-main {
    grid-template-columns: 1fr;
  }

  .wtd-filter-panel {
    position: static;
  }

  .wtd-search-create {
    gap: 10px;
  }

  .wtd-search-input {
    height: 48px;
  }

  .wtd-search-button,
  .wtd-publish-button {
    height: 48px;
    padding: 0 14px;
  }

  .wtd-result-metaRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .wtd-result-chips {
    max-width: unset;
  }

  .wtd-results-panel {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* 手机竖屏（≤600px）：1 列 */
@media (max-width: 600px) {
  .wtd-results-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .market-card-body {
    padding: 12px;
  }

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

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

  .market-tags {
    display: none;
  }
}

/* 极小屏（≤400px）：1 列 */
@media (max-width: 400px) {
  .wtd-results-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .wtd-search-create {
    flex-direction: column;
    align-items: stretch;
  }

  .wtd-search-inputWrap {
    flex: 1 1 auto;
  }

  .wtd-search-button,
  .wtd-publish-button {
    width: 100%;
    height: 48px;
  }
}

.search-platform {
  .search-platform-top {
    padding: 12px 12px 0 12px;
  }

  // 搜索创建栏嵌套
  .search-create-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;

    .search-input {
      flex: 1;
      height: 60px;
      padding: 0 12px;
      outline: none;
      font-size: 18px;
      border-radius: 7px;
      border: none;
      width: 100%;

      //占位符的颜色
      ::placeholder {
        color: #999;
      }
    }

    .search-btn {
      height: 50px;
      @include btn-style();
    }

    .create-btn {
      height: 56px;
      @include btn-style();
    }

    .search-input-container {
      position: relative;
      border-radius: 8px;
      border: 2px solid $primary-color;

      .search-btn {
        position: absolute;
        top: 6px;
        right: 6px;
      }
    }
  }

  .typeList {
    padding: 10px 0;

    &.typeborder {
      border-bottom: 1px dashed #DCDFE6;
    }

    .typeName {
      margin-top: 6px;
      min-width: 80px;
      white-space: nowrap;
    }

    .typeItem {
      margin: 0 8px;
      cursor: pointer;
      padding: 4px 8px;

      &.active {
        background: rgba(45, 113, 255, 0.1);
        border-radius: 4px 4px 4px 4px;
        color: $primary-color;
        font-weight: 600;
      }
    }
  }

  .tag {
    padding: 0 12px;
    line-height: 30px;
    color: #FFFFFF;
    font-size: 14px;
    background: #2D71FF;
    border-radius: 4px;
    margin-right: 8px;
  }

  .tag_red {
    background: #E43434;
  }
}
</style>
