<template>
  <div class="container">
    <!-- 设计图列表 -->
    <div class="design-list">
      <div
        class="design-item"
        v-for="(item, index) in designList"
        :key="index"
      >
        <div class="design-preview">
          <img :src="item.image" alt="preview" />
        </div>
        <div class="design-info">
          <div class="design-title">{{ item.title }}</div>
          <div class="design-author">by:{{ item.author }}</div>

          <div class="design-stats">
            <div class="stat-item">
              <span class="iconfont">👁</span>
              <span>{{ item.views }}</span>
            </div>
            <div class="stat-item">
              <span class="iconfont">👍</span>
              <span>{{ item.likes }}</span>
            </div>
            <div class="stat-item">
              <span class="iconfont">💬</span>
              <span>{{ item.comments }}</span>
            </div>
          </div>
        </div>
        <div class="design-action">
          <button class="view-btn" @click="viewDesign(index)">查看</button>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const designList = ref([
  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
])

function viewDesign(index: number) {
  router.push({ path: '/mobile/design-detail', query: { id: String(index) } })
}

onMounted(() => {
  const titleFromQuery = (route.query.titleName as string) || '详情'
  if (titleFromQuery) {
    document.title = decodeURIComponent(titleFromQuery)
  }
})
</script>

<style lang="scss">
// 变量定义
$primary-color: #007aff;
$text-color: #333;
$secondary-text: #666;
$light-text: #999;
$bg-color: #fff;
$white: #fff;
$border-color: #eee;
$border-radius: 10rpx;
$mask-bg: rgba(0, 0, 0, 0.5);

.container {
  padding: 0;
  background-color: $bg-color;
  position: relative;
}

.design-list {
  padding: 10rpx 20rpx;

  .design-item {
    display: flex;
    margin-bottom: 20rpx;
    background-color: $white;
    border-radius: $border-radius;
    border: 1px solid $border-color;
    padding: 20rpx;
    position: relative;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .design-preview {
      width: 220rpx;
      height: 160rpx;
      overflow: hidden;
      border: 1px solid $border-color;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .design-info {
      flex: 1;
      padding: 0 20rpx;

      .design-title {
        font-size: 27rpx;
        margin-bottom: 10rpx;
      }

      .design-author {
        font-size: 25rpx;
        color: $light-text;
        margin-bottom: 30rpx;
      }
    }

    .design-stats {
      display: flex;

      .stat-item {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        font-size: 24rpx;
        color: $light-text;

        .iconfont {
          margin-right: 5rpx;
        }
      }
    }

    .design-action {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;

      .view-btn {
        background-color: $primary-color;
        color: $white;
        font-size: 26rpx;
        padding: 0rpx 25rpx;
        border-radius: 5rpx;
      }
    }
  }
}
</style>
