<template>
  <view class="order_item">
    <view class="expresser expresser-2">
      <view class="header">
        <text class="symbol">#</text>
        <text>{{ orderItem.orderNum }}</text>
      </view>
      <view class="body">
        <view class="item info" v-if="orderItem.sf_order_info.operator_name">
          <view class="name">{{ orderItem.sf_order_info.operator_name }}</view>
          <view class="btn_call" @click="handerExpedite">催快递</view>
        </view>
        <view class="item time">
          立即送达/{{
            $u.timeFormat(orderItem.arrival_time, "mm-dd hh:MM")
          }}前送达
        </view>
        <u-icon
          class="icon"
          name="arrow-right"
          color="#000"
          size="12"
          @click="showSfFlowPopup = true"
        ></u-icon>
      </view>
      <view class="footer">
        <view
          :class="['status', `status-${orderItem.sf_order_info.order_status}`]"
        >
          {{ sfFormatStatus(orderItem.sf_order_info.order_status) }}
        </view>
      </view>
    </view>

    <view class="user">
      <view class="header">
        <view class="info">
          <view class="name">{{ orderItem.buyer_info.da_name }}/</view>
          <view class="mobile">{{ orderItem.buyer_info.da_mobile }}</view>
        </view>
        <view class="box">
          <view
            class="btn_call"
            @click="makePhone(orderItem.buyer_info.da_mobile)"
          >
            联系顾客
          </view>
        </view>
      </view>
      <view class="body">
        <view class="info">
          {{
            orderItem.buyer_info.da_province +
            orderItem.buyer_info.da_city +
            orderItem.buyer_info.da_county +
            orderItem.buyer_info.da_address
          }}
        </view>
        <view class="box"></view>
      </view>
      <view class="order_picking_box" v-if="!isErrorOrder">
        <view class="order_picking_text">
          拣货中：
          <text>{{ getRemainingTime(orderItem.arrival_time) }}</text>
        </view>
        <u-button class="picking_btn" @click="handerShowOrderPickingPopup()">
          拣货完成
        </u-button>
      </view>
      <view class="footer">
        <view class="info" v-if="orderItem.buyer_info.order_message">
          <text>备注:</text>
          {{ orderItem.buyer_info.order_message }}
        </view>
      </view>
    </view>

    <view class="goods">
      <view class="single" v-if="!orderItem.showRefundOrderInfo">
        <view class="body">
          <view class="info">
            <view class="img_box">
              <image
                v-for="(item, index) of orderItem.order_items.slice(0, 3)"
                :src="item.order_item_image"
                mode="aspectFit"
                class="img"
              />
            </view>

            <view class="total">
              共{{ orderItem.order_items.length }}件商品
            </view>
          </view>
        </view>

        <view class="footer">
          <view class="text">合计</view>
          <view class="prize_type">¥</view>
          <view class="prize_num">{{ sumBigInts }}</view>
        </view>
      </view>

      <view class="list" v-if="orderItem.showRefundOrderInfo">
        <view class="item" v-for="(group, index2) of orderItem.order_items">
          <image :src="group.order_item_image" mode="aspectFit" class="img" />
          <view class="box">
            <view class="tit">{{ group.item_name }}</view>
            <view class="desc">
              <view class="total">数量X{{ group.order_item_quantity }}</view>
              <view class="price">¥{{ group.order_item_amount }}</view>
            </view>
          </view>
          <view class="counter">
            <view class="text">小计</view>
            <view class="prize_type">¥</view>
            <view class="prize_num">{{ orderItem.order_product_amount }}</view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="result"
      style="border: none"
      v-if="orderItem.showRefundOrderInfo"
    >
      <view class="cell">
        <view class="header">商品总额</view>
        <view class="body">
          <text>¥</text>
          <text class="total">{{ sumBigInts }}</text>
        </view>
      </view>
      <view class="cell">
        <view class="header">配送运费</view>
        <view class="body red">- ¥{{ orderItem.order_shipping_fee }}</view>
      </view>
      <view class="cell">
        <view class="header">平台佣金</view>
        <view class="body red">- ¥{{ orderItem.platform_fee }}</view>
      </view>
      <view class="cell">
        <view class="header">活动减免</view>
        <view class="body red">- ¥{{ orderItem.total_discount_amount }}</view>
      </view>
      <view class="cell">
        <view class="header">合计实收</view>
        <view class="body">
          ¥
          <text class="count">{{ orderItem.order_income_amount }}</text>
        </view>
      </view>
    </view>

    <view class="result" v-if="orderItem.showRefundOrderInfo">
      <view class="cell">
        <view class="header">订单编号</view>
        <view class="body">
          <view class="order_num">{{ orderItem.order_id }}</view>
          <view class="btn_copy" @click="copy(orderItem.order_id, 'order')">
            复制
          </view>
        </view>
      </view>
      <view class="cell">
        <view class="header">下单时间</view>
        <view class="body">{{ orderItem.order_time }}</view>
      </view>
      <view class="cell">
        <view class="header">支付时间</view>
        <view class="body">{{ orderItem.payment_time }}</view>
      </view>

      <view class="cell">
        <view class="header">顺丰单号</view>
        <view class="body">
          <view class="order_num">
            {{ orderItem.sf_order_info.sf_order_id }}
          </view>
          <view
            class="btn_copy"
            @click="copy(orderItem.sf_order_info.sf_order_id, 'distribution')"
          >
            复制
          </view>
        </view>
      </view>
    </view>

    <view class="tool">
      <view class="header" @click="showRefundOrderInfo">
        <template>
          {{ orderItem.showRefundOrderInfo ? "收起" : "更多订单信息" }}

          <u-icon
            style="display: inline-block; margin-left: 6rpx"
            :name="orderItem.showRefundOrderInfo ? 'arrow-up' : 'arrow-down'"
            size="8"
            color="#cccccc"
          ></u-icon>
        </template>
      </view>
      <view
        class="body"
        v-if="
          !isErrorOrder &&
          orderItem.order_state_id >= 2040 &&
          orderItem.order_state_id <= 2070
        "
      >
        <view class="btn btn_cancel" @click="handerShowCancelOrder">
          取消订单
        </view>
        <view class="btn btn_refund" @click="handerShowPartOrderRefund">
          部分退款
        </view>
      </view>
    </view>
    <u-popup
      class="affirm-popup"
      zIndex="10077"
      :show="showCancelOrderPopup"
      mode="center"
      @close="showCancelOrderPopup = false"
    >
      <view class="affirm-popup-content">
        <view class="affirm-popup-title">取消订单</view>
        <view class="affirm-popup-tips">
          取消订单后，金额将原路退回给用户，确定取消？
        </view>
        <view class="affirm-popup-form">
          <u--form
            labelPosition="left"
            :model="form"
            ref="uForm"
            label-width="70"
            :rules="rules"
          >
            <u-form-item
              label="退款原因"
              prop="reason"
              class="form-item"
              required
            >
              <u--textarea
                class="u-textarea"
                v-model="form.reason"
                count
                autoHeight
                maxlength="100"
                placeholder="请输入取消订单原因"
              ></u--textarea>
            </u-form-item>
          </u--form>
        </view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showCancelOrderPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="getInitiativeOrderRefund"
          >
            确定
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="part-order-refund-popup"
      zIndex="10080"
      :show="showPartOrderRefundPopup"
      mode="bottom"
      closeable
      @close="showPartOrderRefundPopup = false"
    >
      <view class="part-order-refund-popup-content">
        <view class="part-order-refund-popup-title">部分退款</view>
        <scroll-view
          scroll-y
          class="specification-type-search-scroll"
          :show-scrollbar="false"
          :style="{
            maxHeight: orderItem.order_items.length >= 5 ? '500px' : 'none',
            overflowY: orderItem.order_items.length >= 5 ? 'auto' : 'visible',
          }"
        >
          <view class="affirm-popup-form">
            <u--form
              labelPosition="left"
              :model="form"
              ref="uForm"
              label-width="100"
              :rules="rules"
            >
              <u-form-item
                label="退款原因"
                prop="reason"
                class="form-item"
                required
              >
                <u--textarea
                  class="u-textarea"
                  v-model="form.reason"
                  count
                  autoHeight
                  maxlength="100"
                  placeholder="请输入取消订单原因"
                ></u--textarea>
              </u-form-item>
            </u--form>
          </view>
          <view class="radio-list" v-if="orderItem.order_items.length > 0">
            <u-checkbox-group
              v-model="commodityCheckBoxList"
              placement="column"
            >
              <view
                class="commodity-info-item"
                v-for="(item, index) of orderItem.order_items"
                :key="index"
              >
                <view class="commodity-info-box">
                  <image
                    class="commodity-info-img"
                    :src="item.order_item_image"
                  ></image>

                  <view class="commodity-content">
                    <view class="commodity-name">
                      {{ item.item_name || 0 }}
                    </view>

                    <view style="padding-left: 8rpx">
                      X{{ item.order_item_quantity || 0 }}
                    </view>
                    <view class="commodity-price">
                      ￥{{
                        item.order_item_quantity * item.item_unit_price || 0
                      }}
                    </view>
                  </view>
                </view>
                <u-number-box
                  :min="1"
                  :max="item.order_item_quantity_2"
                  v-model="item.order_item_quantity"
                ></u-number-box>
                <u-checkbox
                  :customStyle="{ marginBottom: '8px' }"
                  :key="index"
                  :name="item.item_id"
                ></u-checkbox>
              </view>
            </u-checkbox-group>
          </view>
        </scroll-view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showPartOrderRefundPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="getInitiativeOrderRefund"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="affirm-popup"
      zIndex="10077"
      :show="showOrderPickingPopup"
      mode="center"
      @close="showOrderPickingPopup = false"
    >
      <view class="affirm-popup-content">
        <view class="affirm-popup-title">取消订单</view>
        <view class="affirm-popup-tips">
          确定将取货号“ {{ currOrderItem.order_pickup_num }} ”提前拣货完成？
        </view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showOrderPickingPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="getOrderPicking"
          >
            确定
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="SfFlow-popup"
      zIndex="10077"
      :show="showSfFlowPopup"
      mode="center"
      closeable
      @close="showSfFlowPopup = false"
    >
      <!-- <view class="SfFlow-popup-content">
        <view class="SfFlow-popup-title">顺丰轨迹</view>
        <view class="SfFlow-content">
          <u-steps current="0" direction="column">
            <u-steps-item
              title="已下单"
              desc="10:30"
              v-for="(item, index) of sf_order_info.feed"
            ></u-steps-item>
            <u-steps-item title="" desc="10:35"></u-steps-item>
            <u-steps-item title="运输中" desc="11:40"></u-steps-item>
          </u-steps>
        </view>
      </view> -->
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {
  GetExpediteSFOrder,
  GetInitiativeOrderRefund,
  GetOrderPicking,
} from "@/api/order";
export default {
  props: {
    orderItem: {
      type: Object,
      default: () => {},
    },
    isErrorOrder: {
      type: Boolean,
      default: false,
    },
    orderItemIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sfStatus: [
        {
          id: 1,
          label: "已接单",
        },
        {
          id: 2,
          label: "订单取消",
        },
        {
          id: 10,
          label: "配送员接单",
        },
        {
          id: 12,
          label: "配送员到店",
        },
        {
          id: 15,
          label: "配送中",
        },
        {
          id: 17,
          label: "配送员妥投完单",
        },
        {
          id: 22,
          label: "配送员撤单",
        },
        {
          id: 91,
          label: "骑士上报异常",
        },
        {
          id: 31,
          label: "取消中",
        },
      ],
      deliveryType: [
        {
          id: 5,
          label: "自提",
        },
        {
          id: 10,
          label: "普通快递",
        },
        {
          id: 16,
          label: "同城配送",
        },
      ],
      isCancelOrder: false,
      showCancelOrderPopup: false,
      showPartOrderRefundPopup: false,
      form: {
        reason: "",
      },
      rules: {
        reason: [
          {
            required: true,
            message: "请输入取消订单原因",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
      commodityCheckBoxList: [],
      refreshInterval: null, // 全局定时器
      showOrderPickingPopup: false,
      currOrderItem: {
        order_items: [],
      },
      isRefreshing: false,
      refreshInterval: null, // 全局定时器
      showSfFlowPopup: false,
    };
  },
  computed: {
    sumBigInts() {
      // 高精度累加
      const sum =
        this.orderItem.order_items.reduce((acc, item) => {
          // 将数值转换为字符串以避免浮点数精度问题
          const current =
            typeof item.order_item_amount === "string"
              ? parseFloat(item.order_item_amount)
              : item.order_item_amount;
          // 使用乘以100再除以100的方法来避免浮点数精度问题
          return acc + Math.round(current * 100);
        }, 0) / 100;

      return sum;
    },
  },
  created() {
    this.currOrderItem = JSON.parse(JSON.stringify(this.orderItem));
  },
  mounted() {
    // 每1秒刷新一次数据（触发界面更新）
    this.refreshInterval = setInterval(() => {
      this.$forceUpdate(); // 强制更新视图
    }, 1000);
  },
  beforeDestroy() {
    // 组件销毁时清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  methods: {
    getRemainingTime(arrivalTime) {
      if (!arrivalTime) return "时间未设定";

      const now = Date.now();
      const remainingMs = arrivalTime - now;

      if (remainingMs <= 0) return "已超时";

      // 计算分钟和秒
      const minutes = Math.floor(remainingMs / (1000 * 60));
      const seconds = Math.floor((remainingMs % (1000 * 60)) / 1000);

      // 格式化为 MM:SS（补零）
      return `${minutes}:${seconds.toString().padStart(2, "0")}`;
    },
    sfFormatStatus(id) {
      let label = "";

      this.sfStatus.forEach((item) => {
        if (item.id == id) {
          label = item.label;
        }
      });

      return label;
    },
    deliveryTypeName(id) {
      let label = "";
      this.deliveryType.forEach((item) => {
        if (item.id == id) {
          label = item.label;
        }
      });

      return label;
    },
    async handerExpedite() {
      let params = {
        order_id: this.item.order_id,
      };

      let res = await GetExpediteSFOrder(params);
      if (res && res.status == 200) {
        uni.$u.toast("催单成功");
      }
    },
    showRefundOrderInfo() {
      this.$emit(
        "showRefundOrderInfo",
        !this.orderItem.showRefundOrderInfo,
        this.orderItemIndex
      );
    },
    makePhone(phone) {
      // #ifdef H5
      uni.showToast({
        title: "H5环境不支持",
        icon: "none",
      });
      // #endif

      // #ifdef APP-PLUS
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log("拨打电话成功");
        },
        fail: function () {
          console.log("拨打电话失败");
        },
      });
      // #endif
    },
    copy(num, type) {
      uni.setClipboardData({
        data: num,
        success: function () {
          uni.showToast({
            title: `${type == "order" ? "订单编号" : "配送单号"}复制成功`,
            icon: "none",
          });
        },
      });
    },
    handerShowCancelOrder() {
      this.showCancelOrderPopup = true;
      this.isCancelOrder = true;
    },
    handerShowPartOrderRefund() {
      let _item = JSON.parse(JSON.stringify(this.orderItem));

      _item.order_items.forEach((group) => {
        group.order_item_quantity_2 = group.order_item_quantity;
      });

      this.currOrderItem = _item;

      this.showPartOrderRefundPopup = true;
      this.isCancelOrder = false;
    },
    getInitiativeOrderRefund() {
      var params = {
        order_id: this.currOrderItem.order_id,
        reason: this.form.reason,
      };

      if (!this.isCancelOrder) {
        if (this.commodityCheckBoxList.length <= 0) {
          this.$refs.uToast.show({
            message: "请先选择你要退的商品",
            type: "error",
            duration: 1000,
            zIndex: 12000,
            position: "top",
          });
          return;
        }
        const matchedItems = this.currOrderItem.order_items.filter((item) =>
          this.commodityCheckBoxList.includes(item.item_id)
        );

        params.order_return_vo = {
          order_id: this.currOrderItem.order_id,
          return_items: matchedItems.map((item) => {
            return {
              order_item_id: item.item_id,
              return_item_num: item.order_item_quantity,
              return_refund_amount:
                item.order_item_quantity * item.item_unit_price,
            };
          }),
        };
      }

      this.$refs.uForm.validate().then(async (valid) => {
        let res = await GetInitiativeOrderRefund(params);
        if (res && res.status == 200) {
          this.showCancelOrderPopup = false;
          this.showPartOrderRefundPopup = false;
          if (!this.isCancelOrder) {
            uni.$u.toast("部分订单退款成功");
          } else {
            uni.$u.toast("取消订单成功");
          }
          this.form.reason = "";

          this.commodityCheckBoxList = [];
          this.$emit("cancelOrder");
        }
        this.showCancelOrderPopup = false;
        this.showPartOrderRefundPopup = false;
      });
    },
    handerShowOrderPickingPopup() {
      this.showOrderPickingPopup = true;
    },
    async getOrderPicking() {
      let params = {
        order_id: this.currOrderItem.order_id,
        store_id: this.currOrderItem.store_info.store_id,
      };

      let res = await GetOrderPicking(params);
      if (res && res.status == 200) {
        this.showOrderPickingPopup = false;
        uni.$u.toast("操作成功");
      }
      this.showOrderPickingPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.order_item {
  padding: 24rpx;
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  background: #fff;
  font-size: 24rpx;
  color: #222;

  .expresser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .header {
      text {
        font-size: 48rpx;
      }
    }
    .body {
      flex: 1;
      padding-left: 24rpx;
      position: relative;

      &::after {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        content: " ";
        width: 1px;
        background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
        background-size: 100% 16rpx;
        opacity: 0.2;
      }

      .icon {
        position: absolute;
        right: 20rpx;
        top: 32%;
      }

      .item {
        display: flex;
        align-items: center;

        &.info {
          margin-bottom: 8rpx;
        }
        .time {
          color: rgba(34, 34, 34, 0.9);
        }
        .name {
          font-weight: bold;
          display: flex;
          align-items: center;
          &::before {
            display: block;
            content: " ";
            width: 36rpx;
            height: 36rpx;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 6rpx;
            margin-right: 12rpx;
            background: url("@/static/icon_mt.png") no-repeat 50% 50%;
            background-size: 28rpx 28rpx;
          }
        }
        .btn_call {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          &::before {
            display: block;
            content: " ";
            width: 32rpx;
            height: 32rpx;
            background: url("@/static/icon_phone.png") no-repeat;
            background-size: 100%;
          }
        }
      }
    }
    .footer {
      width: 228rpx;
      .status {
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
        color: rgba(0, 182, 142, 1);
      }

      .status-2,
      .status-22,
      .status-31,
      .status-91 {
        color: red;
      }
    }
  }

  .expresser-2 {
    color: #000;

    .header {
      display: flex;
      align-items: center;

      .symbol {
        margin-right: 4rpx;
        font-size: 24rpx;
      }
    }
  }

  .user {
    margin-bottom: 24rpx;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
      .info {
        display: flex;
        align-items: center;
        .name {
          font-size: 28rpx;
          font-weight: bold;
        }
      }
      .btn_call {
        display: flex;
        align-items: center;
        &::before {
          display: block;
          content: " ";
          width: 32rpx;
          height: 32rpx;
          background: url("@/static/icon_phone.png") no-repeat;
          background-size: 100%;
        }
      }
    }

    .body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .btn_map {
        width: 36rpx;
        height: 36rpx;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 6rpx;
        background: url("@/static/icon_map.png") no-repeat 50% 50%;
        background-size: 28rpx 28rpx;
      }
      .box {
        padding-left: 40rpx;
      }

      .info {
        text-align: left;
        color: rgba(34, 34, 34, 0.75);
      }
    }

    .footer {
      .info {
        margin: 16rpx 0 24rpx;
        background: rgba(254, 247, 234, 0.5);
        padding: 12rpx 24rpx;
        border-radius: 8rpx;
        text {
          color: #ff801f;
          display: inline-block;
          margin-right: 12rpx;
        }
      }

      &::after {
        display: block;
        content: " ";
        height: 1px;
        background-image: linear-gradient(to right, #000 50%, transparent 20%);
        background-size: 16rpx 100%;
        opacity: 0.2;
      }
    }
  }

  .goods {
    margin-bottom: 24rpx;
    .single {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .body {
        display: flex;
        align-items: center;
        .info {
          display: flex;
          align-items: center;
        }
        .img_box {
          width: 96rpx;
          height: 96rpx;
          border-radius: 10rpx;
          margin-right: 12rpx;
          overflow: hidden;
        }
        .img {
          width: 96rpx;
          height: 96rpx;
          // background: #666;
        }
      }
      .footer {
        display: flex;
        align-items: baseline;
        line-height: 36rpx;
        .text {
          color: #666;
        }
        .prize_type {
          margin-left: 14rpx;
        }
        .prize_num {
          font-size: 28rpx;
        }
      }
    }

    .list {
      margin-bottom: 24rpx;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .img {
          width: 96rpx;
          height: 96rpx;
          border-radius: 10rpx;
          background: #666;
        }
        .box {
          flex: 1;
          padding: 0 24rpx;
          .desc {
            display: flex;
            color: #666;
            padding-top: 8rpx;
            .total {
              margin-right: 24rpx;
            }
          }
        }

        .counter {
          display: flex;
          justify-content: flex-end;
          align-items: baseline;
          min-width: 156rpx;
          .prize_type {
            font-weight: bold;
            padding-left: 12rpx;
          }
          .prize_num {
            font-size: 28rpx;
            font-weight: bold;
          }
        }
      }
    }
  }

  .result {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 24rpx;

    .cell {
      color: #666666;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .body {
        display: flex;
        align-items: center;
      }

      .red {
        color: #fe411b;
      }

      text {
        color: #222;
      }
      .total {
        font-size: 28rpx;
        font-weight: bold;
      }
      .count {
        font-size: 36rpx;
        font-weight: bold;
      }
      .order_num {
        display: flex;
        align-items: center;
        &::after {
          display: block;
          content: " ";
          width: 1px;
          height: 24rpx;
          margin: 0 12rpx;
          background: #ccc;
        }
      }
    }
  }

  .tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header {
      color: #666;
      display: flex;
      align-items: center;
      .icon {
        margin-left: 8rpx;
      }
    }
    .body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        width: 132rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        border: 1px solid #666;
        border-radius: 8rpx;
        margin-left: 24rpx;
      }
      .btn_refund {
        border-color: $base-color;
        color: $base-color;
      }
    }
  }

  .part-order-refund-popup {
    ::v-deep.u-popup__content {
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
    }

    ::v-deep.u-fade-enter-to {
      z-index: 10079 !important;
    }

    .part-order-refund-popup-content {
      .part-order-refund-popup-title {
        font-size: 32rpx;
        padding: 40rpx;
        text-align: center;
        font-weight: bold;
      }

      .affirm-popup-form {
        padding: 20rpx 60rpx;
      }

      .radio-list {
        .commodity-info-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 28rpx;

          .commodity-info-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

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

    .popup-btn-list {
      display: flex;
      margin: 50rpx;

      .btn-item {
        width: 46%;
        height: 64rpx;
        border-color: #909193;

        &::after {
          border: none;
        }
      }

      .btn-item-2 {
        background: $base-color;
        color: #fff;
        border: none;
      }
    }
  }

  .SfFlow-popup {
    ::v-deep.u-popup__content {
      border-radius: 16rpx;
    }

    ::v-deep.u-fade-enter-to {
      z-index: 10076 !important;
    }

    .SfFlow-popup-content {
      width: 600rpx;

      .SfFlow-popup-title {
        padding: 30rpx 0 20rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
      }

      .SfFlow-content {
        margin: 40rpx;
      }
    }
  }

  .affirm-popup {
    ::v-deep.u-popup__content {
      border-radius: 16rpx;
    }

    ::v-deep.u-fade-enter-to {
      z-index: 10076 !important;
    }

    .affirm-popup-content {
      width: 600rpx;

      .affirm-popup-title {
        padding: 60rpx 0 20rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
      }

      .affirm-popup-tips {
        padding: 0 32rpx;
        font-size: 28rpx;
        text-align: center;
      }

      .u-form {
        padding: 0 60rpx;
      }

      .popup-btn-list {
        display: flex;
        margin: 50rpx;

        .btn-item {
          width: 46%;
          height: 64rpx;
          border-color: #909193;

          &::after {
            border: none;
          }
        }

        .btn-item-2 {
          background: $base-color;
          color: #fff;
          border: none;
        }
      }
    }
  }

  .order_picking_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    margin: 0 8rpx;
    border-bottom: 1px solid #f7f7f7;

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

      text {
        color: red;
      }
    }

    .picking_btn {
      width: 34%;
      height: 60rpx;
      font-size: 24rpx;

      color: #666666;
      border-color: #666666;
    }
  }

  ::v-deep.u-toast {
    .u-transition {
      z-index: 12000;
    }
  }
}
</style>
