<template>
  <view class="design-list">
    <view class="design-item" v-for="(item, index) in items" :key="index">
      <view class="design-preview">
        <image :src="item.image" mode="aspectFit"></image>
      </view>
      <view class="design-info">
        <view class="design-title">{{ item.title }}</view>
        <view class="design-author">by:{{ item.author }}</view>

        <view class="design-stats">
          <view class="stat-item">
            <text class="iconfont">👁</text>
            <text>{{ item.views }}</text>
          </view>
          <view class="stat-item">
            <text class="iconfont">👍</text>
            <text>{{ item.likes }}</text>
          </view>
          <view class="stat-item">
            <text class="iconfont">💬</text>
            <text>{{ item.comments }}</text>
          </view>
        </view>
      </view>
      <view class="design-action">
        <button class="view-btn">查看</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "RecommendItem",
  props: {
    currentTab: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      items: [
        {
          id: 1,
          title: "高压细水雾灭火推车描述",
          author: "赵其",
          image: "/static/images/activity1.png",
          views: 128,
          likes: 16,
          comments: 35,
          url: "/pages/drawings/detail?id=1",
        },
        {
          id: 2,
          title: "高压细水雾灭火推车描述",
          author: "赵其",
          image: "/static/images/activity2.png",
          views: 128,
          likes: 16,
          comments: 35,
          url: "/pages/drawings/detail?id=2",
        },
        {
          id: 1,
          title: "室内CAD模型设计室内CAD模型设计",
          author: "张泽",
          image: "/static/images/activity1.png",
          views: 95,
          likes: 12,
          comments: 28,
          url: "/pages/models/detail?id=1",
        },
        {
          id: 1,
          title: "CAD设计规范文档",
          author: "李华",
          image: "/static/images/activity2.png",
          views: 156,
          likes: 23,
          comments: 42,
          url: "/pages/documents/detail?id=1",
        },
      ],
    };
  },
  methods: {
    viewDetail(item) {
      console.log("View detail for:", item.title);
      uni.navigateTo({
        url: item.url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #007aff;
$text-color: #333;
$secondary-text: #666;
$light-text: #999;
$bg-color: #f0f4f9;
$white: #fff;
$border-color: #eee;
$border-radius: 15rpx;
.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: 17rpx 10rpx;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .design-preview {
      width: 220rpx;
      height: 168rpx;
      overflow: hidden;

      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: 25rpx;
        padding: 0rpx 25rpx !important;
        border-radius: 5rpx;
      }
    }
  }
}
</style>
