<template>
	<view class="Record" v-if="loaded">
		<view class="record-top">
			<image src="/static/images/ver-bg.png" mode="widthFix" class="record-bg" />
			<view class="record-top-nav">
				<view :class="['record-top-item',type==='year'?'selectTopItem':'']" @click="selectType('year')">按年
				</view>
				<view :class="['record-top-item',type==='month'?'selectTopItem':'']" @click="selectType('month')">按月
				</view>
				<view :class="['record-top-item',type==='day'?'selectTopItem':'']" @click="selectType('day')">按日</view>
			</view>
			<view class="record-mouth-year">
				<view class="record-type-left">
					<u-picker mode="time" v-model="show" :params="params" @confirm='confirm' title='筛选日期'
						start-year='2021' :end-year='currentYear' />
					<view @click="show = true">
						{{date?date:'选择日期'}}
						<uni-icons type="arrowdown" color="#fff" size="12" />
					</view>
				</view>
				<view class="record-type-right">
					<view :class="['pay_type_item',scantype==='goods'?'pay_type_item_select':'']"
						@click="selectCoinType('goods')">权证</view>
					<view :class="['pay_type_item',scantype==='coupons'?'pay_type_item_select':'']"
						@click="selectCoinType('coupons')">优惠券</view>
				</view>
			</view>
			<view class="record-title">核销总数 ( 件 ) </view>
			<view class="record-money"><span></span>{{account}}
				<span></span>
			</view>
		</view>

		<view class="boss" v-if="isBos">
			<view class="boss-left">
				<image src="/static/images/boss.png" mode="mode" class="boss-img">我是BOSS
			</view>
			<view class="boss-right" @click="shopShow = true">
				<u-select v-model="shopShow" :list="ShopList" @confirm="shopConfirm" value-name='store_id'
					label-name='name' />
				门店：<u-icon name="arrow-down" color="#606266" label-color='#606266' margin-right='10' label-pos='left'
					:label='store_id?store_name:"全部门店"' size="28" />
			</view>
		</view>

		<!-- 列表。。。 -->
		<view class="lists" v-if="lists.length>0">
			<view class="list-item" v-for="(item,index) in lists" :key='index'>

				<view class="list-item-title">
					<view class="left">
						<view class="tags">{{scantype === 'goods'?'权证核销':'优惠券核销'}}</view>
						<view class='title' v-if="scantype === 'goods'">{{item.goods_sku.goods_name}}</view>
						<view class='title' v-else>{{item.coupon.title}}</view>
					</view>
					<!-- <view class="right"> -->
					<!-- <u-icon  name="checkmark-circle-fill" size='50' color='#e93340' /> -->
					<!-- </view> -->
				</view>

				<view class="list-item-content" v-if='scantype === "goods"'>
					<image class="good-img" :src="item.goods_sku.cover" mode="aspectFill" />
					<view class="list-item-right">
						<view class="content-item">核销商品数量：X {{item.qty}} </view>
						<view class="content-item">核销商品规格：{{item.goods_sku.unit || '通用规格'}}</view>
						<view class="content-item">核销时间：{{item.used_at}}</view>
					</view>
				</view>
				<view class="list-item-content" v-else>
					<image class="good-img" v-if='item.source.type ==="goods"' :src="item.source.cover"
						mode="aspectFill" />
					<view class="list-item-right">
						<view class="content-item" v-if='item.source.type ==="goods"'>兑换商品名称：{{item.source.name}}
						</view>
						<view class="content-item"> 优惠券规格：满 {{item.coupon.full}} 减 {{item.coupon.price}} </view>
						<view class="content-item">优惠券类型：{{item.coupon.type.text}}</view>
						<view class="content-item">核销时间：{{item.used_at}}</view>
					</view>
				</view>

				<view class="person">
					<image class="avatar" :src="item.clerk.avatar" mode="aspectFill" />
					{{item.clerk.nickname}}
					<view class="shop-name">{{item.store.name}}</view>
				</view>

			</view>
		</view>
		<!-- 无列表 -->
		<no-list v-if="lists.length === 0 && scantype === 'goods'" name='no-in' txt="没有任何权证核销记录" />
		<no-list v-if="lists.length === 0 && scantype === 'coupons'" name='no-out' txt="没有任何优惠券核销记录" />

		<!-- <u-toast ref="uToast" /> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		scanList
	} from '@/apis/interfaces/scan';
	export default {
		data() {
			return {
				lists: [],
				has_more: true,
				page: 1,
				type: 'year', // 统计类型day日，month月，year年
				scantype: 'goods', // goods 数权核销  coupons 优惠券核销
				date: new Date().toISOString().slice(0, 4), // 日：Y-m-d，月Y-m，年Y
				params: {
					year: true,
					month: true,
					day: true
				},
				show: false, // 显示
				currentDay: new Date().toISOString().slice(0, 10),
				currentMonth: new Date().toISOString().slice(0, 7),
				currentYear: new Date().toISOString().slice(0, 4),
				account: '',
				loaded: false,
				shopShow: false,
				ShopList: [],
				store_name: '',
				store_id: '',
				isBos:false
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.has_more) {
				this.page = this.page + 1
				this.getList()
			} else {
				this.$refs.uToast.show({
					title: '吼吼吼~我是有底的~',
					type: 'error',
					icon: false,
					duration: 3000
				})
			}
		},
		methods: {
			// 获取列表
			getList() {
				let data = {
					page: this.page,
					date_type: this.type,
					date: this.date,
					store_id:this.store_id
				}
				let apiUrl = ''
				if (this.scantype === 'goods') {
					apiUrl = 'manages/warrants/logs'
				} else {
					apiUrl = 'coupons/verify/logs/coupons'
				}

				scanList(apiUrl, data).then(res => {
					console.log(res)
					this.account = res.all
					this.lists = this.lists.concat(res.lists.data)
					this.has_more = res.lists.page.has_more
					this.loaded = true
					this.ShopList = [{name:'全部',store_id:''},...res.stores]
					this.isBos = res.isBos
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'error',
						icon: false,
						duration: 3000
					})
				})
			},
			selectCoinType(type) {
				if (this.scantype !== type) {
					this.scantype = type
					this.store_id = ''
					this.reset()
				}
			},
			// 重置
			reset() {
				this.page = 1
				this.lists = []
				this.has_more = true
				this.getList()
			},
			// 选择 年  月  日 切换要重置数据
			selectType(type) {
				console.log(type, typeof type)
				if (this.type !== type) {
					switch (type) {
						case 'year':
							this.type = type
							this.params = {
								year: true,
								month: false,
								day: false
							}
							this.date = this.currentYear
							this.store_id = ''
							this.reset()
							break;
						case 'month':
							this.type = type
							this.params = {
								year: true,
								month: true,
								day: false
							}
							this.date = this.currentMonth
							this.store_id = ''
							this.reset()
							break;
						case 'day':
							this.type = type
							this.params = {
								year: true,
								month: false,
								day: false
							}
							this.date = this.currentDay
							this.store_id = ''
							this.reset()
							break;
					}
				}
			},
			// 点击确认按钮年月日
			confirm(e) {
				let type = this.type
				switch (type) {
					case 'year':
						this.date = e.year
						this.reset()
						break;
					case 'month':
						this.date = e.year + '-' + e.month
						this.reset()
						break;
					case 'day':
						this.date = e.year + '-' + e.month + '-' + e.day
						this.reset()
						break;
				}
			},
			// 筛选门店信息
			shopConfirm(e) {
				this.store_id = e[0].value
				this.store_name = e[0].label
				this.reset()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Record {
		width: 100%;
		min-height: 100vh;
		padding-top: 30rpx;
		background-color: #f5f5f5;
	}

	.record-top {
		width: calc(100% - 60rpx);
		height: 360rpx;
		background-image: linear-gradient(to left, #076cff, #076cff);
		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: $main-color, $alpha: 0.4);
		margin: 0 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		position: relative;
		padding: 10rpx 50rpx 20rpx 50rpx;
		z-index: 1;

		.record-bg {
			position: absolute;
			width: 230rpx;
			bottom: 0;
			right: 30rpx;
			z-index: 1;
		}

		.record-top-nav {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;

			.record-top-item {
				margin: 40rpx 20rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #fff;
			}

			.selectTopItem {
				border-bottom: solid 4rpx #fff;
			}
		}

		.record-mouth-year {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			color: #fff;
			font-size: 30rpx;

			.record-type-left {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;

				uni-icons {
					margin-left: 4rpx;
				}
			}

			.record-type-right {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;
				font-size: 24rpx;

				.pay_type_item {
					margin: 0 10rpx;
					padding: 2rpx 20rpx;
					border-radius: 30rpx;
					border: solid 1rpx rgba($color: #000000, $alpha: 0);
				}

				.pay_type_item_select {
					border: solid 1rpx #f7f7f7;
				}
			}
		}

		.record-title {
			font-size: 28rpx;
			color: #fff;
			padding: 20rpx 0;
		}

		.record-money {
			color: #fff;
			font-size: 50rpx;
			font-weight: bold;

			span {
				font-size: 30rpx;
				font-weight: 400;
				margin-right: 4rpx;
			}
		}
	}

	.boss {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;

		.boss-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			font-size: 32rpx;
			font-weight: bold;
		}

		.boss-right {
			font-size: 28rpx;

			u-icon {
				padding-left: 20rpx;
			}
		}

		.boss-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}

	// 列表
	.lists {
		// box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #000, $alpha: 0.4);
		padding: 20rpx;

		.list-item {
			background-color: #fff;
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;

			.list-item-title {
				width: 100%;
				border-bottom: solid 1rpx #f7f7f7;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 20rpx 0;

				.left {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					box-sizing: border-box;

					.title {
						width: 520rpx;
						overflow: hidden;
						font-size: 30rpx;
						margin-left: 12rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.tags {
						padding: 4rpx 10rpx;
						border-radius: 20rpx 0 20rpx 0;
						background-color: #076cff;
						font-size: 26rpx;
						color: #fff;
					}
				}

				// .right{
				// 	padding: 20rpx 30rpx;
				// }
			}


			.list-item-content {
				width: 100%;
				color: #999;
				padding: 20rpx 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;
				border-bottom: solid 1rpx #f7f7f7;

				.good-img {
					margin-right: 20rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				.list-item-right {
					flex: 1;

					.content-item {
						padding: 10rpx 0;
					}
				}
			}

			.person {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;
				font-size: 30rpx;
				padding: 20rpx 0 0 0;
				font-weight: bold;

				.avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.shop-name {
					background-color: #076cff;
					color: #fff;
					font-size: 24rpx;
					font-weight: 400;
					padding: 4rpx 20rpx;
					border-radius: 12rpx;
					margin-left: 20rpx;
				}
			}

		}
	}
</style>
