<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>
					<u-icon name="question-circle-fill" @click="tipShow = true" :color="wordColor" size="32"></u-icon>
				</view>
				<view class="list_r u-flex">
					<u-input v-model="brandName" @click="showSearch=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="jumpPage('/pages/sales/chooseCustomerBill')" 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">
			<billList :showCheck="true"></billList>
		</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" @click="costShow= true">
						打折
					</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-popup v-model="showSearch" mode="right" width="70%">
			<view class="tabBox">
				<view class="tabs">
					<view class="flex">
						<view :class="item.val==curTab?'active':'all'" v-for="item in placeTab" :key="item.val" @click="tabChange(item)">{{item.name}}</view>
					</view>
				</view>
				<view class="flex align_center form-item-inp" style="padding: 0 30rpx;" v-if="curTab == 6">
					<u-input clearable v-model="dateArray" disabled placeholder="请选择时间段" @click="showDate=true" />
					<u-icon name="arrow-down" color="#999"></u-icon>
				</view>
				<view class="form-footer-btn">
					<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
					<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 选择日期范围 -->
		<u-calendar v-model="showDate" ref="rangeDate" @change="dateChange" mode="range"></u-calendar>
		<!-- 打折弹窗 -->
		<u-popup v-model="costShow" mode="center" :border-radius="20" closeable width="80%">
			<view class="costPopup">
				<view class="costPopupTit">
					东莞市京步车证汽车服务中心
				</view>
				<view class="costPopupCon">
					<view class="costList">
						<text class="label">待收金额：</text>
						<text>￥527.00</text>
					</view>
					<view class="costList u-flex">
						<view class="label">折让金额：</view>
						<u-input v-model="value" type="number" :border="true" :height="50"/>
					</view>
					<view class="costText">
						折让后金额
					</view>
					<view class="costText">
						￥500.00
					</view>
				</view>
				<u-button type="primary" :custom-style="customStyle" shape="circle">确定</u-button>
			</view>
		</u-popup>
		<!-- 对账周期弹窗 -->
		<u-modal v-model="tipShow" :show-title="false" :content="tipContent" confirm-text="知道了"></u-modal>
	</view>
</template>

<script>
	import billList from './billListComponent.vue'
	export default {
		components: { billList },
		data() {
			return {
				params:{//配置时间选项
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				checked:true,
				brandName:'',
				timeShow:false,
				customerShow:false,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff',
					width:'180rpx'
				},
				wordColor:this.$config('infoColor'),
				customStyle:{
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff',
				},
				allChecked:false,
				tipShow:false,
				value:'',
				tipContent:`账单周期指销售单的创建时间`,
				placeTab: [
					{
						name:'今日',
						val: '0'
					},
					{
						name:'昨日',
						val: '1'
					},
					{
						name:'本周',
						val: '2'
					},
					
					{
						name:'上周',
						val: '3'
					},
					{
						name:'本月',
						val: '4'
					},
					{
						name:'上月',
						val: '5'
					},
					{
						name:'自定义',
						val: '6'
					}
				],
				curTab: '4',
				showSearch:false,
				showDate:false,
				costShow:false
			};
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onNavigationBarButtonTap() {
			// this.showSearch = true
			uni.navigateTo({
				url:'/pages/sales/billHistory'
			})
		},
		onBackPress() {
			if(this.showSearch){
				this.showSearch = false
				return true
			}
		},
		methods:{
			// 时间  change
			dateChange(date){
				this.dateArray = date.startDate + ' ~ ' + date.endDate
				this.queryPramas.beginDate = date.startDate + ' 00:00:00'
				this.queryPramas.endDate = date.endDate + ' 23:59:59'
				//#ifdef APP-PLUS
				this.webView.setTitleNViewButtonStyle(0, {
					"text":"\ue626 "+date.startDate.substr(5)+"至"+date.endDate.substr(5),
					"color": "#00aaff",
					"width": "130px"
				});
				//#endif
			},
			tabChange(data){
				this.curTab = data.val
				if(data.val != 6){
					//#ifdef APP-PLUS
					this.webView.setTitleNViewButtonStyle(0, {
						"text":"\ue626 "+data.name,
						"color": "#00aaff",
						"width": "80px"
					});
					//#endif
				}else{
					this.dateArray = ''
					this.queryPramas.beginDate = ''
					this.queryPramas.endDate = ''
				}
			},
			jumpPage(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</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:208rpx;
					text{
						font-size: 28rpx;
						color: #666666;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}
				.list_r{
					width: calc(100% - 208rpx);
				}
			}
		}
			.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;
			}
		.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;
				}
			}
		}
		// 历史对账单弹窗
		.tabBox{
			height: 100vh;
			.tabs{
				flex-grow: 1;
				overflow: auto;
				padding: 20rpx;
				> view{
					flex-wrap: wrap;
					justify-content: space-between;
					> view{
						width: 45%;
						border: 1rpx solid #eee;
						padding: 15rpx;
						border-radius: 50rpx;
						text-align: center;
						margin-bottom: 15rpx;
					}
					.active{
						border:0;
						background-color: #0485F6;
						color: #fff;
					}
				}
			}
			.form-item-inp{
				border-bottom: 1rpx solid #eee;
			}
			.form-footer-btn{
				margin: 30upx;
				display: flex;
				justify-content: space-between;
			}
			.form-footer-btn {
				display: flex;
				.handle-btn {
					font-size: 28upx;
					margin: 0 10upx;
					flex: 1;
				}
			}
		}
		//打折弹窗
		.costPopup{
			padding:26rpx 20rpx 40rpx;
			box-sizing: border-box;
			.costPopupTit{
				text-align: center;
				font-weight: bold;
			}
			.costPopupCon{
				margin-top:40rpx;
				.costList{
					margin-bottom:20rpx;
					.label{
						color: $uni-text-color-grey;
					}
				}
				.costText{
					text-align: center;
					color: $uni-text-color-grey;
					font-size: 22rpx;
					margin-top:40rpx;
					&:last-child{
						font-weight: bold;
						color:$uni-color-error;
						font-size: 32rpx;
						line-height: 60rpx;
						margin-top:0rpx;
						margin-bottom: 50rpx;
					}
				}
			}
		}
	}
</style>