<template>
  <div class="full-page">
    <div class="container">
      <div class="p-title">
        <span class="label">我的健康券</span>
      </div>
      <ul>
        <li v-for="(item, index) in voucherData" :key="index" @click="goToDetail(item.voucherId, item.makeId, item.voucherType)">
          <CardItem :data="item"></CardItem>
        </li>
      </ul>
      <div class="pagination">
        <ul class="nav-pills">
          <li class="text-right">
            <a @click="filter(2)" :class="params.states[0]==2?'active':''">查看已使用的券</a>
          </li>
          <li class="text-left">
            <a @click="filter(4)" :class="params.states[0]==4?'active':''">查看已失效的券</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getStore } from '@/util/store'
import { getUserCard } from '@/api/apply/apply'
import CardItem from '@/components/cardItem'
export default {
  name: 'vouchers',
  data () {
    return {
      voucherData: [],
      size: 10,
      params: {
        states: [1],
        userId: getStore({ name: 'user_id' })
      }
    }
  },
  created () {
    this.getUserCardByIdFn() // 获取当前用户待使用健康券(每页显示10条)
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
    CardItem
  },
  methods: {
    getUserCardByIdFn () {
      getUserCard(this.size, this.params).then(res => {
        if (res.code === 0) {
          this.voucherData = res.data
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    filter (state) {
      console.log(state)
      if (state === this.params.states[0]) {
        this.params.states = [1]
      } else {
        this.params.states = [ state ]
      }
      this.getUserCardByIdFn()
    },
    goToDetail (voucherId, makeId, voucherType) {
      this.$router.push({
        path: '/voucherDetail',
        query: {
          voucherId: voucherId,
          makeId: makeId,
          voucherType: voucherType
        }
      })
    }
  }
}
</script>

<style scoped>
  .full-page {
    background-color: #f5f6f7;
  }
  .pagination {
    padding: 1em 0;
    width: 100%;
  }
  .pagination ul li {
    width: 50%;
    margin: 0;
    padding: 0 1em;
  }
  .pagination ul li + li {
    border-left:1px solid #949595;
  }
  .pagination ul li > a {
    color: #949595;
  }
  .pagination ul li > a.active {
    text-decoration:underline;
  }
</style>