<template>
  <view class="page-container">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="nav-tabs">
        <view class="tab-item active">全部订单</view>
        <!-- <view class="tab-item">只看订单</view> -->
      </view>
    </view>

    <!-- 搜索与筛选区 -->
    <view class="search-section">
      <view class="search-box">
        <!-- <text class="search-icon">🔍</text> -->
        
        <!-- 选择订单号 -->
        <block v-if="filterType === 'orderNo'">
          <input class="search-input" v-model="queryParams.orderNo" placeholder="请输入订单号" @confirm="handleSearch" />
        </block>
        
        <!-- 选择条码 -->
        <block v-else-if="filterType === 'barcode'">
          <input class="search-input" v-model="queryParams.productBarCode" placeholder="请输入条码" @confirm="handleSearch" />
        </block>
        
        <!-- 选择支付状态 -->
        <block v-else-if="filterType === 'payStatus'">
          <picker class="search-input picker-input" mode="selector" :range="payStatusOptions" range-key="label" @change="onPayStatusChange">
            <view class="picker-text">
              {{ currentPayStatusLabel || '请选择支付状态' }}
            </view>
          </picker>
        </block>
        
        <!-- 重置 -->
        <text class="reset-icon" @click="handleReset">↺</text>
        <!-- 点击弹出下拉单选框选择类型 -->
        <text class="split-icon" @click="showFilterTypeSelector">☰</text>
      </view>
      <view class="filter-btn" @click="handleSearch">
        <!-- <text class="filter-icon">🔍</text> -->
        <text class="filter-text">搜索</text>
      </view>
    </view>

    <!-- 内容区 -->
    <scroll-view scroll-y class="content" @scrolltolower="loadMore">
      <block v-if="orderList.length > 0">
        <!-- 订单列表：展示 订单号、支付状态、支付金额、支付时间 -->
        <view class="order-item" v-for="(item, index) in orderList" :key="item.id" @click="goToDetail(item)">
          <view class="order-header">
            <text class="order-no">订单号：{{ item.orderNo || '--' }}</text>
            <text :class="['pay-status', item.payStatus === 2 ? 'status-success' : item.payStatus === 3 ? 'status-error' : 'status-warning']">
               {{ getPayStatusText(item.payStatus) }}
            </text>
          </view>
          <view class="order-body">
            <view class="info-row">
              <text class="info-label">支付金额：</text>
              <text class="info-value amount">¥{{ item.payAmount || '0.00' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">支付时间：</text>
              <text class="info-value">{{ item.payTime || '--' }}</text>
            </view>
          </view>
        </view>
      </block>

      <!-- 暂无数据状态 -->
      <view class="empty-card" v-else>
        <view class="empty-icon-wrapper">
          <view class="empty-icon">📄</view>
        </view>
        <text class="empty-text">暂无数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getOrderList } from '@/api/back';

export default {
  data() {
    return {
      // 筛选类型：orderNo(订单号), barcode(条码), payStatus(支付状态)
      filterType: 'orderNo',
      currentPayStatusLabel: '',
      
      payStatusOptions: [
        { label: '未支付', value: 0 },
        { label: '支付中', value: 1 },
        { label: '已支付', value: 2 },
        { label: '支付失败', value: 3 },
        { label: '已退款', value: 4 }
      ],
      
      queryParams: {
        storeId: '2', // 门店id必传
        orderNo: '',
        productBarCode: '',
        payStatus: ''
      },
      
      orderList: []
    };
  },
  onLoad() {
    this.fetchOrderList();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    // 点击split-icon弹出单选下拉框
    showFilterTypeSelector() {
      const types = ['orderNo', 'barcode', 'payStatus'];
      const labels = ['订单号', '条码', '支付状态'];
      const itemList = labels.map((label, i) => (types[i] === this.filterType ? '✓ ' : '') + label);
      uni.showActionSheet({
        itemList,
        success: (res) => {
          this.filterType = types[res.tapIndex];
          // 重置其他参数
          this.queryParams.orderNo = '';
          this.queryParams.productBarCode = '';
          this.queryParams.payStatus = '';
          this.currentPayStatusLabel = '';
        }
      });
    },
    
    onPayStatusChange(e) {
      const index = e.detail.value;
      const selectedOption = this.payStatusOptions[index];
      this.currentPayStatusLabel = selectedOption.label;
      this.queryParams.payStatus = selectedOption.value;
    },
    
    handleSearch() {
      this.fetchOrderList();
    },

    handleReset() {
      this.filterType = 'orderNo';
      this.currentPayStatusLabel = '';
      this.queryParams.orderNo = '';
      this.queryParams.productBarCode = '';
      this.queryParams.payStatus = '';
      this.fetchOrderList();
    },
    
    getPayStatusText(status) {
      const map = { 0: '未支付', 1: '支付中', 2: '已支付', 3: '支付失败', 4: '已退款' };
      return map[status] ?? '未知状态';
    },
    
    // 按照项目要求调取接口
    fetchOrderList() {
      uni.showLoading({ title: '加载中...' });

      const data = { storeId: this.queryParams.storeId };
      if (this.queryParams.orderNo) data.orderNo = this.queryParams.orderNo;
      if (this.queryParams.productBarCode) data.productBarCode = this.queryParams.productBarCode;
      if (this.queryParams.payStatus !== '') data.payStatus = this.queryParams.payStatus;

      getOrderList(data).then(res => {
        if (res.code === 200) {
          this.orderList = res.data || [];
        } else {
          uni.showToast({ title: res.msg || '获取失败', icon: 'none' });
        }
      }).catch(err => {
        uni.showToast({ title: '网络请求失败', icon: 'none' });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    loadMore() {
    },
    
    goToDetail(orderObj) {
      const itemsStr = encodeURIComponent(JSON.stringify(orderObj.orderItems || []));
      uni.navigateTo({
        url: `/package_a/back/backDetail?items=${itemsStr}`
      });
    }
  }
};
</script>

<style scoped>
.page-container { width: 100%; min-height: 100vh; background: #f5f5f5; display: flex; flex-direction: column; }
.navbar { height: 48px; background: #e62318; color: white; display: flex; align-items: center; padding: 0 16px; position: relative; }
.nav-tabs { flex: 1; display: flex; justify-content: center; }
.tab-item { font-size: 17px; padding: 0 8px; position: relative; font-weight: bold; }
.tab-item.active::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 3px; background: white; border-radius: 2px; }

.search-section { background: white; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.search-box { flex: 1; height: 36px; background: #f5f5f5; border-radius: 6px; border: 1px solid #e5e5e5; display: flex; align-items: center; padding: 0 12px; }
.search-icon { font-size: 16px; color: #999; margin-right: 8px; }
.search-input { flex: 1; font-size: 15px; color: #333; background: transparent; border: none; height: 100%; }
.picker-input { display: flex; align-items: center; }
.picker-text { line-height: 36px; color: #666; }
.split-icon { font-size: 18px; color: #666; margin-left: 8px; padding: 4px; display: flex; align-items: center; }
.reset-icon { font-size: 20px; color: #999; margin-left: 4px; padding: 4px; display: flex; align-items: center; line-height: 1; }
.filter-btn { height: 36px; background: #e62318; border-radius: 6px; padding: 0 16px; display: flex; align-items: center; gap: 4px; font-size: 15px; color: #fff; }
.reset-btn { height: 36px; background: #fff; border-radius: 6px; padding: 0 16px; display: flex; align-items: center; font-size: 15px; color: #666; border: 1px solid #ddd; }
.filter-icon { font-size: 14px; }

.content { flex: 1; padding: 12px; box-sizing: border-box; }
.order-item { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.order-header { display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 12px; }
.order-no { font-size: 14px; color: #333; font-weight: bold; }
.pay-status { font-size: 13px; }
.status-warning { color: #f29c1f; }
.status-success { color: #52c41a; }
.status-error { color: #e62318; }
.order-body { display: flex; flex-direction: column; gap: 8px; }
.info-row { display: flex; justify-content: space-between; align-items: center; }
.info-label { font-size: 13px; color: #666; }
.info-value { font-size: 13px; color: #333; }
.amount { color: #e62318; font-weight: bold; font-size: 16px; }

.empty-card { background: transparent; padding: 100px 0; display: flex; flex-direction: column; align-items: center; }
.empty-icon-wrapper { width: 80px; height: 80px; background: #e8e8e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.empty-icon { font-size: 32px; color: #999; }
.empty-text { font-size: 16px; color: #999; }
</style>