<template>
	<view class="content flex flex_column">
		<view class="header">
			<view class="headerList u-flex">
				<view class="list_l">
					<u-icon name="clock" color="#00aaff" size="32"></u-icon>
					<text>对账周期</text>
				</view>
				<view class="list_r u-flex">
					<u-input v-model="brandName" @click="timeShow=true" disabled placeholder="请选择对账日期"  />
					<u-icon name="arrow-right" color="#999" size="30"></u-icon>
				</view>
			</view>
			<view class="headerList u-flex">
				<view class="list_l">
					<u-icon name="account" color="#00aaff" size="32"></u-icon>
					<text>客户名称</text>
				</view>
				<view class="list_r u-flex">
					<u-input v-model="brandName" @click="customerShow=true" disabled placeholder="请选择客户名称"  />
					<u-icon name="arrow-right" color="#999" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="statistical u-flex">
			<view class="statisticalList">
				<text>总单数：</text>
				<text>34</text>
			</view>
			<view class="statisticalList">
				<text>待收金额合计：</text>
				<text>￥123456.08</text>
			</view>
		</view>
		<view class="chooseCon">
			<view class="chooseList u-flex">
				<view class="checkbox">
					<u-checkbox v-model="checked" :name="productSn" @change="checkChange" size="40" shape="circle"></u-checkbox>
				</view>
				<view class="choose_r">
					<view class="u-flex u-row-between">
						<view class="billInfo u-flex">
							<text>2022-11-23</text>
							<view>待出库</view>
							<view>数字货架</view>
						</view>
						<view class="billOrder">
							XS211230001
						</view>
					</view>
					<view class="rigth_b u-flex u-row-between">
						<view>应收：￥12.00</view>
						<view>已收：￥12.00</view>
						<view>待收：<text>￥12.00</text></view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="footer u-flex">
			<view class="f-left">
				<u-checkbox  @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
			</view>
			<view class="f-mid" @click="isDetailShow=!isDetailShow">
				<view class="u-flex">
					<view>待收：<text>￥80.00</text></view>
					<view style="margin-left: 6rpx;">/ 折后：<text>￥80.00</text></view>
				</view>
				<view class="u-flex">
					<view>
						折让：<text>￥0.00</text>
					</view>
					<view class="costBtn">
						打折
					</view>
				</view>
			</view>
			<view class="f-btns">
				<u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >发送对账单</u-button>
			</view>
		</view>
		<!-- 时间、客户选择弹窗 -->
		<u-picker  mode="time" v-model="timeShow" :params="params"></u-picker>
		<u-picker mode="selector" v-model="customerShow"  :default-selector="[0]"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{//配置时间选项
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timeShow:false,
				customerShow:false,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff',
					width:'180rpx'
				},
				allChecked:false
			};
		},
		
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		.header{
			width: 100%;
			.headerList{
				width: 100%;
				box-sizing: border-box;
				padding:16rpx 20rpx;
				background: #fff;
				&:last-child{
				border-top:1rpx solid #e4e7ed;	
				}
				.list_l{
					width: 170rpx;
					text{
						font-size: 28rpx;
						color: #666666;
						margin-left: 10rpx;
					}
				}
				.list_r{
					width: calc(100% - 170rpx);
				}
			}
		}
			.statistical{
				padding:20rpx;
				background: #fff;
				margin:10rpx 0;
				.statisticalList{
				&:first-child{
					width: 210rpx;
				}
				}
				text{
					&:last-child{
						color:$uni-color-warning;
						font-weight: 600;
					}
				}
			}
			.chooseCon{
				flex-grow: 1;
				overflow: auto;
				background-color: #fff;
				.chooseList{
					padding:20rpx;
					border-bottom:1rpx solid #e4e7ed;
					&:last-child{
						border-bottom:0rpx solid #e4e7ed;
					}
					.checkbox{
						width: 74rpx;
					}
					.choose_r{
						flex:1;
						.billInfo{
							text{
								font-weight: 600;
							}
							view{
								padding:4rpx 10rpx;
								text-align: center;
								border-radius: 30rpx;
								border:1rpx solid #e4e7ed;
								margin-left: 10rpx;
								font-size: .7rem;
								color: #666;
							}
						}
						.billOrder{
							font-size: .8rem;
							color: #666;
						}
						.rigth_b{
							color: #666;
							font-size: 0.8rem;
							margin-top: 10rpx;
							view{
								&:last-child{
									color:#333;
									text{
										color:$uni-color-warning;
									}
								}
							}
						}
					}
				}
			}
		.footer{
			background-color: #f8f8f8;
			padding: 20rpx;
			.f-mid{
				flex-grow: 1;
				color: #666;
				font-size: 0.8rem;
				> view{
					&:first-child{
						text{
							color: $uni-color-warning;
							vertical-align: middle;
						}
					}
					&:last-child{
						text{
							color: $uni-color-primary;
							vertical-align: middle;
						}
					}
				}
				.costBtn{
					width:70rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color:#fff;
					font-size: 20rpx;
					border-radius: 30rpx;
					background: #999;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>