<template>
  <view class="index-container">
    <view class="shop-info">
      <view class="shop-logo-img"></view>
      <view class="shop-name">岛内价生活超市</view>
    </view>
    <view class="tab-content">
      <tui-tabs
        :tabs="tabs"
        :currentTab="currentTab"
        bottom="50%"
        :backgroundColor="'#f2f2f2'"
        :width="360"
        :itemWidth="'50%'"
        :bold="true"
        color="#000"
        selectedColor="#fd806b"
        :sliderWidth="150"
        :sliderHeight="60"
        sliderBgColor="#fff"
        :unlined="true"
        @change="handleTab"
      ></tui-tabs>
    </view>
    <view class="tab2-content" v-if="currentTab == 0">
      <tui-tabs
        :tabs="tabs2"
        :width="280"
        :currentTab="currentTab2"
        @change="handleTab2"
      ></tui-tabs>
    </view>

    <view class="order-info-content">
      <scroll-view
        class="uni-swiper-list"
        scroll-y
        :scroll-top="0"
        enhanced
        :show-scrollbar="false"
      >
        <view class="order-info-block">
          <view class="order-info-hander">
            <view class="order-num-block">
              <view class="order-serial-num"
                >#<text
                  style="
                    font-size: 46rpx;
                    padding-left: 4rpx;
                    font-weight: bold;
                  "
                  >3</text
                ></view
              >
              <view class="order-num">订单号：DD2025010803</view>
            </view>
            <view class="rider-info">
              <view class="delivery-time"> 预计送达11:23前 </view>
              <view class="delivery-status"> 待骑手接单 </view>
            </view>
          </view>
          <view class="" v-show="showOrderInfo">
            <view class="user-info-block">
              <view class="user-info"> 张先生 手机尾号3158 </view>
              <view class="user-address"
                >收货地址：金凤凰商业街18号4楼（桂平发发网络有限公司）</view
              >
            </view>
            <view class="picking-info">
              <view class="picking-status">
                <view class="picking-name">拣货中</view>
                <view class="picking-time">已用时 03:54</view>
              </view>
              <u-button class="picking-btn">拣货完成</u-button>
            </view>
            <view class="delivery-status-info">
              <view class="delivery-status">待接单</view>
              <view class="delivery-num">JS4151266256655</view>
            </view>
            <view class="order-remark">
              <text style="color: red; font-weight: bold">备注：</text>
              <text>【如遇缺货】：缺货时请与我电话联系</text>
            </view>
            <view class="commodity-info-block">
              <view class="commodity-num">
                <text style="font-size: 36rpx">{{ commodityArr.length }}</text>
                <text>件商品</text>
              </view>
              <view
                class="commodity-info"
                v-for="(item, index) of commodityArr"
                :key="index"
              >
                <image class="commodity-info-img" :src="item.imrUrl"></image>
                <view class="commodity-content">
                  <view class="commodity-name">{{ item.name }}</view>
                  <view class="commodity-barcode"
                    >条码
                    <text style="padding-left: 8rpx">{{
                      item.barcode
                    }}</text></view
                  >
                  <view class="commodity-specification"
                    >规格
                    <text style="padding-left: 8rpx">{{
                      item.specification
                    }}</text>
                  </view>
                </view>
                <view class="commodity-num"
                  >X
                  <text style="padding-left: 8rpx">{{ item.num }}</text></view
                >
                <view class="commodity-price">￥{{ item.price }}</view>
              </view>
            </view>
            <view class="baling-charges-block">
              <view class="baling-charges-name">打包费</view>
              <view class="baling charges-num">￥0.5</view>
            </view>
            <view class="cost-info-block">
              <view class="cost-info-item cost-info-subtotal">
                <view class="cost-info-title">小计</view>
                <view class="cost-info-num">￥30.50</view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #555555; font-weight: 700"
                  >商家活动支付<text
                    ><u-icon
                      style="display: inline-block; margin-left: 8rpx"
                      name="question-circle"
                      size="12"
                      color="aaaaaa"
                    ></u-icon></text
                ></view>
                <view class="cost-info-num">￥30.50</view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #555555; font-weight: 700"
                  >平台服务费<text
                    ><u-icon
                      style="display: inline-block; margin-left: 8rpx"
                      name="question-circle"
                      size="12"
                      color="#aaaaaa"
                    ></u-icon></text
                ></view>
                <view class="cost-info-num">￥30.50</view>
              </view>
              <view class="cost-info-income">
                <view class="predict -income"
                  >预计收入<text
                    style="font-size: 40rpx; color: #555555; font-weight: 700"
                    >￥24.95</text
                  ></view
                >
                <view class="customer-actual-payment">
                  顾客实际支付 ￥30.50
                </view>
              </view>
            </view>
          </view>
          <view class="order-btn-block">
            <view class="btn-list">
              <u-button class="btn-item">取消订单</u-button>
              <u-button class="btn-item">退差价</u-button>
              <u-button class="btn-item">部分退款</u-button>
            </view>
            <view class="arrow-item" @click="showOrderInfo = !showOrderInfo">
              {{ showOrderInfo ? "收起订单" : "展开订单" }}
              <u-icon
                style="display: inline-block; margin-left: 6rpx"
                :name="showOrderInfo ? 'arrow-up' : 'arrow-down'"
                size="12"
              ></u-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import tuiTabs from "../../components/tui-tabs.vue";
export default {
  components: {
    tuiTabs,
  },
  data() {
    return {
      currentTab: 0,
      currentTab2: 0,
      tabs: [
        {
          name: "处理中",
        },
        {
          name: "预订单",
        },
        {
          name: "物流订单",
        },
        {
          name: "全部订单",
          num: 99,
        },
      ],
      tabs2: [
        {
          name: "进行中",
        },
        {
          name: "异常配送",
        },
        {
          name: "退款",
        },
      ],
      commodityArr: [
        {
          imrUrl: "../../static/logo.png",
          name: "猪肉",
          barcode: "11131312123",
          specification: "500g*1袋",
          num: "3",
          price: 300,
        },
        {
          imrUrl: "../../static/logo.png",
          name: "猪肉",
          barcode: "11131312123",
          specification: "500g*1袋",
          num: "3",
          price: 300,
        },
        {
          imrUrl: "../../static/logo.png",
          name: "猪肉",
          barcode: "11131312123",
          specification: "500g*1袋",
          num: "3",
          price: 300,
        },
      ],
      showOrderInfo: false,
    };
  },
  onLoad() {},
  methods: {
    handleTab(e) {
      this.currentTab = e.index;
    },
    handleTab2(e) {
      this.currentTab2 = e.index;
    },
  },
};
</script>

<style lang="scss">
.index-container {
  // overflow: hidden;
  .shop-info {
    display: flex;
    align-items: center;
    padding: 40rpx;

    .shop-logo-img {
      width: 60rpx;
      height: 60rpx;
      background-image: url("../../static/logo.png");
      background-size: 100% 100%;
    }
    .shop-name {
      margin-left: 20rpx;
      color: red;
    }
  }

  .tab-content {
    padding: 12rpx 0;
    background: #f2f2f2;
  }

  .order-info-content {
    margin: 28rpx;

    border-radius: 8rpx;

    .uni-swiper-list {
      height: calc(100vh - 245px);
    }

    .order-info-block {
      border: 1px #d7d7d7 solid;
      .order-info-hander {
        background: #d7d7d7;
        font-size: 32rpx;

        .order-num-block {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12rpx;

          .order-serial-num {
            color: #555555;
          }

          .order-num {
            font-size: 24rpx;
          }
        }
        .rider-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12rpx;
          color: #555555;

          .delivery-time {
            font-size: 26rpx;
          }

          .delivery-status {
            font-size: 32rpx;
            font-weight: bold;
          }
        }
      }

      .user-info-block {
        padding: 32rpx 20rpx;
        border-bottom: 1px dashed #d7d7d7;

        .user-info {
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }

        .user-address {
          font-size: 24rpx;
        }
      }

      .picking-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 40rpx 32rpx 20rpx;
        border-bottom: 1px dashed #d7d7d7;

        .picking-status {
          font-size: 26rpx;
          color: #7f7f7f;
          font-weight: 500;
          flex: 1;
        }

        .picking-btn {
          width: 34%;
          height: 60rpx;
          font-size: 24rpx;
          background: rgba(30, 152, 215, 1);
          color: #fff;
        }
      }

      .delivery-status-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 20rpx;
        border-bottom: 1px dashed #d7d7d7;
        color: #555555;

        .delivery-status {
          font-size: 40rpx;
          font-weight: 700;
        }

        .delivery-num {
          font-size: 26rpx;
        }
      }

      .order-remark {
        margin: 12rpx;
        padding: 12rpx;
        background: linear-gradient(
          270deg,
          rgba(215, 215, 215, 1) 1%,
          rgba(242, 242, 242, 1) 99%
        );
      }

      .commodity-info-block {
        padding: 12rpx;
        border-bottom: 1px dashed #d7d7d7;

        .commodity-num {
          font-size: 28rpx;
        }

        .commodity-info {
          margin: 16rpx 8rpx;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          color: #555555;

          .commodity-info-img {
            width: 120rpx;
            height: 120rpx;
          }

          .commodity-content {
            width: 50%;
            margin-left: 16rpx;

            .commodity-name {
              font-size: 28rpx;
            }

            .commodity-barcode,
            .commodity-specification {
              font-size: 24rpx;
            }
          }

          .commodity-num {
            flex: 1;
          }
        }
      }

      .baling-charges-block {
        display: flex;
        justify-content: space-between;
        padding: 24rpx;
        font-size: 24rpx;
        border-bottom: 1px dashed #d7d7d7;
        color: #aaaaaa;
      }

      .cost-info-block {
        padding: 24rpx;
        border-bottom: 1px dashed #d7d7d7;
        font-size: 26rpx;

        .cost-info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .cost-info-num {
            margin-right: 20rpx;
          }
        }

        .cost-info-income {
          margin-top: 20rpx;
          font-size: 26rpx;
          text-align: right;
          color: #7f7f7f;
        }
      }

      .order-btn-block {
        padding: 36rpx 24rpx 12rpx 24rpx;
        .btn-list {
          display: flex;
          .btn-item {
            margin: 0;
            width: 160rpx;
            height: 60rpx;
            font-size: 24rpx;
            margin-right: 24rpx;
          }
        }

        .arrow-item {
          display: flex;
          align-items: center;
          justify-content: right;
          margin-top: 40rpx;
          font-size: 26rpx;
          color: #7f7f7f;
        }
      }
    }
  }
}
</style>
