<template>
  <view class="bigBox">
    <view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
			<u-icon @click="goBack"  name="arrow-left" color="#000000" size="20"></u-icon>
			<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">我的HOOLOO券</view>
		</view>
    <view  :style="{'padding-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}">
      <Tabs :list='list' @changeTab="changeTab" :newIndex="current" />
    </view>
    <view>
      <swiper :current="current" class="swiper" @change="swiperChange">
        <swiper-item>
          <view class="list" v-if="canuse.length!=0">
            <scroll-view class="A" scroll-y>
            <Ticket v-for="(item,index) in canuse" :key="index" :info="item"/>
            </scroll-view>
          </view>
          <view class="emty" v-else>
            <view class="text">暂无可用优惠券</view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="list"  v-if="cantuse.length!=0">
            <scroll-view class="B" scroll-y>
            <Ticket v-for="(item,index) in cantuse" :key="index" :info="item" />
            </scroll-view>
          </view>
          <view class="emty" v-else>
            <view class="text">暂无可用优惠券</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import Ticket from '@/components/Ticket/index.vue'
import Tabs from '@/components/Tabs/index.vue'
import Mine from '@/request/mine'
export default {
  components: {Ticket,Tabs},
  data() {
    return {
      list: [
        {
          name: "HOOLOO券",
        },
        {
          name: "已使用/已失效",
        },
      ],
      nouserList:[],
      current: 0,
      actionIndx:0,
      canuse:[],
      cantuse:[],
    };
  },
  computed: {
    systemBarHeight(){
      return  this.$store.state.user.systemBarHeight
    }
  },
  mounted(){
    this.getTickList(true)
    this.getTickList(false)
  },
  methods: {
    goBack(){
      	wx.navigateBack({
    			delta: 1
  			});
    },
    getTickList(val) {
      Mine.getUserList(val).then(res=>{
        const { data } = res
      const {rows} = data
            const canuse = rows.map(item=>{
                let timeStart = ''
                let timeEnd = ''
                if(item.useStartTime){
                    timeStart = (Date.parse(item.useStartTime.replace(/-/g,'/'))<new Date().valueOf()&&new Date().valueOf()<Date.parse(item.useEndTime.replace(/-/g,'/')))?'':item.useStartTime.slice(0,11).replace(new RegExp('-','g'), '.')
                }
                if(item.useEndTime){
                    timeEnd = item.useEndTime.slice(0,11).replace(new RegExp('-','g'), '.')
                }
                let status = item.state===0?0:item.state===1?2:3
                if(val) {
                  if(timeStart) {
                    status = 4
                  }
                }
                return {
                    id: item.id,
                    status: status,
                    couponType: item.type,
                    typeDesc: item.categoryName,
                    price: item.priceDiscount===0?'免单':item.priceDiscount,
                    priceDesc: item.ruleDesc,
                    categoryDesc:item.categoryDesc,
                    checkStatus: false,
                    title: item.name,
                    time: [timeStart,timeEnd],
                    shopList: [item.areaLimitDesc],
                    goodList: [item.goodLimitDesc],
                    useScence: ['小程序下单可用'],
                    useDesc: ['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'],
                    zkRule: item.type===1?'抵扣后实付金额无法小于0':item.type===2?'整单最高抵扣50元':'可享受规定范围内饮品免单',
                    reson: item.notFitableDesc,
                    couponAmount:item.couponAmount,
                    fitItem:item
                }
            })
      if(val){
            this.canuse = canuse
      }else{
            this.cantuse = canuse
      }
      })

    },
    changeTab(current) {
      this.current = current;
    },
    swiperChange(val){
      this.current = val.detail.current;
    }
  },
};
</script>

<style lang="scss" scoped>
.bigBox {
  .topBar{
		position: fixed;
		width: 100%;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
		padding-left: 34rpx;
		// .arrow-left {
		// 	margin-left: 20rpx;
		// }
		.tabTitle{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			text-align: center;
			width: 79%;
			color: #333333
		}
	}

  .swiper {
    background: #F8F8F8;
    height: calc(100vh - 90rpx);
    .list{
      .A {
        max-height: calc(100vh - 90rpx); 
        overflow-y: scroll;
      }
      .B {
        max-height: calc(100vh - 90rpx);
        overflow-y: scroll;
      }
      height: 100%;
      padding: 0rpx 32rpx;
        padding-bottom: 32rpx;

    }
    .emty{
        .text{
          text-align: center;
          margin-top: 322rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 40rpx;
          letter-spacing: 1rpx;
        }
    }
  }
}
</style>
