<template>
	<view class="sales-list-wrap">
		<view class="head-info" id="tjCons">
			<view class="search-top-box" @click="openShlefModal=true">
				<text>{{searchForm.shelfSnList.length?('已选'+searchForm.shelfSnList.length+'个货架'):'全部货架'}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="countData" v-if="countData">
				<view>总款数：<text>{{countData.productCategory}}</text>；</view>
				<view>总数量：<text>{{countData.totalQty}}</text>；</view>
				<view>总结算金额：<text>￥{{countData.settleAmount}}</text>；</view>
			</view>
		</view>
		<!-- 销售单列表 -->
		<view class="list-box">
			<listComponent ref="salesList" :height="listHeight" :params="searchParams" />
		</view>
		<!-- 查询右侧弹框 -->
		<search :openModal="openModal" :billStatusOpt="billStatusOpt" :defaultParams="searchForm" @refresh="refresh" @close="openModal=false" />
		<!-- 选择货架 -->
		<chooseShelf :openModal="openShlefModal" :defaultParams="searchForm.shelfSnList" @refresh="refreshList" @close="openShlefModal=false" />
	</view>
</template>

<script>
	import ListComponent from './listComponent.vue'
	import search from './search.vue'
	import chooseShelf from './chooseShelf.vue'
	import { getLookUpItem } from '@/api/data'
	import { orderBillQueryPage, orderBillQueryCount } from '@/api/shelf'
	export default{
		components: { ListComponent, search, chooseShelf },
		data(){
			return{
				listData: [],
				pageNo: 1,
				pageSize: 15,
				totalNum: 0,
				noDataText: '暂无数据',
				billStatusOpt: [],
				searchForm: {
					shelfSnList: []
				},
				searchParams: {},
				listHeight: 200,
				openModal: false,
				openShlefModal: false,
				countData: null
			}
		},
		onNavigationBarButtonTap(e){  // 标题栏 按钮操作
			this.openModal = true
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#tjCons').boundingClientRect(data => {
			  this.listHeight = Math.floor(data.height + 10)
			}).exec();
		},
		onLoad() {
			const _this = this
			this.getLookUpItem('ORDER_BILL_STATE')
			this.$nextTick(function(){
				// 监听整改完成后刷新事件
				uni.$on('refreshSalesBL', function(data){
					_this.$refs.salesList.getList(1)
					_this.getCount()
				})
			})
			this.getCount()
		},
		onUnload() {
			uni.$off('refreshSalesBL')
		},
		methods: {
			getCount(){
				orderBillQueryCount(this.searchParams).then(res => {
					this.countData = res.data || null
				})
			},
			// 获取查询参数 刷新列表
			refresh(params){
				const _this = this
				this.searchParams = Object.assign(this.searchForm,params)
				this.searchParams.orderStartDate = params&&params.orderStartDate ? (params.orderStartDate + ' 00:00:00') : ''
				this.searchParams.orderEndDate = params&&params.orderEndDate ? (params.orderEndDate + ' 23:59:59') : ''
				this.$nextTick(function(){
					_this.$refs.salesList.refash()
					_this.getCount()
				})
			},
			refreshList(data){
				this.searchForm.shelfSnList = data
				this.refresh(this.searchForm)
			},
			// 状态  change
			handleChange(type){
				this.$refs.salesList.refash()
				this.getCount()
			},
			// 配送方式
			getLookUpItem (type) {
				getLookUpItem({ lookupCode: type, pageNo: 1, pageSize: 1000 }).then(res => {
					if (res.status == 200 && res.data && res.data.list) {
						res.data.list.map(item => {
							item.label = item.dispName
							item.value = item.code
						})
						this.billStatusOpt = res.data.list
					} else {
						this.billStatusOpt = []
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sales-list-wrap{
		width: 100%;
		.head-info{
			.search-top-box{
				background-color: #fff;
				text-align: center;
				padding-bottom: 20rpx;
			}
			.countData{
				background: #fff;
				margin: 20upx 20upx 0;
				display: flex;
				padding: 15upx;
				border-radius: 15rpx;
				text{
					color: #ffb355;
				}
				font-size: 24rpx;
			}
		}
		.list-box{
			padding: 0 25upx;
		}
	}
</style>
