<template>
  <view class="flex-column-start order-list-container">
    <tabs-list :list="tabsList" :isScroll="true" :currentIndex="curTabIndex" @change="onTabChange" />

    <view class="order-list-content">
      <scroll-view class="list-template-wrapper" :scroll-y="!disableScroll" :refresher-enabled="true"
        :refresher-triggered="refreshTriggered" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
        <view class="list-content">
          <view v-for="(data, index) in list" :key="data.order_id" :class="{ left: index % 2 === 0 }"
            class="flex-column-start news-item">
            <order-item :data="data" @disableScroll="disableScrollAction" @cancelOrder="cancelOrderAction"
              @refund="refundAction" @concactService="jumpToWeChat" @confirmSliver="confirmSliver" @remindSilver="remindSliver" @pay="pay"
              @afterSale="afterSale" @checkSliver="checkSliver" @remark="remark" @remarkDetails="remarkDetails"
              @jumpToDetails="jumpToDetails" />
          </view>
          <uni-load-more v-if="isLoading || (!isLoading && total && total === list.length)"
            :status="isLoading ? 'loading' : 'nomore'"></uni-load-more>
        </view>
      </scroll-view>
      <!-- <list-page-temp
        :getDataPromise="getShopOrderList"
        :requestData="{ status: tabsList[curTabIndex].id }"
        :reloadFlag="reloadFlag"
        :disableScroll="disableScroll"
      >
        <template v-slot:item="{ data }">
          <order-item
            :data="data"
            @disableScroll="disableScrollAction"
            @cancelOrder="cancelOrderAction"
            @concactService="showConcact = true"
            @confirmSliver="confirmSliver"
            @remindSilver="remindSliver"
            @pay="pay"
            @afterSale="afterSale"
            @checkSliver="checkSliver"
            @remark="remark"
            @remarkDetails="remarkDetails"
          />
        </template>
</list-page-temp> -->
      <view v-if="elasticLayer" class="elastic-layer" />
    </view>

    <!-- 可拖动联系客服组件 -->
    <DraggableContact ref="draggableContact" :onClick="handleContactBtnClick" />

    <view class="additional-bottom" v-if="additionalBom">
      <view class="recharge-method">
        <view class="method-header">
          <text class="payment-title">支付方式</text>
          <image src="@/static/images/close.png" mode="aspectFit" class="close-icon"
            @click="(additionalBom = false), (elasticLayer = false)" />
        </view>
        <view class="wechat" @click.stop="selectOption1('1')">
          <view class="select">
            <image class="w" src="@/static/images/douy.png" mode="widthFix" />
            <text class="x">抖音</text>
          </view>
          <image v-if="selected1" class="not-selected" src="@/static/images/w.png" mode="widthFix" />
          <image v-if="selected2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
        </view>
        <view class="wechat" @click.stop="selectOption2('2')">
          <view class="select">
            <image class="w" src="@/static/images/wallet.png" mode="widthFix" />
            <text class="x">钱包支付</text>
          </view>
          <image v-if="selected3" class="not-selected" src="@/static/images/w.png" mode="widthFix" />
          <image v-if="selected4" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
        </view>
      </view>
      <view class="payment" @click="rechargeNow">
        <text class="Z"> 支付 </text>
      </view>
    </view>

    <pop-up-modal v-if="showCancelModal" :content="cancelModalContent" @confirm="orderCancel"
      @cancel="showCancelModal = false" />

<contact-modal v-if="showConcact" @close="showConcact = false" />
    <WeChatCopyModal ref="wechatCopyModal" />

    <pop-up-modal v-if="showSliverModal" content="是否要确认收货？" @confirm="confirmReceiveOrder"
      @cancel="showSliverModal = false" />

    <success-modal v-if="showRemindSliver" title="提醒成功" message="已通知商家，请耐心等待商家发货" @close="showRemindSliver = false"
      @ok="showRemindSliver = false" />

    <sliver-info v-if="showSliverRouteModal" :orderId="orderInfo.order_id" :orderInfo="orderInfo"
      @close="showSliverRouteModal = false" />
  </view>
</template>

<script>
import TabsList from "@/components/TabsList.vue";
import ListPageTemp from "./components/ListPageTemp.vue";
import OrderItem from "./components/OrderItem.vue";
import PopUpModal from "@/components/PopUpModal.vue";
import SuccessModal from "@/components/SuccessModal.vue";
import ContactModal from "@/components/ContactModal.vue";
import SliverInfo from "./components/SliverInfo.vue";
import WeChatCopyModal from "@/components/WeChatCopyModal.vue";
import DraggableContact from "@/components/DraggableContact.vue";
import { walletTransaction, cancelPetOrderRefund, cancelPetOrderMall } from "../../../api/login";


import {
  payOrder,
  remindOrder,
  getShopOrderList,
  cancelOrder,
  confirmOrder,
} from "@/api/shop";
import {
  SHOP_ORDER_UNPAY,
  SHOP_ORDER_UNSLIVER,
  SHOP_ORDER_UNRECEIVE,
  SHOP_ORDER_DONE,
  SHOP_ORDER_CANCEL,
  SHOP_ORDER_UNREMARK,
} from "@/constants/app.business";
import { jumpToWeChat, imgPrefix } from "@/utils/common";

export default {
  components: {
    TabsList,
    ListPageTemp,
    OrderItem,
    PopUpModal,
    ContactModal,
    SuccessModal,
    SliverInfo,
    WeChatCopyModal,
    DraggableContact,
  },
  data() {
    return {
      selected1: true,
      selected2: false,
      selected3: true,
      selected4: false,
      recharge: true,
      record: false,
      WeChat: "",
      wallet: "",
      curTabIndex: 0,
      reloadFlag: 0,
      additionalBom: false,
      elasticLayer: false,
      disableScroll: false,
      showCancelModal: false,
      cancelModalContent: "确定要取消该订单吗？",
      showConcact: false,
      showRemindSliver: false,
      showSliverModal: false,
      showSliverRouteModal: false,
      orderInfo: {},
      isLoading: false,
      total: 0,
      list: [],
      refreshTriggered: false,
      p: 1,
      num: 10,
      imgPrefix,
    };
  },
  computed: {
    tabsList() {
      return [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "待支付",
          id: SHOP_ORDER_UNPAY,
        },
        {
          name: "待预约",
          id: SHOP_ORDER_UNSLIVER,
        },
        // {
        //   name: "待收货",
        //   id: SHOP_ORDER_UNRECEIVE,
        // },
        // {
        //   name: "待评价",
        //   id: SHOP_ORDER_UNREMARK,
        // },
        {
          name: "已取消",
          id: SHOP_ORDER_CANCEL,
        },
      ];
    },
  },
  options: {
    styleIsolation: "shared",
  },
  onLoad() {
    this.reloadData();
  },
  methods: {
    jumpToWeChat,
    getShopOrderList,
    getList() {
      this.isLoading = true;
      getShopOrderList({ status: this.tabsList[this.curTabIndex].id })
        .then((res) => {
          const list = res?.data || [];
          this.list = this.p === 1 ? list : [...this.list, data];
          this.total = res?.count || 0;
        })
        .finally(() => {
          this.isLoading = false;
          this.refreshTriggered = false;
          uni.stopPullDownRefresh();
        });
    },
    reloadData() {
      this.page = 1;
      this.total = 0;
      this.getList();
    },
    onTabChange(item, index) {
      this.curTabIndex = index;
      this.reloadData();
    },
    disableScrollAction(val) {
      this.disableScroll = val;
    },
    onRefresh() {
      if (this.refreshTriggered) return;
      this.refreshTriggered = true;
      this.p = 1;
      this.num = 10;
      this.total = 0;
      this.getList();
    },
    onLoadMore() {
      if (!this.isLoading && this.total > this.list.length) {
        this.p++;
        this.getList();
      }
    },
    orderCancel() {
      uni.showLoading({
        icon: "none",
        title: "处理中",
        mask: true,
      });
      const data = {
        order_id: this.orderInfo.order_id,
        // business_type:1
      }
      cancelPetOrderMall(data).then((res) => {
        uni.hideLoading();
        this.showCancelModal = false;
        this.reloadData();
      });
    },
    // 确认收货
    confirmSliver(data) {
      this.showSliverModal = true;
      this.orderInfo = data;
    },
    // 确认收货
    confirmReceiveOrder() {
      uni.showLoading({
        icon: "none",
        title: "处理中",
        mask: true,
      });
      confirmOrder(this.orderInfo.order_id).then((res) => {
        uni.hideLoading();
        this.reloadData();
        this.showSliverModal = false;
      });
    },
    selectOption1(v) {
      this.WeChat = v;
      this.wallet = "";
      console.log(this.WeChat);
      this.selected1 = false;
      this.selected2 = true;
      this.selected3 = true;
      this.selected4 = false;
    },
    selectOption2(v) {
      this.WeChat = "";
      this.wallet = v;
      console.log(this.wallet);
      this.selected1 = true;
      this.selected2 = false;
      this.selected3 = false;
      this.selected4 = true;
    },
    // 支付
    pay(data) {
       uni.showLoading({
          icon: "none",
          title: "支付中",
          mask: true,
        });
        payOrder({
          type: 4,
          total_fee: Number(data.actual_price),
          order_id: data.order_id,
          order_no: data.order_no
        }).then((res) => {
          tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
            success: (res) => {
              uni.hideLoading();
              uni.showToast({
                title: "支付成功",
                icon: "none",
              });
              this.additionalBom = false,
                this.elasticLayer = false,
                this.reloadData();
            },
            fail: (err) => {
              uni.hideLoading();
              uni.showToast({
                title: err?.msg || "支付失败",
                icon: "none",
              });
            },
          });
        });

      // this.additionalBom = true;
      // this.elasticLayer = true;
      
    },
    async rechargeNow() {
      //  console.log(this.wallet, "???");
      if (!this.WeChat && !this.wallet) {
        uni.showToast({
          title: "请选择充值方式",
          icon: "none",
        });
        return;
      }
      if (this.WeChat == 1) {
        uni.showLoading({
          icon: "none",
          title: "支付中",
          mask: true,
        });
        payOrder({
          type: 4,
          total_fee: Number(this.dataList.actual_price),
          order_id: this.dataList.order_id,
          order_no: this.dataList.order_no
        }).then((res) => {
          tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
            success: (res) => {
              uni.hideLoading();
              uni.showToast({
                title: "支付成功",
                icon: "none",
              });
              this.additionalBom = false,
                this.elasticLayer = false,
                this.reloadData();
            },
            fail: (err) => {
              uni.hideLoading();
              uni.showToast({
                title: err?.msg || "支付失败",
                icon: "none",
              });
            },
          });
        });
      } else if (this.wallet == 2) {
        const value = (this.$store.state && this.$store.state.user && this.$store.state.user.userInfo) || {};
        //  console.log(data, "???");
        //  console.log(this.selectService,'---')
        const data = {
          wallet_id: value.wallet_id,
          total_fee: this.dataList.actual_price,
          type: 4,
          order_id: this.dataList.order_id,
          order_no: this.dataList.order_no
          // business_type: 2,
          // wallet_id: value.wallet_id,
          // user_id: value.user_id,
          // amount: Number(this.dataList.pay_price),
          // business_id: this.dataList.order_id,
        };
        walletTransaction(data).then((res) => {
          if (res.code == 0) {
            uni.showToast({
              title: "支付成功",
              icon: "none",
            });
            this.additionalBom = false,
              this.elasticLayer = false,
              uni.hideLoading();
            this.reloadData();
          } else if (res.code == 100) {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
      }
      // if (!this.giftLabel) {
      //   uni.showToast({
      //     title: "请选择充值金额",
      //     icon: "none",
      //   });
      //   return;
      // }
    },
    // 提醒发货
    remindSliver(data) {
      this.showRemindSliver = true;
      // remindOrder(data.order_id).then(() => {
      //   this.showRemindSliver = true;
      // });
    },
    // 申请售后
    afterSale() {
      this.jumpToWeChat();
    },
    // afterSale(data) {
    //   uni.navigateTo({
    //     url: `/pages/client/order/refund?orderId=${data.order_id}`,
    //     events: {
    //       refreshData: () => this.reloadData(),
    //     },
    //   });
    // },
    // 订单详情
    jumpToDetails(data) {
      uni.navigateTo({
        url: `/pages/client/order/details?id=${data?.order_id}`,
        events: {
          refreshData: () => this.reloadData(),
        },
      });
    },
    // 查看物流
    checkSliver(data) {
      this.showSliverRouteModal = true;
      this.orderInfo = data;
    },
    // 立即评价
    remark(data) {
      uni.navigateTo({
        url: `/pages/client/order/remark?orderId=${data.order_id}`,
        events: {
          refreshData: () => this.reloadData(),
        },
      });
    },
    // 查看评价
    remarkDetails(data) {
      if (!data.pinglun_id) {
        uni.showToast({
          title: "暂无评价",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/client/remark/details?remarkId=${data.pinglun_id}`,
      });
    },
    // 取消订单
    cancelOrderAction(data) {
      this.showCancelModal = true;
      this.cancelModalContent = "确定要取消该订单吗？";
      this.orderInfo = data;
    },
    // 退款
    refundAction(data) {
      this.showCancelModal = true;
      this.cancelModalContent = "确定要退款吗？";
      this.orderInfo = data;
    },
// 联系客服按钮点击 - 使用自定义弹窗（与首页在线客服功能一致）
    handleContactBtnClick() {
      console.log('[list.vue] handleContactBtnClick called')
      console.log('[list.vue] wechatCopyModal ref:', this.$refs.wechatCopyModal)
      if (this.$refs.wechatCopyModal) {
        this.$refs.wechatCopyModal.show({
          title: '请添加客服号',
          weChatCode: 'Wagoo2025'
        });
        console.log('[list.vue] wechatCopyModal.show called')
      } else {
        console.error('[list.vue] wechatCopyModal ref is null')
        // 降级方案：直接显示系统弹窗
        uni.showModal({
          title: '提示',
          content: '请添加客服号：Wagoo2025',
          confirmText: '复制微信号',
          showCancel: true,
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              uni.setClipboardData({
                data: 'Wagoo2025',
                success: () => {
                  uni.showToast({
                    title: '已复制微信号',
                    icon: 'success'
                  })
                }
              })
            }
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order-list-container {
  height: 100%;
  align-items: stretch;
  justify-content: flex-start;

  .elastic-layer {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 999;
  }

  .additional-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .recharge-method {
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: 40rpx 0 30rpx;
      border-radius: 30rpx;
      width: 100%;
      box-sizing: border-box;

      .method-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;
        position: relative;
        padding: 0 30rpx;
        box-sizing: border-box;
      }

      .payment-title {
        font-family: PingFangSC;
        font-size: 32rpx;
        font-weight: 500;
        color: #272427;
        text-align: center;
        flex: 1;
      }

      .close-icon {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .wechat {
        width: 100%;
        height: 116rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 60rpx;
        box-sizing: border-box;

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

          .w {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }

          .x {
            font-size: 32rpx;
            color: #272427;
          }
        }

        .not-selected {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .payment {
      position: relative;
      border-radius: 100rpx;
      margin: auto;
      width: calc(100% - 60rpx);
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx solid #FF19A0;
      background: #FF19A0;
      box-sizing: border-box;

      .Z {
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: normal;
        color: #fff;
      }
    }
  }

  .order-list-content {
    flex: 1;
    overflow: hidden;
    background: #f7f8fa;


    .list-template-wrapper {
      height: 100%;
      width: 100%;

      .list-content {
        width: 100%;
      }

      .news-item {
        width: 100%;
      }
    }
  }

/* 可拖动联系客服组件无需额外样式 */
}
</style>
