<template>
	<view class="delivery-man">
		 <headersVue @headerJump="topgi" header-title="选择送货人"></headersVue>
	 <view class="delivery-man__content">
		 <view class="delivery-man__list" v-if="userData.length===0">
			 <view class="delivery-man__list--top">
		    <template v-for="index in 5">
				<view class="delivery-man__list--top-item">
				<view class="delivery-man__list--top-item--left">
					<label class="radio">
					<radio value="1" checked="true" />
					<text>配送人姓名1</text>
					</label>
				</view>
				<view class="delivery-man__list--top-item--middle">
					<view class="user-phone">
						15000000000
					</view>
					</view>
				
				<view class="delivery-man__list--top-item--right">
				 
				  <view class="user-icon">
				  	<uni-icons type="compose" size="28" @click="handleAddUser('edit',index)"></uni-icons>
				  	<uni-icons type="trash" size="28"></uni-icons>

				  </view>
				</view>
				</view>
			</template>
						
			 </view>
			 <view class="delivery-man__list--bottom">
			 			<view class="btn-list">
							<button
							 @click="handleAddUser('add')"
							  class="btn-default"
							>
							 添加送货人
							</button>
							<button
							  type="primary"
							  class="btn-primary"
							  @click="handleConfirm"
							>
							确  认
							</button>
			 				
			 			</view>
			 </view>
		 </view>
		<view class="empty__info" v-else>
			<deliveryManEmptyVue />
			<view class="delivery-man_btn">
				<button
				  type="primary"
				  class="elivery-man_btn-item"
				  @click="handleAddUser('add')"
				>
				 添加送货人
				</button>
			</view>
		</view>
		</view>
		<addSelectUserVue ref="addUserRefs"/>
	</view>
</template>

<script>
	import headersVue from "../components/headers/headers.vue";
	import addSelectUserVue from "./components/deliveryManModules/addSelectUser.vue";
	import deliveryManEmptyVue from "./components/deliveryManModules/deliveryManEmpty.vue";
	import {copy,toQueryString} from "@/utils/index.js"
	export default {
		components:{headersVue,deliveryManEmptyVue,addSelectUserVue},
		data() {
			return {
				indexs: "",
				status: "",
				order_id: "", //订单ID
				goodsCustomType:"",
				userData:[]
			};
		},
		onLoad(e) {
		  this.order_id = e.order_id;
		  this.indexs = e.indexs;
		  this.status = e.status;
		  this.goodsCustomType = e.goodsCustomType;
		},
		methods:{
			handleConfirm(){
				console.log("选择确定")
			},
			handleAddUser(type,index){
				if(type === 'add'){
					this.$refs.addUserRefs.open()
				}else{//编辑
				this.$refs.addUserRefs.setDataValue({
					user_name:'佛系少年'+index,
					user_phone:"99995231231313"
				})
					this.$refs.addUserRefs.open()
				}
				
			},
			topgi(){
				const urlParams = {
					status:this.status,
					index:this.indexs,
					goodsCustomType:this.goodsCustomType,
					order_id:this.order_id
				}
				const url = toQueryString(urlParams)
				uni.redirectTo({
				  url:`./sendoutgoods?${url}`,
				});
			}
		}
	}
</script>
<style>
page {
  background-color: #f7f8fc;
  height: 100%;
}
</style>
<style lang="scss">
.delivery-man{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	&__content {
	  width: 100%;
	   margin: 95rpx 0 0rpx;
	   height: calc(100% - 0rpx);
	   overflow:hidden;
	   .delivery-man__list{
		   box-sizing: border-box;
		   background: #FFFFFF;
		   height: calc(100% - 0rpx);
		  
		   display: flex;
		   flex-direction: column;
		    justify-content: space-between;
		   &--top{
			  overflow-y: auto;
			   // border:2rpx solid #f00;
			   flex-shrink: 0;
			    flex:1;
				padding:10rpx 32rpx 30rpx;
				&-item{
					padding: 26rpx 0;
					border-bottom: 2rpx solid  #E5E5E5;
					display: flex;
					justify-content: flex-start;
					&:last-child{
						border-bottom: none;
					}
					&--left{
						flex: 0 0 35%;
					}
					&--middle{
						flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex-wrap: wrap;
					padding:0 15rpx;
						.user-phone{
							word-break:break-all;
							word-wrap: break-word;
						}
					}
					&--right{
						width: 90rpx;
                        
						.user-icon{
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
		   }
		   &--bottom{
				 height: 120rpx;
				 flex-shrink: 0;
				 
			   .btn-list{
				   user-select: none;
				   display: flex;
				   padding: 10rpx 26rpx 0;
				    gap:26rpx;
				   
			   }
			 
				.btn-default,.btn-primary{
					height: 78rpx;
					flex:1;
					font-weight: 400;
					font-size: 30rpx;
					border-radius: 8rpx;
				}
				.btn-default{
					color: #333333;
				}
				.btn-primary{
					color: #FFFFFF;
				}
		   }
	   }
	  .delivery-man_btn {
	    width: 100%;
	    position: fixed;
	    bottom: 0rpx;
		height: 160rpx;
		background: #FFFFFF;
	    .elivery-man_btn-item{
			height: 78rpx;
			margin: 10rpx 32rpx 0;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	  }
	}
}
</style>
