<template>
	<view class="body uni-jct">
		<!-- <view class="topnav uni-row uni-jcsb">
			<text class="topnav-left" @click="btnBack"><</text>
			<text class="topnav-center">兑换记录</text>
			<text class="topnav-right" @click="btnClose">×</text>
		</view> -->
		<view class="topbar uni-row uni-jcsb">
			<view class="topbar-left">
				<text class="btnBack" @click="btnBack">&lt;</text>
				<text class="">{{shopInfo.shopName}}</text>
			</view>
			<!-- <text class="topbar-left" @click="btnBack"><</text>
			<text class="topbar-left">{{shopInfo.shopName}}</text> -->
			<text class="topbar-right"></text>
		</view>
		<view class="selectbar uni-row uni-jcsb">
			<uni-data-select v-model="selectedDate" :clear="false" :localdata="selectList" @change="dateChange"></uni-data-select>
			<text class="selectbar-date">共 {{rsCount}} 条</text>
		</view>
		<view class="main uni-column">
			<view class="list" v-if="rsCount > 0">
				<view class="list-item uni-row" v-for="(item,index) in exchangedList" :key="index">
					<image mode="aspectFit" class="list-item-ico" :src="item.iconUrl"></image>
					<text class="list-item-aiName">{{item.aiName}}</text>
					<view class="list-item-right uni-column">
						<text class="list-item-phone">{{item.phone}}</text>
						<text class="list-item-exTime">兑换时间</text>
						<text class="list-item-exTime">{{fmtTime(item.exTime)}}</text>
					</view>
				</view>
			</view>
			<view class="norecord" v-else>暂无记录</view>
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import { apiVerfExchangedListQuery, checkResCode } from '../../common/api.js';

	export default {
		data() {
			return {
				token: "",
				shopInfo: {
					shopName: ""
				},
				exchangedList: [],
				/* exchangedList: [{
						aiName: '三个鸡蛋',
						exTime: '1719735225',
						phone: '188****9600',
						iconUrl: '/static/test/egg.png',
					},
					{
						aiName: '课时券',
						exTime: '1719735225',
						phone: '188****9500',
						iconUrl: '/static/test/ticket_xfl.png',
					},
					{
						aiName: 'Mickey玩具 发撒士大夫撒旦飞大厦asdfdsasdf21234563245',
						exTime: '1719735225',
						phone: '188****9000',
						iconUrl: '/static/test/toy.png',
					},
				], */
				rsCount: 0,
				selectedDate: "",
				selectList: []
			}
		},
		onLoad() {
			this.token = tools.getToken();
			// tools.checkToken(this.token);
			this.shopInfo = tools.getShopInfo();
			// console.log("shopInfo:", this.shopInfo);
			
			this.initDateSelect();
			this.verfExchangedListQuery();
		},
		methods: {
			initDateSelect() {
				const monthlist = tools.getMonthList(6);
				for (var i = 0; i < monthlist.length; i++) {
					let option = {};
					option.value = monthlist[i];
					option.text = monthlist[i];
					this.selectList.push(option);
				}
				this.selectedDate = monthlist[0];
			},
			dateChange(e) {
				console.log("e:", e);
				if (e != "") {
					this.verfExchangedListQuery();
				}
			},
			fmtTime(timestamp) {
				if (timestamp > 0)
					return tools.timestampToTime(timestamp*1000, 3);
			},
			// 商家系统已核销记录查询
			verfExchangedListQuery() {
				uni.request({
					url: apiVerfExchangedListQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						yearMonth: this.selectedDate
					},
					success: (res) => {
						console.log("verfExchangedListQuery", res);
						
						if (checkResCode(res)) {
							this.exchangedList = res.data.data;
							this.rsCount = this.exchangedList.length;
						}
					},
					fail: (err) => {
						console.log("verfExchangedListQuery err", err)
					},
				});
			},
			btnBack() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			btnClose() {
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			}
		}
	}
</script>

<style scoped>
	body {
		background: #fcf4f2;
	}

	.topnav {
		width: 92vw;
		height: 50px;
		align-items: flex-end;
		margin-bottom: 6px;
	}

	.topnav-left {
		font-size: 30px;
		line-height: 25px;
	}

	.topnav-center {
		font-weight: 500;
		color: #000000;
		font-size: 16px;
		text-align: center;
	}

	.topnav-right {
		font-size: 30px;
		/* line-height: 40px; */
		line-height: 25px;
	}

	.topbar {
		width: 100vw;
		height: 70px;
		background: url("/static/bg_topbar.png") no-repeat;
		background-size: 100% 100%;
	}

	.topbar-left {
		margin-left: 15px;
		font-weight: 500;
		color: #ffffff;
		font-size: 20px;
		text-align: center;
	}

	.topbar-right {
		margin-right: 20px;
		font-weight: 500;
		color: #ffffff;
		font-size: 16px;
		text-align: right;
	}
	
	.btnBack {
		font-size: 26px;
		margin-right: 15px;
	}

	.selectbar {
		width: 90vw;
		margin-top: 10px;
	}

	/deep/ .uni-select {
		width: 100px;
		height: 30px;
	}

	.selectbar-date {
		font-weight: 500;
		color: #000000;
		font-size: 13px;
	}

	.main {
		width: 90%;
		/* height: 60vh; */
		justify-content: space-evenly;
		/* flex-grow: 1; */
	}

	.list {
		width: 100%;
		overflow: scroll;
	}

	.list-item {
		width: 100%;
		height: 70px;
		margin: 8px 0px;
		background: #fff;
		border-radius: 5px;
	}

	.list-item-ico {
		flex-shrink: 0;
		width: 50px;
		height: 50px;
		margin: 0 10px;
	}

	.list-item-aiName {
		flex-grow: 1;
		font-weight: 500;
		color: #000000;
		font-size: 16px;
		/* 超出容器部分的文本隐藏起来 */
		overflow: hidden;
		/* 使用省略号表示被截断的文本 */
		text-overflow: ellipsis;
	}

	.list-item-right {
		width: 105px;
		flex-shrink: 0;
		align-items: flex-end;
		margin-right: 10px;
	}

	.list-item-phone {
		font-weight: 500;
		color: #333333;
		font-size: 16px;
		text-align: right;
	}

	.list-item-exTime {
		font-weight: 500;
		color: #c6c6c6;
		font-size: 12px;
		text-align: right;
		text-wrap: nowrap;
	}
	
	.norecord {
		color:#818181;
		font-size:12px;
		line-height: 60vh;
	}
	
</style>