<template>
	<view>
		<dHeader :title="$lang.lang.coupon.coupons"></dHeader>
		<view class="start-bar"></view>
		<view class="coupon-top">
			<view class="coupon-top-v">
				<view :class="selectIndex==1?'act':''" @click="changeIndex(1)">
					<text>{{$lang.lang.coupon.no}}</text>
					<text class="nums">({{couponTotal}})</text>
				</view>
				<view :class="selectIndex==2?'act':''" @click="changeIndex(2)">
					<text>{{$lang.lang.coupon.use}}</text>
					<text class="nums">({{couponedTotal}})</text>
				</view>
				<view :class="selectIndex==0?'act':''" @click="changeIndex(0)">
					<text>{{$lang.lang.coupon.out}}</text>
					<text class="nums">({{couponOldTotal}})</text>
				</view>
			</view>
		</view>
		<view class="coupon-list">
			<view class="coupon-list-item" v-for="(item, index) in data" :key="index">
				<view class="icon"><text>$</text>{{item.reduceAmount}}</view>
				<view class="">
					<view class="title">{{item.titleZh}}</view>
					<view class="desc">{{item.cashCondition}}</view>
					<view class="times">
						<image src="../../static/img/time.png" mode=""></image>
						<text>{{item.startTime.replaceAll('-','.')}}-{{item.endTime.replaceAll('-','.')}}</text>
					</view>
				</view>
				<image v-if="selectIndex==0" src="../../static/img/coupon-1.png" class="used" mode=""></image>
				<image v-if="selectIndex==1" src="../../static/img/coupon-2.png" class="useing" mode=""></image>
				<view v-if="selectIndex==1" class="coupon-btn" @click="toCreatOrder">{{$lang.lang.coupon.go}}</view>
				<image v-if="selectIndex==2" src="../../static/img/coupon-3.png" class="used" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
	import dHeader from '../../components/dHeader/index.vue'
	export default {
		components: {
			dHeader
		},
		data() {
			return {
				page: 1,
				couponTotal:0,
				couponedTotal:0,
				couponOldTotal:0,
				selectIndex:1,
				data:[],
				pages:1
			}
		},
		onShow() {
			this.getData()
			this.getTotal()
		},
		onPullDownRefresh() {
			this.page = 1
			this.data = []
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if(this.pages > this.page){
				this.page ++
				this.getData()
			}
		},
		methods: {
			getTotal(){
				this.$request.get('/app-api/product/coupon-customer/page', {page: this.page, rows: 20,status:1}).then(res => {
					if(res.code==0&&res.data&&res.data.list.length>0){
						this.couponTotal = res.data.total
					}
				})
				this.$request.get('/app-api/product/coupon-customer/page', {page: this.page, rows: 20,status:2}).then(res => {
					if(res.data&&res.data.list.length>0){
						this.couponedTotal = res.data.total
					}
				})
				this.$request.get('/app-api/product/coupon-customer/page', {page: this.page, rows: 20,status:0}).then(res => {
					if(res.data&&res.data.list.length>0){
						this.couponOldTotal = res.data.total
					}
				})
			},
			getData () {
				this.$request.get('/app-api/product/coupon-customer/page', {page: this.page, rows: 20,status:this.selectIndex}).then(res => {
					if(res.data&&res.data.list.length>0){
						if(this.page == 1){
							this.data = res.data.list
						} else {
							this.data = this.data.concat(res.data.list)
						}
						this.pages = res.data.pages
					}
				})
			},
			changeIndex(index){
				this.selectIndex = index
				this.page = 1
				this.data = []
				this.getData()
			},
			toCreatOrder(){
				uni.navigateTo({
					url:'../create_order/create_order'
				})
			}
		}
	}
</script>

<style>
	@import url("../../static/css/coupon.css");
</style>
