<template>
  <view class="bigBox">
    <Tabs :list='list1' @changeTab="changeTab" :newIndex="current" />
    <view class="ticketList">
      <swiper :current="current" class="swiper" @change="swiperChange">
        <swiper-item>
          <view class="list" v-if="canuse.length!=0">
             <Ticket v-for="(item,index) in canuse" :key="index" :info="item" type="use" @updata="updata"/>
          </view>
          <view class="emty" v-else>
            <view class="text">暂无可用优惠券</view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="list" v-if="cantuse.length!=0">
            <Ticket v-for="(item,index) in cantuse" :key="index" :info="item" type="use"/>
          </view>
          <view class="emty" v-else>
            <view class="text">暂无不可用优惠券</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="usebtn"  v-if="canuse.length!=0&&current===0">
      <view class="content">
        <view class="text" v-if="price!=0">已选1张HOOLOO卷，可优惠<span class="money">￥{{price}}</span></view>
        <view class="text" v-else>暂未选择HOOLOO优惠卷</view>
        <view>
          <view class="btnView" @click="setTickcet">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Ticket from '@/components/Ticket/index.vue'
import Tabs from '@/components/Tabs/index.vue'
export default {
  components: {Ticket,Tabs},
  computed:{
    // canuse(){
    //   const list = this.$store.state.order.tickListSettle.canuse
    //   list.sort((a,b)=>{
    //     return a.couponAmount - b.couponAmount
    //   })
    //   console.log('收拾寿司')
    //   return [...list]
    // },
    // price() {
    //   const val = this.canuse.filter((item)=>{return item.checkStatus})||[]
    //   return val[0]?.couponAmount||0
    // },
    cantuse(){
      const listObject = this.$store.state.order.tickListSettle
      return listObject.cantuse
    }
  },
  watch:{
    canuse(val){
      const vals = val.filter((item)=>{return item.checkStatus})||[]
      this.price = vals[0]?.couponAmount||0
    }
  },
  data() {
    return {
      list1: [
        {
          name: "可使用",
        },
        {
          name: "不可使用",
        },
      ],
      nouserList:[],
      current: 0,
      actionIndx:0,
      canuse:[],
      price:0
    };
  },
  mounted(){
    for(let i=0;i<15;i++){
      this.nouserList.push({
          status:1, // 0可使用 1不可使用/已过期/已失效
          couponType:0, // 0满减 1折扣 2抵扣
          typeDesc:'最大字数最大字', // 左上角文案描述
          mjPrice:'30', // 满减金额
          zkPrice:'7', // 折扣金额
          dkPrice:'免单', // 抵扣金额
          priceDesc:'满130可用', // 条件描述
          checkStatus:false, // 优惠券选中状态
          title:'最大字数最大字数最大', // 优惠券标题
          time:['2022.07.24.17:20'], // 过期时间
          shopList:['全门店可用'], // 可用门店
          goodList:['全品类可用'], // 可用品类 
          useScence:['小程序下单可用'], // 使用场景
          useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
          zkRule:'整单最高抵扣50元', // 折扣规则
          reson:'不可与已勾选券叠加使用' // 不可使用原因
      })
    }
    this.canuse = this.$store.state.order.tickListSettle.canuse
  },
  methods: {
    updata(id){
      this.canuse.map(item=>{
        if(item.id===id){
          item.checkStatus = !item.checkStatus
        }else{
          item.checkStatus = false
        }
      })
      this.canuse = [...this.canuse]
      // console.log( this.canuse)
    },
    setTickcet(){
      const vals = this.canuse.filter((item)=>{return item.checkStatus})||[]
      this.$store.commit('setSelectTicket',vals[0])
      uni.navigateBack();
    },
    changeTab(current) {
      this.current = current;
    },
    swiperChange(val){
      this.current = val.detail.current;
    }
  },
};
</script>

<style lang="scss" scoped>
.bigBox {

  .ticketList {
    // margin-bottom: 176rpx;
    .swiper {
      background: #F8F8F8;
      height: calc(100vh - 64rpx);
    .list{
      height: 100%;
      padding: 0rpx 32rpx;
      overflow-y: scroll;
    }
    .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;
      }
    }
  }
  }


  .usebtn {
    width: 100%;
    height: 176rpx;
    position: fixed;
    bottom: 0;
    background: #FFFFFF;

    .content {
      height: 100rpx;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;

      .text {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-left: 30rpx;

        .money {
          font-size: 28rpx;
          font-family: Futura-Medium, Futura;
          font-weight: 500;
          color: #FF63BA;
          margin-left: 4rpx;
        }
      }

      .btnView {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        background: #0050F6;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 100rpx;
      }
    }
  }
}
</style>
