<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar title="任务列表" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
			titleStyle='color:#ffffff'></u-navbar>
	</view>

	<view class="taskList">
		<view class="taskData">
			<view class="label">任务编号: </view>
			<view>123</view>
		</view>
		<view class="taskData">
			<view class="label">商城名称: </view>
			<view>123</view>
		</view>
		<view class="taskData">
			<view class="label">品牌: </view>
			<view>213</view>
		</view>
		<view class="taskData">
			<view class="label">盘点时间: </view>
			<view>1231</view>
			<view>123</view>
		</view>
		<view class="row-button">
			<button class="button" @click="goDetails(1)">随机盘点</button>
			<button class="button" @click="goDetails(2)">按库位盘点</button>
		</view>
		<view class="row-button">
			<button class="button" @click="goDetails(3)">按合同号盘点</button>
			<button class="button" @click="goDetails(4)">按托盘盘点</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	/**
	 * 1 : 随机盘点
	 * 2 : 按库位盘点
	 * 3 : 按合同号盘点
	 * 4 : 按托盘盘点
	 */

	const details = reactive({
		checkType: {
			1: '随机盘点',
			2: '按库位盘点',
			3: '按合同号盘点',
			4: '按托盘盘点'
		}
	})

	const goDetails = (type : number | string) => {
		const data = {

			type, data: {
				title: details.checkType[type]
			}

		}
		uni.navigateTo({
			url: `/pagesTask/pages/dynamicCheckDetails/dynamicCheckDetails?data=${JSON.stringify(data)}`
		})
	}
</script>

<style lang="scss">
	.taskList {
		padding: 10upx;
		border-bottom: 1upx solid #000;
		font-size: 28upx; // 本页字体大小

		.taskData {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20upx;
		}

		.label {
			width: 160upx;
		}
	}

	.row-button {
		display: flex;
		justify-content: space-between;
		margin: 20upx 0;

		.button {
			margin: 0;
			font-size: 28upx;
		}
	}
</style>