<template>
  <div class="coupon-wrap">
    <nav-bar title="优惠券"/>
    <div class="wrap">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check='false'
          :offset="200"
          @load="onLoad"
        >
          <div v-for="(item, index) in data" :key="index" class="list" :class="{disabled: item.counponState !== 1}">
            <div class="flex_sb align-c title">
              <div>
                <span>{{item.moneySymbol}}</span>
                <p>{{item.amount}}</p>
                <h5>{{item.name}}</h5>
              </div>
              <p>{{item.counponStateText}}</p>
            </div>
            <div class="info">
              <div class="flex_sb align-c date">
                <p>有效日期：{{item.validityStartTime}} - {{item.validityEndTime}}</p>
                <p @click="item.isShow = !item.isShow" v-show="item.remark">
                  {{item.typeText}}
                  <i class="icon" :class="[item.isShow ? 'icon-jiantou-shang ': 'icon-jiantou-xia']"></i>
                </p>
              </div>
              <div class="preferential flex" v-show="item.remark && item.isShow">
                <p>优惠详情：</p>
                <span>{{item.remark}}</span>
              </div>
            </div>
            <div class="roundLeft"></div>
            <div class="roundRight"></div>
          </div>
        </van-list>
        <is-empty v-if="isEmpty"></is-empty>
      </van-pull-refresh>
      <div class="room-detail-none" v-if="!data.length">暂无数据</div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
import IsEmpty from "@/components/common/IsEmpty";

export default {
  name: "Coupon",
  components: {
    NavBar,
    IsEmpty
  },
  data() {
    return {
      data: [],
      pages: {},
      page: 0,
      isEmpty: false,
      loading: false,
      finished: false,
      isLoading: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 上拉加载
    onLoad() {
      setTimeout(() => {
        this.getData("onLoad");
      }, 500);
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.page = 0;
        this.getData("onRefresh");
      }, 500);
    },
    // 获取数据
    getData(val) {
      let params = {};
      params.url = this.$apis.api_user_myCoupons;
      this.page = this.page + 1;
      params.data = {
        limit: 10,
        page: this.page
      };
      this.$net.req(params, this).then(
        res => {
          let data = res.data.list;
          this.pages = res.data.pages;
          data.forEach(element => {
            element.isShow = false;
          });
          if (val === "onLoad") {
            this.loading = false;
            if (this.page * params.data.limit >= this.pages.totalCount) {
              this.finished = true;
              this.isEmpty = true;
            }
            this.data = this.data.concat(data);
          } else {
            this.data = data;
          }
          if (val === "onRefresh") {
            this.$toast("刷新成功");
            this.isLoading = false;
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    }
  }
};
</script>

<style scoped lang='less'>
.coupon-wrap {
  background: #fff;
  // min-height: 100vh;
}
</style>
