<template>
  <view class="memorial-detail">
    <!-- 轮播图区域 -->
    <view class="content">
      <view class="banner-content">
        <swiper
          class="top-banner"
          :circular="true"
          :interval="6000"
          :duration="800"
          :indicator-dots="false"
          :autoplay="true"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in topBanner" :key="index">
            <image
              class="top-banner"
              :src="showImg(item)"
              mode="aspectFill"
            ></image>
          </swiper-item>
        </swiper>

        <view class="dot-container">
          <view
            :class="['dot-line', index == swiperIndex ? 'active' : '']"
            v-for="(item, index) in topBanner"
            :key="index"
          ></view>
        </view>
      </view>
      <view class="asset-title">
        {{ detailInfo.goodsName }}
      </view>

      <!-- 发行数量胶囊 -->
      <view class="issue-quantity-pill">
        <text class="pill-text"
          >发行数量: {{ detailInfo.publishQuantity || 0 }}份</text
        >
      </view>

      <!-- 收藏信息区域 -->
      <view class="info-section">
        <view
          class="info-row"
          style="flex-direction: row; justify-content: space-around"
        >
          <view class="info-item">
            <text class="info-label">收藏者</text>
            <text class="info-value">{{
              (userInfo && userInfo.nickname) || "--"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">编号</text>
            <text class="info-value">{{ detailInfo.code || "--" }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">收藏时间</text>
            <text class="info-value">{{ detailInfo.activeTime || "--" }}</text>
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="section-divider"></view>

      <!-- 资产权利信息区域 -->
      <view class="info-section">
        <view class="info-row">
          <view class="info-item">
            <text class="info-label">数字资产所有方</text>
            <text class="info-value">{{ detailInfo.ownPart || "--" }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">数字资产权利方</text>
            <text class="info-value">{{ detailInfo.powerPart || "--" }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">授权品牌</text>
            <text class="info-value">{{
              detailInfo.authorizeBrand || "--"
            }}</text>
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="section-divider"></view>

      <!-- 授权码和下载按钮区域 -->
      <view class="auth-section">
        <view class="auth-code-item">
          <text class="info-label">授权码</text>
          <text class="auth-code-value">{{
            detailInfo.activeCode || "--"
          }}</text>
        </view>
        <view class="download-button" @click="handleDownload">
          <text class="download-text">点击下载</text>
        </view>
      </view>
    </view>

    <!-- 藏品详情卡片 -->
    <view class="product-detail-card">
      <view class="product-header">— 藏品详情 —</view>
      <view class="product-content">
        <view class="" v-html="detailInfo.detailUrl"> </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MemorialDetail",
  data() {
    return {
      swiperIndex: 0,
      detailInfo: {},
      topBanner: [],
      userInfo: null,
    };
  },
  onLoad(options) {
    let userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    }
    // 获取传入的参数
    if (options.id) {
      this.loadDetailInfo(options.id);
    }
  },
  methods: {
    swiperChange(e) {
      this.swiperIndex = e.detail.current;
    },
    // 加载详情信息
    async loadDetailInfo(id) {
      try {
        this.Post(
          {
            orderChildId: id,
          },
          `/framework/order/ipOrderDetail`,
          "DES"
        ).then((res) => {
          if (res.code == 200) {
            res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl);
            this.detailInfo = res.data;
            this.topBanner = res.data.hdUrl.split(",");
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
        // 模拟数据加载
        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,
      });
    },
    // 处理下载按钮点击
    handleDownload() {
      // 获取主图URL
      const imageUrl = this.topBanner[0];
      console.log(imageUrl);
      // 下载图片到本地
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          console.log(res);
          if (res.statusCode === 200) {
            // 保存到相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "图片已保存到相册",
                  icon: "success",
                });
              },
              fail: (err) => {
                uni.showToast({
                  title: "保存失败，请检查权限",
                  icon: "none",
                });
              },
            });
          } else {
            uni.showToast({
              title: "下载失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
      });
    },
  },
};
</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-title {
  font-size: 44rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  text-align: center;
  margin-top: 45rpx;
}
// 数字资产信息卡片
.asset-info-card {
  .card-header {
    margin-bottom: 32rpx;
  }

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

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

    .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: #000000;
    margin-bottom: 32rpx;
    font-weight: bold;
  }

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

.banner-content {
  width: 100%;
  height: 1624rpx;
  position: relative;

  .top-banner {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }

  .dot-container {
    position: absolute;
    bottom: 43rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .dot-line {
      width: 52rpx;
      height: 4rpx;
      margin: 0 8rpx;
      background: RGBA(189, 170, 173, 0.8);

      &.active {
        background: #94fafa;
      }
    }
  }

  .page-indicator {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    // background: rgba(0, 0, 0, 0.5);
    border-radius: 10rpx;
    padding: 10rpx 20rpx;

    .page-text {
      font-size: 24rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}
.content {
  margin: 30rpx;
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx #00ff02;
}

// 发行数量胶囊
.issue-quantity-pill {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;

  .pill-text {
    background: linear-gradient(135deg, #00fffe, #00ff08);
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
    font-size: 24rpx;
    color: #333333;
    font-weight: 500;
  }
}

// 信息区域
.info-section {
  margin: 20rpx 0;

  .info-row {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    padding: 16rpx;
    align-items: center;
    .info-label {
      font-size: 24rpx;
      color: #989898;
      font-weight: 500;
    }

    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      word-break: break-all;
    }
  }
}

// 分割线
.section-divider {
  height: 2rpx;
  background: #e5e5e5;
  margin: 30rpx 0;
}

// 授权码和下载按钮区域
.auth-section {
  margin: 20rpx 0;

  .auth-code-item {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    padding: 16rpx;
    margin-bottom: 30rpx;
    align-items: center;

    .info-label {
      font-size: 24rpx;
      color: #989898;
      font-weight: 500;
    }

    .auth-code-value {
      font-size: 24rpx;
      color: #333;
      font-family: "Courier New", monospace;
      font-weight: bold;
      word-break: break-all;
      padding: 12rpx;
      border-radius: 8rpx;
    }
  }

  .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #00fffe, #00ff08);
    width: 334rpx;
    border-radius: 20rpx;
    padding: 15rpx 40rpx;
    transition: all 0.3s ease;
    margin: 0 auto;

    &:active {
      transform: scale(0.95);
      box-shadow: 0 2rpx 10rpx rgba(119, 243, 249, 0.5);
    }

    .download-text {
      margin: 0 auto;
      font-size: 28rpx;
      color: #000000;
      font-weight: bold;
    }
  }
}
</style>
