<template>
  <!-- 产品参数：普通参数行 + 可展开的"补充说明" -->
  <view class="params-wrap">
    <text class="title">产品参数</text>

    <!-- 普通参数行 -->
    <view
      class="param-row"
      v-for="(item, index) in normalParams"
      :key="index"
    >
      <text class="param-label">{{ item.label }}</text>
      <text class="param-value">{{ item.value }}</text>
    </view>

    <!-- 可展开的"补充说明" -->
    <view class="param-row expandable-row" v-if="expandableParam">
      <text class="param-label">{{ expandableParam.label }}</text>
      <view class="expandable-content">
        <text class="param-value" :class="{ 'value-collapsed': !expanded }">{{ expandableParam.value }}</text>

        <!-- 渐变遮罩 + 展开按钮（仅收起态显示） -->
        <view class="expand-overlay" v-if="!expanded">
          <view class="gradient-mask"></view>
          <view class="expand-btn" @tap="toggleExpand">
            <text class="expand-text">展开</text>
            <view class="arrow-down"></view>
          </view>
        </view>

        <!-- 展开后的"收起"按钮 -->
        <view class="collapse-btn" v-if="expanded" @tap="toggleExpand">
          <text class="expand-text">收起</text>
          <view class="arrow-up"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ParamsTable',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    normalParams() {
      return this.list.filter((item) => !item.expandable)
    },
    expandableParam() {
      return this.list.find((item) => item.expandable)
    }
  },
  methods: {
    toggleExpand() {
      this.expanded = !this.expanded
    }
  }
}
</script>

<style scoped>
.params-wrap {
  padding: 30rpx 20rpx; /* 15px 10px */
  background: #ffffff;
}

/* 标题 */
.title {
  display: block;
  font-size: 29rpx; /* 15px */
  color: #000000;
  line-height: 33rpx;
  margin-bottom: 20rpx; /* 10px */
}

/* 普通参数行 */
.param-row {
  display: flex;
  align-items: flex-start;
  padding: 10rpx 0; /* 5px 上下 */
}
.param-label {
  width: 170rpx; /* 给 label 固定宽度对齐 */
  flex-shrink: 0;
  font-size: 25rpx; /* 13px */
  color: rgba(0, 0, 0, 0.5); /* 黑色 50% 透明度 */
  line-height: 33rpx;
}
.param-value {
  flex: 1;
  font-size: 25rpx; /* 13px */
  color: #000000;
  line-height: 33rpx;
}

/* 可展开的"补充说明"行 */
.expandable-row {
  align-items: flex-start;
}
.expandable-content {
  position: relative;
  flex: 1;
}

/* 收起态：限制高度（约 5 行，留出渐变遮罩空间） */
.value-collapsed {
  display: block;
  max-height: 165rpx; /* 约 5 行 33rpx */
  overflow: hidden;
}

/* 渐变遮罩：绝对定位在容器底部 60px，从透明到白 */
.expand-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx; /* 60px */
  pointer-events: none;
}
.gradient-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 52%
  );
}

/* 展开/收起按钮：居中显示，可点击 */
.expand-btn,
.collapse-btn {
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8rpx; /* 4px */
  pointer-events: auto;
}
/* 展开态的"收起"按钮：在文本下方居中 */
.collapse-btn {
  position: relative;
  margin-top: 16rpx;
  left: auto;
  transform: none;
  justify-content: center;
}
.expand-text {
  font-size: 23rpx; /* 12px */
  color: #000000;
  line-height: 33rpx;
}

/* CSS 箭头：12x12，下/上 */
.arrow-down,
.arrow-up {
  width: 12rpx;
  height: 12rpx;
  border-right: 2rpx solid #000;
  border-bottom: 2rpx solid #000;
  transform: rotate(45deg);
}
.arrow-up {
  transform: rotate(-135deg);
}
</style>
