<template>
  <view class="order-page" :class="{ 'no-scroll': isPopupOpen }">
    <!-- 订单列表 -->
    <scroll-view 
      scroll-y 
      class="order-list-scroll" 
      :enhanced="true" 
      :show-scrollbar="false"
      :scroll-enabled="!isPopupOpen"
    >
      <view class="order-list">
        <!-- 有数据才循环 -->
        <view v-if="list.length > 0">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="order-card"
          >
            <!-- 订单头部：日期 + 状态 -->
            <view class="card-header">
              <view class="date">
                <image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" v-if="item.payTime" mode="widthFix" style="width:30rpx;height:30rpx;"/>
                <text class="date-text" v-if="item.payTime">{{ item.payTime }}</text>
              </view>
              <view
                class="status-tag"
                :class="{
                  success: item.payStatus == 1,
                  danger: item.payStatus == 2,
                  pending: item.payStatus == 0
                }"
              >
                {{ getStatusText(item.payStatus) }}
              </view>
            </view>

            <!-- 订单编号、缴费编号 -->
            <view class="info-row">
              <text class="label">订单编号：</text>
              <text class="value">{{ item.tradeNo || '——' }}</text>
            </view>
            <view class="info-row">
              <text class="label">缴费编号：</text>
              <text class="value">{{ item.wfCode || '——' }}</text>
            </view>

            <!-- 核心：个人会员仅展示缴费年限 -->
            <view class="info-section flex f-j-s" v-if="item.content">
              <view class="single-info">
                <view class="label">缴费年限：</view>
                <view class="value">{{ item.content.yearCount || 0 }}</view>
              </view>
              <view class="line"></view>
              <view class="single-info">
                <view class="label">缴费方式</view>
                <view class="value">民生付</view>
              </view>
            </view>

            <!-- 费用合计 -->
            <view class="total-row">
              <text class="label">费用合计：</text>
              <text class="amount">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>
            </view>

            <!-- 按钮组：靠右紧凑展示 -->
            <view class="btn-group">
              <button class="btn btn-delete" @click="handleDelete(item)">删除</button>
              <!-- 已缴费：申请开票/已开票 -->
              <template v-if="item.payStatus == 1">
                <button class="btn btn-invoice" @click="makeInvoiceFN(item)" :disabled="item.invoiceStatus === 1">
                  {{ item.invoiceStatus === 1 ? '已开票' : '申请开票' }}
                </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 v-else class="empty">
          <image class="empty-img" mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
          <text class="empty-text">暂无订单记录</text>
        </view>

        <!-- 加载/无更多提示 -->
        <view class="loading-tip" v-if="loading">加载中...</view>
        <view class="no-more" v-if="!loading && !hasMore && list.length">没有更多了</view>
      </view>
    </scroll-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 { onReachBottom } from '@dcloudio/uni-app'
import { useUserStore } from "../store/modules/user";
import * as api from '@/common/api.js'
import config from '@/config.js'
const userStore = useUserStore()
// 数据与分页配置
const list = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const pageNum = ref(1);
const pageSize = ref(10);
const userInfo = computed(() => userStore.user)
// 查询参数（固定为个人会员类型）
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  type: '0', // 0表示个人会员
  // queryType: '1',
  // payStatus: '',
  perId: ''
});

// 弹窗控制
const showDelPopup = ref(false);
const showCancelPopup = ref(false);
const isPopupOpen = ref(false);

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

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

// 页面挂载初始化
onMounted(() => {
  // 获取用户信息
  if (userInfo.value && userInfo.value.perId) {
    queryParams.perId = userInfo.value.perId;
    initData();
  } else {
    uni.showToast({ title: '获取用户信息失败', icon: 'none' });
  }
});

// 小程序原生触底加载
onReachBottom(() => {
  if (!loading.value && hasMore.value && !isPopupOpen.value) {
    pageNum.value++;
    initData();
  }
});

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

// 数据请求核心方法
const initData = async () => {
  loading.value = true;
  queryParams.pageNum = pageNum.value;
  try {
    const res = await api.orderList(queryParams);
    if (!res || !res.rows) {
      list.value = [];
      hasMore.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);
    }
    // 判断是否还有更多数据
    hasMore.value = list.value.length < (res.total || 0);
  } catch (e) {
    console.error('订单加载异常：', e);
    uni.showToast({ title: '加载失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

// 删除订单
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 = [];
    initData();
    closeDelPopup();
  } catch (e) {
    uni.showToast({ title: '删除失败', icon: 'error' });
  }
};

// 关闭删除弹窗
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) => {
  uni.navigateTo({ url: `/pages/invoice/apply?orderId=${item.id}amount=${item.price}` });
};

// 取消订单
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 = [];
    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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  &.no-scroll {
    overflow: hidden;
    height: 100vh;
  }
}

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

// 订单列表
.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-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: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx dashed #eee;
  
  .date {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 26rpx;
    
    .date-text {
      color: #666;
    }
  }
  
  .status-tag {
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    
    &.success {
      background: #e6f7ef;
      color: #52c41a;
    }
    
    &.danger {
      background: #fff1f0;
      color: #ff4d4f;
    }
    
    &.pending {
      background: #f5f5f5;
      color: #999;
    }
  }
}

// 基础信息行
.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;
  padding: 0 40rpx;
  justify-content: space-around;
  margin: 20rpx 0;
}
.line{
  width: 1rpx;
  height: 90%;
  background: #eee;
}
.single-info {
  padding: 16rpx 20rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  .label {
    color: #999;
    text-align: center;
  }
  
  .value {
    color: #333;
    font-weight: 500;
    text-align: center;
    margin-top: 10rpx;
  }
}

// 费用合计
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30rpx;
  padding: 15rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx dashed #eee;
  
  .label {
    color: #333;
  }
  
  .amount {
    color: #EB6100;
    font-weight: 600;
    font-size: 32rpx;
  }
}

// 按钮组
.btn-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16rpx;
  width: 100%;
  
  .btn {
    padding: 12rpx 32rpx;
    border-radius: 40rpx;
    font-size: 24rpx;
    line-height: 1.5;
    white-space: nowrap;
    display: inline-block;
    margin: 0;
    border: none;
    width: 80px;
    background: transparent;
    
    &::after {
      border: none;
    }
    
    &.btn-delete {
      background: #fff;
      color: #e4393c;
      border: 1rpx solid #e4393c;
    }
    
    &.btn-invoice {
      background: #fff;
      color: #e4393c;
      border: 1rpx solid #e4393c;
    }
    
    &.btn-cancel {
      background: #fff;
      color: #666;
      border: 1rpx solid #ccc;
    }
    
    &.btn-pay {
      background: linear-gradient(90deg, #FF755A, #F51722);
      color: #fff;
      border: none;
    }
    
    &: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;
  }
}
</style>