<template>
	<view class="lists">
		<view class="status_bar" :style="navHeight"></view>
		<view class="main" :style="mainHeight">
			<view class="query-header-block">
				<view class="query-header-title" @click="toggleQuery">
					<text class="query-title-text">查询条件</text>
					<image class="query-toggle-icon" :src="isQueryCollapsed ? '/static/image/arrow_down@3x.png' : '/static/image/arrow_up@3x.png'" mode="aspectFit"></image>
				</view>
				<button class="btn btn-small" type="default" @tap="search">
					<text class="btn-text">查询</text>
				</button>
			</view>
			<view class="middle view planout-block-item" v-if="!isQueryCollapsed">
				<view class="text-block">
					<text class="middle-date">积分明细编码</text>
					<input class="middle-date-des" type="text" v-model="queryForm.pointDetailId" placeholder="请输入" />
				</view>
				<view class="text-block">
					<text class="middle-date">使用积分订单</text>
					<input class="middle-date-des" type="text" v-model="queryForm.usageOrderNumber" placeholder="请输入" />
				</view>
				<view class="text-block">
					<text class="middle-date">使用状态</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerStatusChange" range-key='label' mode="selector"
									:value="statusView" :range="usageStatusOptions">
									<text class="uni-input-text">{{ statusView || '请选择' }}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">积分使用方式</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerUsageChange" range-key='label' mode="selector"
									:value="usageView" :range="pointUsageOptions">
									<text class="uni-input-text">{{ usageView || '请选择' }}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="text-block text-block-last">
					<text class="middle-date">积分使用时间</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerStartDateChange" mode="date"
									:value="queryForm.startDate" fields='day'>
									<text class="uni-input-text">{{ queryForm.startDate || '开始日期' }}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="text-block text-block-last">
					<text class="middle-date">至</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerEndDateChange" mode="date"
									:value="queryForm.endDate" fields='day'>
									<text class="uni-input-text">{{ queryForm.endDate || '结束日期' }}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<list ref="list" class="scroll-area view" loadmoreoffset='100' @loadmore="scrolltolower"
				:show-scrollbar='false'>
				<refresh @refresh="refresh" :display="refreshing ? 'show' : 'hide'">
				</refresh>
				<cell v-for="(item,index) in lists" :key="index">
					<view class="order view">
						<view class="top">
							<text class="title-no">积分明细编码：{{ item.detailId || '--' }}</text>
							<view class="title-info" v-if="item.usageStatus">
								<button class="title-info__status" type="default">
									<text class="item-block-btn__text">{{ getUsageStatusText(item.usageStatus) }}</text>
								</button>
							</view>
						</view>
						<view class="middle view">
							<view class="text-block-row">
								<view class="text-block text-block-half">
									<text class="middle-date-des">积分用途</text>
									<text class="middle-date">{{ getPointUsageText(item.pointUsage) }}</text>
								</view>
								<view class="text-block text-block-half">
									<text class="middle-date-des">用途单号</text>
									<text class="middle-date">{{ item.usageOrderNumber || '--' }}</text>
								</view>
							</view>
							<view class="text-block-row">
								<view class="text-block text-block-half">
									<text class="middle-date-des">使用时间</text>
									<text class="middle-date">{{ item.usageTime || '--' }}</text>
								</view>
								<view class="text-block text-block-half">
									<text class="middle-date-des">积分使用数量</text>
									<text class="middle-date">{{ item.usedPointAmount || '0' }}</text>
								</view>
							</view>
						</view>
					</view>
				</cell>
				<cell>
					<view class="loading-more" v-if='lists.length>2'>
						<text class="loading-more-text">{{loadingText}}</text>
					</view>
				</cell>
			</list>
			<no-data v-if="lists.length === 0 && !loading"></no-data>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	import { fetchDistributerPointUsePage } from '@/servers/integral.js'
	import noData from '@/components/nodata.nvue'
	
	const USAGE_STATUS_TEXT = {
		FREEZE: '冻结',
		USED: '使用',
		CANCEL: '取消'
	}
	
	const POINT_USAGE_TEXT = {
		DISCOUNT: '折扣',
		EXCHANGE: '兑换'
	}
	
	export default {
		components: {
			noData
		},
		data() {
			return {
				isQueryCollapsed: true,
				loading: false,
				refreshing: false,
				loadingText: '加载中...',
				queryForm: {
					pointDetailId: '',
					usageOrderNumber: '',
					usageStatus: '',
					pointUsage: '',
					startDate: '',
					endDate: ''
				},
				usageStatusOptions: [
					{ label: '全部', value: '' },
					{ label: '冻结', value: 'FREEZE' },
					{ label: '使用', value: 'USED' },
					{ label: '取消', value: 'CANCEL' }
				],
				pointUsageOptions: [
					{ label: '全部', value: '' },
					{ label: '折扣', value: 'DISCOUNT' },
					{ label: '兑换', value: 'EXCHANGE' }
				],
				statusView: '',
				usageView: '',
				lists: [],
				page: {
					PAGE: "1",
					PAGESIZE: "10",
				},
				loadParams: {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				}
			}
		},
		computed: {
			...mapState(['sysinfo', 'userInfo']),
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			mainHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height - 44 }px`,
				}
			}
		},
		created() {
			this.getSalesPlan(true)
		},
		methods: {
			toggleQuery() {
				this.isQueryCollapsed = !this.isQueryCollapsed
			},
			getUsageStatusText(status) {
				return USAGE_STATUS_TEXT[status] || status || '--'
			},
			getPointUsageText(usage) {
				return POINT_USAGE_TEXT[usage] || usage || '--'
			},
			bindPickerStatusChange(e) {
				const idx = e.detail.value || 0
				this.queryForm.usageStatus = this.usageStatusOptions[idx].value
				this.statusView = this.usageStatusOptions[idx].label
			},
			bindPickerUsageChange(e) {
				const idx = e.detail.value || 0
				this.queryForm.pointUsage = this.pointUsageOptions[idx].value
				this.usageView = this.pointUsageOptions[idx].label
			},
			bindPickerStartDateChange(e) {
				this.queryForm.startDate = e.detail.value
			},
			bindPickerEndDateChange(e) {
				this.queryForm.endDate = e.detail.value
			},
			search() {
				this.reset()
				this.getSalesPlan(true)
			},
			async getSalesPlan(isRefresh) {
				if (isRefresh) {
					this.page.PAGE = 1
				}
				if (this.loadParams.isDone) {
					return
				}
				this.loading = true
				const params = this.buildPayload()
				
				uni.showLoading({
					title: '加载中'
				})
				
				try {
					const res = await fetchDistributerPointUsePage(params)
					uni.hideLoading()
					
					if (!res || res.status !== 1) {
						this.lists = []
						this.loadParams.total = 0
						this.loadParams.totalPage = 1
						uni.showToast({
							title: (res && res.msg) || '查询失败',
							icon: 'none'
						})
						return
					}
					
					const rows = (res.data && res.data.Rows) || []
					const total = (res.data && res.data.Total) || 0
					
					this.loadParams.total = total * 1
					this.loadParams.totalPage = Math.ceil(total * 1 / this.page.PAGESIZE * 1)
					
					if (isRefresh) {
						this.lists = rows
						this.loadParams.isDone = false
					} else {
						this.lists = this.lists.concat(rows)
					}
				} catch (error) {
					uni.hideLoading()
					this.lists = []
					this.loadParams.total = 0
					this.loadParams.totalPage = 1
					uni.showToast({
						title: '查询异常，请稍后重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
					setTimeout(() => {
						this.refreshing = false
					}, 300)
				}
			},
			buildPayload() {
				const payload = {
					currentpage: String((this.page.PAGE - 1) * 1),
					pagesize: String(this.page.PAGESIZE * 1)
				}
				
				// 统一使用当前登录用户的客户编码
				const currentUserDistributerId = this.userInfo.code
				if (currentUserDistributerId) {
					payload.distributerId = String(currentUserDistributerId).trim()
				}
				
				if (this.queryForm.pointDetailId) payload.pointDetailId = this.queryForm.pointDetailId.trim()
				if (this.queryForm.usageOrderNumber) payload.usageOrderNumber = this.queryForm.usageOrderNumber.trim()
				if (this.queryForm.usageStatus) payload.usageStatus = this.queryForm.usageStatus
				if (this.queryForm.pointUsage) payload.pointUsage = this.queryForm.pointUsage
				if (this.queryForm.startDate) payload.beginTime = this.queryForm.startDate + ' 00:00:00'
				if (this.queryForm.endDate) payload.endTime = this.queryForm.endDate + ' 23:59:59'
				
				return payload
			},
			refresh(e) {
				this.refreshing = true
				this.reset()
				this.getSalesPlan(true)
				// #ifdef APP-NVUE
				try {
					this.$refs.list.resetLoadmore()
				} catch (e) {
					console.log('onrefresh', e)
				}
				// #endif
			},
			scrolltolower() {
				if (this.page.PAGE < this.loadParams.totalPage) {
					this.page.PAGE++
					this.getSalesPlan()
				} else {
					this.loadParams.isDone = true
					this.loadingText = '-- 到底了 --'
				}
			},
			reset() {
				this.loadParams = {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				}
				this.page.PAGE = 1
				this.lists = []
				this.loadingText = '加载中'
				this.statusView = ''
				this.usageView = ''
				this.queryForm = {
					pointDetailId: '',
					usageOrderNumber: '',
					usageStatus: '',
					pointUsage: '',
					startDate: '',
					endDate: ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.lists {
		position: relative;
		flex-direction: column;
		background: #f0f4f5;
		flex: 1;
	}

	.main {
		position: relative;
		flex-direction: column;
		padding: 0 16rpx;
		padding-top: 40rpx;
	}

	.scroll-area {
		overflow-y: scroll;
		background: #f0f4f5;
	}

	.query-header-block {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.query-header-title {
		flex-direction: row;
		align-items: center;
		flex: 1;
	}

	.query-title-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		line-height: 32rpx;
	}

	.query-toggle-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.btn-small {
		width: 200rpx;
		height: 64rpx;
		background: $wly-primary-color;
		border-radius: 32rpx;
		margin-left: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0rpx 64rpx 0rpx 48rpx;
		margin-bottom: 30rpx;
	}

	.planout-block-item .text-block {
		overflow: hidden;
		height: 96rpx;
		margin-bottom: 14rpx;
		border-bottom: 1px solid #f4f5f6;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.planout-block-item .text-block-last {
		margin-bottom: 0;
		border-bottom: 0;
	}

	.planout-block-item .middle-date {
		flex: 1.5;
		font-size: 28rpx;
		line-height: 96rpx;
		color: #333;
		margin-bottom: 0;
		display: flex;
		align-items: center;
	}

	.planout-block-item .middle-date-des {
		flex: 4;
		font-size: 28rpx;
		line-height: 96rpx;
		height: 96rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #888;
		display: flex;
		align-items: center;
	}

	.planout-block-item input.middle-date-des {
		padding: 0;
		text-align: left;
	}

	.picker-year {
		position: relative;
		border-radius: 4px;
		align-items: center;
		line-height: normal;
		display: flex;
		height: 96rpx;
	}

	.uni-list-cell {
		flex: 1;
		height: 96rpx;
		line-height: 96rpx;
		display: flex;
		align-items: center;
	}

	.uni-list-cell-db {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.picker-block {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.uni-input-text {
		height: 96rpx;
		line-height: 96rpx;
		font-size: 14px;
		color: #888;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.icon-arrow {
		position: absolute;
		right: 0;
		width: 12rpx;
		height: 20rpx;
		z-index: 10;
	}

	.btn-text {
		color: #fff;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
	}

	.order {
		flex: 1;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-bottom: 32rpx;
		padding-top: 30rpx;
	}

	.top {
		height: 72rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
	}

	.title-no {
		font-size: 24rpx;
		color: #555555;
	}

	.title-info {
		align-items: center;
		margin-right: 26rpx;
	}

	.title-info__status {
		height: 48rpx;
		line-height: 48rpx;
		background: #f61d30;
		border-radius: 80rpx 200rpx 200rpx 80rpx;
		font-size: 12px;
		color: #fff;
		text-align: center;
		border-color: transparent;
	}

	uni-button::after {
		border: 0;
	}

	.item-block-btn__text {
		font-size: 12px;
		color: #fff;
		background: #f61d30;
	}

	.middle {
		position: relative;
		padding: 26rpx 32rpx;
	}

	.middle-title {
		font-weight: 500;
		font-size: 32rpx;
		color: $text-base-color;
		margin-bottom: 32rpx;
		font-family: PingFangSC, PingFangSC-Medium;
	}

	.text-block {
		flex: 1;
		flex-direction: column;
		margin-bottom: 32rpx;
		height: auto;
		border-bottom: 0;
	}

	.text-block-row {
		flex-direction: row;
		margin-bottom: 32rpx;
		justify-content: space-between;
	}

	.text-block-half {
		flex: 1;
		margin-bottom: 0;
		margin-right: 32rpx;
	}

	.text-block-half:last-child {
		margin-right: 0;
	}

	.middle-date {
		font-size: 28rpx;
		color: $text-base-color;
		margin-top: 8rpx;
		line-height: normal;
		flex: auto;
	}

	.middle-date-des {
		font-size: 24rpx;
		color: #999;
		line-height: normal;
		flex: auto;
	}

	.loading-more {
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 12px;
		color: #999;
	}
</style>
