<template>
  <BasePage>
    <div class="certificate">
      <van-tabs v-model:active="active" background="#fff" color="#ea3e23" line-height="1.07vw" line-width="5.33vw"
        title-active-color="#ea3e23" @change="onTabChange">
        <van-tab title="全部"></van-tab>
        <van-tab title="待核销"></van-tab>
        <van-tab title="已核销"></van-tab>
      </van-tabs>

      <div class="list" v-if="filteredItems.length">
        <div class="item" v-for="item in filteredItems" :key="item.id">
          <img :src="item.img || '/img/certificate.png'" alt="">
          <div class="info">
            <div>
              <b>礼品券</b>
              <p>券码：{{ item.sysid }}</p>
            </div>
            <button v-if="item.state === 0" @click="onVerify(item)">
              去核销
            </button>
            <img v-else src="/img/check.png" alt="">
          </div>
        </div>
      </div>

      <van-empty v-else description="暂无礼品券" />

      <van-popup v-model:show="show" class="vanupup">
        <div class="code_box">
          <div class="top"><span>扫一扫核销礼品券 </span><van-icon name="cross" @click="show = false" /></div>
          <div class="ewm_box">
            <vue-qr v-if="!loading" :margin="0" :text="link" backgroundColor="rgb(255,255,255)"
              colorLight="rgb(255,255,255)"></vue-qr>

            券码：{{ ewm.sysid }}
          </div>
        </div>
      </van-popup>

    </div>
  </BasePage>
</template>
<script>
export default {
  mounted() {
    this.init()
  },
  data() {
    return {
      active: 0,
      items: [],
      show: false,
      link: '',
      ewm: {},
    }
  },
  computed: {
    filteredItems() {
      if (this.active === 0) return this.items
      if (this.active === 1) return this.items.filter(i => i.state === 0)
      if (this.active === 2) return this.items.filter(i => i.state === 1)
      return this.items
    }
  },
  methods: {
    init() {
      this.$get('/v1/client/DUserlipinquansClient').then(res => {
        this.items = res.data?.items || []
      })
    },
    onTabChange(index) {
      this.active = index
    },
    onVerify(item) {
      this.ewm = item;
      this.link = `${location.origin}/v1/client/DUserlipinquansClient/${item.sysid}/state`;
      this.show = true;
    }
  }
}
</script>