<script setup lang="ts">
import { onMounted, computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getListAPI, getDictAPI } from '@/services/zjPgMaster'
import { useLoginStore } from '@/stores/modules/login'
import { formatDate } from '@/utils/index'

const userStore = useLoginStore()
const userId = userStore.userInfo.userId

// 是否分页结束
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)
// 定义 porps
const props = defineProps<{
  orderState: string
}>()

const statusText = computed(() => {
  const text = props.orderState == '0,1' ? '处理' : '查看'
  return text
})
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 请求参数
const queryParams: Required<any> = {
  pageNo: 1,
  pageSize: 5,
   detilUser: userId,
//
pgType: 0,
// 工序完成状态列表
dispatchType: "ASSEMBLE",
// 派工类型
isReport: 1
// 是否需要报工
}
const dataList = ref([])
const getListData = async () => {
	console.log("props.orderState");
	console.log(props.orderState);
	queryParams.pgType = props.orderState;
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  if (isFinish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  isLoading.value = true
  // 发送请求
  const data = await getListAPI(queryParams)
  isLoading.value = false
  data.list.forEach((e) => {
    e.orderTime = formatDate(e.orderTime, 'YYYY-MM-DD')
    e.startTime = formatDate(e.startTime, 'YYYY-MM-DD')
    e.entTime = formatDate(e.entTime, 'YYYY-MM-DD')
  })
  // 数组追加
  dataList.value.push(...data.list)
  // 分页条件
  if (queryParams.pageNo < data.total) {
    // 页码累加
    queryParams.pageNo++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}

onMounted(async () => {
  await getListData()
})

onShow(async () => {
  isFinish.value = false
  isLoading.value = false
  queryParams.pageNo = 1
  dataList.value = []
  await getListData()
})

const handleDetail = (item) => {
  const url = `/pages/zjPgMaster/zjPgMaster-detail?id=${item.id}`
  uni.navigateTo({ url })
}

// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  queryParams.pageNo = 1
  dataList.value = []
  isFinish.value = false
  // 加载数据
  await getListData()
  // 关闭动画
  isTriggered.value = false
}
// const searchVal = ref('')
// const dataListDefault = ref([])
// const handleSearch = async () => {
//   const code = searchVal.value
//   if (code) {
//     dataListDefault.value = dataList.value
//     dataList.value = dataList.value.filter((e) => {
//       return e.code == code
//     })
//   } else {
//     dataList.value = dataListDefault.value
//   }
// }
</script>
<template>
  <view class="cont">
    <!-- <view class="search" v-if="dataList.length > 5">
      <view class="title"></view>
      <input class="uni-input" v-model="searchVal" @change="handleSearch" placeholder="根据编号搜索" />
    </view> -->
    <scroll-view enable-back-to-top scroll-y class="data-list" refresher-enabled :refresher-triggered="isTriggered"
      @refresherrefresh="onRefresherrefresh" @scrolltolower="getListData">
      <view class="item" v-for="item in dataList" :key="item.id" @click="handleDetail(item)">
        <view class="hd">
          <view class="num">派工单：</view>
          <view class="statusLabel">（ 单号：{{ item.pgNumber }} ）</view>
        </view>
        <view class="md">
          <view class="product-item">项目名称：{{ item.projectName }}</view>
          <view class="product-item">子项目：{{ item.projectSubCode || '' }} {{' ' + item.projectSubName }}</view>
		  <view class="product-item">模型名称：{{ item.mouldName }}</view>
          <!-- <view class="product-row">
            <view class="row-item">
              <view class="label">模型名称: {{ item.mouldName }}</view>
            </view>
            <view class="row-item">
              <view class="label">派工工序: {{ item.procedureName }}</view>
            </view>
          </view> -->
		  <view class="product-row">
			  <view class="row-item">
				  <view class="label">派工数量</view>
				  <view class="val">{{item.amount}}</view>
			  </view>
			  <view class="row-item">
				  <view class="label">总报工数量</view>
				  <view class="val high-color">{{item.amounts}}</view>
			  </view>
		  </view>

          <view class="product-row">
            <view class="row-item">
              <view class="label">预计工时</view>
              <view class="val">{{ item.gongShi }}</view>
            </view>
            <view class="row-item">
              <view class="label">总报工工时</view>
              <view class="val high-color">{{ item.workTime }}</view>
            </view>
          </view>
          <view class="product-item">预计生产日期：{{ item.startTime }} ～ {{ item.entTime }}</view>
        </view>
        <view class="statusText">{{ statusText }}</view>
      </view>
      <!-- 底部提示文字 -->
      <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
        {{ isFinish ? '没有更多数据~' : '正在加载...' }}
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
// 订单列表
.search {
  padding: 4rpx;
  width: 80%;
  margin: 30rpx auto;

  .uni-input {
    border: 1px solid #D1D6DB;
    height: 60rpx;
    line-height: 60rpx;
    padding: 4rpx 10rpx;
    font-size: 32rpx;
    border-radius: 6rpx;
  }
}

.data-list {
  height: 90vh;
  .item {
    position: relative;
    padding: 20rpx 0;
    margin: 20rpx 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .hd {
      padding: 10rpx;
      font-size: 28rpx;
      display: flex;

      .statusLabel {
        font-size: 24rpx;
        color: #737D88;
      }
    }

    .md {
      position: relative;
      padding: 10rpx;
      min-height: 100rpx;
      font-size: 28rpx;
      border-top: 2rpx solid #F2F2F2;

      .product-item {
        margin: 20rpx 0;
        display: flex;
        align-items: center;
        color: #737D88
      }
      .product-row {
        margin: 20rpx 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #737D88;
        .row-item {
          flex: 1;
          .label {
              margin-bottom: 10rpx;
            }
          
            .val {
              color: #1D2129;
              &.high-color {
                color: #00B42A
              }
            }
        }
        
      }
    }

    .statusText {
      position: absolute;
      right: 30rpx;
      top: 100rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      padding: 10rpx 30rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      background: linear-gradient(149deg, #2DACE6 4%, #356899 98%);
      color: #fff;
    }

    &:last-child {
      padding-bottom: 40rpx;
    }
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 15rpx;

    .date {
      color: #666;
      flex: 1;
    }

    .primary {
      color: #ff9240;
    }

    .icon-delete {
      line-height: 1;
      margin-left: 10rpx;
      padding-left: 10rpx;
      border-left: 1rpx solid #e3e3e3;
    }
  }

  .goods {
    display: flex;
    margin-bottom: 20rpx;

    .cover {
      width: 170rpx;
      height: 170rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;

      .image {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .quantity {
      position: absolute;
      bottom: 0;
      right: 0;
      line-height: 1;
      padding: 6rpx 4rpx 6rpx 8rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 10rpx 0 0 0;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .name {
      height: 80rpx;
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .more {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #333;
    }
  }

  .payment {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 1;
    padding: 20rpx 0;
    text-align: right;
    color: #999;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;

    .quantity {
      font-size: 24rpx;
      margin-right: 16rpx;
    }

    .amount {
      color: #444;
      margin-left: 6rpx;
    }

    .symbol {
      font-size: 20rpx;
    }
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;

    .button {
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20rpx;
      border-radius: 60rpx;
      border: 1rpx solid #ccc;
      font-size: 26rpx;
      color: #444;
    }

    .secondary {
      color: #3775F6;
      border-color: #3775F6;
    }

    .primary {
      color: #fff;
      background-color: #3775F6;
      border-color: #3775F6;
    }
  }

  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }
}
</style>import type { stringify } from 'querystring';
