<template>
	<view class="content flex flex_column">
		<view class="header u-flex">
			<view class="tab">
				<u-tabs :show-bar="false" :active-item-style="activeItemStyle" :list="tabsList" :is-scroll="false" :current="current" @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="tabCon flex flex_column" v-show="current == 0">
			<view class="scroll-con u-flex u-row-between">
				<scroll-view scroll-x class="scroll-date">
					<view class="u-flex" v-show="!showType">
						<view v-for="(item, i) in 10" :key="i">
							<view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
								<view>11.{{ i + 1 }}</view>
								<view>今日</view>
							</view>
							<view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">{{ i + 1 }}</view>
						</view>
					</view>
					<view class="u-flex" v-show="showType">
						<view v-for="(item, i) in 10" :key="i">
							<view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
								<view>2022.{{ i + 1 }}</view>
								<view>本月</view>
							</view>
							<view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">2022.{{ i + 1 }}</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-con">
				<view class="customer-list">
					<view class="u-line-1">按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配</view>
					<view class="customer-b u-flex">
						<view class="customer-box">
							<text>欠款：</text>
							<text>￥582222.00</text>
						</view>
						<view class="customer-box">收款方式：现金</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabCon flex flex_column" v-show="current == 1">
			<view class="customer-search">
				<u-search
					v-model="keyword"
					@input="$u.debounce(getSearchCon, 800)"
					@search="getSearchCon"
					@custom="getSearchCon"
					@clear="clearSearch"
					:show-action="false"
					placeholder="请输入客户名称拼音首字母查询"
				></u-search>
			</view>
			<view class="customer-con">
				<u-index-list :scrollTop="scrollTop">
					<view v-for="(item, index) in indexList" :key="index">
						<u-index-anchor :index="item" />
						<view class="customer-list">
							<view class="u-line-1">按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配</view>
							<view class="customer-b u-flex">
								<view class="customer-box">
									<text>欠款：</text>
									<text>￥582222.00</text>
								</view>
								<view class="customer-box">收款方式：现金</view>
							</view>
						</view>
					</view>
				</u-index-list>
			</view>
		</view>
		<!-- 收款方式弹窗 -->
		<search :showModal="gatherShow" @refresh="refreshList" @close="gatherShow=false"/>
	</view>
</template>

<script>
import search from './gather.vue'
export default {
	components:{search},
	data() {
		return {
			tabsList: [
				{
					name: '最近开单'
				},
				{
					name: '全部用户'
				}
			],
			current: 0,
			activeItemStyle: {
				color: this.$config('primaryColor'),
				borderBottom: '4rpx solid ' + this.$config('primaryColor')
			},
			wordColor: this.$config('infoColor'),
			theme: '',
			chooseNum: 0,
			showType: false,
			indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			scrollTop: 0,
			keyword:'',
			gatherShow:false
		};
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$config('primaryColor')
		});
	},
	onLoad() {
		this.theme = getApp().globalData.theme;
	},
	onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
	methods: {
		changeTabs(index) {
			this.current = index;
		},
		handleDate(i) {
			this.chooseNum = i;
		},
		chooseType() {
			this.showType = !this.showType;
		},
		getSearchCon(){
			
		},
		clearSearch(){
			
		},
		refreshList(){
			
		}
	}
};
</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;
			}
		}
	}
	.tabCon {
		flex-grow: 1;
		.scroll-con {
			width: 100%;
			background: #fff;
			margin: 6rpx 0;
			padding: 10rpx 20rpx;
			.scroll-date {
				width: calc(100% - 62rpx);
				.scroll-box {
					margin-right: 20rpx;
					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-list {
				padding: 20rpx;
				border-bottom: 1rpx solid #f8f8f8;
			}
			.customer-b {
				margin-top: 10rpx;
				color: #666;
				font-size: 26rpx;
				.customer-box {
					width: 46%;
					text {
						&:last-child {
							color: $uni-color-warning;
						}
					}
				}
			}
		}
		//选择客户
		.customer-search {
			padding: 10rpx 20rpx;
			background: #fff;
			margin: 6rpx 0;
		}
	}
}
</style>
