<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" @click="gatherShow = true">
					<text :style="{ color: wordColor }">收款方式</text>
					<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>
		</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: '全部客户'
				}
			],
			activeItemStyle: {
				color: this.$config('primaryColor'),
				borderBottom: '4rpx solid ' + this.$config('primaryColor')
			},
			wordColor: this.$config('infoColor'),
			theme: '',
			showType: false,
			
			chooseNum: 0,
			
			keyword:'',
			gatherShow:false,
			systemSetList:null,//系统参数列表
			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();
	},
	onLoad() {
		this.theme = getApp().globalData.theme;
		this.getSetInfo();
		//获取日期集合
		this.dayGatherArr = getDate.getWeekGather();
		this.monthGatherArr = getDate.getMonthGather();
	},
	onBackPress() {
		if(this.gatherShow){
			this.gatherShow = false
			return true
		}
	},
	methods: {
		//获取系统参数
		getSetInfo(){
			// month day all
			queryVerifySalesParams({}).then(res => {
				this.systemSetList = res.data;
				let obj=res.data.find(item=>{return item.remarks == 'verify_default_customer'})
				if(obj.paramValue == 'all'){
					this.params.allCustomerFlag = 1;
				}else if(obj.paramValue == 'month'){
					this.showType = true
				}else{
					this.showType = false
				}
				this.momentTime(0)
			});
		},
		changeTabs(index) {
			this.params.allCustomerFlag = index;
			this.$refs.customer.getList(1);
		},
		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();
		},
		getSearchCon(){
			this.params.customer.queryWord = this.keyword.trim();
			this.refreshList();
		},
		clearSearch(){
			this.refreshList();
		},
		refreshList(e){
			const _this= this
			if(e){
				_this.params.customer.settleStyleSn = e.code;
			}
			this.$nextTick(()=>{
				_this.$refs.customer.getList(1);
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100vh;
	.header {
		position: relative;
		background: #fff;
		.tab {
			width: 60%;
			margin: 0 auto;
		}
		.payType {
			position: absolute;
			right: 20rpx;
			text {
				vertical-align: top;
				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;
	}
}
</style>
