<template>
  <div class="index wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>领券中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="coupon_Box">
      <div class="couponType_discount" v-if="noThresholdList.length">
        <div class="couponType_title">无门槛优惠券</div>

        <div class="couponCardBox">
          <div class="couponCard" v-for="(item, index) in noThresholdList" :key="index">
            <div class="couponCard_l">
              <div style="display: flex">
                <span>￥</span>
                <span style="font-weight: 500; font-size: 24px">
                  {{ item.money }}
                </span>
              </div>
              <div style="font-size: 12px; width: 100%">满{{ item.at_least }}可用</div>
              <div class="couponCard_leftBg"></div>
            </div>
            <div class="couponCard_r">
              <div class="couponCard_rt">
                <div style="font-size: 18px; font-weight: 500">
                  {{ item.coupon_name }}
                </div>
                <div
                  class="couponCard_rt_btn"
                  @click="draw('no_threshold', item.coupon_type_id)"
                >
                  立即领取
                </div>
              </div>
              <div style="font-size: 12px">
                有效期：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
              <div class="couponCard_rightBg"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="couponType_discount" v-if="decrementList.length">
        <div class="couponType_title">满减券</div>

        <div class="couponCardBox">
          <div class="couponCard" v-for="(item, index) in decrementList" :key="index">
            <div class="couponCard_l">
              <div style="display: flex">
                <span>￥</span>
                <span style="font-weight: 500; font-size: 24px">
                  {{ item.money }}
                </span>
              </div>
              <div style="font-size: 12px; width: 100%">满{{ item.at_least }}可用</div>
              <div class="couponCard_leftBg"></div>
            </div>
            <div class="couponCard_r">
              <div class="couponCard_rt">
                <div style="font-size: 18px; font-weight: 500">
                  {{ item.coupon_name }}
                </div>
                <!--state 1已领用（未使用） 2已使用 3已过期 4已关闭', -->
                <div
                  class="couponCard_rt_btn"
                  @click="draw('reward', item.coupon_type_id)"
                >
                  立即领取
                </div>
                <!-- <div class="couponCard_rt_btn" v-show="item.state==1">已领用</div>
                <div class="couponCard_rt_btn" v-show="item.state==2">已使用</div>
                <div class="couponCard_rt_btn" v-show="item.state==3">已过期</div>
                <div class="couponCard_rt_btn" v-show="item.state==4">已关闭</div>-->
              </div>
              <div style="font-size: 12px">
                有效期：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
              <div class="couponCard_rightBg"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="couponType_discount" v-if="discountList.length">
        <div class="couponType_title">折扣</div>

        <div class="couponCardBox">
          <div class="couponCard" v-for="(item, index) in discountList" :key="index">
            <div class="couponCard_l">
              <div style="display: flex">
                <span style="font-weight: 500; font-size: 24px">
                  {{ item.discount }}
                </span>
                <span>折</span>
              </div>
              <div style="font-size: 12px; width: 100%">满{{ item.at_least }}可用</div>

              <div class="couponCard_leftBg"></div>
            </div>
            <div class="couponCard_r">
              <div class="couponCard_rt">
                <div style="font-size: 18px; font-weight: 500">
                  {{ item.coupon_name }}
                </div>
                <!--state 1已领用（未使用） 2已使用 3已过期 4已关闭', -->
                <div
                  class="couponCard_rt_btn"
                  @click="draw('reward', item.coupon_type_id)"
                >
                  立即领取
                </div>
                <!-- <div class="couponCard_rt_btn" v-show="item.state==1">已领用</div>
                <div class="couponCard_rt_btn" v-show="item.state==2">已使用</div>
                <div class="couponCard_rt_btn" v-show="item.state==3">已过期</div>
                <div class="couponCard_rt_btn" v-show="item.state==4">已关闭</div>-->
              </div>
              <div style="font-size: 12px">
                有效期：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
              <div class="couponCard_rightBg"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 暂无可领取折扣优惠券，去看点别的吧 -->
      <div
        class="nothing"
        v-if="!discountList.length && !decrementList.length && !noThresholdList.length"
      >
        <img src="@/assets/images/noGoods.png" />
        暂无可领取折扣优惠券，去看点别的吧
      </div>
    </div>

    <el-dialog
      :visible.sync="receiveDialog"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" style="display: flex">
        <img
          style="width: 24px; height: 24px; margin-right: 10px"
          src="~assets/images/Tips.png"
          alt
        />
        <div style="height: 24px; line-height: 24px; font-size: 16px; font-weight: 500">
          提示
        </div>
      </div>
      <div style="margin: 0px auto; width: 330px; height: 100%">
        优惠券领取成功，请到个人中心-我的优惠券 查看已领取优惠券。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiveDialog = false">取消</el-button>
        <el-button type="primary" @click="goMyCoupon">去查看</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  auth: false,
  data() {
    return {
      // 折扣
      discountList: [],
      // 满减
      decrementList: [],
      // 无门槛
      noThresholdList: [],
      receiveDialog: false,
    };
  },
  created() {
    // reward满减 discount折扣 no_threshold无门槛
    this.getClassList("reward");
    this.getClassList("discount");
    this.getClassList("no_threshold");
  },
  methods: {
    getClassList(type) {
      let obj = {
        type: type,
        couponURL: true,
      };
      this.$axios.post(`coupon/api/coupon/typepagelists`, obj).then((res) => {
        console.log(res.data.list, 1111);
        // reward满减
        if (type == "reward") {
          this.decrementList = res.data.list;
        }
        // discount折扣
        else if (type == "discount") {
          this.discountList = res.data.list;
        }
        //  no_threshold无门槛
        else if (type == "no_threshold") {
          this.noThresholdList = res.data.list;
        }
      });
    },
    // 领取优惠券
    draw(type, coupon_type_id) {
      let obj = {
        type: type,
        coupon_type_id: coupon_type_id,
        get_type: 2, //获取方式:1订单2.直接领取3.活动领取
        couponURL: true,
      };
      this.$axios
        .post(`coupon/api/coupon/receive`, obj)
        .then((res) => {
          this.receiveDialog = true;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    goMyCoupon() {
      this.$router.push({ path: "/user/myCoupon" + `?types=4` });
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  .crumbs {
    margin: 20px 0;
  }
  .coupon_Box {
    width: 1200px;
    min-height: 582px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px;
    .couponType_discount {
      width: 1200px;
      height: 280px;
      .couponType_title {
        width: 108px;
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 25px;
      }
      .couponCardBox {
        display: flex;
        flex-wrap: wrap;
        .couponCard {
          width: 340px;
          height: 90px;
          background: linear-gradient(146deg, #ffe2bb 0%, #ffeedc 35%, #fcd8ab 100%);
          border: 1px solid rgba(255, 229, 195, 0.3);
          display: flex;
          justify-content: space-between;
          padding: 20px;
          margin-top: 20px;
          margin-right: 60px;
          border-radius: 10px;
          color: rgba(240, 132, 51, 0.78);
          .couponCard_l {
            width: 110px;
            padding-right: 15px;
            border-right: 1px dashed rgba(230, 201, 165, 0.8);
            position: relative;
            .couponCard_leftBg {
              position: absolute;
              top: 16px;
              left: -30px;
              width: 16px;
              height: 16px;
              background: #fff;
              border-radius: 50%;
            }
          }
          .couponCard_r {
            width: 250px;
            margin-left: 15px;
            position: relative;
            .couponCard_rt {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              .couponCard_rt_btn {
                background: linear-gradient(133deg, #fb6677 0%, #f33b50 100%);
                border-radius: 14px;
                color: #fff;
                font-size: 12px;
                line-height: 24px;
                padding: 0px 20px;
                cursor: pointer;
              }
            }
            .couponCard_rightBg {
              position: absolute;
              top: 16px;
              right: -30px;
              width: 16px;
              height: 16px;
              background: #fff;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
  .nothing {
    padding-top: 150px;
    padding-bottom: 150px;
    font-size: 16px;
    text-align: center;
    color: #969696;

    img {
      margin: 0 auto;
    }
  }
}
</style>
