<template>
  <action-sheet @hidden="onHidden" @hide="onHide" ref="popup">
    <div class="activity-sheet">
      <h3>领取优惠券</h3>
      <div class="list">
        <cube-scroll ref="couponListScroll" :data="list">
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <div class="item-wrapper">
                <div class="left-wrapper">
                  <div class="coupon-price"><i>¥</i>{{item.couponAmount}}</div>
                  <div class="coupon-name">{{item.couponName}}</div>
                  <div class="sub">{{item.receiveStartTime}} - {{item.receiveEndTime}}</div>
                </div>
                <div :class="['item-button', item.receive === 'N' ? 'active' : '']" @click="clickButton(item)">
                  {{item.receive === 'N' ? '已领取' : '立即领取'}}</div>
              </div>
            </li>
          </ul>
        </cube-scroll>
      </div>
    </div>
  </action-sheet>
</template>

<script>
import { Scroll, Button } from 'cube-ui';
import ActionSheet from './action-sheet';

import { createNamespacedHelpers } from 'vuex';

const {mapActions} = createNamespacedHelpers('activitys/limitTimeCoupon');

export default {
  name: 'CouponListSheet',
  props: {
    list: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      isLogin: false,
    };
  },
  components: {
    'cube-scroll': Scroll,
    'cube-button': Button,
    'action-sheet': ActionSheet
  },
  watch: {
    'yoho.context.isLogin': function(val) {
      this.isLogin = val;
    }
  },
  mounted() {
    this.$refs.popup.show(() => {
      this.$refs.couponListScroll.refresh();
    });
  },
  methods: {
    ...mapActions(['getProductCoupon']),
    onHidden() {
      this.$emit('hidden');
    },
    onHide() {
      this.$emit('hide');
    },
    async clickButton(item) {
      let couponToken = item.couponToken;

      if (item.receive === 'N') { // 是否可以领取 N:否,Y:是
        return;
      }

      const user = await this.$yoho.auth();

      if (user && user.uid) {
        this.getProductCoupon({couponTokens: couponToken}).then(result => {
          this.$createDialog({
            type: 'alert',
            title: result.code === 200 ? '领取优惠券成功' : result.message,
            icon: result.code === 200 ? 'cubeic-ok' : 'cubeic-warn'
          }).show();

          if (result.code === 200) { // 领取成功刷新一下领取状态
            this.$emit('updateCoupon');
          }
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  .activity-sheet {
    display: flex;
    flex-direction: column;
    height: 800px;

    h3 {
      text-align: center;
      font-size: 32px;
      line-height: 3;
      font-weight: bold;
      color: #333;
    }

    .list {
      flex: 1;
      overflow: scroll;
    }

    ul {
      list-style: none;
      line-height: 2;
      color: #000;
    }

    li {
      padding: 30px 40px;
      border-bottom: 1px solid #eee;
    }

    .item-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .item-button {
      width: 180px;
      height: 80px;
      border-radius: 40px;
      background: #002B47;
      color: #fff;
      line-height: 80px;
      text-align: center;
      font-size: 24px;

      &.active {
        background-color: #fff;
        color: #999;
        border: 1px solid #ccc;
      }
    }

    .left-wrapper {
      max-width: calc(100%- 20px- 180px);
      overflow: hidden;
    }

    .coupon-price {
      @include num;
      font-weight: bold;
      font-size: 56px;
      line-height: 64px;
      height: 64px;

      i {
        font-style: normal;
        font-size: 40px;
        vertical-align: baseline;
      }
    }

    .coupon-name {
      margin-top: 10px;
      font-size: 28px;
      line-height: 40px;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .sub {
      margin-top: 10px;
      color: #999;
      font-size: 24px;
      line-height: 34px;
    }
  }
</style>