<template>
  <view class="couponManage">
    <view class="coupon" v-for="(item, index) in initList" :key="index">
      <view class="item-left">
        <view class="f-s-38 name">{{ item.name }}</view>
        <view class="f-s-28 text-666">到期时间：{{ $u.timeFormat(item.expiration) }}</view>
      </view>
      <view class="item-right">
        <view class="fl-flex fl-justify-center">
          <view class="f-s-40">{{ item.discount }}</view>
          <text class="f-s-28 u-m-t-10">折</text>
        </view>
        <view class="text-cut-2 u-m-t-10">
          {{ item.description }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMerchantCoupon } from '@/api/merchant/store.js';
export default {
  data() {
    return {
      list: {},
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      initList: [],
    };
  },
  created() {
    this.list = this.$store.state.data.merchantInfo;
  },
  mounted() {
    this.getDataListInit();
  },
  methods: {
    getDataListInit() {
      let result = Object.assign(
        {},
        {
          paging: `${this.params.pageNum},${this.params.pageSize}`,
        },
      );
      getMerchantCoupon(this.list.merchant.id, { ...result }).then(res => {
        console.log();

        if (res.code === 'OK') {
          this.initList = res.data.records;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.couponManage {
  min-height: 100vh;
  padding: 20rpx 40rpx;
  .coupon {
    border-radius: 10rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    display: flex;
    .name {
      color: #333;
      margin-bottom: 16rpx;
    }
    .item-left {
      padding: 35rpx;
      width: 60%;
    }
    .item-right {
      padding: 35rpx;
      color: #fff;
      width: 40%;
      text-align: center;
      border-radius: 0 10rpx 10rpx 0;
      background-color: #347caf;
    }
  }
}
</style>
