<template>
  <view class="page-container">


    <scroll-view scroll-y class="content">
      <!-- 进度条 -->
      <view class="progress-section">
        <view class="progress-bar">
          <view class="progress-step active">
            <view class="step-dot">
              <image src="/static/workbench/checkIcon.png" mode="aspectFill" style="width: 32rpx; height: 32rpx;" />
            </view>
            <text class="step-label">申请退款</text>
          </view>
          <view class="progress-line active"></view>
          <view class="progress-step active">
            <view class="step-dot">
              <image src="/static/workbench/checkIcon.png" mode="aspectFill" style="width: 32rpx; height: 32rpx;" />
            </view>
            <text class="step-label">平台处理</text>
          </view>
          <view class="progress-line"></view>
          <view class="progress-step">
            <view class="step-dot" v-if="false">
              <image src="/static/workbench/checkIcon.png" mode="aspectFill" style="width: 32rpx; height: 32rpx;" />

            </view>
            <text class="step-label">申请退款</text>
          </view>
        </view>
      </view>

      <!-- 退款状态 -->
      <view class="status-section">
        <view class="status-title">拒绝退款</view>
        <view class="status-reason">拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因</view>
      </view>

      <!-- 服务项目 -->
      <view class="service-section">
        <view class="service-item" v-for="(item, index) in serviceList" :key="index">
          <image :src="item.image" mode="aspectFill" style="width: 96rpx; height: 96rpx;border:1px solid red" />
          <view class="service-info">
            <text class="service-name">{{ item.name }}</text>
          </view>
          <text class="service-price">
            <text style="font-size: 20rpx;">¥</text>
            {{ item.price }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">服务状态</text>
          <text class="info-value">服务中</text>
        </view>
        <view class="info-row">
          <text class="info-label">服务数量</text>
          <text class="info-value">1</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款数量</text>
          <text class="info-value">1</text>
        </view>
        <view class="info-row">
          <text class="info-label">联系信息</text>
          <text class="info-value">张先生，132 **** 5200</text>
        </view>
        <view class="info-row">
          <text class="info-label">联系地址</text>
          <text class="info-value">北京市朝阳区慧忠路8号奥运村附近亚奥观典大厦B座2506</text>
        </view>
        <view class="info-row">
          <text class="info-label">退款原因</text>
          <text class="info-value">原因原因原因原因</text>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-section">
        <text class="section-title">订单信息</text>
        <view class="order-info">
          <view class="order-row">
            <text class="order-label">订单编号</text>
            <view class="order-value-wrapper">
              <view class="order-value">5017036467099547354</view>
              <view style="width: 0;height: 24rpx;border: 0.5rpx solid #86909C;margin: 0 8rpx;"></view>
              <view class="copy-btn" @click="copyOrderNo">复制</view>
            </view>
          </view>
          <view class="order-row">
            <text class="order-label">下单时间</text>
            <text class="order-value">2026.01.27 10:32:51</text>
          </view>
          <view class="order-row">
            <text class="order-label">付款时间</text>
            <text class="order-value">2026.01.27 10:32:51</text>
          </view>
          <view class="order-row">
            <text class="order-label">完成时间</text>
            <text class="order-value">2026.01.27 10:32:51</text>
          </view>
        </view>
      </view>

      <!-- 底部订单编号 -->
      <view class="bottom-order-no">
        <view class="order-row">
          <text class="order-label">订单编号</text>
          <view class="order-value-wrapper">
            <view class="order-value">5017036467099547354</view>
            <view class="arrow">
              <image src="/static/workbench/right.png" mode="aspectFill" style="width: 22rpx; height: 22rpx;" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      serviceList: [
        {
          image: '/static/images/massage.png',
          name: '中式按摩（60分钟）',
          price: '493.4'
        }
      ],
      orderNo: '5017036467099547354'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    copyOrderNo() {
      uni.setClipboardData({
        data: this.orderNo,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background: #F5F5F5;
}


.content {
  height: calc(100vh - 88rpx);

}

.progress-section {
  height: 212rpx;
  background: linear-gradient(180deg, #FFEFE8 0%, #F7F8FA 100%);
  padding: 32rpx 32rpx 0rpx 32rpx;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-step {
  display: flex;
  align-items: center;

  .step-dot {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8rpx;
  }

  .step-label {

    font-weight: 400;
    font-size: 32rpx;
    color: #86909C;
  }

  &.active {
    .step-dot {}

    .step-label {
      font-weight: 500;
      color: #1D2129;
    }
  }
}

.progress-line {
  flex: 1;
  width: 102rpx;
  height: 0rpx;
  border: 1rpx solid #86909C;
  margin: 0 14rpx;

  &.active {
    border: 1rpx solid #1D2129;
  }
}

.status-section {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 0 32rpx;
  margin-top: -104rpx;

  .status-title {
    font-weight: 600;
    font-size: 40rpx;
    color: #1D2129;
    text-align: center;
  }

  .status-reason {
    margin-top: 8rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #86909C;
  }
}

.service-section {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 16rpx 32rpx 0 32rpx;

  .service-item {
    display: flex;

    .service-image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 8rpx;
    }

    .service-info {
      flex: 1;
      margin-left: 24rpx;

      .service-name {
        font-weight: 500;
        font-size: 30rpx;
        color: #1D2129;
      }
    }

    .service-price {
      font-weight: 400;
      font-size: 28rpx;
      color: #1D2129;
    }
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 24rpx;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-weight: 400;
      font-size: 28rpx;
      color: #4E5969;
    }

    .info-value {
      font-weight: 400;
      font-size: 28rpx;
      color: #1D2129;
      text-align: right;
      flex: 1;
      margin-left: 20rpx;
      word-break: break-all;
      white-space: normal;
      line-height: 1.5;
    }
  }
}


.order-section {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 16rpx 32rpx 0 32rpx;


  .section-title {
    font-weight: 500;
    font-size: 32rpx;
    color: #1D2129;
    display: block;
  }

  .order-info {
    .order-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 24rpx;

      .order-label {
        font-weight: 400;
        font-size: 28rpx;
        color: #4E5969;
        flex-shrink: 0;
      }

      .order-value-wrapper {
        display: flex;
        align-items: center;

        .order-value {
          font-weight: 400;
          font-size: 28rpx;
          color: #1D2129;
        }

        .copy-btn {
          font-weight: 400;
          font-size: 28rpx;
          color: #19D29B;
        }

        .arrow {
          font-weight: 400;
          font-size: 28rpx;
          color: #C0C4CC;
        }
      }

      .order-value {
        font-weight: 400;
        font-size: 28rpx;
        color: #1D2129;
      }
    }
  }
}

.bottom-order-no {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 16rpx 32rpx 0 32rpx;

  .order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .order-label {
      font-weight: 400;
      font-size: 28rpx;
      color: #4E5969;
    }

    .order-value-wrapper {
      display: flex;
      align-items: center;

      .order-value {
        font-weight: 400;
        font-size: 28rpx;
        color: #1D2129;
      }

      .arrow {
        font-weight: 400;
        font-size: 28rpx;
        color: #C0C4CC;
        margin-right: -5rpx;
        margin-left: 6rpx;
      }
    }
  }
}
</style>