<template>
  <view class="container">
    <Header title="商品详情页"></Header>
    <web-view
      style="height: 600rpx"
      src="https://api.kuaidi100.com/tools/map/59d4a57b7964ebd6fc1d831847cb61c9_106.714305,26.568055_6"
    ></web-view>
    <!-- <view style="height: 600rpx; background-color: aquamarine"></view> -->
    <view class="content">
      <view class="info">
        <view class="top">
          <view class="left">
            <image class="logo" src="/static/ticket/logo.png" mode="aspectFill"></image>
            <text>中通快递78810259271088</text>
          </view>
          <view class="right">
            <text>复制</text>
            <text>丨</text>
            <text>打电话</text>
          </view>
        </view>
        <view class="steps">
          <view class="step-box">
            <view class="header">
              <view class="dot"></view>
              <view class="line"></view>
            </view>
            <view class="content">
              <view class="rowbox">
                <view class="textbox">
                  <text class="title">待取件</text>
                  <text class="text">06-25 17:37</text>
                </view>
                <text class="detail" @tap="openPop()">详细信息 ></text>
              </view>
              <view class="detailbox">
                <text class="text">
                  【贵阳市】您的快递已签收。如有疑问请联系业务员：
                  18275185576，代理点电话：18275185576，投诉电
                  话：0851-88628778。感谢使用中通快递，期待再次 为您服务！
                </text>
                <!-- <view class="infobox">
                  <text class="addr">请问本次收件是否遇到问题？</text>
                  <view class="row">
                    <view class="btn">有问题，去解决</view>
                    <view class="btn">去评价</view>
                  </view>
                </view> -->
                <view class="infobox">
                  <text class="addr">贵阳市市政公园菜鸟驿站店</text>
                  <view class="column">
                    <text class="text">取件码</text>
                    <text class="code">2-7-4109</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="step-box">
            <view class="header">
              <view class="past-dot"></view>
              <!-- <view class="line"></view> -->
            </view>
            <view class="content">
              <text class="title">送至 贵阳市市政公园正门菜鸟驿站</text>
              <view class="rowbox">
                <text class="text1">李先生 +86-187****4253</text>
                <text class="text">隐藏保护中</text>
              </view>
              <view class="rowbox">
                <text class="text1">取件时可初始虚拟号码 172****4532-3113</text>
                <wd-icon name="browse" size="22px" color="#999"></wd-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="product">
        <view class="header">
          <view class="icon">物流</view>
          <text class="title">焗中焗盐焗鸡麻辣鸡</text>
        </view>
        <view class="product-list">
          <view class="product-item">
            <view class="left">
              <image src="/static/ticket/logo.png" class="img" mode="aspectFill"></image>
              <view class="infobox">
                <view class="name">盐焗鸡</view>
                <view class="num">1斤</view>
              </view>
            </view>
            <view class="right">
              <view class="textbox">
                <text>实付￥</text>
                <text class="price">48.00</text>
              </view>
              <text class="num">x1</text>
            </view>
          </view>
          <view class="product-item" v-if="showMore">
            <view class="left">
              <image src="/static/ticket/logo.png" class="img" mode="aspectFill"></image>
              <view class="infobox">
                <view class="name">盐焗鸡</view>
                <view class="num">1斤</view>
              </view>
            </view>
            <view class="right">
              <view class="textbox">
                <text>实付￥</text>
                <text class="price">48.00</text>
              </view>
              <text class="num">x1</text>
            </view>
          </view>
        </view>
        <view class="totalbox totalbox-line" v-if="showMore">
          <view class="total-item">
            <text>商品总价：</text>
            <text>￥98.70</text>
          </view>
          <view class="total-item">
            <text>运费：</text>
            <text>￥10.00</text>
          </view>
          <view class="total-item">
            <text>店铺优惠：</text>
            <text>￥0.00</text>
          </view>
          <view class="total-item">
            <text>实付</text>
            <view class="pricebox">
              <text class="text">共2件 合计：</text>
              <text class="icon">￥</text>
              <text class="price">108.</text>
              <text class="icon">70</text>
            </view>
          </view>
        </view>
        <view class="totalbox" v-if="showMore">
          <text class="title">订单信息</text>
          <view class="total-item">
            <text>订单号：</text>
            <text>5555222222111111</text>
          </view>
          <view class="total-item">
            <text>运费：</text>
            <text>￥10.00</text>
          </view>
          <view class="total-item">
            <text>下单时间：</text>
            <text>2024-05-22 17:25:54</text>
          </view>
          <view class="total-item">
            <text>支付方式：</text>
            <text>微信</text>
          </view>
        </view>
        <view class="more" @tap="changeShowMore">
          <text v-if="showMore">收起订单信息</text>
          <text v-else>查看全部订单信息</text>
          <wd-icon
            :name="showMore ? 'chevron-up' : 'chevron-down'"
            size="30rpx"
            color="#999"
          ></wd-icon>
        </view>
      </view>
      <view style="height: 170rpx"></view>
    </view>
    <view class="footer">
      <view class="btn">查看物流</view>
      <view class="btn">申请售后</view>
      <view class="btn err">确认收货</view>
    </view>
  </view>
  <stepBar ref="stepBarRef"></stepBar>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import stepBar from '@/pages/assistingAgriculture/order/components/stepBar/index.vue';

const showMore = ref(false);
const changeShowMore = () => {
  showMore.value = !showMore.value;
};

const stepBarRef = ref(null);
const openPop = () => {
  stepBarRef.value.open();
};
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}

::v-deep uni-web-view.uni-webview--fullscreen {
  position: relative;
}

.container {
  width: 375 * 2rpx;
  margin: 0 auto;

  .content {
    position: relative;
    top: -20rpx;
    border-radius: 20rpx 20rpx 0 0;
    z-index: 10;

    .info {
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      padding: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 38rpx;

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

        .left {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .logo {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
          }

          text {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 16rpx;

          text {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }

      .steps {
        display: flex;
        flex-direction: column;
        margin-top: 40rpx;

        .step-box {
          display: flex;
          gap: 18rpx;

          .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 30rpx;

            .dot {
              width: 30rpx;
              height: 30rpx;
              background: #f12a2a;
              border-radius: 50%;
              position: absolute;
              top: -12rpx;
            }

            .past-dot {
              width: 30rpx;
              height: 30rpx;
              background: #ffd5d5;
              border-radius: 50%;
              position: absolute;
              top: -12rpx;
            }

            .line {
              height: 100%;
              width: 2rpx;
              background-color: #ffd5d5;
            }
          }

          .content {
            display: flex;
            flex-direction: column;
            gap: 22rpx;
            width: 100%;

            .title {
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #333333;
            }

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

              .textbox {
                display: flex;
                flex-direction: row;
                gap: 30rpx;
                align-items: center;
              }

              .title {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #ff0909;
              }

              .text {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #ff0909;
              }

              .detail {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #ff0909;
              }

              .text1 {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
              }
            }

            .detailbox {
              display: flex;
              flex-direction: column;
              gap: 22rpx;

              .text {
                font-family: PingFang SC;
                font-size: 24rpx;
                color: #999999;
                line-height: 28rpx;
              }

              .infobox {
                display: flex;
                flex-direction: column;
                background-color: #f7f8fa;
                border-radius: 12rpx;
                padding: 20rpx 0 34rpx 50rpx;
                gap: 28rpx;
                margin-bottom: 54rpx;

                .addr {
                  font-family: PingFang SC;
                  font-weight: bold;
                  font-size: 28rpx;
                  color: #333333;
                }

                .row {
                  display: flex;
                  align-items: center;
                  gap: 16rpx;

                  .btn {
                    font-family:
                      PingFang SC,
                      PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                    border: 1rpx solid #d2d2d2;
                    border-radius: 32rpx;
                    padding: 12rpx 32rpx;
                  }
                }

                .column {
                  display: flex;
                  align-items: center;
                  gap: 28rpx;
                  color: #333333;

                  .text {
                    font-family: PingFang SC;
                    font-size: 28rpx;
                  }

                  .code {
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 52rpx;
                  }
                }
              }
            }
          }
        }
      }
    }

    .product {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      margin-top: 10rpx;
      padding: 30rpx 0;

      .header {
        display: flex;
        align-items: center;
        gap: 14rpx;
        padding: 0 30rpx;

        .icon {
          background-color: #ff0909;
          color: #fff;
          font-family:
            PingFang SC,
            PingFang SC;
          font-size: 24rpx;
          padding: 2rpx 8rpx;
          border-radius: 8rpx;
        }

        .title {
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }
      }

      .product-list {
        display: flex;
        flex-direction: column;
        gap: 22rpx;
        margin-top: 34rpx;
        padding: 0 30rpx;

        .product-item {
          display: flex;
          justify-content: space-between;

          .left {
            display: flex;
            gap: 26rpx;

            .img {
              width: 100rpx;
              height: 100rpx;
              border-radius: 12rpx;
            }

            .infobox {
              display: flex;
              flex-direction: column;
              gap: 12rpx;

              .name {
                font-family:
                  PingFang SC,
                  PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #333333;
              }

              .num {
                font-family:
                  PingFang SC,
                  PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #999999;
              }
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12rpx;

            .textbox {
              display: flex;
              align-items: baseline;
              gap: 4rpx;

              text {
                font-family:
                  PingFang SC,
                  PingFang SC;
                font-size: 24rpx;
                color: #333333;
              }

              .price {
                font-family: PingFang SC;
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
              }
            }

            .num {
              font-family: PingFang SC;
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }

      .totalbox {
        display: flex;
        flex-direction: column;
        gap: 28rpx;
        margin-top: 40rpx;
        padding: 0 30rpx 30rpx;

        .title {
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }

        .total-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          text {
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .pricebox {
            display: flex;
            align-items: baseline;

            .text {
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #333333;
            }

            .icon {
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #ff0909;
            }

            .price {
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #ff0909;
            }
          }
        }
      }

      .totalbox-line {
        border-bottom: 1rpx solid #ededed;
      }

      .more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;

        text {
          font-family:
            PingFang SC,
            PingFang SC;
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    padding: 18rpx 28rpx 88rpx;
    box-sizing: border-box;

    .btn {
      font-family:
        PingFang SC,
        PingFang SC;
      font-size: 28rpx;
      color: #333333;
      border-radius: 32rpx;
      border: 1rpx solid #cccccc;
      padding: 12rpx 24rpx;
    }

    .err {
      color: #ff0909;
      border-radius: 32rpx;
      border: 1rpx solid #ff0909;
    }
  }
}
</style>
