<template>
  <view class="memorial-detail">
    <!-- 主图区域 -->
    <view class="main-image-section">
      <image
        :src="showImg(detailInfo.image)"
        mode="aspectFill"
        class="main-image"
        @click="previewMainImage"
      />
    </view>

    <!-- 数字资产信息卡片 -->
    <view class="asset-info-card">
      <view class="card-header">
        <text class="asset-title">{{ detailInfo.title }}</text>
      </view>

      <view class="info-row">
        <text class="info-label">发行数量：</text>
        <text class="info-value">{{ detailInfo.totalSupply }}份</text>
      </view>

      <view class="divider"></view>

      <view class="info-row">
        <text class="info-label">数字资产所有方：</text>
        <text class="info-value">{{ detailInfo.owner }}</text>
      </view>

      <view class="info-row">
        <text class="info-label">数字资产权利方：</text>
        <text class="info-value">{{ detailInfo.rightHolder }}</text>
      </view>

      <view class="info-row">
        <text class="info-label">数字资产所有方：</text>
        <text class="info-value">{{ detailInfo.assetOwner }}</text>
      </view>

      <!-- 收藏信息 -->
      <view class="collection-info">
        <view class="collection-header">— 收藏信息 —</view>
        <view class="collector-info">
          <text class="collector-label">收藏者</text>
          <text class="collector-name">{{ detailInfo.collector }}</text>
          <text class="collection-number">编号</text>
          <text class="collection-code">{{ detailInfo.collectionCode }}</text>
          <text class="collection-time-label">收藏时间</text>
          <text class="collection-time">{{ detailInfo.collectionTime }}</text>
        </view>
      </view>
    </view>

    <!-- 认证信息卡片 -->
    <view class="cert-info-card">
      <view class="cert-header">— 认证信息 —</view>

      <view class="cert-row">
        <text class="cert-label">权证码</text>
        <text class="cert-value">{{ detailInfo.certificateCode }}</text>
      </view>

      <view class="cert-row">
        <text class="cert-label">合约地址</text>
        <text class="cert-value">{{ detailInfo.contractAddress }}</text>
      </view>

      <view class="cert-row">
        <text class="cert-label">交易HASH</text>
        <text class="cert-value">{{ detailInfo.transactionHash }}</text>
      </view>

      <view class="cert-row">
        <text class="cert-label">钱包地址</text>
        <text class="cert-value">{{ detailInfo.walletAddress }}</text>
      </view>
    </view>

    <!-- 藏品详情卡片 -->
    <view class="product-detail-card">
      <view class="product-header">— 藏品详情 —</view>
      <view class="product-content">
        <!-- 这里可以放置藏品的详细描述内容 -->
        <text class="product-description">{{ detailInfo.description }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MemorialDetail",
  data() {
    return {
      detailInfo: {
        id: "",
        title: "这里是数字资产的名称",
        totalSupply: "2000",
        owner: "XXX博物馆",
        rightHolder: "江苏大运河公司",
        assetOwner: "江苏大运河公司",
        collector: "XXX用户",
        collectionCode: "#001-0050/1000",
        collectionTime: "2025-085-04 15:20:20",
        certificateCode: "SUA-DA-01-20250729A123456-001-0050/1000-v1",
        contractAddress: "0xd4efaba236f7c110fe85fcbcde5489a7a3c71ec3",
        transactionHash: "0xd412da236f7c110fe81ewl5fcbcde5489a7a3c7",
        walletAddress: "0x8df5d733a0dd127022f7740be4f9c10ec8a23b",
        image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png",
        description: "这里是藏品的详细描述信息...",
      },
    };
  },
  onLoad(options) {
    // 获取传入的参数
    if (options.id) {
      this.loadDetailInfo(options.id);
    }
  },
  methods: {
    // 加载详情信息
    async loadDetailInfo(id) {
      try {
        // 这里应该调用实际的API获取详情数据
        // const response = await this.getMemorialDetail(id);
        // this.detailInfo = response.data;

        // 模拟数据加载
        console.log("加载纪念册详情，ID:", id);
      } catch (error) {
        console.error("加载详情失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      }
    },

    // 预览主图
    previewMainImage() {
      const imageUrl = this.showImg(this.detailInfo.image);
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl,
      });
    },

    // 图片路径处理
    showImg(img) {
      if (!img) return "";
      if (img.startsWith("http")) {
        return img;
      }
      const NEWAPIURL = "https://epic.js-dyyj.com";
      return `${NEWAPIURL}${img}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.memorial-detail {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: env(safe-area-inset-bottom);
}

// 主图区域
.main-image-section {
  width: 100%;
  height: 600rpx;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;

  .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 通用卡片样式
.asset-info-card,
.cert-info-card,
.product-detail-card {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

// 数字资产信息卡片
.asset-info-card {
  .card-header {
    margin-bottom: 32rpx;

    .asset-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
    }
  }

  .info-row {
    display: flex;
    margin-bottom: 20rpx;
    align-items: flex-start;

    .info-label {
      font-size: 28rpx;
      color: #666;
      margin-right: 16rpx;
      flex-shrink: 0;
    }

    .info-value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }

  .divider {
    height: 1rpx;
    background: #e0e0e0;
    margin: 24rpx 0;
  }

  // 收藏信息
  .collection-info {
    margin-top: 40rpx;
    padding: 32rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    border: 2rpx solid #e0e0e0;

    .collection-header {
      text-align: center;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 24rpx;
      font-weight: 500;
    }

    .collector-info {
      display: grid;
      grid-template-columns: auto auto;
      gap: 16rpx 24rpx;
      text-align: center;

      .collector-label,
      .collection-number,
      .collection-time-label {
        font-size: 24rpx;
        color: #666;
      }

      .collector-name,
      .collection-code,
      .collection-time {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
      }

      .collection-code {
        font-family: "Courier New", monospace;
      }

      .collection-time {
        font-family: "Courier New", monospace;
      }
    }
  }
}

// 认证信息卡片
.cert-info-card {
  .cert-header {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 32rpx;
    font-weight: 500;
  }

  .cert-row {
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .cert-label {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 8rpx;
    }

    .cert-value {
      display: block;
      font-size: 24rpx;
      color: #333;
      font-family: "Courier New", monospace;
      word-break: break-all;
      line-height: 1.5;
    }
  }
}

// 藏品详情卡片
.product-detail-card {
  .product-header {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 32rpx;
    font-weight: 500;
  }

  .product-content {
    .product-description {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
    }
  }
}
</style>
