<template>
  <div class="coupon-sel">
    <block v-if="!$util.isEmpty(shopUser)">
      <radio-group class="radio-group" name="coupon" @change="checkChange">
        <!-- 会员优惠 -->
        <div class="sel-list flex-center-between" v-if="discountArr.indexOf('member') > -1">
          <div class="sel-tit">
            <radio value="1" :checked="memberCheck">
              <span
                class="dis-pormpt"
              >会员身份({{ shopUser.userAsset.member }}级 {{ shopUser.userAsset.discount }}折)</span>
            </radio>
          </div>
          <div class="app-price app-size-28"></div>
        </div>
        <!-- 优惠券优惠 -->
        <div class="sel-list" v-if="discountArr.indexOf('coupon') > -1">
          <div class="sel-tit">
            <radio value="2">
              <span class="dis-pormpt">使用优惠券</span>
            </radio>
          </div>
          <div class="coupon-wrap" v-show="selIndex == 2">
            <div
              class="coupon-list"
              v-for="(item, index) in data.coupon"
              :key="index"
              @click="couponChange(item, index + 1)"
            >
              <div class="list-img">
                <template v-if="couponSelInx && couponSelInx == (index + 1)">
                  <img :src="`${constant.imgUrl}/retail/coupon/is-check.png`" alt mode="widthFix" />
                </template>
                <template v-else>
                  <img :src="`${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" />
                </template>
              </div>
              <div class="list-det">
                <div class="list-det-left">
                  <div class="price-wrap">
                    <span>￥</span>
                    <span class="price">{{ item.amount }}</span>
                  </div>
                  <div class="full-reduc app-size-28">满{{ item.miniCost }}可使用</div>
                </div>
                <div class="list-det-right">
                  <div class="coupon-message">
                    <div class="app-color-2">优惠券</div>
                    <div>适用：全品类</div>
                    <div>有效至：{{ item.deadline | formatTime('YYYY-MM-DD') }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </radio-group>
    </block>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { userDiscount } from "@/api/member";
import { getShopUser } from "@/utils/auth";
export default {
  name: "coupon-sel",
  props: {},
  data() {
    return {
      constant: this.$constant,
      memberCheck: false,
      selIndex: null,
      couponSelInx: null,
      couponId: 0,
      data: {}
    };
  },
  computed: {
    ...mapGetters({ shopUser: "getShopUser" }),
    //可使用优惠列表
    discountArr() {
      let newArr = [];
      if (this.$util.isEmpty(this.data)) {
        return newArr;
      }
      if (!this.$util.isEmpty(this.data.member)) {
        newArr.push("member");
        this.selIndex = 1;
        this.memberCheck = true;

        this.$emit("calcDiscount", {
          memberDiscount: this.data.member.discount,
          couponDiscountAmount: 0
        });
      }
      if (!this.$util.isEmpty(this.data.coupon)) {
        newArr.push("coupon");
      }
      return newArr;
    }
  },
  mounted() {},
  methods: {
    async _getUserDiscount() {
      let arr = [];
      await userDiscount().then(res => {
        this.data = res.data;
        arr = this.discountArr;
      });
      return arr;
    },
    checkChange(e) {
      this.selIndex = e.detail.value;

      if (this.selIndex == 1) {
        this.$emit("calcDiscount", {
          memberDiscount: this.data.member.discount,
          couponDiscountAmount: 0
        });
        this.couponSelInx = null
        this.couponId = 0;
      }

      if (this.selIndex == 2) {
        this.$emit("calcDiscount", {
          memberDiscount: 1,
          couponDiscountAmount: 0
        });
      }
    },
    // 优惠券选择
    couponChange(item, index) {
      this.couponSelInx = this.couponSelInx == index ? null : index;
      this.couponId = item.id;

      this.$emit("calcDiscount", {
        memberDiscount: 1,
        couponDiscountAmount: item.amount
      });

    }
  }
};
</script>

<style lang="scss" scoped>
.sel-list {
  .sel-tit {
    @include disFlex(center, flex-start);
    margin-top: 30px;
    .dis-pormpt {
      font-size: 28px;
      color: $fontColor2;
      margin-left: 6px;
    }
  }
  &:first-child .sel-tit {
    margin-top: 0;
  }
}
// 优惠券
.coupon-wrap {
  padding-top: 20px;
  .coupon-list {
    position: relative;
    margin-bottom: 6px;
    .list-det {
      width: 100%;
      @include disFlex(center, space-between);
      position: absolute;
      top: 0;
      left: 0;
      .list-det-left {
        padding: 20px 0 20px 36px;
        width: 210px;
        color: $mainColor;
        .price-wrap {
          margin-bottom: 6px;
          font-size: 26px;
          .price {
            font-size: 60px;
            font-weight: bold;
            line-height: 1;
          }
        }
      }
      .list-det-right {
        width: calc(100% - 280px);
        margin-left: 22px;
        @include disFlex(center, space-between);
        padding: 20px 26px 20px 0;
        .coupon-message {
          color: $fontColor3;
          & > div {
            margin: 6px 0;
          }
        }
      }
    }
  }
}
// 修改uni-app组件
/deep/.uni-radio-input-checked {
  background-color: $mainColor !important;
  border-color: $mainColor !important;
}
</style>