<template>
	<z-paging ref="paging" v-model="Datalisy" @query="queryList">
	<view>
		<view  class="list list-mt" v-for="(item,index) in Datalisy" :key="index" @click="btn">
			<view v-if="item.box==1" class="list-Openonbehalf">
				特批价|代开
			</view>
			<view class="list-data df jcsb">
				<div>订单编号:&emsp;{{item.sex}}</div>
				<div style="color:#FF1449 ;" v-if="item.status==0">待审核</div>
				<div style="color:#FF7D02 ;" v-if="item.status==1">待出库</div>
				<div style="color:#FF7D02 ;" v-if="item.status==2">待出库(部分)</div>
				<div style="color:#00C594 ;" v-if="item.status==3">待发货</div>
				<div style="color:#00BEF9 ;" v-if="item.status==4">已收货</div>
				<div style="color:#999999 ;" v-if="item.status==5">已取消</div>
			</view>
			<div class="list-Splitline"></div>
			<div class="list-hospital">客户名称<span>{{item.household}}</span> <span>私人医院</span></div>
			<view class="list-time">
				下单时间<span>{{item.date}}</span><span>{{item.time}}</span>
			</view>
			<view class="list-money">
				合计1种商品，<span>订单金额{{item.statusdata}}</span>
				<span v-if="item.Received==0">(待收款)</span>
				<span v-if="item.Received==1">(待确认)</span>
				<span v-if="item.Received==2">(已收款)</span>
				<span v-if="item.Received==3">(部分确认)</span>
				<span v-if="item.Received==4">(待付款)</span>
			</view>
			<view class="list-btn df">
				<div class="df aic jcsa">新增收款</div>
				<div class="df aic jcsa" @click="quers">确认收款</div>
				<div class="df aic jcsa" @click="zaici">再次订购</div>
			</view>
		</view>
		<view class="shade-head">
			<template>
				<u-overlay :show="show">
					<view class="shade">
						<u-navbar title="订单" :autoBack="false" leftIconSize="0" placeholder>
							<u-icon name="list" slot="right" color="rgb(36, 188, 243)" size="24" @click="statusbtn">
							</u-icon>
						</u-navbar>
						<u-input shape='circle' :customStyle="{
									margin: '16rpx 24rpx 0 24rpx',
										backgroundColor: 'rgb(246, 246, 246)',
								}" placeholder="请输入订单号/客户名称/收货人/联系电话" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
						</u-input>
						<view class="mask">
							<u-picker :show="show1" :columns="columns"></u-picker>
							<div class=" mask-tobe df jcsb" @click="show1=true">
								<div>订单状态</div>
								<div class="df">
									<text>全部</text>
									<u-icon name="arrow-right" color="#fff"></u-icon>
								</div>
							</div>
							<div class="mask-fode"></div>
		
							<u-picker :show="show1" :columns="columns"></u-picker>
							<div class=" mask-tobe df jcsb" @click="show1=true">
								<div>付款状态</div>
								<div class="df">
									<text>全部</text>
									<u-icon name="arrow-right" color="#fff"></u-icon>
								</div>
							</div>
							<div class="mask-fode"></div>
		
							<u-picker :show="show1" :columns="columns"></u-picker>
							<div class=" mask-tobe df jcsb" @click="show1=true">
								<div>下单时间起</div>
								<div class="df">
									<text>全部</text>
									<u-icon name="arrow-right" color="#fff"></u-icon>
								</div>
							</div>
							<div class="mask-fode"></div>
		
							<u-picker :show="show1" :columns="columns"></u-picker>
							<div class=" mask-tobe df jcsb" @click="show1=true">
								<div>下单时间止</div>
								<div class="df">
									<text>全部</text>
									<u-icon name="arrow-right" color="#fff"></u-icon>
								</div>
							</div>
							<div class="mask-fode"></div>
		
							<u-picker :show="show1" :columns="columns"></u-picker>
							<div class=" mask-tobe df jcsb" @click="show1=true">
								<div>业务员</div>
								<div class="df">
									<text>全部</text>
									<u-icon name="arrow-right" color="#fff"></u-icon>
								</div>
							</div>
							<div class="mask-fode"></div>
		
		
						</view>
		
					</view>
				</u-overlay>
			</template>
		</view>
	</view>
	</z-paging>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
					indexa:0,
					columns: [
						['中国', '美国', '日本']
					],
					value: '',
					show: false,
					list1: [{
						name: '全部',
					}, {
						name: '待审核',
					}, {
						name: '待出库'
					}, {
						name: '待发货'
					}, {
						name: '已收货'
					}, 
					{
						name: '待收货'
					},
					{
						name: '待确认收款'
					}],
					Datalisy: [{
							sex: '202209012-0001',
							status: 0,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 0,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 0,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 1,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 1,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 0,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 1,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 1,
							box: 1
						},
						{
							sex: '202209012-0001',
							status: 1,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 0,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 3,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 1,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 3,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 0,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 1,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 4,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 4,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 0,
							box: 0
						},
						{
							sex: '202209012-0001',
							status: 4,
							household: '好大夫诊所',
							type: 0,
							date: '2021-09-12',
							time: '18:20:21',
							statusdata: '￥1000',
							Received: 2,
							box: 0
						}
					]
				
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
			// this.$refs.paging.complete(this.Datalisy);
			
			},
			quers(){
				this.$util.showToast({
					title: '收款成功',
				});
			},
			zaici(){
				this.$util.showToast({
					title: '再次订购',
				});
			},
			statusbtn(item) {
				// this.show=true
				console.log('item', item);
			},
			change(e) {
				console.log('change', e);
			},
			btn(){
				uni.navigateTo({
					// url:this.list[this.current.URL]
					// url:'../Order_details/Order_details'
				})
			},
			
		}
	
	}
</script>

<style lang="scss">
.list {
		margin: 42rpx 24rpx 0 24rpx;
		width: 702rpx;
		height: 424rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		// padding: 32rpx;
		box-sizing: border-box;

		padding: 24rpx;
		position: relative;

		.list-Openonbehalf {
			text-align: center;
			background: #00C594;
			border-radius: 30rpx;
			position: absolute;
			top: -10rpx;
			left: 0;
			width: 142rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
		}

		.list-data {}

		.list-data div:nth-child(1) {

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.list-data div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;

			line-height: 40rpx;
		}

		.list-Splitline {
			width: 638rpx;
			height: 2rpx;
			background: #F2F2F2;
			border-radius: 16rpx;
			margin-top: 28rpx;
		}

		.list-hospital {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-top: 30rpx;
		}

		.list-hospital span:nth-child(1) {

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-left: 42rpx;
			margin-right: 16rpx;
		}

		.list-hospital span:nth-child(2) {
			width: 92rpx;
			height: 36rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF7D02;
			line-height: 28rpx;
			background-color: rgb(255, 240, 226);
		}

		.list-time {
			margin-top: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		.list-time span:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-right: 10rpx;
			margin-left: 42rpx;
		}

		.list-time span:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.list-money {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
		}

		.list-money span:nth-child(1) {
			color: rgb(58, 58, 58);
			font-family: PingFangSC-Regular, PingFang SC;
			font-size: 28rpx;
		}

		.list-money span:nth-child(2) {
			color: rgb(58, 58, 58);
			font-family: PingFangSC-Regular, PingFang SC;
			font-size: 28rpx;
		}

		.list-btn {
			margin-top: 32rpx;
		}

		.list-btn div:nth-child(1) {
			width: 176rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 2rpx solid #E8E8E8;
			margin-left: 94rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
		}

		.list-btn div:nth-child(2) {
			width: 176rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 2rpx solid #E8E8E8;
			margin-left: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
		}

		.list-btn div:nth-child(3) {
			width: 176rpx;
			height: 60rpx;
			background: #21BBF3;
			border-radius: 30rpx;
			margin-left: 24rpx;

			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 34rpx;
		}
	}
	.list-mt{
		margin-top: 28rpx;
	}
</style>
