<template>
  <view :class="{ 'no-scroll': isPopupOpen }" class="order-page">
    <!-- 顶部标签栏 -->
    
    <view class="search-bar">
      <uni-easyinput
        v-model="queryParams.wfCode"
        :input-border="false"
        class="search-input"
        placeholder="搜索缴费编号"
        placeholderStyle="font-size:30rpx;color:#999"
        prefixIcon="search"
        @blur="handelSearch"
        @clear="handelSearch">
      </uni-easyinput>
      <view class="add-btn" @click="handelSearch">
        <text class="add-text">搜索</text>
      </view>
    </view>
    
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === tab.type }"
        class="tab-item"
        @click="switchTab(tab.type)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 订单列表 -->
    <scroll-view
      :scroll-enabled="!isPopupOpen"
      :show-scrollbar="false"
      class="order-list-scroll"
      lower-threshold="200"
      scroll-y
      @scrolltolower="loadMore"
    >
      <view class="order-list">
        <!-- 有数据才循环 -->
        <!--        <view v-if="list.length > 0">-->
        <!--          <view-->
        <!--            v-for="(item, index) in list"-->
        <!--            :key="index"-->
        <!--            class="order-card"-->
        <!--            @click="goToDetail(item)"-->
        <!--          >-->
        <!--            &lt;!&ndash; 订单头部：日期 + 状态 &ndash;&gt;-->
        <!--            <view class="card-header">-->
        <!--              <view class="date">-->
        <!--                &lt;!&ndash; <image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'"  mode="widthFix" style="width:30rpx;height:30rpx;"/> &ndash;&gt;-->
        <!--                &lt;!&ndash; &ndash;&gt;-->
        <!--                <text class="value text-primary">{{ item.wfCode || '——' }}</text>-->
        <!--              </view>-->
        <!--              <view class="status-tags">-->
        <!--                &lt;!&ndash; <view-->
        <!--                  class="status-tag"-->
        <!--                  :class="{-->
        <!--                    success: item.payStatus == 1,-->
        <!--                    danger: item.payStatus == 2,-->
        <!--                    pending: item.payStatus == 0-->
        <!--                  }"-->
        <!--                >-->
        <!--                  {{ getStatusText(item.payStatus) }}-->
        <!--                </view> &ndash;&gt;-->
        <!--                <view-->
        <!--                  :class="{-->
        <!--                    'status-wait': item.auditStatus == 0,-->
        <!--                    'status-pending': item.auditStatus == 1,-->
        <!--                    'status-success': item.auditStatus == 2,-->
        <!--                    'status-danger': item.auditStatus == 3-->
        <!--                  }"-->
        <!--                  class="status-tag ml-10"-->
        <!--                >-->
        <!--                  {{ getAuditStatusText(item.auditStatus) }}-->
        <!--                </view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--            -->
        <!--            &lt;!&ndash; 订单编号、缴费编号 &ndash;&gt;-->
        <!--            <view class="info-row">-->
        <!--              <text class="label">订单编号：</text>-->
        <!--              <text class="value">{{ item.tradeNo || '——' }}</text>-->
        <!--            </view>-->
        <!--            <view v-if="item.orderName" class="info-row">-->
        <!--              <text class="label">缴费名称：</text>-->
        <!--              <text class="value">{{ item.orderName || '' }}</text>-->
        <!--            </view>-->
        <!--            &lt;!&ndash; <view class="info-row">-->
        <!--              <text class="label">缴费编号：</text>-->
        <!--             -->
        <!--            </view> &ndash;&gt;-->
        <!--            -->
        <!--            &lt;!&ndash; 核心：前2tab仅展示缴费年限，后2tab仅展示人数合计 &ndash;&gt;-->
        <!--            <view v-if="item.content" class="info-section flex f-j-s">-->
        <!--              &lt;!&ndash; 个人/单位会员（仅缴费年限） &ndash;&gt;-->
        <!--              <view v-if="currentTab === '0' || currentTab === '1'" class="single-info">-->
        <!--                <view class="label">缴费年限：</view>-->
        <!--                <view class="value">{{ item.content.yearCount || 0 }}</view>-->
        <!--              </view>-->
        <!--              &lt;!&ndash; 级位/段位考试（仅人数合计） &ndash;&gt;-->
        <!--              <view v-if="currentTab === '2' || currentTab === '3' || currentTab === '4'" class="single-info">-->
        <!--                <view class="label">人数合计</view>-->
        <!--                <view class="value">{{ item.content.personCount || 0 }}</view>-->
        <!--              </view>-->
        <!--              <view class="line"></view>-->
        <!--              <view class="single-info">-->
        <!--                <view class="label">订单状态</view>-->
        <!--                <view :class="item.effect == 1 ? 'text-success' : 'text-warning'" class="value">-->
        <!--                  {{ item.effect == 1 ? '已生效' : '未生效' }}-->
        <!--                </view>-->
        <!--              </view>-->
        <!--              <view class="line"></view>-->
        <!--              <view class="single-info">-->
        <!--                <view class="label">缴费状态</view>-->
        <!--                <view-->
        <!--                  :class="{-->
        <!--                    'text-primary': item.payStatus == 0,-->
        <!--                    'text-success': item.payStatus == 1,-->
        <!--                    'text-danger': item.payStatus == 2-->
        <!--                  }"-->
        <!--                  class="value"-->
        <!--                >-->
        <!--                  {{ item.payStatus == 0 ? '待缴费' : item.payStatus == 1 ? '缴费成功' : '订单取消' }}-->
        <!--                </view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--            -->
        <!--            &lt;!&ndash; 费用合计 + 缴费方式 &ndash;&gt;-->
        <!--            <view class="price-section">-->
        <!--              <view class="price-row">-->
        <!--                <text class="price-label">费用合计</text>-->
        <!--                <text class="price-value">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>-->
        <!--              </view>-->
        <!--              <view class="price-row">-->
        <!--                <text class="price-label">缴费方式</text>-->
        <!--                <text class="price-value">{{ item.ziZhangBu ? '对公转账' : '民生付' }}</text>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--            -->
        <!--            &lt;!&ndash; 按钮组：靠右紧凑展示 &ndash;&gt;-->
        <!--            <view class="btn-group">-->
        <!--              &lt;!&ndash; 已缴费：申请开票/已开票（需要审核通过才能开票） &ndash;&gt;-->
        <!--              <template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">-->
        <!--                <button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice" @click="makeInvoiceFN(item)">-->
        <!--                  开票-->
        <!--                </button>-->
        <!--              </template>-->
        <!--              &lt;!&ndash; 已开票：查看发票 &ndash;&gt;-->
        <!--              <template v-if="item.invoiceStatus == 1">-->
        <!--                <button class="btn btn-invoice" @click.stop="viewInvoice(item)">查看发票</button>-->
        <!--              </template>-->
        <!--              &lt;!&ndash; 未缴费：去缴费 + 取消订单 &ndash;&gt;-->
        <!--              &lt;!&ndash; <template v-if="item.payStatus == 0">-->
        <!--                <button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>-->
        <!--                <button class="btn btn-pay" @click="handlePay(item)">去缴费</button>-->
        <!--              </template> &ndash;&gt;-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->
        
        <!-- 有数据才循环 -->
        <view v-if="list.length > 0">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="order-card-new"
            @click="goToDetail(item)"
          >
            <!-- 订单头部：日期 + 状态 -->
            <view class="card-header">
              <view class="date">
                <view class="data-header">
                  <text class="member-label">{{ tabs.find(t => t.type === currentTab)?.label }}·</text>
                  <text class="value ">{{ item.orderName || '——' }}</text>
                </view>
                <text :class="{
                    'status-wait': item.auditStatus == 0,
                    'status-pending': item.auditStatus == 1,
                    'status-success': item.auditStatus == 2,
                    'status-danger': item.auditStatus == 3
                  }"
                      class="status-tag ">{{ getAuditStatusText(item.auditStatus) }}
                </text>
              </view>
            </view>
            <view class="card-header">
              <view class="date">
                <view class="data-header">
                  <text class="value">
                    <text class="tradeNo">订单编号：</text>
                    {{ item.tradeNo || '——' }}
                  </text>
                </view>
              </view>
            </view>
            <view class="card-header">
              <view class="date">
                <view class="data-header">
                  <text class="value">
                    <text class="tradeNo">缴费编号：</text>
                    {{ item.wfCode || '——' }}
                  </text>
                </view>
              </view>
            </view>
            <view class="member-time">
              <view class="label">
                <text class="star">★</text>
                {{ `${filterTime(item.genTime)}${filterType(item.type)}` }}
              </view>
              <view class="price">
                <view>￥{{ item.price || '0.00' }}</view>
                <view v-if="item.type==0" class="person">共{{ item.content?.allPersonCount || 0 }}人</view>
                <view v-if="item.type==1" class="person">共{{ item.content?.yearCount || 0 }}年</view>
                <view v-if="item.type==2||item.type==3||item.type==4" class="person">共{{
                    item.content?.personCount || 0
                  }}人
                </view>
              </view>
            </view>
            
            <!-- 核心：前2tab仅展示缴费年限，后2tab仅展示人数合计 -->
            <view v-if="item.content" class="info-section flex f-j-s">
              <!-- 个人/单位会员（仅缴费年限） -->
              <view v-if="currentTab === '0' || currentTab === '1'" class="single-info">
                <view class="label">缴费年限：</view>
                <view class="value">{{ item.content.yearCount || 0 }}</view>
              </view>
              <!-- 级位/段位考试（仅人数合计） -->
              <view v-if="currentTab === '2' || currentTab === '3' || currentTab === '4'" class="single-info">
                <view class="label">人数合计</view>
                <view class="value">{{ item.content.personCount || 0 }}</view>
              </view>
              <view class="line"></view>
              <view class="single-info">
                <view class="label">订单状态</view>
                <view :class="item.effect == 1 ? 'text-success' : 'text-warning'" class="value">
                  {{ item.effect == 1 ? '已生效' : '未生效' }}
                </view>
              </view>
              <view class="line"></view>
              <view class="single-info">
                <view class="label">缴费状态</view>
                <view
                  :class="{
                    'text-primary': item.payStatus == 0,
                    'text-success': item.payStatus == 1,
                    'text-danger': item.payStatus == 2
                  }"
                  class="value"
                >
                  {{ item.payStatus == 0 ? '待缴费' : item.payStatus == 1 ? '缴费成功' : '订单取消' }}
                </view>
              </view>
            </view>
            
            <!-- 按钮组：靠右紧凑展示 -->
            <view class="btn-group">
              <view>
                <text class="more" @click.stop="goToDetail(item)">更多</text>
              </view>
              <view class="btn-flex">
                <!-- 已缴费：申请开票/已开票（需要审核通过才能开票） -->
                <template>
                  <button class="btn btn-info" @click.stop="goToDetail(item)">查看明细</button>
                </template>
                <!-- 已缴费：申请开票/已开票（需要审核通过才能开票） -->
                <template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">
                  <button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice"
                          @click.stop="makeInvoiceFN(item)">
                    开票
                  </button>
                </template>
                <!-- 已开票：查看发票 -->
                <template v-if="item.invoiceStatus == 1">
                  <button class="btn btn-invoice" @click.stop="viewInvoice(item)">查看发票</button>
                </template>
                <!-- 未缴费：去缴费 + 取消订单 -->
                <!-- <template v-if="item.payStatus == 0">
                  <button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>
                  <button class="btn btn-pay" @click="handlePay(item)">去缴费</button>
                </template> -->
              </view>
            
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-else class="empty">
          <image :src="config.baseUrl_api + '/fs/static/nodata.png'" class="empty-img" mode="aspectFit"></image>
          <text class="empty-text">暂无订单记录</text>
        </view>
        
        <!-- 加载/无更多提示 -->
        <view v-if="loading" class="loading-tip">加载中...</view>
        <view v-if="!loading && !hasMore && list.length" class="no-more">没有更多了</view>
      </view>
    </scroll-view>
    
    <!-- 发票信息弹窗（级位/段位/越段考试） -->
    <view v-if="showInvoicePopup" class="invoice-popup-mask" @click="closeInvoicePopup">
      <view class="invoice-popup-content" @click.stop>
        <view class="invoice-popup-header">
          <text class="invoice-popup-title">发票信息</text>
          <view class="invoice-popup-close" @click="closeInvoicePopup">✕</view>
        </view>
        <view class="invoice-popup-body">
          <view class="invoice-info-list">
            <view class="invoice-info-row">
              <view class="invoice-info-label">发票类型</view>
              <view :class="{ 'vat-type': invoiceData.invoiceType == 2 }" class="invoice-type-badge">
                {{ invoiceData.invoiceType == 1 ? '普通发票' : '增值税专用发票' }}
              </view>
            </view>
            <view class="invoice-info-row">
              <text class="invoice-info-label">发票抬头</text>
              <text class="invoice-info-value">{{ invoiceData.invoiceBuyerName || '—' }}</text>
            </view>
            <view v-if="invoiceData.invoiceBuyerTaxno" class="invoice-info-row">
              <text class="invoice-info-label">纳税人识别号</text>
              <text class="invoice-info-value">{{ invoiceData.invoiceBuyerTaxno }}</text>
            </view>
            <view class="invoice-info-row">
              <text class="invoice-info-label">接收邮箱</text>
              <text class="invoice-info-value">{{ invoiceData.invoicePushPhone || '—' }}</text>
            </view>
            <view class="invoice-info-row">
              <text class="invoice-info-label">开票时间</text>
              <text class="invoice-info-value">{{ invoiceData.invoiceTime || '—' }}</text>
            </view>
            <view class="invoice-info-row">
              <text class="invoice-info-label">开票金额</text>
              <text class="invoice-info-value">￥{{ invoiceData.price || '—' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 发票Webview弹窗（个人/单位会员） -->
    <view v-if="showInvoiceWebview" class="invoice-popup-mask" @click="closeInvoiceWebview">
      <view class="invoice-webview-content" @click.stop>
        <view class="invoice-popup-header">
          <text class="invoice-popup-title">发票</text>
          <view class="invoice-popup-close" @click="closeInvoiceWebview">✕</view>
        </view>
        <view class="invoice-webview-body">
          <web-view :src="invoiceWebviewUrl"></web-view>
        </view>
      </view>
    </view>
    
    <!-- 自定义删除确认弹窗 -->
    <view v-if="showDelPopup" class="popup-mask" @touchmove.stop.prevent @click.stop="closeDelPopup">
      <view class="custom-modal" @click.stop>
        <view class="modal-title">提示</view>
        <view class="modal-content">{{ delModalContent }}</view>
        <view class="modal-btns">
          <button class="modal-btn-cancel" @click="closeDelPopup">取消</button>
          <button class="modal-btn-confirm" @click="confirmDel">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 自定义取消订单确认弹窗 -->
    <view v-if="showCancelPopup" class="popup-mask" @touchmove.stop.prevent @click.stop="closeCancelPopup">
      <view class="custom-modal" @click.stop>
        <view class="modal-title">提示</view>
        <view class="modal-content">{{ cancelModalContent }}</view>
        <view class="modal-btns">
          <button class="modal-btn-cancel" @click="closeCancelPopup">取消</button>
          <button class="modal-btn-confirm" @click="confirmCancel">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, reactive, onMounted, computed} from 'vue';
import {
  onShow,
  onLoad
} from '@dcloudio/uni-app'
import * as api from '@/common/api.js'
import config from '@/config.js'
import dayjs from 'dayjs'
// 获取deptType值（初始值为0，在onMounted中设置实际值）
const deptType = ref(0);


// 标签栏配置（根据deptType动态生成）
const tabs = computed(() => {
  const dt = Number(deptType.value)
  console.log('tabs computed, deptType:', deptType.value, 'dt:', dt, 'dt===6:', dt === 6, 'dt==6:', dt == 6);
  
  if (dt === 6) {
    console.log('返回3个tab: 个人会员、单位会员、级位考试');
    return [
      {name: '个人会员', type: '0', label: "会员"},
      {name: '单位会员', type: '1', label: "单位"},
      {name: '级位考试', type: '2', label: "级位"}
    ];
  } else if (dt === 2) {
    console.log('返回3个tab: 单位会员、段位考试、越段考试');
    return [
      // {name: '单位会员', type: '1'},
      {name: '段位考试', type: '3', label: "段位"},
      {name: '越段考试', type: '4', label: "越段"}
    ];
  } else if (dt === 1) {
    console.log('返回默认5个tab, dt值为:', dt);
    return [
      {name: '个人会员', type: '0', label: "会员"},
      {name: '单位会员', type: '1', label: "单位"},
      {name: '级位考试', type: '2', label: "级位"},
      {name: '段位考试', type: '3', label: "段位"},
      {name: '越段考试', type: '4', label: "越段"}
    ];
  } else {
    return [
      {name: '单位会员', type: '1', label: "单位"},
    ];
  }
});
const currentTab = ref('0');

// 数据与分页配置
const list = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const pageNum = ref(1);
const pageSize = ref(10);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  type: '0',
  queryType: '1',
  // payStatus: ''
});

// 弹窗控制
const showDelPopup = ref(false);
const showCancelPopup = ref(false);
const isPopupOpen = ref(false);
const showInvoicePopup = ref(false);
const showInvoiceWebview = ref(false);
const invoiceWebviewUrl = ref('');
const invoiceData = ref({});

// 弹窗内容
const delModalContent = ref('');
const cancelModalContent = ref('');

// 当前操作的订单
const currentOrder = ref(null);

// 页面挂载初始化
onLoad((option) => {
  // 获取app实例和deptType
  const app = getApp();
  deptType.value = Number(app.globalData?.deptType || 0);
  const firstType = tabs.value[0]?.type ?? '0';
  // currentTab.value = option.type || firstType;
  // queryParams.type = option.type || firstType;
  currentTab.value = firstType;
  queryParams.type = firstType;
  initData();
});

// 页面显示时刷新数据（从开票页面返回时）
onShow(() => {
  // 如果有缓存的刷新标记，则刷新列表
  if (needRefresh.value) {
    needRefresh.value = false;
    pageNum.value = 1;
    list.value = [];
    hasMore.value = true;
    initData();
  }
});

// 是否需要刷新
const needRefresh = ref(false);

// 上拉加载更多
const loadMore = () => {
  console.log("触发上拉加载");
  if (loading.value || !hasMore.value || isPopupOpen.value) return;
  pageNum.value++;
  initData();
};

// 切换标签
const switchTab = (type) => {
  currentTab.value = type;
  queryParams.type = type;
  pageNum.value = 1;
  list.value = [];
  hasMore.value = true;
  initData();
};

// 状态文本映射
const getStatusText = (status) => {
  const map = {
    0: '待缴费',
    1: '缴费成功',
    2: '订单取消'
  };
  return map[status] || '';
};

// 审核状态文本映射
const getAuditStatusText = (status) => {
  const map = {
    0: '待提交',
    1: '审核中',
    2: '审核通过',
    3: '审核拒绝'
  };
  return map[status] || '';
};

const filterTime = (row) => {
  if (!row) return ''
  return dayjs(row).format('YYYY年MM月DD日')
}

const filterType = (row) => {
  if (row == 0) return '个人会员缴费办理'
  if (row == 1) return '单位会员缴费办理'
  if (row == 2) return '级位考试办理'
  if (row == 3) return '段位考试办理'
  if (row == 4) return '越位考试办理'
}


// 数据请求核心方法
const initData = async () => {
  loading.value = true;
  queryParams.pageNum = pageNum.value;
  
  try {
    const res = await api.orderList(queryParams);
    console.log("接口返回:", res);
    
    if (!res || !res.rows || res.rows.length === 0) {
      hasMore.value = false;
      loading.value = false;
      return;
    }
    // 安全解析content字段
    res.rows.forEach(item => {
      if (item.content) {
        try {
          item.content = JSON.parse(item.content);
        } catch (e) {
          item.content = null;
        }
      }
    });
    // 第一页覆盖，后面页数追加
    if (pageNum.value === 1) {
      list.value = res.rows;
    } else {
      list.value.push(...res.rows);
    }
    // 关键修复：只要返回条数 < pageSize 就说明没有更多了
    hasMore.value = res.rows.length === pageSize.value;
  } catch (e) {
    console.error('订单加载异常：', e);
    uni.showToast({title: '加载失败', icon: 'none'});
    hasMore.value = false;
  } finally {
    loading.value = false;
  }
};

const handelSearch = () => {
  pageNum.value = 1
  list.value = []
  initData()
}

// 删除订单
const handleDelete = (item) => {
  currentOrder.value = item;
  delModalContent.value = `是否确认删除订单编号为"${item.tradeNo}"的订单？`;
  showDelPopup.value = true;
  isPopupOpen.value = true;
};

// 确认删除
const confirmDel = async () => {
  if (!currentOrder.value) return;
  try {
    await api.deleteOrder(currentOrder.value.id);
    uni.showToast({title: '删除成功', icon: 'success'});
    pageNum.value = 1;
    list.value = [];
    await initData();
    closeDelPopup();
  } catch (e) {
    uni.showToast({title: '删除失败', icon: 'error'});
  }
};

const goToDetail = (item) => {
  console.log("goToDetail:", item);
  console.log("currentTab.value", currentTab.value);
  const form = encodeURIComponent(JSON.stringify(item))
  switch (currentTab.value) {
    case '1':
      uni.navigateTo({url: `/group/groupOrderDetail?form=${form}`});
      break;
    case '2':
    case '3':
    case '4':
      uni.navigateTo({url: `/pages/rank/applyDetail?examId=${item.sourceId || item.id}&type=${queryParams.type}`});
      break;
    case '0':
    default:
      uni.navigateTo({url: `/personalVip/orderDetail?rangeId=${item.sourceId || item.id}&type=${queryParams.type}`});
      break;
  }
  // uni.navigateTo({url: `/pages/rank/applyDetail?examId=${item.sourceId || item.id}&type=${queryParams.type}`});
}

// 关闭删除弹窗
const closeDelPopup = () => {
  showDelPopup.value = false;
  isPopupOpen.value = false;
  currentOrder.value = null;
};

// 去缴费
const handlePay = async (item) => {
  if (item.payStatus !== 0) return;
  try {
    await api.goPay({id: item.id});
    uni.navigateTo({url: `/pages/pay/pay?orderId=${item.id}`});
  } catch (e) {
    uni.showToast({title: '发起支付失败', icon: 'none'});
  }
};

// 申请开票
const makeInvoiceFN = (item) => {
  // 开票条件：缴费成功 && 未开票 && 审核通过
  // if (item.payStatus !== 1 || item.invoiceStatus === 1 || item.auditStatus !== 2) {
  //   return;
  // }
  // 设置刷新标记，从开票页面返回时刷新列表
  needRefresh.value = true;
  // 根据tab类型决定跳转页面：个人/单位会员开非税票，级位/段位/越段考试开增值税票
  let url = '';
  if (currentTab.value === '0' || currentTab.value === '1') {
    // 个人/单位会员 - 非税开票
    url = `/pages/invoice/applyFeisui?orderId=${item.id}&amount=${item.price}`;
  } else {
    // 级位/段位/越段考试 - 增值税开票
    url = `/pages/invoice/apply?orderId=${item.id}&amount=${item.price}`;
  }
  uni.navigateTo({ url });
};

// 查看发票
const viewInvoice = (item) => {
  // 个人/单位会员(type 0或1)直接跳转webview页面展示发票
  if (item.type === 0 || item.type === '0' || item.type === 1 || item.type === '1') {
    if (item.invoiceUrl) {
      const encodedUrl = encodeURIComponent(item.invoiceUrl);
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodedUrl}`
      });
    } else {
      uni.showToast({ title: '暂无发票', icon: 'none' });
    }
    return;
  }
  // 其他类型显示发票信息弹窗
  invoiceData.value = {
    invoiceType: item.invoiceType || 1,
    invoiceBuyerName: item.invoiceTitle || item.invoiceBuyerName || '—',
    invoiceBuyerTaxno: item.invoiceTaxno || item.invoiceBuyerTaxno || '',
    invoicePushPhone: item.invoiceEmail || item.invoicePushPhone || '—',
    price: item.price || '-',
    invoiceTime: item.invoiceTime || '—'
  };
  showInvoicePopup.value = true;
  isPopupOpen.value = true;
};

// 关闭发票弹窗
const closeInvoicePopup = () => {
  showInvoicePopup.value = false;
  isPopupOpen.value = false;
};

// 关闭发票Webview弹窗
const closeInvoiceWebview = () => {
  showInvoiceWebview.value = false;
  isPopupOpen.value = false;
};

// 取消订单
const handleCancel = (item) => {
  currentOrder.value = item;
  cancelModalContent.value = `是否确认取消订单编号为"${item.tradeNo}"的订单？`;
  showCancelPopup.value = true;
  isPopupOpen.value = true;
};

// 确认取消订单
const confirmCancel = async () => {
  if (!currentOrder.value) return;
  try {
    await api.cancelPay(currentOrder.value.id);
    uni.showToast({title: '取消成功', icon: 'success'});
    pageNum.value = 1;
    list.value = [];
    await initData();
    closeCancelPopup();
  } catch (e) {
    uni.showToast({title: '取消失败', icon: 'error'});
  }
};

// 关闭取消订单弹窗
const closeCancelPopup = () => {
  showCancelPopup.value = false;
  isPopupOpen.value = false;
  currentOrder.value = null;
};
</script>

<style lang="scss" scoped>
.order-page {
  background: #f5f7fa;
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  &.no-scroll {
    overflow: hidden;
    height: 100vh;
  }
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  margin-bottom: 0;
  
  .search-input {
    flex: 1;
    margin-right: 20rpx;
    
    :deep(.uni-easyinput__content) {
      border-radius: 40rpx;
      background-color: #f5f7fa;
      height: 76rpx;
      padding: 0 24rpx;
    }
    
    :deep(.uni-easyinput__content-input) {
      font-size: 28rpx;
      color: #333;
    }
  }
  
  .add-btn {
    display: flex;
    align-items: center;
    padding: 10rpx 30rpx;
    background-color: #AD181F;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
  }
  
  .add-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
    font-weight: bold;
  }
}

// 标签栏样式
.tab-bar {
  display: flex;
  //background: #fff;
  //border-bottom: 1rpx solid #eee;
  flex-shrink: 0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 30rpx;
    color: #666;
    position: relative;
    font-weight: bold;
    
    &.active {
      color: #c30d23;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 6rpx;
        //background: linear-gradient(90deg, #FF755A, #F51722);
        background: #c30d23;
        border-radius: 2rpx;
      }
    }
  }
}

// 滚动列表容器
.order-list-scroll {
  flex: 1;
  height: auto;
  overflow: auto;
}

// 订单列表
.order-list {
  padding: 20rpx;
  
  .order-card {
    background: #fff;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    // border-top: 6rpx solid transparent;
    // background-clip: padding-box, border-box;
    // background-origin: padding-box, border-box;
    // background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #FF755A, #F51722);
  }
}

// 卡片头部
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10rpx;
  // margin-bottom: 20rpx;
  // border-bottom: 1rpx dashed #eee;
  
  .date {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 26rpx;
    
    .date-text {
      color: #666;
    }
  }
  
  .status-tags {
    display: flex;
    gap: 10rpx;
  }
  
  .status-tag {
    font-size: 22rpx;
    //padding: 6rpx 16rpx;
    //border-radius: 20rpx;
    
    &.success {
      //background: #e6f7ef;
      color: #52c41a;
    }
    
    &.danger {
      //background: #fff1f0;
      color: #ff4d4f;
    }
    
    &.pending {
      //background: #f5f5f5;
      color: #999;
    }
    
    &.ml-10 {
      margin-left: 10rpx;
    }
    
    &.status-wait {
      //background: #f0f5ff;
      color: #597ef7;
      //border: 1rpx solid rgba(89, 126, 247, 0.3);
    }
    
    &.status-pending {
      //background: #fff7e6;
      color: #faad14;
      //border: 1rpx solid rgba(250, 173, 20, 0.3);
    }
    
    &.status-success {
      //background: #e6f7ef;
      color: #52c41a;
      //border: 1rpx solid rgba(82, 196, 26, 0.3);
    }
    
    &.status-danger {
      //background: #fff1f0;
      color: #ff4d4f;
      //border: 1rpx solid rgba(232, 52, 29, 0.3);
    }
  }
}

// 基础信息行
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  
  .label {
    color: #999;
    flex-shrink: 0;
    width: 140rpx;
  }
  
  .value {
    color: #333;
    word-break: break-all;
  }
}

.info-section {
  background: #f3f6fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //margin: 20rpx 0;
  padding: 0 20rpx;
  min-height: 100rpx;
  border-radius: 20rpx;
}

.line {
  width: 1rpx;
  height: 60rpx;
  background: #e5e5e5;
  flex-shrink: 0;
}

.single-info {
  flex: 1;
  padding: 16rpx 20rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  text-align: center;
  
  .label {
    color: #999;
    text-align: center;
  }
  
  .value {
    color: #333;
    font-weight: 500;
    text-align: center;
    margin-top: 10rpx;
    
    &.text-primary {
      color: #597ef7;
    }
    
    &.text-success {
      color: #52c41a;
    }
    
    &.text-danger {
      color: #ff4d4f;
    }
    
    &.text-warning {
      color: #faad14;
    }
  }
}

// 费用合计
.price-section {
  // border-top: 1rpx dashed #eee;
  // padding-top: 16rpx;
  margin-top: 8rpx;
  
  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8rpx 0;
    
    .price-label {
      font-size: 26rpx;
      color: #333;
    }
    
    .price-value {
      font-size: 26rpx;
      color: #666;
      
      &.text-success {
        color: #52c41a;
      }
      
      &.text-warning {
        color: #faad14;
      }
    }
  }
}

// 按钮组
.btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rpx;
  width: 100%;
  margin-top: 20rpx;
  
  .more {
    color: #666;
  }
  
  .btn-flex {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
  }
  
  .btn {
    // 固定宽度，所有按钮一样大
    width: 160rpx;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0;
    border-radius: 20rpx;
    font-size: 28rpx;
    white-space: nowrap;
    font-weight: bold;
    border: none;
    background: transparent;
    text-align: center;
    margin: 0;
    
    &::after {
      border: none;
      display: none; // 关键：隐藏伪元素
    }
    
    &.btn-delete {
      background: #fff;
      //color: #e4393c;
      color: #c30d23;
      border: 1rpx solid #c30d23;
    }
    
    &.btn-invoice {
      background: #fff;
      color: #c30d23;
      border: 1rpx solid #c30d23;
    }
    
    &.btn-view-invoice {
      //background: linear-gradient(90deg, #FF755A, #F51722);
      color: #c30d23;
      //border: none;
      border: 1rpx solid #c30d23;
    }
    
    &.btn-info {
      color: #444;
      border: 1rpx solid #666;
    }
    
    &.btn-cancel {
      background: #fff;
      color: #666;
      border: 1rpx solid #ccc;
    }
    
    &.btn-pay {
      //background: linear-gradient(90deg, #FF755A, #F51722);
      color: #c30d23;
      //border: none;
      border: 1rpx solid #c30d23;
    }
    
    &:disabled {
      opacity: 0.6;
      pointer-events: none;
    }
  }
}


// 加载/无更多提示
.loading-tip, .no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 26rpx;
}

// 弹窗遮罩层
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

// 自定义弹窗样式
.custom-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
}

.modal-content {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40rpx;
  word-break: break-word;
}

.modal-btns {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.modal-btn-cancel {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: #f5f5f5;
  color: #666;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
  margin: 0;
  padding: 0;
  
  &::after {
    border: none;
  }
}

.modal-btn-confirm {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: #C4121B;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
  margin: 0;
  padding: 0;
  
  &::after {
    border: none;
  }
}

.code-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #e8341d;
  letter-spacing: 1rpx;
}

// 发票弹窗样式
.invoice-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.invoice-popup-content {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.invoice-webview-content {
  width: 90%;
  height: 85vh;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.invoice-webview-body {
  flex: 1;
  overflow: hidden;
}

.invoice-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #AD181F 0%, #E4393C 100%);
  
  .invoice-popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
  }
  
  .invoice-popup-close {
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.invoice-popup-body {
  padding: 30rpx;
}

.invoice-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 8rpx 24rpx;
  background: linear-gradient(135deg, #FF755A 0%, #F51722 100%);
  color: #fff;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: 500;
  
  &.vat-type {
    background: linear-gradient(135deg, #6aaaf2 0%, #178cd7 100%);
  }
}

.invoice-info-list {
  .invoice-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24rpx 0;
    border-bottom: 1rpx dashed #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .invoice-info-label {
      font-size: 26rpx;
      color: #999;
      flex-shrink: 0;
    }
    
    .invoice-info-value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      word-break: break-all;
      max-width: 340rpx;
    }
  }
}

.order-card-new {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  
  
  // 卡片头部
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10rpx;
    // margin-bottom: 20rpx;
    // border-bottom: 1rpx dashed #eee;
    
    .date {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8rpx;
      font-size: 26rpx;
      
      .data-header {
        display: flex;
      }
      
      .member-label {
        color: #c30d23;
        font-size: 28rpx;
        font-weight: bold;
      }
      
      .value {
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
        
        .tradeNo {
          color: #999;
          font-size: 26rpx;
        }
      }
      
      .date-text {
        color: #666;
      }
    }
    
    
    .status-tags {
      display: flex;
      gap: 10rpx;
    }
    
    .status-tag {
      font-size: 26rpx;
      //padding: 6rpx 16rpx;
      //border-radius: 20rpx;
      
      &.success {
        //background: #e6f7ef;
        color: #52c41a;
      }
      
      &.danger {
        //background: #fff1f0;
        color: #ff4d4f;
      }
      
      &.pending {
        //background: #f5f5f5;
        color: #999;
      }
      
      &.ml-10 {
        margin-left: 10rpx;
      }
      
      &.status-wait {
        //background: #f0f5ff;
        color: #597ef7;
        //border: 1rpx solid rgba(89, 126, 247, 0.3);
      }
      
      &.status-pending {
        //background: #fff7e6;
        color: #faad14;
        //border: 1rpx solid rgba(250, 173, 20, 0.3);
      }
      
      &.status-success {
        //background: #e6f7ef;
        color: #52c41a;
        //border: 1rpx solid rgba(82, 196, 26, 0.3);
      }
      
      &.status-danger {
        //background: #fff1f0;
        color: #ff4d4f;
        //border: 1rpx solid rgba(232, 52, 29, 0.3);
      }
    }
  }
  
  .member-time {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10rpx;
    
    .label {
      font-size: 26rpx;
      color: #999;
      
      .star {
        color: #000;
        font-size: 28rpx;
      }
    }
    
    .price {
      font-size: 30rpx;
      color: #000;
      font-weight: bold;
      
      .person {
        font-size: 24rpx;
        color: #999;
        text-align: right;
      }
    }
  }
}
</style>