<template>
  <div class="main">
    <div class="contanier">
      <div class="order-info">
        <div class="txt-info">
          <div class="loaction"  v-if="GoodsId == 1">您的位置： 所有订单 > 江西省 萍乡市 安源区 > 订单号：20240112-173907-23577</div>
          <div class="loaction"  v-if="GoodsId == 2">您的位置： 所有订单 > 山东省 青岛市 城阳区 > 订单号：20240112-371939-187453</div>
          <div class="loaction" v-if="GoodsId == 3">您的位置： 所有订单 > 江苏省 南京市 江宁区 > 订单号：20240112-387264-987678</div>
          <div class="shopping-time">下单时间：2024-01-12 17:39:07</div>
        </div>
        <div class="copy-btn">一键复制订单信息</div>
      </div>
      <div class="goods-info">
        <div class="info-box">
          <div class="img">
            <img  style="width: 100%;" v-if="GoodsId == 1" src="../../assets/images/dg4.jpg" alt="">
            <img style="width: 100%;"  v-if="GoodsId == 2" src="../../assets/images/dg5.jpg" alt="">
            <img  style="width: 100%;"  v-if="GoodsId == 3" src="../../assets/images/dg6.jpg" alt="">
          </div>
          <div class="right">
            <div class="title">
              <div class="title-box">
                <div class="left" v-if="GoodsId == 1">【江西省 萍乡市 安源区】愚人家</div>
                <div class="left" v-if="GoodsId == 2">【山东省 青岛市 城阳区】肉松好</div>
                <div class="left" v-if="GoodsId == 3">【江苏省 南京市 江宁区】全麦</div>
                <div class="icon">
                  <el-icon><MapLocation /></el-icon>
                </div>
                <div class="map">查看地图</div>
              </div>
              <div class="content">浏览1次</div>
            </div>
            <ul>
              <li>
                <div class="label">收货时间：</div>
                <div class="time">2024-01-12 不限时段</div>
                <div class="timeout">距离接单结束还剩：</div>
                <div class="timeout-time">6小时16分钟43秒</div>
              </li>
              <li>
                <div class="label">商品数量：</div>
                <div class="content">1</div>
              </li>
              <li>
                <div class="label">商品类型：</div>
                <div class="type">面包</div>
              </li>
              <li>
                <div class="label">订单类型：</div>
                <div class="ordder-type">普通订单</div>
              </li>
              <li>
                <div class="label">有无资料卡：</div>
                <div class="card">无</div>
              </li>
              <li>
                <div class="label">需要发票：</div>
                <div class="invoice">不需要</div>
              </li>
              <li>
                <div class="label">成交价：</div>
                <div class="price"  v-if="GoodsId == 1">￥110.00元</div>
                <div class="price"  v-if="GoodsId == 2">￥94.00元</div>
                <div class="price"  v-if="GoodsId == 3">￥100.00元</div>
              </li>
            </ul>
            <div class="submit">立即报价</div>
          </div>
        </div>
      </div>
      <div class="product-details">
        <div class="hearder shadow">商品详情</div>
        <div class="product-box shadow">
          <div class="img">
            <img  style="width: 100%;" v-if="GoodsId == 1" src="../../assets/images/dg4.jpg" alt="">
            <img style="width: 100%;"  v-if="GoodsId == 2" src="../../assets/images/dg5.jpg" alt="">
            <img  style="width: 100%;"  v-if="GoodsId == 3" src="../../assets/images/dg6.jpg" alt="">
            <div class="remind">点击查看大图</div>
          </div>
          <div class="right">
            <ul>
              <li>
                <div class="label">商品数量</div>
                <div class="content">1</div>
              </li>
              <li>
                <div class="label">商品描述</div>
                <div class="content">蛋糕整箱 X 1</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="product-details">
        <div class="hearder">下单方历史交易信息</div>
        <div class="historical-transaction-information">
          <el-icon><Lock /></el-icon>
          <div class="txt">订单已被接，仅接单方可查看</div>
        </div>
      </div>
      <div class="product-details">
        <div class="hearder">【平顶山市】待接订单</div>
        <div class="line-items">
          <div class="item shadow">
            <div class="header">
              <div class="address">河南省驻马店市上蔡县</div>
              <div class="time">下单时间：2024-01-01 21:31:25</div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">
                    收货时间：<span class="time">2024-01-08 不限时段</span>
                    <span class="timeout">离接单结束还剩：6小时</span>
                  </div>
                </div>
                <div class="goods-type">
                  <div class="label">商品类型：<span class="type">鲜花</span></div>
                </div>
                <div class="content">
                  <div class="label">商品总数：<span class="number">1</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
                </div>
                <div class="order-description">
                  <div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
                </div>
              </div>
              <div class="submit-box">
                <div class="submit">立即报价</div>
              </div>
            </div>
          </div>
          <div class="item shadow">
            <div class="header">
              <div class="address">河南省驻马店市上蔡县</div>
              <div class="time">下单时间：2024-01-01 21:31:25</div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">
                    收货时间：<span class="time">2024-01-08 不限时段</span>
                    <span class="timeout">离接单结束还剩：6小时</span>
                  </div>
                </div>
                <div class="goods-type">
                  <div class="label">商品类型：<span class="type">鲜花</span></div>
                </div>
                <div class="content">
                  <div class="label">商品总数：<span class="number">1</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
                </div>
                <div class="order-description">
                  <div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
                </div>
              </div>
              <div class="submit-box">
                <div class="submit">立即报价</div>
              </div>
            </div>
          </div>
          <div class="item shadow">
            <div class="header">
              <div class="address">河南省驻马店市上蔡县</div>
              <div class="time">下单时间：2024-01-01 21:31:25</div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">
                    收货时间：<span class="time">2024-01-08 不限时段</span>
                    <span class="timeout">离接单结束还剩：6小时</span>
                  </div>
                </div>
                <div class="goods-type">
                  <div class="label">商品类型：<span class="type">鲜花</span></div>
                </div>
                <div class="content">
                  <div class="label">商品总数：<span class="number">1</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
                </div>
                <div class="order-description">
                  <div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
                </div>
              </div>
              <div class="submit-box">
                <div class="submit">立即报价</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="product-details">
        <div class="hearder">最新成交订单</div>
        <ul class="new-orders">
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
          <li>
            <div class="status">成交</div>
            <div class="address">广东省 广州市 天河区前进街道美林花艺</div>
            <div class="price">￥138.00</div>
            <div class="time">2024-01-12</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import { MapLocation, Lock } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/nav'
const userIndex = useCounterStore()
onMounted(() => {
  userIndex.increment(3)
})
const route = useRoute()

// 获取路由参数
const GoodsId = route.query.GoodsId

// 在控制台输出路由参数
console.log(GoodsId)
</script>
<style lang="scss" scoped>
.main {
  background-color: #fff;
  width: 100%;
  .contanier {
    width: 6.25rem;
    margin: 0 auto;
    .order-info {
      padding-top: 0.1458rem;
      color: #8a8e99;
      font-size: 0.0729rem;
      display: flex;

      justify-content: space-between;
      .txt-info {
        display: flex;
        div:nth-child(1) {
          margin-right: 0.2083rem;
        }
      }
      .copy-btn {
        width: 0.8125rem;
        height: 0.1146rem;
        color: #ff4e8d;
        border: 1px solid #ff4e8d;
        text-align: center;
        line-height: 0.1146rem;
      }
    }
    .goods-info {
      width: 100%;
      display: flex;
      justify-content: center;
      .info-box {
        width: 4.5833rem;
        height: 1.875rem;
        padding: 0.1042rem;
        display: flex;
        .img {
          width: 1.6667rem;
          height: 1.6667rem;
          background-color: #d9d9d9;
        }
        .right {
          flex: 1;
          .title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title-box {
              display: flex;
              align-items: center;
              padding: 0.0313rem;
              .left {
                color: #252b3a;
                font-weight: 600;
                font-size: 0.0833rem;
              }
              .icon {
                display: flex;
                align-items: center;
                color: #da141f;
                font-size: 0.0729rem;
                margin-left: 0.0521rem;
              }
              .map {
                color: #8a8e99;
                font-size: 0.0625rem;
              }
            }
            .content {
              color: #8a8e99;
              font-size: 0.0625rem;
            }
          }
          ul {
            li {
              list-style: none;
              display: flex;
              align-items: center;
              padding: 0.026rem 0.1042rem;
              .time {
                color: #ff4e8d;
                font-size: 0.0729rem;
                font-weight: 600;
                margin-right: 0.0521rem;
              }
              .timeout {
                font-size: 0.0625rem;
                color: #575d6c;
              }
              .timeout-time {
                color: #252b3a;
                font-size: 0.0729rem;
              }

              .label {
                color: #8a8e99;
                font-size: 0.0625rem;
              }
              .content {
                color: #ff4e8d;
                font-size: 0.0729rem;
                font-weight: 600;
                margin-right: 0.0521rem;
              }
              .type,
              .ordder-type,
              .card,
              .invoice {
                color: #252b3a;
                font-size: 0.0625rem;
              }
              .price {
                color: #ff4e8d;
                font-size: 0.0729rem;
                font-weight: 600;
                margin-right: 0.0521rem;
              }
            }
          }
          .submit {
            color: #fff;
            text-align: center;
            width: 0.5833rem;
            height: 0.1667rem;
            line-height: 0.1667rem;
            background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
            margin: 0.2344rem 0.1042rem;
          }
        }
      }
    }
    .product-details {
      margin-top: 0.0521rem;
      .hearder {
        position: relative;
        color: #252b3a;
        font-size: 0.1042rem;
        height: 0.2083rem;
        line-height: 0.2083rem;
        margin-left: 0.0521rem;
      }
      .hearder::before {
        position: absolute;
        top: 50%;
        left: -0.0521rem;
        width: 0.0156rem;
        height: 0.0938rem;
        background-color: #ff4e8d;
        transform: translateY(-50%);
        content: ' ';
        display: flex;
      }
      .product-box {
        height: 0.9375rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0.1042rem;
        .img {
          width: 0.7292rem;
          height: 0.7292rem;
          background-color: #d9d9d9;
          position: relative;
          .remind {
            position: absolute;
            color: #fff;
            text-align: center;
            width: 100%;
            height: 0.125rem;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            line-height: 0.125rem;
          }
        }
        .right {
          height: 100%;
          margin-left: 0.0521rem;
        }
        ul {
          height: 100%;
          li {
            display: flex;
            list-style: none;
            margin-bottom: 0.0521rem;
            .label {
              font-size: 0.0625rem;
              color: #999;
            }
            .content {
              color: #252b3a;
              font-size: 0.0625rem;
            }
          }
        }
      }
      .historical-transaction-information {
        height: 0.9323rem;
        width: 100%;
        background-color: #d9d9d9;
        color: #8a8e99;
        font-size: 0.125rem;
        // text-align: center;
        // line-height: .9323rem ;
        display: flex;
        justify-content: center;
        align-items: center;
        .txt {
        }
      }
      .line-items {
        margin-top: 0.1719rem;
        .item {
          padding: 0.1198rem 0.1771rem;
          background-color: #fff;
          margin: 0.0781rem 0;
          .header {
            display: flex;
            .address {
              width: 2.8125rem;
              color: #252b3a;
              font-size: 0.0833rem;
              font-weight: 600;
            }
            .time {
              color: #8a8e99;
              font-size: 0.0625rem;
            }
          }
          .order-info {
            display: flex;
            width: 100%;
            padding: 0.0781rem 0 0 0.0521rem;
            .image {
              width: 0.7292rem;
              height: 0.7292rem;
              background-color: #d9d9d9;
              position: relative;
              .tag {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.125rem;
                color: #fff;
                text-align: center;
                line-height: 0.125rem;
                background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
              }
            }
            .iine-info {
              width: 4.1667rem;
              margin-left: 0.0521rem;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .label {
                color: #8a8e99;
                font-size: 0.0625rem;
              }
              .receipt-time {
                .time {
                  color: #ff4e8d;
                  font-size: 0.0729rem;
                  font-weight: 600;
                  margin-right: 0.1042rem;
                }
              }
              .goods-type {
                .type {
                  color: #252b3a;
                }
              }
              .content {
                .number {
                  color: #ff4e8d;
                  font-size: 0.0729rem;
                  font-weight: 600;
                }
              }
              .audit-information {
                .information {
                  color: #252b3a;
                }
              }
              .order-description {
                .description {
                  color: #252b3a;
                }
              }
            }
            .submit-box {
              // height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: end;
              margin-left: 0.2604rem;
              .submit {
                width: 0.5833rem;
                height: 0.1667rem;
                color: #fff;
                text-align: center;
                line-height: 0.1667rem;
                background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
              }
            }
          }
        }
      }
      .new-orders {
        position: relative;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        padding: 0.1042rem;
        li {
          list-style: none;
          display: flex;
          width: 50%;
          display: flex;
          align-items: center;
          margin: .026rem 0;
          .status {
            text-align: center;
            width: 0.2292rem;
            height: 0.1042rem;
            background-color: #ff4e8d;
            line-height: 0.1042rem;
            color: #fff;
            font-size: 0.0625rem;
          }
          .address {
            color: #252b3a;
            font-size: 14px;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
            width: 1.25rem;
            margin-left: .026rem;
          }
          .price{
            color: #FF4E8D;
            font-size: .0729rem;
            margin-left: .5469rem;
          }
          .time{
            color: #575D6C;
            font-size: .0625rem;
            margin-left: .2604rem;
          }
        }
       
      }
      .new-orders::before{
        position: absolute;
        top: 50%;
        left: 49%;
        transform: translate(-50% ,-50%);
        content: " ";
        width: 1px;
        height: .6354rem;
        display: flex;
        background-color: #E1E1E3;
      }
    }
  }
}
.shadow {
  box-shadow: 3px 0px 21px 0px rgba(255, 78, 141, 0.1);
}
</style>
