<template>
	<view class="sales-list-wrap">
		<view class="head-info" id="tjCons">
			<view class="search-top-box" @click="openShlefModal=true">
				<text v-if="searchForm.shelfSnList.length==1">{{curShelfName}}</text>
				<text v-if="searchForm.shelfSnList.length>1">{{'已选'+searchForm.shelfSnList.length+'个货架'}}</text>
				<text v-if="searchForm.shelfSnList.length==0">全部货架</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="countData">
				<view>总款数:<text>{{countData&&countData.productCategory||0}}</text>;</view>
				<view>总数量:<text>{{countData&&countData.totalQty||0}}</text>;</view>
				<view>总结算金额:<text>¥{{countData&&countData.settleAmount||0}}</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: 0,
				openModal: false,
				openShlefModal: false,
				countData: null,
				curShelfName: ''
			}
		},
		onNavigationBarButtonTap(e){  // 标题栏 按钮操作
			this.openModal = true
			this.openShlefModal = false
		},
		onBackPress() {
			if(this.openModal||this.openShlefModal){
				this.openModal = false
				this.openShlefModal = false
				return true
			}
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#tjCons').boundingClientRect(data => {
			  this.listHeight = Math.floor(data.height-25)
			}).exec();
		},
		onLoad(opts) {
			console.log(opts)
			const _this = this
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
			
			this.getLookUpItem('ORDER_BILL_STATE')
			// 从消息页面过来
			if(opts.bizType == 'SHELF_WARN'&&opts.shelfSn){
				this.searchForm.shelfSnList = [opts.shelfSn]
				this.searchParams.shelfSnList = [opts.shelfSn]
				this.curShelfName = opts.shelfName
			}
			
			this.$nextTick(function(){
				this.$refs.salesList.getList(1)
				this.getCount()
			})
			
			// 监听整改完成后刷新事件
			uni.$on('refreshSalesBL', function(data){
				_this.$refs.salesList.getList(1)
				_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 = {shelfSnList:this.searchForm.shelfSnList,...params}
				this.searchParams.orderStartDate = params&&params.orderStartDate ? (params.orderStartDate + ' 00:00:00') : ''
				this.searchParams.orderEndDate = params&&params.orderEndDate ? (params.orderEndDate + ' 23:59:59') : ''
				console.log(this.searchParams)
				this.$nextTick(function(){
					_this.$refs.salesList.refash()
					_this.getCount()
				})
			},
			refreshList(data, shelfName){
				this.searchForm.shelfSnList = data
				this.curShelfName = shelfName
				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: 20rpx 0;
			}
			.countData{
				background: #fff;
				margin: 20upx 20upx 0;
				display: flex;
				padding: 15upx;
				border-radius: 15rpx;
				text{
					color: #ff5500;
				}
				font-size: 24rpx;
			}
		}
		.list-box{
			padding: 0 25upx;
		}
	}
</style>