<script>
  export default {
    name: 'ancientItem',
    props: {
      title: {
        type: String,
        default: '往生殿',
      },
      description: {
        type: String,
        default: '用于祈愿离苦，善缘延续',
      },
      imageUrl: {
        type: String,
        default: 'https://api.ccttiot.com/image-1754553886458.png',
      },
      buttonText: {
        type: String,
        default: '了解详情',
      },
    },
    methods: {
      handleClick() {
        this.$emit('click')
      },
    },
  }
</script>

<template>
  <view class="ancient-card" @click="handleClick">
    <view class="card-background">
      <image
        v-if="imageUrl"
        :src="imageUrl"
        :alt="title"
        class="background-image"
        mode="aspectFill"
      />
      <view v-else class="placeholder-background"></view>
    </view>

    <view class="card-content">
      <text class="card-title">{{ title }}</text>
      <text class="card-description">{{ description }}</text>
      <view class="card-button">
        <text>{{ buttonText }}</text>
        <view class="arrow-icon">
          <text class="arrow-text">→</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  /* ==================== 卡片容器 ==================== */
  .ancient-card {
    position: relative;
    width: 670rpx;
    height: 286rpx;
    border-radius: 16rpx;

    overflow: hidden;

    /* ========== 背景层 ========== */
    .card-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #3d3d3d;

      /* 真实背景图 */
      .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover; // 保持比例填充
        opacity: 0.4;
      }

      /* 缺省背景（渐变+模糊） */
      .placeholder-background {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        filter: blur(8px);
      }
    }

    /* ========== 内容层 ========== */
    .card-content {
      position: relative;
      z-index: 2; // 确保内容在背景上层
      height: 100%;
      padding: 40rpx 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      /* 标题样式 */
      .card-title {
        width: 160rpx;
        height: 54rpx;
        font-weight: 500;
        font-size: 40rpx;
        color: #ffffff;
        line-height: 54rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      /* 描述文本 */
      .card-description {
        margin: 20rpx 0 28rpx 0;
        height: 38rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 38rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      /* 按钮样式 */
      .card-button {
        display: flex;
        align-items: center;
        padding: 0 15rpx;
        color: white;
        font-size: 14px;
        font-weight: 500;
        //background: rgba(255, 255, 255, 0.2);
        //backdrop-filter: blur(10px); // 毛玻璃效果
        width: 176rpx;
        height: 54rpx;
        border-radius: 33rpx 33rpx 33rpx 33rpx;
        border: 1rpx solid #ffffff;

        /* 箭头图标 */
        .arrow-icon {
          margin-left: 8px;

          .arrow-text {
            width: 96rpx;
            height: 32rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }
</style>
