
<template>
	<view class="container">
		<view class="box">
			<view  class="item" v-for="(items, indexs) in dataList" :key="indexs" @click="taskDetail(items)">
				<view class="everyLine">
					<span class="titleBox">任务编号</span>
					<span>{{ items.taskNo }}</span>
				</view>
				<view class="everyLine">
					<span class="titleBox">任务描述</span>
					<span>{{ items.taskDtl }}</span>
				</view>
				<view class="everyLine">
					<span class="titleBox">物料号</span>
					<span>{{ items.mid }}</span>
				</view>
				<view class="everyLine">
					<span class="titleBox">存储位置</span>
					<span>{{ items.targetName }}</span>
				</view>
				<view class="statusBox">
					<view class="statusBtn" v-show="items.taskStatus==0">未执行</view>
					<view class="statusBtn" v-show="items.taskStatus==-1">执行失败</view>
					<view class="statusBtn" v-show="items.taskStatus==1">执行中</view>
					<view class="endBtn" v-show="items.taskStatus==2">已完成</view>
				</view>
			</view>
			
      	</view>
		<view class="btn">
			<uv-button type="primary" class="mainBtn" shape="circle" text="新 建"   @click="addTask()"></uv-button>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import {  taskList } from "@/api/dispatch"
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const dataList = ref([]);
function addTask(){
	// console.log(2222)
	uni.navigateTo({
      url: '/pagesDispatch/addDispatch',
    })
}
function getTaskList(){
	taskList(queryParams.value).then(res => {
      console.log(1111)
	  console.log(res)
	  if(res.code==200){
		dataList.value = res.rows
		console.log(dataList.value)
	  }
	//   console.log(res)
    })
	
}
//跳转到任务详情
function taskDetail(item){
	// console.log(item)
	// return
	uni.navigateTo({
      url: '/pagesDispatch/detailDispatch?id='+item.id,
    })
}
onShow(() => {
  if (uni.getStorageSync('token')) {
    getTaskList()
  }
})
</script>
<style scoped lang="scss">
.container{
	height: 100vh;
	background-color: #ededed;
	padding:20rpx 20rpx 0 20rpx;
	display: flex;
  	flex-direction: column;
	// overflow: auto;
	.box{
		overflow-y: auto;
		padding-bottom: 100rpx;
		// height: calc(100vh - 100rpx);
		// height: 300rpx;
		.item{
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.everyLine{
				line-height: 40rpx;
				.titleBox{
					margin-right: 50rpx;
				}
			}
			.statusBox{
				// background-color: red;
				display: flex;
				justify-content: flex-end;
				.statusBtn{
					background-color: red;
					padding: 2rpx 4rpx 2rpx 4rpx;
					color:#fff;
					font-size: 20rpx;
					border-radius: 14rpx;
				}
				.endBtn{
					background-color: #4c4c4c;
					padding: 2rpx 4rpx 2rpx 4rpx;
					color:#fff;
					font-size: 20rpx;
					border-radius: 14rpx;
				}
			}
		}
	}
	.btn{
		position:fixed;
		left:20rpx;
		right: 20rpx;
		bottom: 1%;
		// height: 100rpx;
	}
}
</style>