<template>
	<view>
		<view @tap="tap(item)" class="coupon-item" v-for="(item,index) in myList" :key="index">
			<view class="con">
				<view class="left">
					<text class="title">{{CouponType[item.type]}}</text>
					<text class="time">有效期至{{$dateFormat(item.expireDatetime)}}</text>
				</view>
				<view class="right">
					<text class="price">{{item.money}}</text>
					<text>满{{item.moreThanAmountAvailable}}可用</text>
				</view>

				<view class="circle l"></view>
				<view class="circle r"></view>
			</view>
			<view style="position: relative;min-height: 120upx;">
				<text class="tips" :key="limit" v-for="limit in item.limit">
					{{limit}}
				</text>

				<text class='state'>{{CashCouponStatus[item.status].text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreByPrimaryKeys
	} from '../js/request.js'



	const CashCouponStatus = {
		"NOT_ACTIVE": {
			text: "未激活"
		},
		"EXPIRED": {
			text: "已过期"
		},
		"ALREADY_USED": {
			text: "已使用"
		},
		"NOT_USED": {
			text: "未使用"
		}
	}

	export default {
		props: ['list'],
		data() {
			return {
				CashCouponStatus,
				myList: [],
				stores: [],
				CouponType: {
					"CASH_COUPON": '现金卷',
					'EXCHANGE_CERTIFICATE': '兑换卷'
				}
			}
		},
		watch: {
			list: {
				immediate: true,
				handler() {
					this.mapDump()
				}
			},
		},
		methods: {
			tap(item) {
				this.$emit('select', item)
			},
			async mapDump(list = this.list || []) {
				await this.getStoreByList(list)
				list.forEach(it => it.limit = this.limitsItem(it))
				this.myList = list
			},
			async getStoreByList(list = this.list || []) {
				const storeIdListExist = this.stores.map(it => it.id)
				const storeIdList = list.map(it => it.storeId).filter(it => it && storeIdListExist.indexOf(it) === -1)
				if (storeIdList.length > 0) {
					const requestData = await getStoreByPrimaryKeys(storeIdList)
					this.stores = [...requestData, ...this.stores]
				}
			},
			limitsItem(item) {
				const limitList = []
				const storeId = item.storeId
				if (storeId) {
					const stores = this.stores
					const store = stores.filter(it => it.id === storeId)[0]
					if (store) {
						limitList.push(`仅限${store.name}使用`)
					}
				}
				return limitList.length > 0 ? limitList : [`无限制条件`]
			}
		}
	}
</script>

<style lang="scss" scoped src="../static/scss/coupon.scss"></style>
