<template>
  <u-popup
    mode="bottom"
    border-radius="20"
    :popup="false"
    v-model="show"
    :maskCloseAble="true"
    length="auto"
    :safeAreaInsetBottom="true"
    @close="popupClose"
    :z-index="9999"
    close-icon="cross"
    :closeable="true"
  >
    <view class="coupon">
      <view class="title">优惠券</view>
      <view class="chosentips">请选择要使用的优惠券</view>
      <view class="details">
        <view class="item" v-for="(x, i) in ts" :key="i">
          <view class="ticket">
            <view class="miane">
              <view class="money">
                <text class="small" v-if="x.coupon_data.type==1">￥</text>
                <text style="font-size: 44px;">{{x.sub_price.toString().split('.')[0]}}</text>
                <text class="small" v-if="x.coupon_data.type==2">折</text>
				
              </view>
              <view class="tiaojian">满{{x.coupon_min_price}}元可用</view>
            </view>
          </view>
          <view class="detail">
            <view class="coupond">
              <view class="name">{{x.coupon_data.name}}</view>
              <view class="date">{{x.start_time+"-"+x.end_time}}</view>
              <view class="rule">{{x.coupon_data.rule}}</view>
            </view>
            <view class="chosen">
              <u-radio-group v-model="currentChosen">
                <u-radio
                  shape="circle"
                  :name="x.id"
                  :icon-size="36"
                  :active-color="mc"
                ></u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
      </view>
      <view class="btton-box">
        <u-button
          size="80"
          :ripple="true"
          shape="circle"
          :custom-style="{
            backgroundColor: mc,
            height: '80rpx',
            color: '#FFF',
            fontSize: '14px',
            margin: '0 3vw',
            width: '90vw',
          }"
          @click="popupClose"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: ["list", "current"],
  data() {
    return {
      mc: "",
      show: true,
      currentChosen: "",
      ts:[]
    };
  },
  mounted() {
    this.mc = this.$uiConfig.mainColor;
    this.currentChosen = this.current;
    this.ts=this.list
    this.ts.forEach(x=>{
        x.start_time=x.start_time.split(' ')[0].replace(/-/g,'.')
        x.end_time=x.end_time.split(' ')[0].replace(/-/g,'.')
    })
  },
  methods: {
    popupClose(){
      if(this.currentChosen!=this.current){
        this.$emit('close',this.currentChosen)
      }else{
        this.$emit('close',-1)
      }
    }
  },
};
</script>

<style>
.coupon {
  max-height: 70vh;
  background: #f5f5f5;
  padding-bottom: 50px;
  text-align: left !important;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: scroll;
}
.coupon .title {
  font-size: 22px;
  color: #000;
  padding: 20px;
  background: #fff;
}
.coupon .chosentips {
  padding: 12px 20px;
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  color: #777;
  background: #fff;
  font-size: 12px;
}
.coupon .details {
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.coupon .details .item {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
  background: #fff;
}
.coupon .details .item .ticket {
  position: relative;
  background-image: linear-gradient(
    to bottom right,
    rgb(95, 154, 220),
    rgb(112, 125, 195)
  );
  width: 125px;
  height: 100px;
  display: flex;
  align-items: center;
  color: #fff;
}
.coupon .details .item .ticket .miane .money {
  font-family: "oswald";
  font-weight: bold;
  size: 64px;
  width: 125px;
  text-align: center;
}
.coupon .details .item .ticket .miane .money .small {
  font-size: 20px;
}
.coupon .details .item .ticket .miane .tiaojian {
  font-size: 14px;
  width: 125px;
  text-align: center;
}

.coupon .details .item .detail {
  width: 1px;
  flex: 1;
  background: #fff;
  padding: 10px;
  display: flex;
  align-items: flex-end;
}
.coupon .details .item .detail .coupond {
  flex: 1;
}
.coupon .details .item .detail .coupond .name {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}
.coupon .details .item .detail .coupond .date {
  margin-top: 5px;
  font-size: 11px;
  color: #777;
}
.coupon .details .item .detail .coupond .rule{
    font-size: 11px;
    color:#777;
    margin-top: 5px;
}
.coupon .details .item .detail .chosen {
  width: 20px;
}
.coupon .details .item .ticket:before {
  content: "";
  display: block;
  width: 12px;
  height: 100%;
  background-size: 12px 12px; /* 一个repeat的大小 */
  background-repeat: repeat-y;
  background-image: radial-gradient(#f5f5f5 4px, transparent 4px);
  position: absolute;
  top: 0;
}
.coupon .details .item .ticket:before {
  left: -6px;
}
.pesongBox .btton-box {
  height: 50px;
  display: flex;
  padding: 5px 10px;
  border-top: 1px solid #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background: #fff;
}
</style>
