<template>
	<!-- 顶部导航栏 -->
	<u-navbar title="运单查询" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
		titleStyle='color:#ffffff'></u-navbar>

	<view class="container primaryColor">
		<!-- 顶部搜索栏 -->
		<view class="header-search">
			<view class="mr20 flex-c-c picker rem-0-8">
				<picker @change="bindPickerChange" :value="searchForm.scanStateChooseIndex"
					:range="searchForm.searchTypeList.map(val => val.label)">
					<view class="uni-input">
						{{searchForm.searchTypeList.map(val => val.label)[searchForm.scanStateChooseIndex]}}
					</view>
				</picker>
			</view>

			<view class="search flex1 mr20">
				<input class="searchInput" v-model="searchForm.code" type="text">
				<view class="clear_icon" v-if="searchForm.code" @click="searchForm.code = ''">
					<u-icon size="40" color="#172e60" name="close-circle"></u-icon>
				</view>
			</view>

			<view class="search">
				<view class="searchType" @click="scandata">
					搜索
				</view>
			</view>
		</view>

		<!-- 数据详情 -->
		<view class="dataInfo">
			<!-- 运单数据 -->
			<view class="pd15">
				<!-- 运单号 -->
				<view class="mb10 fwb rem-1 flex">
					<view>
						运单号：
					</view>

					<view>
						{{waybillInfo.waybillNo}}
					</view>
				</view>

				<!-- 发货仓和目的仓 -->
				<view class="mb20 rem-0-9 flex-c-sb">
					<!-- 发货仓 -->
					<view class="text-start">
						<view>
							发货仓
						</view>

						<view class="mt20">
							发货单位
						</view>
					</view>

					<view class="text-center">
						<!-- 箭头 -->
						<view class="flex-c-c">
							<view class="status-garden">

							</view>

							<view class="status-line">

							</view>

							<view class="status-triangle">

							</view>
						</view>
						<view class="">
							状态
						</view>
					</view>

					<view class="text-end">
						<view>
							目的仓
						</view>

						<view class="mt20">
							收货单位
						</view>
					</view>
				</view>


			</view>

			<!-- 虚线 -->
			<view class="border-bottom-dashed mb20"></view>

			<!-- 服务信息 -->
			<view class="mb20 pd15 rem-0-9">
				<view class="flex mb10">
					<view class="mr10">
						<u-icon size="40" color="#172e60" name="server-man"></u-icon>
					</view>

					<view class="">
						服务类型：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						发货人：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						发货人联系方式：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						收件人：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						收件人联系方式：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						收货地址：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						货物总数：
					</view>

					<view class="">
						1
					</view>
				</view>
			</view>

			<!-- 虚线 -->
			<view class="border-bottom-dashed mb20"></view>

			<!-- 始发仓数据 -->
			<view class="mb20 pd15 rem-0-9">
				<view class="flex mb10">
					<view class="mr10">
						<u-icon size="40" color='#172e60' name="map-fill"></u-icon>
					</view>
					<view class="">
						始发仓：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						在库数量：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						在途数量：
					</view>

					<view class="">
						1
					</view>
				</view>
			</view>

			<!-- 虚线 -->
			<view class="border-bottom-dashed mb20"></view>

			<!-- 中转仓数据 -->
			<view class="mb20 pd15 rem-0-9">
				<view class="flex mb10">
					<view class="mr10">
						<u-icon size="40" color='#172e60' name="map-fill"></u-icon>
					</view>
					<view class="">
						中转仓：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						在途数量：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						中转仓A：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						在库数量：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						中转仓B：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex">
					<view class="label">
						在库数量：
					</view>

					<view class="">
						1
					</view>
				</view>
			</view>

			<!-- 虚线 -->
			<view class="border-bottom-dashed mb20"></view>

			<!-- 目的仓数据 -->
			<view class="mb20 pd15 rem-0-9">
				<view class="flex mb10">
					<view class="mr10">
						<u-icon size="40" color='#172e60' name="map-fill"></u-icon>
					</view>
					<view class="">
						目的仓：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						在库数量：
					</view>

					<view class="">
						1
					</view>
				</view>

				<view class="flex">
					<view class="label">
						在途数量：
					</view>

					<view class="">
						1
					</view>
				</view>
			</view>

			<!-- 虚线 -->
			<view class="border-bottom-dashed mb20"></view>

			<!-- 目的仓数据 -->
			<view class=" pd15 rem-0-9">
				<view class="flex mb10">
					<view class="mr10 ">
						<u-icon size="40" color="#172e60" name="car-fill"></u-icon>
					</view>

					<view class="">
						配送：
					</view>

					<view class="">
						{{waybillInfo.deliveryNum || 0}}
					</view>
				</view>

				<view class="flex mb10">
					<view class="label">
						已签收数量：
					</view>

					<view class="success">
						{{waybillInfo.signingNum || 0}}
					</view>
				</view>

				<view class="flex">
					<view class="label">
						未签收数量：
					</view>

					<view class="danger">
						{{(waybillInfo.deliveryNum || 0) - (waybillInfo.signingNum || 0)}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<tiplist ref="tiplists"></tiplist>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef } from 'vue';
	import {
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import utils from '@/utils/utils.js';
	import {
		postDeliveryInfo,
	} from '@/api/user.js'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())

	/** 订单详情 */
	const dataInfo = shallowRef<any>({})

	/** 包件列表 */
	const packageList = ref([])


	/** 扫码码值 */
	const scancode = ref<string>('')

	/** 订单状态字典 */
	const orderStateDictionaries = reactive({
		'10': '部分入库',
		'20': '已入库',
		'30': '部分出库',
		'40': '已出库',
		'50': '部分装车',
		'60': '已装车',
		'70': '部分签收',
		'80': '已签收',
	})

	/** 顶部搜素表单 */
	const searchForm = reactive({
		code: '',
		searchTypeList: [
			{
				label: '运单查询',
				type: 1
			},
			{
				label: '订单查询',
				type: 2
			},
		],
		scanStateChooseIndex: 0,
	})

	const waybillInfo = ref({})

	// 组件实例
	const tiplists = ref(null)

	onLoad(() => {
		// #ifdef APP
		utils.ttsspke('订单查询, 请扫描或输入包条码')
		// #endif
	})

	// 开启监听扫描
	onShow(async () => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				scancode.value = code

				searchForm.code = code
				scandata()
			}
		})
		// #endif
	})

	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			dataInfo.value = {}
			searchForm.code = ''
			packageList.value = []

			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	async function scandata() {
		if (searchForm.code === '') return utils.handleToast('请输入正确的订单号')
		const submitData = {
			type: searchForm.searchTypeList[searchForm.scanStateChooseIndex].type,
			code: searchForm.code
		}
		const res = await postDeliveryInfo(submitData)
		const { code, data } = res

		if (code !== 200) return


		waybillInfo.value = data
		waybillInfo.value.waybillNo = searchForm.code
	}

	/**
	 * 选择搜索类型
	 */
	function bindPickerChange(e) {
		if (e.detail.value !== searchForm.scanStateChooseIndex) uni.showToast({
			title: '切换成功',
			icon: 'none',
			duration: 1500
		})
		console.log('picker发送选择改变，携带值为', e.detail.value)
		searchForm.scanStateChooseIndex = e.detail.value
		// 传入索引, 修改仓库中存储的状态
	}
</script>

<style lang="scss" scoped>
	@import url("@/utils/style/common.scss");

	// 最外层容器
	.container {
		padding: 20upx;
		font-size: 28upx; // 本页字体大小
	}

	// 顶部搜索栏
	.header-search {
		height: 60upx;
		padding: 0 0 20upx;
		// border-bottom: 2upx solid #aaa;
		display: flex;
		justify-content: space-between;

		.picker {
			color: #fff;
			background: var(--subjectColor);
			padding: 0 30upx;
			border-radius: 10upx;
		}
	}

	.search {
		position: relative;

		// 查询结果的列表
		.searchResultList {
			position: absolute;
			top: 120%;
			width: 100%;
			background: #fff;
			z-index: 80;
			text-align: center;
			line-height: 60upx;
			max-height: 300upx;
			overflow-y: scroll;
		}

		.clear_icon {
			position: absolute;
			top: 52%;
			right: 20upx;
			transform: translateY(-50%);
		}
	}

	// 搜索输入框
	.searchInput {
		background: #fff;
		// width: 500upx;
		height: 100%;
		padding-left: 20upx;
		border: 2upx solid var(--subjectColor);
		border-radius: 30upx;
		padding-right: 60upx;
		box-sizing: border-box;
	}

	// 搜索类型
	.searchType {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 40upx;
		background: var(--subjectColor);
		border-radius: 10upx;
		color: #fff;
	}

	// 数据详情
	.dataInfo {
		// border: 2upx solid #aaa;
		background: #fff;
		border-radius: 10upx;

		.label {
			min-width: 150upx;
			flex: none;
		}
	}

	.border-bottom-solid {
		border-bottom: 2upx solid #172e60;
	}

	.border-bottom-dashed {
		border-bottom: 1upx dashed #172e60;
	}

	$arrowsColor: #f94a56;

	.status-garden {
		width: 24upx;
		height: 24upx;
		background: $arrowsColor;
		border-radius: 50%;
		margin-left: 10upx;
	}

	.status-line {
		width: 200upx;
		height: 6upx;
		background: $arrowsColor;
	}

	.status-triangle {
		width: 0;
		height: 0;
		border: 16upx solid transparent;
		border-right: none;
		border-left: 34upx solid;
		border-left-color: $arrowsColor;
		border-radius: 10upx;
	}

	.success {
		color: #0f0;
	}

	.danger {
		color: #f94a56;
	}
</style>