<template>
	<view class="content">
		<u-search placeholder="搜索你的订单" @search="getOrderList" :show-action="false" bg-color="white"
			v-model="keywords"></u-search>


		<view class="cards" v-for="item,index in orderlist" :key="index">
			<view class="li">订单编号: {{item.order_sn}}</view>
			<view class="li">取货时间: {{item.qh_time}}</view>
			<view class="li">手机号: {{item.receiver_phone}}</view>
			<view class="btn_li">收货人姓名: {{fuzzyName(item.receiver_name)}} <u-button type="primary" class="btn"
					@click="doneFn(item.id)"><u-icon name="car-fill" color="white" size="25"
						style="margin-right: 10rpx;;"></u-icon>
					货物送达</u-button></view>
		</view>

		<view>
			<u-modal :show="showPop" @close="showPop=false" title="请输入收件码" @confirm="confirm"
				:closeOnClickOverlay="true">
				<view class="slot-content">
					<u--input placeholder="请输入收件码" type="number" border="surround" v-model="take_code"></u--input>
				</view>
			</u-modal>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		getList
	} from "@/api/logistics.js"
	import {
		doneDelivery
	} from "@/api/logistics.js"
	export default {
		data() {
			return {
				showPop: false,
				keywords: "",
				orderlist: [],
				is_captain: "",
				take_code: "",
				order_id: "",
			}
		},
		methods: {
			fuzzyName(name) {
				let length = name.length;
				let fuzzyChars = "*".repeat(length - 1);
				return name[0] + fuzzyChars;
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'success',
					title: '成功主题(带图标)',
					message: "操作成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
			},
			doneFn(id) {
				this.order_id = id
				this.showPop = true
			},
			confirm() {
				if (!this.take_code) return
				doneDelivery({
					take_code: this.take_code,
					logistics_id: this.order_id,
				}).then(res => {
					this.showToast()

				})
				this.showPop = false
				this.getOrderList()
			},
			getOrderList() {
				console.log("列表更新")
				let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
				getList({
					status: 1,
					user_id: id,
					keywords: this.keywords,
					user_type: this.is_captain
				}).then(res => {
					this.orderlist = []
					this.orderlist = res.data.data
				})
			}
		},
		onLoad() {
			this.is_captain = JSON.parse(uni.getStorageSync('USER_INFO')).is_captain
			this.getOrderList()
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.cards {
			padding: 2vw;
			border-radius: 15rpx;
			background-color: white;
			margin: 30rpx 0;

			.li {
				// margin: 10rpx 0;
				height: 43rpx;
			}

			.btn_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 43rpx;

				.btn {
					background-color: #FF7C32;
					border: 0;
					border-radius: 2vw;
					width: auto;
					height: 60rpx;

				}
			}
		}
	}
</style>