<template>
	<view class="homePage-container">
		<!-- 筛选弹框 -->
		<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen = false"></search-modal>
		<view class="homePage-head">
			<view class="head-con">
				<text class="homePage-tit">套餐销售记录</text>
				<view class="total-con">
					<text class="goleNum">{{ totalObj.cnt || 0 }}</text> 单，
					<text class="goleNum">{{ totalObj.totalAmounts || 0 }}</text> 元
				</view>
			</view>
			<image class="filter-icon" src="@/static/filter.png" @tap="openScreen = true"></image>
		</view>
		<scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
			<!-- 列表数据 -->
			<view class="list-cont">
				<view class="list-item-con" v-for="(item, index) in listdata" :key="index">
					<view class="con-header">
						<text class="item-time">{{ item.orderDate }}</text>
						<text class="item-orderNo">{{ item.number }}</text>
					</view>
					<view class="con-main" @click="viewRow(item)">
						<view class="con-main-m">
							<view class="item-bundleName">{{ item.bundleName }}</view>
							<view class="item-bundleMain">
								<text class="item-cname">{{ item.custName }}</text>
								<view class="item-phone" @click.stop="goTel(item.custMobile)">
									<u-icon name="phone" size="28"></u-icon>
									{{ item.custMobile }}
								</view>
							</view>
						</view>
						<u-icon name="arrow-right" size="28"></u-icon>
					</view>
					<view class="con-footer">
						<view class="item-price">
							实收：
							<text>¥{{ item.payedAmount }}</text>
						</view>
						<view class="item-type">
							付款方式：
							<text>现金</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty class="nodata" :text="noDataText" v-if="listdata.length == 0 && status != 'loading'" mode="list"></u-empty>
			<view class="loadmore"><u-loadmore v-if="total > pageSize || status == 'loading'" :status="status" /></view>
		</scroll-view>
	</view>
</template>
<script>
import searchModal from './searchModal.vue';
import { listCustomerBundle, countListBundle } from '@/api/customerBundle'
import { getLookUpDatas } from '@/api/data'
export default {
	components: { searchModal },
	data() {
		return {
			listdata: [],
			pageNo: 1, //  当前页码
			pageSize: 10, //  每页条数
			total: 0, //  数据总条数
			noDataText: '暂无数据', //  列表请求状态提示语
			status: 'loadmore', //  加载中状态
			openScreen: false, //  是否打开筛选
			searchForm: {
				//  查询条件
				beginDate: '', //  创建时间默认筛选近7天
				endDate: '', //  创建时间默认筛选近7天
				bundleName: '',  //  套餐名称
				queryWord: '', // 客户手机
			},
			scrollTop: 0, //  滚动条位置
			totalObj: null,
			payTypeList: []  //  支付方式  数据
		};
	},
	onLoad(option) {
		// 获取支付，收款方式
		this.getLookUpList('PAY_PROCUCT_TYPE');
	},
	onShow() {
		this.openScreen = false; //  关闭筛选框
		this.refresh({});
	},
	methods: {
		// 或某一项字典列表，参数code
		getLookUpList(code) {
			getLookUpDatas({ type: code }).then(res => {
				if (res.status == 200) {
					this.payTypeList = res.data || []
				}
			});
		},
		filterVal(val){
			let row = this.payTypeList.find(item => item.payType == val)
			
		},
		//  总计
		getGoldLogTotal() {
			countListBundle({
				beginDate: this.searchForm.beginDate,
				endDate: this.searchForm.endDate,
				bundleName: this.searchForm.bundleName,
				queryWord: this.searchForm.queryWord
			}).then(res => {
				if (res.status == 200) {
					this.totalObj = res.data
				} else {
					this.totalObj = null
				}
			});
		},
		// 获取查询参数 刷新列表
		refresh(params) {
			this.searchForm = params;
			this.listdata = [];
			this.total = 0;
			this.searchHandle(1);
			this.getGoldLogTotal();
		},
		// 搜索查询
		searchHandle(pageNo) {
			this.status = 'loading';
			pageNo ? (this.pageNo = pageNo) : null;
			listCustomerBundle({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				beginDate: this.searchForm.beginDate,
				endDate: this.searchForm.endDate,
				bundleName: this.searchForm.bundleName,
				queryWord: this.searchForm.queryWord
			}).then(res => {
				if (res.status == 200) {
					if (this.pageNo > 1) {
						this.listdata = this.listdata.concat(res.data.list || []);
					} else {
						this.listdata = res.data.list || [];
						this.scrollTop = 0;
					}
					this.total = res.data.count || 0;
					this.noDataText = '暂无数据';
				} else {
					this.noDataText = res.message;
					this.listdata = [];
					this.total = 0;
				}
				this.status = 'loadmore';
			});
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			if (this.listdata.length < this.total) {
				this.pageNo += 1;
				this.searchHandle();
			} else {
				uni.showToast({ title: '已经到底了', icon: 'none' });
				this.status = 'nomore';
			}
		},
		// 详细页
		viewRow(item){
			// 已完成的
			uni.navigateTo({
				url: "/pages/workOrder/sellOrder/customBundleDetail?id="+item.id
			})
		},
		//  拨打电话
		goTel(phone){
			uni.makePhoneCall({
			    phoneNumber: phone
			})
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.homePage-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-top: 102rpx;
	// 筛选菜单
	.homePage-head {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		padding: 26rpx 30rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 14rpx rgba(0, 0, 0, 0.05);
		width: 100%;
		border-top: 10rpx solid #f8f8f8;
		.head-con {
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.homePage-tit {
				color: #040301;
			}
			.total-con {
				color: #040301;
				.goleNum {
					color: #eb0000;
					font-size: 30rpx;
					// font-weight: bold;
				}
				.ld-icon {
					width: 30rpx;
					height: 30rpx;
					margin: 0 0 0 10rpx;
					vertical-align: middle;
				}
			}
		}
		.filter-icon {
			flex-shrink: 0;
			width: 36rpx;
			height: 36rpx;
			padding-left: 20rpx;
		}
	}
	//  列表
	.scroll-con {
		flex: 1;
		// height: calc(100% - 40);
		overflow: auto;
		//  列表样式
		.list-cont{
			.list-item-con{
				background: #ffffff;
				padding: 10rpx 20rpx;
				margin: 24rpx;
				border-radius: 6rpx;
				box-shadow: 2rpx 2rpx 6rpx #EEEEEE;
				.con-header, .con-main, .con-footer{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.con-header{
					font-size: 24rpx;
					padding: 20rpx 10rpx;
					border-bottom: 1px dashed #F8F8F8;
					.item-time{
						color: #666;
					}
					.item-orderNo{
						color: #333;
					}
				}
				.con-main{
					font-size: 28rpx;
					color: #333;
					padding: 20rpx 10rpx;
					border-bottom: 1px dashed #F8F8F8;
					.con-main-m{
						.item-bundleName{
							margin-bottom: 14rpx;
						}
						.item-bundleMain{
							.item-cname{
								display: inline-block;
								margin-right: 10rpx;
							}
							.item-phone{
								display: inline-block;
							}
						}
					}
				}
				.con-footer{
					padding: 20rpx 10rpx;
					.item-price{
						text{
							font-size: 30rpx;
							color: red;
						}
					}
				}
			}
		}
	}
}
</style>
