<template>
  <scroll-view class="coupon-sel" scroll-y>
    <div class="coupon-wrap">
      <div
        class="coupon-list"
        v-for="(item, index) in usableList"
        :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" class="bg_img" />
          </template>
          <template v-else>
            <img :src="`${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" class="bg_img" />
          </template>
        </div> -->
        <div class="list-det">
          <img :src="couponSelInx && couponSelInx == (index + 1) ? `${constant.imgUrl}/retail/coupon/is-check.png` : `${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" class="bg_img" />
          <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.endTime.substr(0, 10) }}</div>
            </div>
          </div>
        </div>
      </div>
      <selectCouponItem v-for="(item, index) in unusableList" :key="index" :item="item"></selectCouponItem>
    </div>
  <view class="footer_bar">
    <text>已优惠￥{{couponSum}}</text>
    <button class="admin-button-com middle blue" @click="ConfirmReachFn">确认</button>
  </view>
  </scroll-view>
</template>

<script>
import { mapGetters } from "vuex";
import { userDiscount } from "@/api/member";
import { getShopUser } from "@/utils/auth";
import { shopCouponList } from '@/api/coupon'
import selectCouponItem from './components/selectCouponItem'
export default {
  name: "coupon-sel",
  props: {},
  components: { selectCouponItem },
  data() {
    return {
      couponSelInx: null,
      couponId: 0,
      data: {},
      couponSum: '0',
      list: []
    };
  },
  computed: {
    ...mapGetters({ shopUser: "getShopUser" }),
    usableList() {
      return this.list.filter(item => {return Number(item.miniCost) <= Number(this.option.price) && item.take != 2})
    },
    unusableList() {
      return this.list.filter(item => {return Number(item.miniCost) > Number(this.option.price) || item.take == 2})
    }
  },
  mounted() {},
  onShow() {
    if( uni.getStorageSync('selectCouponInfo').couponId != null) {
      this.couponSelInx = uni.getStorageSync('selectCouponInfo').couponSelInx
      this.couponId = uni.getStorageSync('selectCouponInfo').couponId
      this.couponSum = uni.getStorageSync('selectCouponInfo').couponSum
    }
  },
  onPullDownRefresh() {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		},
  methods: {
    async init() {
			this._list()
		},
		_list() {
			return shopCouponList({ status: '1' }).then(res => {
				console.log(res)
        this.list = res.data.list
			})
		},
    // 优惠券选择
    couponChange(item, index) {
      
      this.couponSelInx = this.couponSelInx == index ? null : index;
      this.couponId = this.couponSelInx == index ? item.id : 0;
      this.couponSum = this.couponSelInx == index ? item.amount : '0';
      
      console.log(this.couponId, this.couponSelInx)
    },
    ConfirmReachFn() {
      let obj = {}
      console.log({couponSum: this.couponSum, couponId: this.couponId})
      if(this.couponSum != '0') {
        obj.couponSum = this.couponSum
      }
      if(this.couponId != '0') {
        obj.couponId = this.couponId
      }
      if (this.couponSelInx != null) {
        obj.couponSelInx = this.couponSelInx
      }
      console.log(obj, 116)
      uni.setStorageSync('selectCouponInfo', obj)
      uni.navigateBack({})
    }
  }
};
</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 {
  margin: 0 20upx;
  padding-top: 20px;
    .list-det {
      width: 100%;
      @include disFlex(center, space-between);
      position: relative;
      margin-bottom: 30upx;
      &>.bg_img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 94upx;
        z-index: -1;
      }
      .list-det-left {
        padding: 20px 0 20px 36px;
        width: 210px;
        color: #ff2947;
        .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;
          }
        }
      }
    }
}
.footer_bar{
    width: 100%;
    max-width: 750rpx;
    min-width: 320rpx;
    padding: 0 30upx;
    height: 100rpx;
    position: fixed;
    text-align: center;
    bottom: 0;
    background: white;
    box-shadow: -4rpx -4rpx 6rpx #eee;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &>.admin-button-com{
      width: 120upx;
    }
}
.bg_img{
  height: 94upx;
}
// 修改uni-app组件
/deep/.uni-radio-input-checked {
  background-color: $mainColor !important;
  border-color: $mainColor !important;
}
</style>