<template>
  <view class="index-container">
    <status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
    <view class="shop-info">
      <view
        class="shop-logo-img"
        :style="{ backgroundImage: `url(${logoUrl})` }"
      ></view>
      <view class="shop-name">{{ shopNmae }}</view>
    </view>
    <view class="tab-content">
      <tui-tabs
        :tabs="tabs"
        :currentTab="currentTab"
        backgroundColor="#fff"
        :height="88"
        color="#333"
        :size="32"
        selectedColor="#FE411B"
        sliderBgColor="#FE411B"
        :width="width"
        unlined
        @change="handleTab"
      ></tui-tabs>
    </view>
    <view class="tab2-content" v-if="currentTab == 0">
      <tui-tabs
        :class="['tabs-2', `tab_item_${currentTab2}`]"
        :tabs="tabs2"
        :width="300"
        :currentTab="currentTab2"
        @change="handleTab2"
        backgroundColor="#fff"
        :height="60"
        :size="28"
        unlined
        :sliderWidth="150"
        :sliderHeight="48"
        sliderRadius="4rpx"
        bottom="50%"
        color="#888"
        selectedColor="#fff"
        sliderBgColor="#FE411B"
      ></tui-tabs>
    </view>
    <view class="search-contetn" v-if="currentTab2 != 2">
      <u-search
        placeholder="请输入订单号搜索"
        :showAction="false"
        bgColor="#fff"
        v-model="keyword"
        @input="searchOrder()"
      ></u-search>
      <!-- <view class="btn-content" @click="handleShowDropDown">
        <tui-dropdown-list :show="showDropdown" :top="94" :height="400">
          <template v-slot:selectionbox>
            <view class="btn-down">
              功能模块
              <u-icon
                :class="[
                  'tui-animation',
                  showDropdown ? 'tui-animation-show' : '',
                ]"
                style="display: inline-block; margin-left: 6rpx"
                :name="'arrow-down'"
                color="#cccccc"
                size="12"
              ></u-icon>
            </view>
          </template>
          <template v-slot:dropdownbox>
            <view class="btn-down-list">
              <view class="btn-unfold">全部展开</view>
              <view class="btn-unfold">全部收回</view>
            </view>
          </template>
        </tui-dropdown-list>
      </view> -->
    </view>
    <view class="sales-retrun-btn-list" v-if="currentTab2 == 2">
      <u-button
        :class="[
          'sales-retrun-btn-item',
          { active: salesReturnBtnSearchAcitve == item.value },
        ]"
        size=""
        @click="handelSalesReturnSearch(item)"
        :style="{ width: item.width }"
        v-for="(item, index) of salesReturnBtnSearchList"
        :key="index"
      >
        {{ item.label }}
      </u-button>
    </view>

    <view class="order-info-content" v-if="currentTab2 == 0">
      <favorite-loading
        class="order-loading"
        v-show="showOrderLoading"
        :color="'#FE411B'"
        text=""
        animation="spinner15"
      ></favorite-loading>
      <scroll-view
        class="uni-swiper-list"
        scroll-y
        :scroll-top="0"
        enhanced
        :show-scrollbar="false"
        @scrolltolower="scrolltolower"
        v-if="orderInfo.order_page_list.records.length > 0"
      >
        <view
          :class="[
            'order-info-block',
            { 'order-info-oepn': item.showRefundOrderInfo },
          ]"
          v-for="(item, index) of orderInfo.order_page_list.records"
          :key="index"
        >
          <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;
                  "
                >
                  {{ item.orderNum }}
                </text>
              </view>
              <view class="delivery-status">
                {{ sfFormatStatus(item.order_state_id) }}
              </view>
            </view>
            <view class="rider-info" v-if="item.arrival_time && item.order_id">
              <view class="delivery-time">
                预计送达{{ formatTime(item.arrival_time) }}前
              </view>
              <view class="order-num">订单号：{{ item.order_id }}</view>
            </view>
          </view>
          <view class="" v-show="item.showRefundOrderInfo">
            <view class="user-info-block">
              <view class="user-info">
                {{ item.buyer_info.da_name }} 手机尾号{{
                  item.buyer_info.da_mobile.slice(-4)
                }}
              </view>
              <view class="user-address">
                收货地址：{{
                  item.buyer_info.da_province +
                  item.buyer_info.da_city +
                  item.buyer_info.da_county +
                  item.buyer_info.da_address
                }}
              </view>
              <view class="distance">距离：{{ item.distance / 1000 }}km</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">
                {{ sfFormatStatus(item.order_state_id) }}
              </view>
              <view class="delivery-num">{{ item.order_pickup_num_str }}</view>
            </view>
            <view class="order-remark">
              <text style="color: #fff; font-weight: bold">备注：</text>
              <text style="color: #fff">
                {{ item.buyer_info.order_message }}
              </text>
            </view>
            <view class="commodity-info-block">
              <view class="commodity-num">
                <text style="font-size: 36rpx">
                  {{ item.order_items.length || 0 }}
                </text>
                <text>件商品</text>
              </view>
              <view
                class="commodity-info"
                v-for="(group, index) of item.order_items"
                :key="index"
              >
                <image
                  class="commodity-info-img"
                  :src="group.order_item_image"
                ></image>
                <view class="commodity-content">
                  <view class="commodity-name">{{ group.item_name || 0 }}</view>
                  <view class="commodity-barcode">
                    条码
                    <text style="padding-left: 8rpx">
                      {{ group.item_barcode || 0 }}
                    </text>
                  </view>
                  <view class="commodity-specification">
                    规格
                    <text style="padding-left: 8rpx">
                      {{ group.specification || 0 }}
                    </text>
                  </view>
                </view>
                <view class="commodity-num">
                  X
                  <text style="padding-left: 8rpx">
                    {{ group.order_item_quantity || 0 }}
                  </text>
                </view>
                <view class="commodity-price">
                  ￥{{ group.order_item_amount || 0 }}
                </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">
                  ￥{{ item.order_product_amount }}
                </view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #333333; 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">
                  ￥{{ item.order_discount_amount }}
                </view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #333333; 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">￥{{ item.platform_fee }}</view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #333333; 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">
                  ￥{{ item.order_shipping_fee }}
                </view>
              </view>
              <view class="cost-info-income">
                <view class="predict-income">
                  预计收入
                  <text
                    style="font-size: 40rpx; color: #333333; 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="showRefundOrderInfo(item, index)">
              {{ item.showRefundOrderInfo ? "收起订单" : "展开订单" }}
              <u-icon
                style="display: inline-block; margin-left: 6rpx"
                :name="item.showRefundOrderInfo ? 'arrow-up' : 'arrow-down'"
                color="#cccccc"
                size="12"
              ></u-icon>
            </view>
          </view>
        </view>
        <view
          class="m-loading-box"
          v-if="
            orderInfo.order_page_list.records.length > 0 && !isNoOnlineOrder
          "
        >
          <block v-if="loadingDownOnlinData">
            <view class="u-loadmore">
              <view class="u-loading"></view>
              <text class="u-loadmore-tips">正在加载...</text>
            </view>
          </block>
          <block v-else>
            <view class="u-loadmore u-loadmore-line">
              <text class="u-loadmore-tips">没有更多数据啦！</text>
            </view>
          </block>
        </view>
      </scroll-view>
      <view
        class="no-data"
        v-if="orderInfo.order_page_list.records.length <= 0 && isNoOnlineOrder"
      >
        <view class="no-data-bg"></view>
        <view class="no-data-tips">暂无交易记录!</view>
      </view>
    </view>
    <view class="order-info-content" v-if="currentTab2 == 1">
      <favorite-loading
        class="order-loading"
        v-show="showOrderLoading"
        :color="'#FE411B'"
        text=""
        animation="spinner15"
      ></favorite-loading>
      <scroll-view
        class="uni-swiper-list"
        scroll-y
        :scroll-top="0"
        enhanced
        :show-scrollbar="false"
        @scrolltolower="scrolltolower"
        v-if="orderInfo.order_page_list.records.length > 0"
      >
        <view
          :class="[
            'order-info-block',
            { 'order-info-oepn': item.showRefundOrderInfo },
            { 'order-abnormal': currentTab2 == 1 && item.showRefundOrderInfo },
          ]"
          v-for="(item, index) of orderInfo.order_page_list.records"
          :key="index"
        >
          <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;
                  "
                >
                  {{ item.orderNum }}
                </text>
              </view>
              <view class="delivery-status" style="color: red">
                {{ sfFormatStatus(item.order_state_id) }}
              </view>
            </view>
            <view class="rider-info" v-if="item.arrival_time && item.order_id">
              <view class="delivery-time">
                预计送达{{ formatTime(item.arrival_time) }}前
              </view>
              <view class="order-num">订单号：{{ item.order_id }}</view>
            </view>
          </view>
          <view class="" v-show="item.showRefundOrderInfo">
            <view class="user-info-block">
              <view class="user-info">
                <view class="user-info-block">
                  {{ item.buyer_info.da_name }} 手机尾号{{
                    item.buyer_info.da_mobile.slice(-4)
                  }}
                </view>
                <view class="user-info-icon-block"></view>
              </view>
              <view class="user-address">
                收货地址：{{
                  item.buyer_info.da_province +
                  item.buyer_info.da_city +
                  item.buyer_info.da_county +
                  item.buyer_info.da_address
                }}
              </view>
              <view class="distance">距离：{{ item.distance / 1000 }}km</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">{{
                sfFormatStatus(item.order_state_id)
              }}</view> -->
              <view class="delivery-num">{{ item.order_pickup_num_str }}</view>
            </view>
            <view class="order-remark">
              <text style="font-weight: bold">备注：</text>
              <text>{{ item.buyer_info.order_message }}</text>
            </view>
            <view class="commodity-info-block">
              <view class="commodity-num">
                <text style="font-size: 36rpx">
                  {{ item.order_items.length || 0 }}
                </text>
                <text>件商品</text>
              </view>
              <view
                class="commodity-info"
                v-for="(group, index) of item.order_items"
                :key="index"
              >
                <image
                  class="commodity-info-img"
                  :src="group.order_item_image"
                ></image>
                <view class="commodity-content">
                  <view class="commodity-name">{{ group.item_name || 0 }}</view>
                  <view class="commodity-barcode">
                    条码
                    <text style="padding-left: 8rpx">
                      {{ group.item_barcode || 0 }}
                    </text>
                  </view>
                  <view class="commodity-specification">
                    规格
                    <text style="padding-left: 8rpx">
                      {{ item.specification || 0 }}
                    </text>
                  </view>
                </view>
                <view class="commodity-num">
                  X
                  <text style="padding-left: 8rpx">
                    {{ item.order_item_quantity || 0 }}
                  </text>
                </view>
                <view class="commodity-price">
                  ￥{{ item.order_item_amount || 0 }}
                </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">
                  ￥{{ item.order_product_amount }}
                </view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #333333; 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">
                  ￥{{ item.order_discount_amount }}
                </view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #333333; 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">￥{{ item.platform_fee }}</view>
              </view>
              <view class="cost-info-item cost-info-subtotal">
                <view
                  class="cost-info-title"
                  style="color: #333333; 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">
                  ￥{{ item.order_shipping_fee }}
                </view>
              </view>
              <view class="cost-info-income">
                <view class="predict-income">
                  预计收入
                  <text
                    style="font-size: 40rpx; color: #333333; 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="showRefundOrderInfo(item, index)">
              {{ item.showRefundOrderInfo ? "收起订单" : "展开订单" }}
              <u-icon
                style="display: inline-block; margin-left: 6rpx"
                :name="item.showRefundOrderInfo ? 'arrow-up' : 'arrow-down'"
                size="12"
                color="#cccccc"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="m-loading-box">
          <block v-if="loadingDownOnlinData">
            <view class="u-loadmore">
              <view class="u-loading"></view>
              <text class="u-loadmore-tips">正在加载...</text>
            </view>
          </block>
          <block v-else>
            <view class="u-loadmore u-loadmore-line">
              <text class="u-loadmore-tips">没有更多数据啦！</text>
            </view>
          </block>
        </view>
      </scroll-view>
      <view
        class="no-data"
        v-if="orderInfo.order_page_list.records.length <= 0 && isNoOnlineOrder"
      >
        <view class="no-data-bg"></view>
        <view class="no-data-tips">暂无交易记录!</view>
      </view>
    </view>
    <view class="order-info-content" v-if="currentTab2 == 2">
      <favorite-loading
        class="order-loading"
        v-show="showOrderLoading"
        :color="'#FE411B'"
        text=""
        animation="spinner15"
      ></favorite-loading>
      <scroll-view
        class="uni-swiper-return-list"
        scroll-y
        :scroll-top="0"
        enhanced
        :show-scrollbar="false"
        @scrolltolower="scrollSalesReturnTolower"
        v-if="salesReturnOrderList.length > 0"
      >
        <view
          :class="[
            'order-info-block',
            { 'order-info-oepn': item.showRefundOrderInfo },
            { 'order-refund': currentTab2 == 2 },
            {
              'order-refund-open': currentTab2 == 2 && item.showRefundOrderInfo,
            },
          ]"
          v-for="(item, index) of salesReturnOrderList"
          :key="index"
        >
          <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;
                  "
                >
                  {{ item.orderNum }}
                </text>
              </view>
              <view class="order-num">退货单号：{{ item.return_id }}</view>
            </view>
            <view class="rider-info" v-if="item.order_state_id">
              <view class="delivery-time"></view>
              <view class="delivery-status">
                {{ sfFormatStatus(item.order_state_id) }}
              </view>
            </view>
            <!-- <view class="order-msg-tips">
              取消原因：订单符合未发货秒退规则，平台已优先退款
            </view> -->
          </view>
          <!-- <view class="steps-content" v-show="item.showRefundOrderInfo">
            <view class="steps-title">
              退款
              <u-icon
                style="display: inline-block; margin: 0 8rpx"
                @click="handlePopup"
                name="question-circle"
                size="12"
                color="aaaaaa"
              ></u-icon>
            </view>
            <u-steps :current="0" direction="column" :dot="true">
              <u-steps-item
                class="steps-item-1"
                title="系统自动退款"
                desc="订单符合未发货秒退规则，平台已优先退款"
              ></u-steps-item>
              <u-steps-item
                title="顾客申请全部退款"
                desc="理由：商家联系我说没货了"
              ></u-steps-item>
            </u-steps>
          </view> -->
          <view
            class=""
            v-if="
              item.showRefundOrderInfo &&
              item.detailsInfo &&
              Object.keys(item.detailsInfo).length > 0
            "
          >
            <view class="user-info-block">
              <view class="user-info">
                {{ item.detailsInfo.da_name }}先生 手机尾号{{
                  item.detailsInfo.da_mobile.slice(-4)
                }}
                <u-icon
                  @click="makePhone(item.detailsInfo.da_mobile)"
                  name="phone-fill"
                  class="icon-phone-fill"
                  size="40"
                  color="#FE411B"
                ></u-icon>
              </view>
              <view class="user-address">
                收货地址：{{ item.detailsInfo.da_address }}
              </view>
            </view>
            <view class="order-remark">
              <text style="font-weight: bold">退货理由：</text>
              <text>{{ item.return_buyer_message }}</text>
            </view>
            <view
              class="sales-return-img-title"
              v-if="item.detailsInfo.items[0].return_item_image.length > 0"
            >
              退货凭据
            </view>
            <view
              class="sales-return-img-list"
              v-if="item.detailsInfo.items[0].return_item_image.length > 0"
            >
              <u--image
                v-for="(imgItem, imgIndex) of item.detailsInfo.items[0]
                  .return_item_image"
                :key="imgIndex"
                :showLoading="true"
                :src="imgItem"
                width="80px"
                height="80px"
                @click="
                  handlerShowImg(item.detailsInfo.items[0].return_item_image)
                "
              ></u--image>
            </view>
            <view class="commodity-info-block">
              <view class="commodity-num">
                <text style="font-size: 36rpx">
                  {{ item.detailsInfo.items[0].return_item_num }}
                </text>
                <text>件商品</text>
              </view>
              <view
                class="commodity-info"
                v-for="(group, index2) of item.detailsInfo.items"
                :key="index2"
              >
                <image
                  class="commodity-info-img"
                  :src="group.order_item_image"
                ></image>
                <view class="commodity-content">
                  <view class="commodity-name">{{ group.product_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">
                    {{ group.return_item_num }}
                  </text>
                </view>
                <view class="commodity-price">
                  ￥{{ group.return_item_subtotal }}
                </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: #333333; 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: #333333; 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="
                      margin: 0 10rpx;
                      font-size: 40rpx;
                      color: #333333;
                      font-weight: 700;
                    "
                  >
                    {{ item.return_refund_amount }}
                  </text>
                  元
                </view>
                <!-- <view class="customer-actual-payment">
                  顾客实际支付 ￥30.50
                </view> -->
              </view>
            </view>
          </view>
          <view class="order-btn-block">
            <view class="btn-list" v-if="item.return_state_id == 3105">
              <u-button
                class="btn-item"
                @click="handelOpenReturnOrderPopup(item, 'noPass')"
              >
                拒绝退款
              </u-button>
              <u-button
                class="btn-item"
                @click="handelOpenReturnOrderPopup(item, 'pass')"
              >
                同意退款
              </u-button>
            </view>
            <view class="btn-list retrun-state-name" v-else>
              {{ item.return_state_name }}
            </view>
            <view
              class="arrow-item arrow-item-2"
              @click="showRefundOrderInfo(item, index)"
            >
              <view class="time">{{ item.return_add_time }}</view>
              <view>
                {{ item.showRefundOrderInfo ? "收起订单" : "展开订单" }}
                <u-icon
                  style="display: inline-block; margin-left: 6rpx"
                  :name="item.showRefundOrderInfo ? 'arrow-up' : 'arrow-down'"
                  size="12"
                  color="#cccccc"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view
          class="m-loading-box"
          v-if="salesReturnOrderList.length > 0 && !isNoSalesReturnOrderData"
        >
          <block v-if="loadingDownSalesReturnData">
            <view class="u-loadmore">
              <view class="u-loading"></view>
              <text class="u-loadmore-tips">正在加载...</text>
            </view>
          </block>
          <block v-else>
            <view class="u-loadmore u-loadmore-line">
              <text class="u-loadmore-tips">没有更多数据啦！</text>
            </view>
          </block>
        </view>
      </scroll-view>
      <view
        class="no-data"
        v-if="salesReturnOrderList.length <= 0 && isNoSalesReturnOrderData"
      >
        <view class="no-data-bg"></view>
        <view class="no-data-tips">暂无交易记录!</view>
      </view>
    </view>
    <tabbar tabbarName="order"></tabbar>
    <tui-gallery
      :urls="showImgList"
      :show="showImg"
      @hide="hideImg"
    ></tui-gallery>
    <u-popup
      class="return-order-popup"
      :show="showReturnOrderPopup"
      mode="center"
      round="12"
      @close="handerCloseReturnOrderPopup"
    >
      <view class="return-order-popup-content">
        <view class="title">
          {{ returnOrderType == "pass" ? "退货确认" : "拒绝退款" }}
        </view>
        <view class="radio-content" v-if="returnOrderType == 'pass'">
          <view class="radio-type-name">退货类型：</view>
          <view class="radio-list">
            <tui-radio-group class="radio-group" @change="handelRaddio">
              <view v-for="(item, index) in radioItems" :key="index">
                <tui-radio
                  :checked="item.checked"
                  :value="item.value"
                  color="#07c160"
                  borderColor="#999"
                ></tui-radio>
                <text class="radio-name">{{ item.name }}</text>
              </view>
            </tui-radio-group>
          </view>
        </view>
        <view class="popup-textarea">
          <u--textarea
            class="textarea"
            v-model="retrunOrderMsg"
            placeholder="请输入商家备注"
            :border="'surround'"
            count
            :maxlength="40"
            :height="100"
          ></u--textarea>
        </view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showReturnOrderPopup = false"
          >
            取消
          </u-button>
          <u-button
            v-if="dashboardInfo.store_info.store_biz_state == 1"
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerRetrunOrder()"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import statusBar from "../../components/status-bar.vue";
import tuiTabs from "../../components/tui-tabs.vue";
import {
  GetOrderList,
  GetSalesReturnOrderList,
  GetSalesReturnOrderDetails,
  GetSalesReturnOrderNoPass,
  GetSalesReturnOrderPass,
} from "../../api/order";
import { mapState } from "vuex";
import { GetAuditInfo } from "../../api/audit";
import { GetAccountDashboard } from "../../api/user";
import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";
import tuiDropdownList from "@/components/tui-dropdown-list/tui-dropdown-list.vue";
import tabbar from "@/components/tabbar/tabbar.vue";
import tuiGallery from "@/components/tui-gallery/tui-gallery.vue";
import tuiRadio from "@/components/tui-radio/tui-radio.vue";
import tuiRadioGroup from "@/components/tui-radio-group/tui-radio-group.vue";
export default {
  components: {
    tuiTabs,
    statusBar,
    favoriteLoading,
    tuiDropdownList,
    tabbar,
    tuiGallery,
    tuiRadio,
    tuiRadioGroup,
  },
  data() {
    return {
      showDropdown: false,
      currentTab: 0,
      currentTab2: 0,
      keyword: "",
      pageNum: 1,
      pageSize: 10,
      width: uni.upx2px(200),
      tabs: [
        {
          name: "同城订单",
          num: 1,
        },
        // {
        //   name: "预订单",
        // },
        // {
        //   name: "物流订单",
        // },
        // {
        //   name: "全部订单",
        //   num: 0,
        // },
      ],
      tabs2: [
        {
          name: "进行中",
          num: 0,
        },
        {
          name: "异常配送",
          num: 0,
        },
        {
          name: "退款",
          num: 0,
        },
      ],
      commodityArr: [
        {
          imrUrl: "../../static/logo.jpg",
          name: "猪肉",
          barcode: "11131312123",
          specification: "500g*1袋",
          num: "3",
          price: 300,
        },
        {
          imrUrl: "../../static/logo.jpg",
          name: "猪肉",
          barcode: "11131312123",
          specification: "500g*1袋",
          num: "3",
          price: 300,
        },
        {
          imrUrl: "../../static/logo.jpg",
          name: "猪肉",
          barcode: "11131312123",
          specification: "500g*1袋",
          num: "3",
          price: 300,
        },
      ],
      orderInfo: {
        order_count: {
          same_city_order: {
            progress_count: "",
            overtime_count: "",
            refund_count: "",
          },
        },
        order_page_list: {
          records: [],
        },
      },
      shopNmae: "",
      logoUrl: "@/static/logo.jpg",
      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: [
        {
          key: 16,
          value: "同城",
        },
        {
          key: 10,
          value: "普通快递",
        },
        {
          key: 5,
          value: "自提",
        },
      ],
      time: 0,
      params: {
        storeId: "",
        keyword: "",
        pageNum: "",
        pageSize: "",
        return_state_id: null,
      },
      dashboardInfo: {
        store_info: {
          store_id: "",
        },
      },
      salesReturnBtnSearchList: [
        {
          value: null,
          label: "全部",
          width: "120rpx",
        },
        {
          value: 3125,
          label: "完成",
          width: "120rpx",
        },
        {
          value: 3130,
          label: "拒绝",
          width: "120rpx",
        },
        {
          value: 3110,
          label: "收货确认",
          width: "170rpx",
        },
        {
          value: 3105,
          label: "待审核",
          width: "140rpx",
        },
        {
          value: 3115,
          label: "退款确认",
          width: "170rpx",
        },
        {
          value: 3120,
          label: "收款确认",
          width: "170rpx",
        },
      ],
      salesReturnBtnSearchAcitve: 3105,
      salesReturnOrderList: [],
      showImgList: [],
      showImg: false,
      showOrderLoading: false, //
      isNoOnlineOrder: false, // 没有订单的显示
      loadingDownOnlinData: false, // 在线订单下拉加载
      isDownNoOrderData: false, // 下拉加载时没有数据的表现
      isNoSalesReturnOrderData: false, // 没有退货订单
      loadingDownSalesReturnData: false, // 下拉加载退货订单
      isDownNoSalesReturnData: false, // 下拉加载时没有退货数据
      showReturnOrderPopup: false,
      returnOrderType: "",
      radioOrderType: "",
      radioItems: [
        {
          name: "需要退货",
          value: "1",
          checked: true,
        },
        {
          name: "不用退货",
          value: "0",
          checked: false,
        },
      ],
      retrunOrderMsg: "",
      currReturnId: "",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapState("order", ["pushOrderInfo"]),
  },
  watch: {
    pushOrderInfo: {
      handler(newValue, oldValue) {
        if (newValue) {
          console.log("order watch", newValue);

          this.orderInfo.order_page_list.records.unshift(newValue);

          this.orderInfo.order_page_list.records =
            this.orderInfo.order_page_list.records.map((item, index) => ({
              ...item, // 保留原有属性
              orderNum: index + 1, // 重新分配 orderNum (1, 2, 3, ...)
            }));

          console.log(this.orderInfo.order_page_list.records);
        }
      },
    },
  },
  onLoad() {},
  onShow() {
    this.getOrderList();
  },
  onPullDownRefresh() {
    this.pageNum = 1;
    this.pageSize = 10;
    this.keyword = "";
    this.getOrderList();
  },
  // onReachBottom() {
  //   clearTimeout(this.time);
  //   this.loadingDownOnlinData = true;
  //   this.time = setTimeout(() => {
  //     this.pageNum = this.pageNum + 1;
  //     this.getOrderList();
  //   }, 500);
  // },

  methods: {
    async getOrderList() {
      let accountDashboard = uni.getStorageSync("accountDashboard");
      let auditInfo = uni.getStorageSync("auditInfo");

      if (accountDashboard) {
        this.shopNmae = accountDashboard.store_info.store_name;
        this.logoUrl = accountDashboard.store_info.store_logo;
        this.dashboardInfo = accountDashboard;
      } else {
        await this.getAccountDashboard();
      }
      if (!auditInfo) {
        await this.getAuditInfo();
      }

      if (this.loadingDownOnlinData) {
        this.showOrderLoading = false;
      } else {
        this.showOrderLoading = true;
      }

      console.log(this.dashboardInfo.store_info.store_id);

      this.params = {
        storeId: this.dashboardInfo.store_info.store_id,
        keyword: this.keyword,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        delivery: this.currentTab + 1,
        status: this.currentTab2 + 1,
      };

      let res = await GetOrderList(this.params);

      if (res && res.status == 200) {
        // 下拉加载时
        if (this.loadingDownOnlinData) {
          if (res.data.order_page_list.records.length <= 0) {
            this.loadingDownOnlinData = false;
            this.isDownNoOrderData = true;
            return;
          } else {
            // this.orderInfo = { ...this.orderInfo, ...res.data };
            this.orderInfo.order_page_list.records = [
              ...this.orderInfo.order_page_list.records,
              ...res.data.order_page_list.records,
            ];
          }
        } else {
          this.orderInfo = res.data;
        }

        if (this.orderInfo.order_count) {
          this.tabs[0].num = this.orderInfo.order_count.same_city_order_count; // 同城订单总数
          // this.tabs[2].num = this.orderInfo.order_count.logistics_order_count; // 物流订单总数
          // this.tabs[3].num = this.orderInfo.order_count.all_order_count;  //所有订单总数

          this.tabs2[0].num =
            this.orderInfo.order_count.same_city_order.progress_count; // 同城进行中订单数量
          this.tabs2[1].num =
            this.orderInfo.order_count.same_city_order.overtime_count; // 同城超时异常订单数量
          this.tabs2[2].num =
            this.orderInfo.order_count.same_city_order.refund_count; // 同城退款订单数量
        }

        if (res.data.order_page_list.records.length <= 0) {
          this.showOrderLoading = false;
          this.isNoOnlineOrder = true;
          return;
        }

        this.orderInfo.order_page_list.records =
          this.orderInfo.order_page_list.records.map((item, index) => {
            if (item) {
              item.orderNum = index + 1;
              item.showRefundOrderInfo = false;
            }
            return item;
          });
      }

      this.showOrderLoading = false;
      this.loadingDownOnlinData = false;
      // uni.stopPullDownRefresh();
    },
    handelSalesReturnSearch(item) {
      if (item.value == this.salesReturnBtnSearchAcitve) return;
      this.pageNum = 1;
      this.pageSize = 10;
      this.salesReturnBtnSearchAcitve = item.value;
      this.loadingDownSalesReturnData = false;
      this.isNoSalesReturnOrderData = false;
      this.isDownNoSalesReturnData = false;

      this.getSalesReturnOrderList(item.value);
    },
    async getSalesReturnOrderList(returnStateId = 3105) {
      if (this.loadingDownSalesReturnData) {
        this.showOrderLoading = false;
      } else {
        this.showOrderLoading = true;
      }

      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        return_state_id: returnStateId,
      };

      let res = await GetSalesReturnOrderList(params);
      if (res && res.status == 200) {
        // 下拉加载
        if (this.loadingDownSalesReturnData) {
          if (res.data.items.length <= 0) {
            this.loadingDownSalesReturnData = false;
            this.isDownNoSalesReturnData = true;
            return;
          } else {
            // this.orderInfo = { ...this.orderInfo, ...res.data };
            this.salesReturnOrderList = [
              ...this.salesReturnOrderList,
              ...res.data.items,
            ];
          }
        } else {
          this.salesReturnOrderList = res.data.items;
        }

        if (res.data.items <= 0) {
          this.showOrderLoading = false;
          this.isNoSalesReturnOrderData = true;
          return;
        }

        this.salesReturnOrderList = this.salesReturnOrderList.map(
          (item, index) => {
            if (item) {
              item.orderNum = index + 1;
              item.showRefundOrderInfo = false;
            }
            return item;
          }
        );
        console.log(this.salesReturnOrderList);
      }
      this.showOrderLoading = false;
      this.loadingDownSalesReturnData = false;
    },
    async getSalesReturnOrderDetails(item, index) {
      let params = {
        return_id: item.return_id,
      };

      let res = await GetSalesReturnOrderDetails(params);
      if (res && res.status == 200) {
        let detailsInfo = res.data;

        this.$set(this.salesReturnOrderList, index, {
          ...this.salesReturnOrderList[index],
          detailsInfo: detailsInfo,
        });

        console.log(this.salesReturnOrderList);
      }
    },

    showRefundOrderInfo(item, index) {
      if (this.currentTab2 == 2) {
        if (!item.showRefundOrderInfo) {
          this.getSalesReturnOrderDetails(item, index);
        }

        this.$set(this.salesReturnOrderList, index, {
          ...item,
          showRefundOrderInfo: !item.showRefundOrderInfo,
        });
      }

      if (this.currentTab2 != 2) {
        this.$set(this.orderInfo.order_page_list.records, index, {
          ...item,
          showRefundOrderInfo: !item.showRefundOrderInfo,
        });
      }
    },
    async getAuditInfo() {
      var params = {};

      params.mobile = this.userInfo.user_mobile.startsWith("+86")
        ? this.userInfo.user_mobile.replace("+86", "")
        : this.userInfo.user_mobile;

      let res = await GetAuditInfo(params);
      if (res && res.status == 200) {
        uni.setStorageSync("auditInfo", res.data);

        if (res.data.contract_download_url) {
          uni.setStorageSync(
            "contractDownloadUrl",
            res.data.contract_download_url
          );
        }
      }
    },
    async getAccountDashboard() {
      let res = await GetAccountDashboard();

      if (res && res.status == 200) {
        uni.setStorageSync("accountDashboard", res.data);
        this.dashboardInfo = res.data;
        this.shopNmae = res.data.store_info.store_name;
        this.logoUrl = res.data.store_info.store_logo;
      }
    },
    handerCloseReturnOrderPopup() {
      this.showReturnOrderPopup = false;
    },
    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
    },
    sfFormatStatus(id) {
      let label = "";
      this.sfStatus.forEach((item) => {
        if (item.id == id) {
          label = item.label;
        }
      });

      return label;
    },
    handlerShowImg(imgList) {
      this.showImg = true;
      const _imgList = imgList.map((item) => {
        return {
          src: item,
          desc: "",
        };
      });

      this.showImgList = _imgList;
      console.log(this.showImgList);
    },
    hideImg() {
      this.showImg = false;
    },
    formatTime(time) {
      let date = new Date(time);
      let hours = String(date.getHours()).padStart(2, "0");
      let minutes = String(date.getMinutes()).padStart(2, "0");
      return hours + ":" + minutes;
    },
    handleTab(e) {
      this.currentTab = e.index;
      this.pageNum = 1;
      this.pageSize = 10;
      this.keyword = "";
      this.isNoOnlineOrder = false;
      this.getOrderList();
    },
    handleTab2(e) {
      this.currentTab2 = e.index;

      this.pageNum = 1;
      this.pageSize = 10;
      this.keyword = "";
      this.isNoOnlineOrder = false;
      this.loadingDownOnlinData = false;
      this.isDownNoOrderData = false;

      this.isNoSalesReturnOrderData = false;
      this.loadingDownSalesReturnData = false;
      this.isDownNoSalesReturnData = false;

      if (this.currentTab2 == 2) {
        this.getSalesReturnOrderList();
      } else {
        this.getOrderList();
      }
    },
    searchOrder() {
      this.pageNum = 1;
      this.pageSize = 10;

      setTimeout(() => {
        this.getOrderList();
      }, 600);
    },
    scrolltolower() {
      clearTimeout(this.time);
      if (this.isDownNoOrderData) return;
      this.loadingDownOnlinData = true;
      this.time = setTimeout(() => {
        this.pageNum = this.pageNum + 1;
        this.getOrderList();
      }, 500);
    },
    scrollSalesReturnTolower() {
      clearTimeout(this.time);
      if (this.isDownNoSalesReturnData) return;
      this.loadingDownSalesReturnData = true;
      this.time = setTimeout(() => {
        this.pageNum = this.pageNum + 1;
        this.getSalesReturnOrderList();
      });
    },
    handleShowDropDown() {
      this.showDropdown = !this.showDropdown;
    },
    handelOpenReturnOrderPopup(item, type) {
      this.showReturnOrderPopup = true;
      this.returnOrderType = type;
      this.currReturnId = item.return_id;
    },
    handelRaddio(e) {
      this.radioOrderType = e.detail.value;
    },
    async handerRetrunOrder() {
      if (this.returnOrderType == "noPass") {
        let params = {
          return_id: this.currReturnId,
          return_store_message: this.retrunOrderMsg,
        };

        let res = await GetSalesReturnOrderNoPass(params);
        if (res && res.status == 200) {
          this.currReturnId = "";
          this.retrunOrderMsg = "";
          this.getSalesReturnOrderList();
        }
      } else {
        let params = {
          return_flag: this.radioOrderType,
          return_id: this.currReturnId,
          return_store_message: this.retrunOrderMsg,
        };

        if (this.radioOrderType == 1) {
          params.receiving_address = 2;
        }

        let res = await GetSalesReturnOrderPass(params);
        if (res && res.status == 200) {
          this.currReturnId = "";
          this.retrunOrderMsg = "";
          this.getSalesReturnOrderList();
        }
      }
      this.showReturnOrderPopup = false;
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.index-container {
  // overflow: hidden;
  background: #eeeff3;
  min-height: 100vh;
  .shop-info {
    display: flex;
    align-items: center;
    padding: 40rpx;
    padding-top: 20rpx;
    background: #fff;

    .shop-logo-img {
      width: 90rpx;
      height: 90rpx;
      background-image: url("../../static/logo.jpg");
      background-size: 100% 100%;
      border-radius: 50%;
    }
    .shop-name {
      margin-left: 20rpx;
      font-weight: bold;
      background: #fff;
    }
  }

  .order-loading {
    margin: 70% auto;
    display: flex;
  }

  .tab-content {
    padding-bottom: 20rpx;
    background: #fff;
    // ::v-deep .tui-tabs-title {
    //   font-size: 36rpx !important;
    // }
    ::v-deep .tui-tabs__badge {
      line-height: 32rpx;
    }
  }

  .tab2-content {
    background: #fff;
    ::v-deep .tui-tabs-slider {
      background: #ffecf2 !important;
      border: 2rpx solid #fe411b;
      bottom: 48% !important;
    }
    ::v-deep .tui-tabs-item {
      line-height: 60rpx;

      .tui-tabs-title {
        color: #333 !important;
      }
      &.tui__tab_current {
        .tui-tabs-title {
          color: #fe411b !important;
        }
      }
    }
  }

  .sales-return-img-title {
    margin: 20rpx;
    font-weight: bold;
  }

  .sales-return-img-list {
    display: flex;
    flex-wrap: wrap;
    margin: 40rpx 20rpx;
  }

  .search-contetn {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx 40rpx;

    .btn-content {
      margin-left: 20rpx;
      padding: 16rpx 20rpx;
      width: 200rpx;
      border-radius: 60rpx;
      background: #fff;
      color: #333333;
      font-size: 14px;
      text-align: center;
    }
  }

  .sales-retrun-btn-list {
    margin: 30rpx 10rpx 0;
    height: 160rpx;

    .sales-retrun-btn-item {
      float: left !important;
      height: 60rpx;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
      border: none;
      font-size: 24rpx;

      ::after {
        border: none;
      }
    }

    .active {
      // background: $base-color;
      color: #fe411b;
    }
  }

  .order-info-content {
    border-radius: 8rpx;

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

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

    .order-msg-tips {
      padding: 12rpx;
      height: 72rpx;
      line-height: 72rpx;
      font-size: 26rpx;
      background: #efdfc7;
      color: #d9001b;
    }

    .steps-content {
      padding: 20rpx;
      border-bottom: 1px solid #d7d7d7;

      .steps-title {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
      }

      .steps-item-1 {
        ::v-deep.u-text__value--tips {
          margin: 40rpx 0;
        }
      }
    }

    .order-info-block {
      margin: 28rpx;
      border-radius: 24rpx;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
      transition: height 0.5s ease;

      // // #ifdef H5
      // height: 380rpx;
      // // #endif

      // // #ifdef APP-PLUS
      // height: 360rpx;
      // // #endif

      .order-info-hander {
        margin: 24rpx;
        font-size: 32rpx;
        border-bottom: 1px solid #f7f7f7;

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

          .order-serial-num {
            color: #333333;
          }
        }
        .rider-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 24rpx 0;
          color: #333333;

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

        .order-num {
          font-size: 24rpx;
        }

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

      .user-info-block {
        padding: 32rpx 0;
        margin: 0 24rpx;
        border-bottom: 1px solid #f7f7f7;

        .user-info {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }

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

        .distance {
          font-size: 24rpx;
        }
      }

      .picking-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        margin: 0 24rpx;
        border-bottom: 1px solid #f7f7f7;

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

        .picking-btn {
          width: 34%;
          height: 60rpx;
          font-size: 24rpx;
          border-radius: 32rpx;
          background: $base-color;
          color: #fff;
          border: none;
        }
      }

      .delivery-status-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        margin: 0 24rpx;
        border-bottom: 1px solid #f7f7f7;
        color: #333333;

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

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

      .order-remark {
        margin: 12rpx;
        padding: 12rpx;
        background: $base-color;
        color: #fff;
      }

      .commodity-info-block {
        padding: 12rpx 0;
        margin: 0 24rpx;
        border-bottom: 1px solid #f7f7f7;

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

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

          .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 0;
        margin: 0 24rpx;
        font-size: 24rpx;
        border-bottom: 1px solid #f7f7f7;
        color: #aaaaaa;
      }

      .cost-info-block {
        padding: 24rpx 0;
        margin: 0 24rpx;
        border-bottom: 1px solid #f7f7f7;
        font-size: 26rpx;

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

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

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

      .predict-income {
        margin-bottom: 40rpx;
      }

      .order-btn-block {
        padding: 24rpx;
        .btn-list {
          display: flex;
          justify-content: flex-end;
          .btn-item {
            margin: 0;
            margin-left: 24rpx;
            width: 160rpx;
            height: 60rpx;
            font-size: 24rpx;
            border-radius: 32rpx;
            background: $base-color;
            color: #fff;
            border: none;
          }
        }

        .arrow-item {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 40rpx;
          font-size: 26rpx;
          color: #cccccc;

          .time {
            color: #333333;
          }
        }

        .arrow-item-2 {
          justify-content: space-between;
        }
      }
    }

    // .order-info-oepn {
    //   // #ifdef H5
    //   height: 940px;
    //   // #endif

    //   // #ifdef APP-PLUS
    //   height: 1460rpx;
    //   // #endif
    // }

    // .order-abnormal {
    //   // #ifdef H5
    //   height: 900px;
    //   // #endif

    //   // #ifdef APP-PLUS
    //   height: 1400rpx;
    //   // #endif
    // }

    // .order-refund {
    //   // #ifdef H5
    //   height: 480rpx;
    //   // #endif

    //   // #ifdef APP-PLUS
    //   height: 460rpx;
    //   // #endif
    // }

    // .order-refund-open {
    //   // #ifdef H5
    //   height: 1150px;
    //   // #endif

    //   // #ifdef APP-PLUS
    //   height: 1850rpx;
    //   // #endif
    // }
  }

  .m-loading-box {
    text-align: center;
    margin: 40rpx;
    color: #aaaa;
    font-size: 28rpx;
  }

  .no-data {
    .no-data-bg {
      margin: auto;
      margin-bottom: 0;
      width: 480rpx;
      height: 480rpx;
      background-image: url("../../static/no-order-data.png");
      background-size: 100%;
    }
    .no-data-tips {
      margin: 20rpx auto 0;
      color: #aaaaaa;
      text-align: center;
    }
  }

  .tui-animation {
    display: inline-block;
    transform: rotate(0deg);
    transition: all 0.2s;
  }

  .tui-animation-show {
    transform: rotate(180deg);
  }

  .icon-phone-fill {
    margin-left: 10%;
  }

  .retrun-state-name {
    color: $base-color;
  }

  .return-order-popup {
    .return-order-popup-content {
      width: 600rpx;
      min-height: 600rpx;

      .title {
        margin: 36rpx;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
      }

      .radio-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 60rpx 40rpx 40rpx;

        .radio-type-name {
          font-weight: 500;
        }

        .radio-list {
          flex: 1;
          .radio-group {
            display: flex;
            align-items: center;
            justify-content: space-around;
            line-height: 40rpx;

            .radio-name {
              margin-left: 8rpx;
            }
          }
        }
      }

      .popup-textarea {
        margin: 28rpx;
        .textarea {
          border: 1px solid #eeeff3;
        }
      }

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

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

          &::after {
            border: none;
          }
        }

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