<template>
	<view class="content flex flex_column">
		<view id="tab">
			<view class="header u-flex">
				<view class="tab">
					<u-tabs :show-bar="false" :active-item-style="activeItemStyle" :list="tabsList" :is-scroll="false" :current="params.allCustomerFlag" @change="changeTabs"></u-tabs>
				</view>
				<view class="payType u-flex" @click="gatherShow = true">
					<view class="u-line-1" v-if="!payTypeWord" :style="{ color: wordColor }">收款方式</view>
					<view class="u-line-1" v-else :style="{ color: $config('primaryColor') }">{{payTypeWord}}</view>
					<u-icon name="shaixuan" custom-prefix="iscm-icon" size="30" :color="wordColor"></u-icon>
				</view>
			</view>
			<view class="scroll-con u-flex u-row-between" v-show="params.allCustomerFlag == 0">
				<scroll-view scroll-x class="scroll-date">
					<view class="u-flex" v-show="!showType">
						<view v-for="(item, i) in dayGatherArr" :key="i">
							<view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
								<view>{{item}}</view>
								<view>{{i==0?'今日':'昨日'}}</view>
							</view>
							<view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">{{item.split('.')[1]}}</view>
						</view>
					</view>
					<view class="u-flex" v-show="showType">
						<view v-for="(con, j) in monthGatherArr" :key="j">
							<view class="scroll-box" :class="chooseNum == j ? 'activeBox' : ''" v-if="j < 2" @click="handleDate(j)">
								<view>{{con}}</view>
								<view>{{j==0?'本月':'上月'}}</view>
							</view>
							<view class="scroll-box" v-else :class="chooseNum == j ? 'activeBox' : ''" @click="handleDate(j)">{{con}}</view>
						</view>
					</view>
				</scroll-view>
				<u-image :src="`../../static/${theme}/navIcon/dayImg.png`" width="42" height="42" v-show="!showType" @click="chooseType"></u-image>
				<u-image :src="`../../static/${theme}/navIcon/monthImg.png`" width="42" height="42" v-show="showType" @click="chooseType"></u-image>
			</view>
			<view class="customer-search" v-show="params.allCustomerFlag == 1">
				<!-- <u-search 
					v-model="keyword"
					@input="$u.debounce(getSearchCon, 800)"
					@search="getSearchCon"
					@custom="getSearchCon"
					@clear="clearSearch"
					:show-action="false"
					placeholder="请输入客户名称/拼音首字母查询"
				></u-search> -->
				<view class="searchInput u-flex u-row-between">
					<icon type="search" color="#333" @click="getSearchCon" size="18"/>
					<input class="uni-input" placeholder="请输入客户名称/拼音首字母查询" :value="keyword" @input="clearInput"/>
					<icon type="clear" :style="{'opacity':isGobleSearch?1:0}" @click="$delayDel(clearSearch)" size="18"/>
				</view>
			</view>
		</view>
		<view class="customer-con">
			<customerList ref="customer" :height="listHeight" :params="params" ></customerList>
		</view>
		<!-- 收款方式弹窗 -->
		<search :showModal="gatherShow" @refresh="refreshList" @close="gatherShow=false"/>
	</view>
	
</template>

<script>
import search from './gather.vue'
import customerList from './customerList.vue'
import { queryVerifySalesParams } from '@/api/dealerBizParam.js';
import getDate from '@/libs/getDate.js';
export default {
	components:{search,customerList},
	data() {
		return {
			tabsList: [
				{
					name: '最近开单'
				},
				{
					name: '全部客户'
				}
			],
			isGobleSearch:false,
			payTypeWord:null,
			activeItemStyle: {
				color: this.$config('primaryColor'),
				borderBottom: '4rpx solid ' + this.$config('primaryColor')
			},
			wordColor: this.$config('infoColor'),
			theme: '',
			showType: false,
			
			chooseNum: 0,
			
			keyword:'',
			gatherShow:false,
			params:{
				allCustomerFlag:0 ,//1全部  0需要查询条件
				customer:{
					queryWord:undefined,
					settleStyleSn:undefined
				},
				bizBeginDate:undefined,
				bizEndDate:undefined
			},
			pageNo:1,
			pageSize:15,
			noDataText: '暂无数据',
			listHeight:200,
			dayGatherArr:[],
			monthGatherArr:[]
		};
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$config('primaryColor')
		});
		const query = uni.createSelectorQuery().in(this);
		query.select('#tab').boundingClientRect(data => {
		  this.listHeight = Math.floor(data.height)
		}).exec();
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '/pages/sales/billHistory'
		});
	},
	onLoad() {
		this.theme = getApp().globalData.theme;
		this.getSetInfo();
		//获取日期集合
		this.dayGatherArr = getDate.getWeekGather();
		this.monthGatherArr = getDate.getMonthGather();
	},
	onBackPress() {
		if(this.gatherShow){
			this.gatherShow = false
		}else{
			uni.removeStorageSync('curTab')
		}
	},
	onUnload() {
		uni.removeStorageSync('curTab')
	},
	methods: {
		//获取系统参数
		getSetInfo(){
			// month day all
			queryVerifySalesParams({}).then(res => {
				let result = res.data;
				let obj=result.find(item=>{return item.remarks == 'verify_default_customer'})
				if(obj.paramValue == 'all'){
					this.params.allCustomerFlag = 1;
					this.refreshList();
				}else if(obj.paramValue == 'month'){
					this.showType = true
				}else{
					this.showType = false
				}
				if(this.params.allCustomerFlag != 1){
					this.momentTime(0)
				}
				//获取系统对账周期设置
				this.$store.state.vuex_systemSetList = result
			});
		},
		changeTabs(index) {
			this.params.allCustomerFlag = index;
			if(index==1){
				this.clearTime();
				this.$refs.customer.refash();
			}else{
				this.momentTime(this.chooseNum)
				this.keyword = ''
				this.params.customer.queryWord = ''
			}
		},
		handleDate(i) {
			this.chooseNum = i;
			this.momentTime(i)
		},
		chooseType() {
			this.chooseNum  = 0;
			this.showType = !this.showType;
			this.momentTime(0)
		},
		momentTime(pos){
			var obj=null;
			if(!this.showType){//日
				 obj =getDate.getFullToday(this.dayGatherArr[pos])
			}else{
				obj=getDate.getFullMonth(this.monthGatherArr[pos])
			}
			this.params.bizBeginDate = obj.starttime;
			this.params.bizEndDate = obj.endtime;
			this.refreshList();
		},
		clearInput(event) {
		    this.keyword = event.detail.value;
		    if (event.detail.value.length > 0) {
		        this.isGobleSearch = true;
		    } else {
		        this.isGobleSearch = false;
		    }
			this.getSearchCon()
		},
		getSearchCon(){
			this.params.customer.queryWord = this.keyword.trim();
			this.refreshList();
		},
		clearSearch(){
			this.keyword = ''
			this.isGobleSearch = false
			this.params.customer.queryWord = undefined
			this.refreshList();
		},
		refreshList(e){
			const _this= this
			if(e){
				_this.params.customer.settleStyleSn = e.code;
				_this.payTypeWord = e.dispName
			}
			if(e == 'reSet'){
				_this.params.customer.settleStyleSn= undefined;
				_this.payTypeWord = null
			}
			this.$nextTick(()=>{
				_this.$refs.customer.refash();
			})
		},
		clearTime(){
			this.params.bizBeginDate = undefined;
			this.params.bizEndDate = undefined;
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100vh;
	.header {
		position: relative;
		background: #fff;
		.tab {
			width: 50%;
			margin: 0 auto;
		}
		.payType {
			position: absolute;
			right: 18rpx;
			max-width: 160rpx;
			view {
				font-size: 26rpx;
			}
		}
	}
	.scroll-con {
		width: 100%;
		background: #fff;
		margin: 6rpx 0;
		padding: 10rpx 20rpx;
		.scroll-date {
			width: calc(100% - 62rpx);
			.scroll-box {
				margin-right: 28rpx;
				padding: 10rpx 20rpx;
				text-align: center;
				font-size: 26rpx;
				view {
					&:last-child {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			.activeBox {
				font-weight: bold;
				color: $uni-color-primary;
				view {
					&:last-child {
						font-size: 24rpx;
						color: $uni-color-primary;
					}
				}
			}
		}
	}
	.customer-con {
		flex-grow: 1;
		overflow: auto;
		background: #fff;
	}
	//选择客户
	.customer-search {
		padding: 10rpx 20rpx;
		background: #fff;
		margin: 6rpx 0;
		.searchInput{
			padding: 12rpx 20rpx;
			box-sizing: border-box;
			border-radius: 38rpx;
			background-color: rgb(242, 242, 242);
			input{
				width: 82%;
				font-size: 30rpx;
			}
		}
	}
}
</style>
