<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>
                  <div class="coupon-price"><i>¥</i>{{item.couponAmount}}</div>
                  <div class="coupon-name">{{item.couponName}}</div>
                  <div class="sub">{{item.startTime}} - {{item.endTime}}</div>
                </div>
                <cube-button :class="['item-button', item.receive === 'Y' ? 'active' : '']" @click="clickButton(item)">{{item.receive === 'Y' ? '已领取' : '立即领取'}}</cube-button>
              </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 {
    };
  },
  components: {
    'cube-scroll': Scroll,
    'cube-button': Button,
    'action-sheet': ActionSheet
  },
  mounted() {
    this.$refs.popup.show(() => {
      this.$refs.couponListScroll.refresh();
    });
  },
  methods: {
    ...mapActions(['getCoupon']),
    onHidden() {
      this.$emit('hidden');
    },
    onHide() {
      this.$emit('hide');
    },
    clickButton(item) {
      let couponToken = item.couponToken;

      if (item.receive === 'Y') {
        return;
      }

      this.getCoupon({couponToken: couponToken}).then(result => {
        console.log(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: 90px;
      border-radius: 40px;
      background: #002B47;
      color: #fff;
      text-align: center;
      font-size: 24px;

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

    .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;
    }

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