<template>
  <div>
    <div style="margin-left: 10px;">
      <span style="font-weight: bold;">{{ $t('coupons.status') }}：</span>
      <el-select v-model="couponParams.status" @change="getList">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div style="text-align: center;">
      <img src="@/assets/profile/none.png" alt style="width: 240px;height: 240px;">
    </div>
    <div style="text-align: center;">
      <span>{{ $t('coupons.info') }}</span>
    </div>
    <div v-if="false">
      <div>
        <div class="to-use">
          <img src="@/assets/coupon/top.png" style="right: 10px;top: 5px;position: absolute;width:74px;height:74px">
          <div style="position: absolute;right: 15px;top: 26px;transform: rotate(45deg);color: #fff;">待使用</div>
          <div class="money">$</div>
          <div class="number">10</div>
          <div class="title">加纳非控货减10</div>
          <div class="content">所有加纳目的地订单减10</div>
          <div style="display: flex;margin: 10px auto;justify-content: center;">
            <img src="@/assets/coupon/time.png" alt style="width: 26px;height: 26px;">
            <span style="color: #999;font-size: 14px;line-height: 26px;">2021.12.12-2022.11.5</span>
          </div>
          <div style="margin-top: 35px;text-align: center;">
            <img src="@/assets/coupon/button.png" style="width:166px;height:30px;">
            <span style="position: absolute;color: #fff;font-size: 14px;left: 110px;bottom: 25px;">去下单</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { coupon } from '@/api/coupon'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      parseTime,
      couponList: {},
      // 查询参数
      couponParams: {
        page: 1,
        rows: 100,
        titleZh: null,
        titleEn: null,
        sort: null,
        status: null
      },
      options: [
        {
          label: '全部',
          value: null
        },
        {
          label: '已过期',
          value: 0
        },
        {
          label: '待使用',
          value: 1
        },
        {
          label: '已使用',
          value: 2
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      coupon(this.couponParams).then(r => {
        this.couponList = r.data.list
      })
    }
  }
}
</script>

<style scoped>
.to-use{
    width: 256px;
    height: 325px;
    background-image: url('../../../assets/coupon/bottom.png');
    background-size: cover;
    position: absolute;
}
.money{
  color: #396FFF;
  font-size: 24px;
  text-align: center;
  margin-top: 40px;
}
.number{
  color: #396FFF;
  font-size: 60px;
  text-align: center;
  margin-top: 10px;
}
.title{
  color: #333333;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}
.content{
  color: #666666;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  margin-top: 10px;
}
</style>
