<template>
  <view class="container">
    <view class="list">
     <view>
        <u-search :show-action="true" v-model="searchValue" action-text="搜索" input-align="left" height="65"
                  border-color=#5599FF @search="searchTable()">
		</u-search>
		<u-tabs :list="list1" :is-scroll="true" active-color="#5599FF" v-model="current" @change="tabsChange"></u-tabs>
      </view>
      <view class="item" v-for="(item, index) in list" :key="index" @click="openDetail(item)">
        <view class="title">
        	<view class="title-txt">
        		{{item.qaFormNo}}
        	</view>
        	<view class="time">
        		{{`${$time.formatDate(item.createTime)}`}}
        	</view>
        </view>
		<view class="dec">
		  <view>质检单名称：</view><view>{{ item.qaFormName }}</view>
		</view>
		<view class="dec">
          <view>日计划单号：</view><view>{{ item.planMasterCode }}</view>
        </view>
        <view class="dec">
          <view>任务工单号：</view><view>{{ item.schedulingCode }}</view>
        </view>
		<view class="dec">
		  <view>工序编码：</view><view>{{ item.nodeCode }}</view>
		</view>
		<view class="dec">
		  <view>质检时间：</view><view>{{`${$time.formatDate(item.qaTime)}`}}</view>
		</view>
		<view class="dec">
		  <view>质检数量：</view><view>{{ item.qaCount}}</view>
		</view>
		<view class="dec">
		  <view>合格数量：</view><view>{{ item.qaCountPassed}}</view>
		</view>
		<view class="dec">
		  <view>不合格数量：</view><view>{{ item.qaCountNotpassed}}</view>
		</view>
		<view class="dec">
		  <view>合格率：</view><view>{{ item.qaPassRate}}</view>
		</view>
        <view class="dec">
          <view>状态：</view>
          <view>
			<u-tag text="已质检" v-if="item.status==1" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
          </view>
        </view>
      </view>
      <view style="height: 94rpx;padding-top: 30rpx;">
      		<u-loadmore :status="status" v-if="status != 'loadmore'" />
      </view>
    </view>
    <view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
  </view>
</template>

<script setup lang="ts">

import {
  onLoad,
  onShow,
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  getCurrentInstance
} from 'vue'

import * as workSchedulingListApi from '@/api/mes/workScheduling/index.ts'

const list1 = ref([
  {
    name: '全部',
  },
  {
    name: '未质检',
  },
  {
    name: '已质检',
  }
])
//公用
const {proxy} = getCurrentInstance()
const current = ref(0)
const status = ref('loadmore') //是否显示没有更多了
const falg = ref('')
const list = ref([])
const searchValue = ref('')
const ss = ref()


const params = ref({
  pageNo: 1,
  pageSize: 10,
  status: '',
  flag: null
})

async function getViewList() {
  if (status.value == 'nomore') return
  status.value = 'loading'
  proxy.$modal.loading('加载中')
  await workSchedulingListApi.getQaFormPage(params.value).then((res) => {
    proxy.$modal.closeLoading()
    if (res.data.list.length > 0) {
      list.value = list.value.concat(res.data.list)
      params.value.pageNo++
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
  }).catch(() => {
    proxy.$modal.closeLoading()
  })
  falg.value = 'view'
}

const tabParams = ref({
  pageNo: 1,
  pageSize: 10,
  status: '',
  flag: null
})

async function getTabsList() {
  if (status.value == 'nomore') return
  status.value = 'loading'
  proxy.$modal.loading('加载中')
  await workSchedulingListApi.getQaFormPage(tabParams.value).then((res) => {
    proxy.$modal.closeLoading()
    if (res.data.list.length > 0) {
      list.value = list.value.concat(res.data.list)
      tabParams.value.pageNo++
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
  }).catch(() => {
    proxy.$modal.closeLoading()
  })
  falg.value = 'tab'
}


//首次进页面触发
onShow(() => {
  tabParams.value.pageNo = 1
  tabParams.value.status = ''
  list.value = []
  getTabsList()

})
//滑动到底部展示
onReachBottom(() => {
  if (falg.value == 'tab') {
    status.value = 'loading'
    getTabsList()
  }

  if (falg.value == 'view') {
    status.value = 'loading'
    getViewList()
  }
})

//打开明细
function openDetail(item, index) {
}


//切换标签页
function tabsChange(index) {
  current.value = index
  tabParams.value.pageNo = 1
  if (index == '0') {
    tabParams.value.status = ''
  }else if(index == '1'){
	tabParams.value.status = '-1'  
  }else if(index == '2'){
	tabParams.value.status = '1'  
  }
  list.value = []
  status.value = 'loading'
  getTabsList()
}

const searchTableParams = ref({
  planNoDay: '',
  flag: null
})

async function searchTable() {
  list.value = []
  searchTableParams.value.planNoDay = this.searchValue
  await workSchedulingListApi.getQaFormPage(searchTableParams.value).then((res) => {
    if (res.data.list.length > 0) {
      list.value = list.value.concat(res.data.list)
    }
  })
}

</script>

<style lang="scss" scoped>
	.container{
		background: #f5f5f5;
		min-height: 100vh;
	}
	.list {
		background: #f5f5f5;
		margin-top: 20rpx;
		.item {
			padding: 30rpx 30rpx 0px 30rpx;
			margin-top: 20rpx;
			background: white;
			position: relative;
			.title {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				.title-txt {
					color: #409eff;
					font-weight: bold;
					font-size: 36rpx;
					width: 0px;
					flex: 1;
					word-wrap: break-word;
				}
				.time {
					color: #919191;
				}
			}
			.dec {
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				view {
					&:nth-child(1){
						width: 200rpx;;
					}
					&:nth-child(2){
					color: #999999;
						flex: 1;
						width: 0px;
						word-wrap: break-word;
					}
				}
			}
			.last {
				padding-bottom: 30rpx;
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #E4E4E4;
				padding: 20rpx 0px;
				height: 90rpx;
			}
		}
	}
</style>