<template>
	<view class="content flex flex_column">
		<view class="header">
			<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="customerObj.customerName" @click="jumpPage('/pages/sales/chooseCustomerBill')" 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="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="cycleName" @click="showSearch = 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>{{bill.length}}</text>
			</view>
			<view class="statisticalList">
				<text>待收金额合计：</text>
				<text>￥{{totalPayPrice}}</text>
			</view>
		</view>
		<view class="chooseCon"><billList ref="bill" :showCheck="true" :list="bill"></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>
					待收：
					<text>￥{{chooseTotalPayPrice}}</text>
				</view>
				<view>
					折后：
					<text>￥{{settlement}}</text>
				</view>
				<view class="u-flex">
					<view>
						折让：
						<text>￥{{discountVal || 0}}</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="请选择时间段" input-align="center" @click="showDate = true" />
				</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="82%">
			<view class="costPopup">
				<view class="costPopupTit">东莞市京步车证汽车服务中心</view>
				<view class="costPopupCon">
					<view class="costList">
						<text class="label">待收金额：</text>
						<text>￥{{totalPayPrice}}</text>
					</view>
					<view class="costList u-flex">
						<view class="label">折让金额：</view>
						<u-input v-model="discountVal" @input="onKeyInput" :border="true" :height="50"/>
					</view>
					<view class="tip" v-if="discountVal>totalPayPrice">折让金额不能大于待收金额，请重新输入</view>
					<view class="costText">折让后金额</view>
					<view class="costText">￥{{settlement}}</view>
				</view>
				<u-button type="primary" :custom-style="customStyle" shape="circle" @click="handleDisCount">确定</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';
import { queryUnsettleSaleList,insert } from '@/api/verify.js';
import getDate from '@/libs/getDate.js';
export default {
	components: { billList },
	data() {
		return {
			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,
			discountVal: null,//折让金额
			tipContent: `账单周期指销售单的创建时间`,
			placeTab: [
				{
					name: '今日',
					val: '0'
				},
				{
					name: '昨日',
					val: '1'
				},
				{
					name: '本周',
					val: '2'
				},

				{
					name: '上周',
					val: '3'
				},
				{
					name: '本月',
					val: '4'
				},
				{
					name: '上月',
					val: '5'
				},
				{
					name: '自定义',
					val: '6'
				},
				{
					name: '全部',
					val: '7'
				}
			],
			curTab: '0',
			
			showSearch: false,
			showDate: false,
			costShow: false,
			
			customerObj: {
				customerName: null
			},
			cycleName: '',
			
			params: {
				targetSn: '437705264826884096',
				bizBeginDate: undefined,
				bizEndDate: undefined
			},
			bill: [],
			dateArray:''
		};
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$config('primaryColor')
		});
	},
	onLoad(options) {
		//获取对账周期默认值
		let systemList = this.$store.state.vuex_systemSetList;
		let cycleObj = systemList.find(item => {
			return item.remarks == 'sales_bill_period';
		});
		this.curTab = this.placeTab.findIndex(con => con.name == cycleObj.valueShow);
		this.cycleName = this.changeShowTime();
		// 获取选择客户
		if (options && options.data) {
			this.customerObj = JSON.parse(options.data);
			// this.params.targetSn = this.customerObj.customerSn;
		}
		this.changeTime();
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '/pages/sales/billHistory'
		});
	},
	onBackPress() {
		if (this.showSearch) {
			this.showSearch = false;
			return true;
		}
	},
	computed: {
		totalPayPrice() {
			let totalPrice = 0;
			for (let i = 0; i < this.bill.length; i++) {
				this.bill[i].unsettleAmount = this.bill[i].unsettleAmount ? this.bill[i].unsettleAmount :0
				totalPrice += this.bill[i].unsettleAmount;
			}
			return totalPrice || 0;
		},
		// settlement(){
		// 	return this.totalPayPrice - this.discountVal || 0;
		// }
	},
	methods: {
		changeTime() {
			if (this.curTab != 6 && this.curTab != 7) {
				this.params.bizBeginDate = this.getQueryDate().beginDate;
				this.params.bizEndDate = this.getQueryDate().endDate;
				this.cycleName = this.changeShowTime();
			}else if(this.curTab == 7){
				this.cycleName = this.placeTab[this.curTab].name;
				this.params.bizBeginDate = undefined;
				this.params.bizEndDate = undefined;
			}else{
				this.dateArray = ''
			}
			this.getList();
		},
		getList() {
			const _this = this;
			queryUnsettleSaleList(this.params).then(res => {
				if (res.status == 200) {
					this.bill = res.data;
					this.$refs.bill.setData(res.data);
				}
			});
		},
		// 时间  change
		dateChange(date) {
			this.dateArray = date.startDate + ' ~ ' + date.endDate;
			this.params.bizBeginDate = date.startDate + ' 00:00:00';
			this.params.bizEndDate = date.endDate + ' 23:59:59';
			this.cycleName=date.startDate + '至' + date.endDate;
		},
		// 更改日期格式显示
		changeShowTime(){
			const fun = [getDate.getTodayInfo, getDate.getYesterdayInfo, getDate.getCurrWeekDaysInfo, getDate.getLastWeekDaysInfo, getDate.getCurrLastMonthDaysInfo, getDate.getLastMonthDaysInfo];
			return fun[this.curTab]();
		},
		tabChange(data) {
			this.curTab = data.val;
		},
		getQueryDate() {
			const fun = [getDate.getToday, getDate.getYesterday, getDate.getCurrWeekDays, getDate.getLastWeekDays, getDate.getCurrLastMonthDays, getDate.getLastMonthDays];
			return {
				beginDate: fun[this.curTab]().starttime,
				endDate: fun[this.curTab]().endtime
			};
		},
		handleSearch() {
			this.showSearch = false;
			this.changeTime();
		},
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		handleDisCount(){
			this.costShow = false
		},
		submitOrder(){//发送对账单
			
		},
		allCheckeChange(){
			this.$refs.bill.allSelect(e.value)
			const list = this.$refs.bill.getAllData()
		}
	}
};
</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:10rpx 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;
				}
			}
			.tip{
				color: $uni-color-error;
				font-size: 20rpx;
				text-align: right;
			}
			.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>
