<template>
  <view class="page-container">
    <!-- 顶部固定搜索栏 -->
    <up-sticky>
      <view class="search-header">
        <!-- 左侧下拉框：替换为uView Plus的Select组件 -->
        <view class="select-wrap common-text-color">
          <up-select
              v-model:current="selectedSortValue"
              :options="sortOptions"
              :showOptionsLabel="true"
              @select="handleSortChange"
              border="surround"
              :style="{ flex: 1 }"
          />
        </view>

        <!-- 右侧搜索框 -->
        <view class="search-input-wrap">
          <up-search
              v-model="searchValue"
              placeholder="请输入关键字"
              @search="handleSearch"
              bg-color="#f5f5f5"
              :clearabled="false"
              :show-action="true"
              actionText="搜索"
              :animation="true"
              @custom="handleSearch"
          />
        </view>
      </view>
    </up-sticky>

    <!-- 列表容器 -->
    <z-paging
        ref="paging"
        v-model="orderList"
        @query="queryList"
        :auto-show-system-loading="true"
    >
      <template #empty>
        <empty-view/>
      </template>

      <view class="common-card-list" style=" padding-top: 100rpx;">
        <up-card
            :border="false"
            :foot-border-top="false"
            v-for="(item,index) in orderList"
            :key="`${item.orderNo}_${index}`"
            :show-head="false"
        >

          <template #body>
            <view class="card-body">
              <view class="u-body-item u-flex">
                <view class="u-body-item-title">工单编号：</view>
                <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
              </view>
              <view class="u-body-item u-flex">
                <view class="u-body-item-title">工单位置：</view>
                <view class="u-line-1 u-body-value">{{ item.lonLatAddress || '-' }}</view>
              </view>

              <view class="u-body-item u-flex ">
                <view class="u-body-item-title">工单名称：</view>
                <view class="u-line-1 u-body-value"> {{ item.orderName || '未填写' }}</view>
              </view>

              <view class="u-body-item u-flex">
                <view class="u-body-item-title">情况描述：</view>
                <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
              </view>

              <view class="u-body-item u-flex common-item-center common-justify-between">
                <view class="u-body-item-title u-body-value">提交时间：{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                <view class="">
                  <up-button
                      type="primary"
                      size="mini"
                      @click="handleDetail(item)"

                  >
                    工单详情
                  </up-button>
                </view>

              </view>
            </view>
          </template>
        </up-card>
      </view>
    </z-paging>

    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" size="large" @click="handleAddOrder">
        新增工单
      </up-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { workorderPage } from "@/api/quick-order/quick-order";
import { timeFormat } from '@/uni_modules/uview-plus';
const selectedSortValue = ref(1);
// 1 位置 2 工单名称 3 情况描述 4 工单编号
const sortOptions = ref([
  {name: '位置', id: 1},
  {name: '名称', id: 2},
  {name: '描述', id: 3},
  {name: '编号', id: 4},
]);
// 分页相关（核心：声明orderList）
const paging = ref(null);
const orderList = ref([]); // 修复：新增列表变量
// 搜索相关
const searchValue = ref('');
// ========== 适配z-paging回调参数 ==========
const queryList = async (pageNo, pageSize) => {
  try {
    const apiParams = {
      searchContent: searchValue.value.trim() || '',
      pageNo: pageNo,
      pageSize: pageSize,
      type: selectedSortValue.value //  1 位置 2 工单名称 3 情况描述 4 工单编号
    };
    console.log('请求参数：', apiParams);
    const res = await workorderPage(apiParams);
    console.log('接口返回：', res);
    paging.value.complete(res.list);
  } catch (error) {
    console.error('加载失败：', error);
    paging.value?.complete(false);
    uni.showToast({title: '加载失败，请重试', icon: 'none'});
  }
};
// ========== 其他方法补充 ==========
const handleSortChange = (val) => {
  console.log('排序变更：', val);
  searchValue.value = ''
  selectedSortValue.value = val.id; // 更新选中值
  paging.value?.reload(); // 排序后刷新列表
};
const handleSearch = (val) => {
  console.log('搜索内容：', val);
  searchValue.value = val;
  paging.value?.reload(); // 搜索后刷新列表
};
const handleDetail = (item) => {
  console.log('工单详情：', item);
  uni.navigateTo({
    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
  });
};
const handleAddOrder = () => {
  uni.navigateTo({
    url: '/pages-sub/daily/quick-order/add-order'
  });
};
</script>

<style scoped lang="scss">
// 顶部搜索栏
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  box-sizing: border-box;

  // 下拉选择框容器
  .select-wrap {
    width: 60px;
    margin-right: 20rpx;
    // 适配up-select样式
    :deep(.u-select) {
      width: 100%;
      font-size: 28rpx;
    }

    :deep(.u-input__placeholder) {
      font-size: 28rpx;
    }
  }
  .search-input-wrap {
    flex: 3;
  }
}


</style>