<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>
      <u-search
        class="search"
        placeholder="请输入订单号搜索"
        :showAction="false"
        bgColor="#fff"
        v-model="keyword"
        @input="searchOrder()"
      ></u-search>
      <u-icon
        @click="toServices"
        class="icon-shezhi"
        custom-prefix="custom-icon-kefu custom-icon"
        size="24"
        color="#000"
      ></u-icon>
    </view>
    <view class="tab-content">
      <tui-tabs
        :tabs="tabs"
        :currentTab="currentTab"
        backgroundColor="#f9f9f9"
        :height="88"
        color="#333"
        :size="36"
        selectedColor="#FE411B"
        sliderBgColor="#FE411B"
        :sliderHeight="4"
        :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="320"
        :currentTab="currentTab2"
        @change="handleTab2"
        backgroundColor="#f9f9f9"
        :height="60"
        :size="28"
        unlined
        :sliderWidth="166"
        :sliderHeight="64"
        sliderRadius="4rpx"
        bottom="50%"
        color="#888"
        selectedColor="#f9f9f9"
        sliderBgColor="#FE411B"
      ></tui-tabs>
      <view
        class="screen-content"
        v-show="currentTab2 == 2"
        @click="showScreenPopup = true"
      >
        <u-icon
          class="icon-shezhi"
          custom-prefix="custom-icon-a-Frame3 custom-icon"
          size="16"
          color="#fe411b"
        ></u-icon>
        筛选
      </view>
    </view>
    <!-- <view class="search-contetn" v-if="currentTab2 != 2">
      <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="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"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
      >
        <OrderItem
          v-if="
            orderInfo.order_page_list.records.length > 0 && !showOrderLoading
          "
          v-for="(item, index) of orderInfo.order_page_list.records"
          :orderItem="item"
          :orderItemIndex="index"
          :isErrorOrder="false"
          @cancelOrder="handerCancelOrder"
          @showRefundOrderInfo="handerShowRefundOrderInfo"
        ></OrderItem>
        <view
          class="no-data"
          v-if="
            orderInfo.order_page_list.records.length <= 0 &&
            isNoOnlineOrder &&
            !showOrderLoading
          "
        >
          <view class="no-data-bg"></view>
          <view class="no-data-tips">暂无交易记录!</view>
        </view>
        <view
          class="m-loading-box"
          v-if="!showOrderLoading && !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>
    <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"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
      >
        <OrderItem
          v-show="
            orderInfo.order_page_list.records.length > 0 && !showOrderLoading
          "
          v-for="(item, index) of orderInfo.order_page_list.records"
          :orderItem="item"
          :orderItemIndex="index"
          :isErrorOrder="true"
          @cancelOrder="handerCancelOrder"
          @showRefundOrderInfo="handerShowRefundOrderInfo"
        ></OrderItem>
        <view
          class="no-data"
          v-if="
            orderInfo.order_page_list.records.length <= 0 &&
            isNoOnlineOrder &&
            !showOrderLoading
          "
        >
          <view class="no-data-bg"></view>
          <view class="no-data-tips">暂无交易记录!</view>
        </view>
        <view
          class="m-loading-box"
          v-if="!showOrderLoading && !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>
    <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"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
      >
        <retrunOrderItem
          v-for="(item, index) of salesReturnOrderList"
          :orderItem="item"
          :orderItemIndex="index"
          :dashboardInfo="dashboardInfo"
          :salesReturnBtnSearchAcitve="salesReturnBtnSearchAcitve"
          @handerRefreshSalesReturnOrderList="handerRefreshSalesReturnOrderList"
        ></retrunOrderItem>
        <view
          class="no-data"
          v-if="salesReturnOrderList.length <= 0 && isNoSalesReturnOrderData"
        >
          <view class="no-data-bg"></view>
          <view class="no-data-tips">暂无交易记录!</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>

    <u-popup
      class="screen-popup"
      zIndex="10080"
      :show="showScreenPopup"
      mode="bottom"
      closeable
      @close="showScreenPopup = false"
    >
      <view class="screen-popup-content">
        <view class="screen-popup-title">筛选</view>
        <view class="sales-retrun-btn-list">
          <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="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showScreenPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerRetrunOrderScreen"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
    <tabbar tabbarName="order"></tabbar>
  </view>
</template>

<script>
import statusBar from "../../components/status-bar.vue";
import tuiTabs from "../../components/tui-tabs.vue";
import {
  GetOrderList,
  GetSalesReturnOrderList,
  GetSalesReturnOrderDetails,
  GetSalesReturnOrderNoPass,
  GetSalesReturnOrderPass,
  GetInitiativeOrderRefund,
  GetOrderPicking,
} 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";
import tuiSelect from "@/components/tui-select/tui-select.vue";

import OrderItem from "./components/OrderItem.vue";
import retrunOrderItem from "./components/retrunOrderItem.vue";
export default {
  components: {
    tuiTabs,
    statusBar,
    favoriteLoading,
    tuiDropdownList,
    tabbar,
    tuiGallery,
    tuiRadio,
    tuiRadioGroup,
    tuiSelect,
    OrderItem,
    retrunOrderItem,
  },
  data() {
    return {
      showDropdown: false,
      currentTab: 0,
      currentTab2: 0,
      keyword: "",
      pageNum: 1,
      pageSize: 10,
      width: uni.upx2px(204),
      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: "",
      currOrderItem: {
        order_items: [],
      },
      isCancelOrder: false,
      showCancelOrderPopup: false,
      showPartOrderRefundPopup: false,
      form: {
        reason: "",
      },
      rules: {
        reason: [
          {
            required: true,
            message: "请输入取消订单原因",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
      commodityCheckBoxList: [],
      refreshInterval: null, // 全局定时器
      showOrderPickingPopup: false,
      isRefreshing: false,
      showScreenPopup: false,
    };
  },
  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.keyword = "";
    this.getOrderList();
  },
  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;
      }

      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.progress_count +
            this.orderInfo.order_count.same_city_order.overtime_count +
            this.orderInfo.order_count.same_city_order.refund_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;
          this.isRefreshing = false;
          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;
              item.sf_order_info = {
                sf_order_id: "",
                operator_name: "",
                operator_phone: "",
                rider_lng: "",
                rider_lat: "",
                order_status: "",
                status_desc: "",
                cancel_code: "",
                cancel_reason: "",
                push_time: "",
                h5_url: "",
                feed: [],
                ...item.sf_order_info,
              };
            }
            return item;
          });
      }

      this.showOrderLoading = false;
      this.loadingDownOnlinData = false;
      this.isRefreshing = false;
      // uni.stopPullDownRefresh();
    },
    handleRefresh() {
      this.isRefreshing = true;

      this.pageNum = 1;
      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();
      }
    },
    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")}`;
    },
    handelSalesReturnSearch(item) {
      if (item.value == this.salesReturnBtnSearchAcitve) return;

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

      console.log(this.keyword);

      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        order_id: this.keyword,
        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;
          this.isRefreshing = false;
          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;
      this.isRefreshing = 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);
      }
    },

    handerShowRefundOrderInfo(showRefundOrderInfo, index) {
      if (this.currentTab2 == 2) {
        this.$set(this.salesReturnOrderList, index, {
          ...this.salesReturnOrderList[index],
          showRefundOrderInfo: showRefundOrderInfo,
        });
      } else {
        this.$set(this.orderInfo.order_page_list.records, index, {
          ...this.orderInfo.order_page_list.records[index],
          showRefundOrderInfo: 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;
    },

    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.keyword = "";
      this.isNoOnlineOrder = false;
      this.getOrderList();
    },
    handleTab2(e) {
      this.currentTab2 = e.index;

      this.pageNum = 1;
      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.keyword = "";

      setTimeout(() => {
        if (this.currentTab2 == 2) {
          this.getSalesReturnOrderList();
        } else {
          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;
    },
    handerCancelOrder() {
      this.pageNum = 1;
      this.getOrderList();
    },
    handerShowCancelOrder(item) {
      this.currOrderItem = JSON.parse(JSON.stringify(item));
      this.showCancelOrderPopup = true;
      this.isCancelOrder = true;
    },
    handerShowPartOrderRefund(item) {
      let _item = JSON.parse(JSON.stringify(item));

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

      this.currOrderItem = _item;

      this.showPartOrderRefundPopup = true;
      this.isCancelOrder = false;
    },
    handerRefreshSalesReturnOrderList() {
      this.getSalesReturnOrderList();
    },

    handerRetrunOrderScreen() {
      this.pageNum = 1;
      this.loadingDownSalesReturnData = false;
      this.isNoSalesReturnOrderData = false;
      this.isDownNoSalesReturnData = false;
      this.getSalesReturnOrderList(this.salesReturnBtnSearchAcitve);
      this.showScreenPopup = false;
    },
    async getOrderPicking(item) {
      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;
    },
    toServices() {
      let item = {
        user_friend_id: 36,
        user_id: 10001,
        friend_id: 10001,
        friend_note: "",
        user_friend_addtime: "2025-05-09 10:03:33",
        friend_state: 2,
        friend_invite: 2,
        username: "系统客服",
        avatar:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
        sign: "",
        level_name: "v1",
        user_nickname: "系统客服",
        user_avatar:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
        user_sign: "",
        user_level_name: "v1",
        rid: 2,
        id: 776395489,
      };

      uni.navigateTo({
        url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
      });
    },
  },
};
</script>

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

    .shop-logo-img {
      width: 64rpx;
      height: 64rpx;
      background-image: url("../../static/logo.jpg");
      background-size: 100% 100%;
      border-radius: 50%;
    }

    .search {
      margin: 0 44rpx !important;

      ::v-deep.u-search__content {
        height: 38px !important;
      }

      ::v-deep.u-search__content__input {
        font-size: 12px;
      }
    }

    .shop-name {
      margin-left: 20rpx;
      font-weight: bold;
      background: #fff;
    }
  }

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

  .tab-content {
    padding: 0 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1px solid #eeeeee;
    // ::v-deep .tui-tabs-title {
    //   font-size: 36rpx !important;
    // }
    ::v-deep .tui-tabs__badge {
      line-height: 32rpx;
    }
  }

  .tab2-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx 0;

    ::v-deep .tui-tabs-slider {
      background: #ffecf2 !important;
      // border: 2rpx solid #fe411b;
      bottom: 48% !important;
    }

    ::v-deep.tabs-2 {
      left: -10px;
    }

    ::v-deep .tui-tabs-item {
      margin: 0 10rpx;
      height: 32px !important;
      line-height: 32px !important;
      background: #fff;

      .tui-tabs-title {
        color: rgba(34, 34, 34, 1) !important;
      }
      &.tui__tab_current {
        .tui-tabs-title {
          color: #fe411b !important;
        }
      }
    }

    .screen-content {
      display: flex;
      flex-flow: column;
      align-items: center;
      font-size: 24rpx;
      text-align: center;
      margin-right: 32rpx;
      color: $base-color;
    }
  }

  .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: $base-color;

      &::after {
        border: 1px solid $base-color;
      }
    }
  }

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

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

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

    .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;
  }

  .screen-popup {
    .screen-popup-content {
      width: 100%;

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

      .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;
        }
      }
    }
  }

  .no-data {
    .no-data-bg {
      margin: 23% 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;
    }
  }

  .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 {
        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;
      }
    }
  }

  .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;
  }
}
</style>
