<template>
  <view class="">
    <!-- <block v-for="(item, index) in info">
      <block v-if="item.type==1">
        <view class="type_name">无门槛实物通用补贴<text class="n_count">(2张)</text></view>
        <view class="r_list" v-for="(e, i) in item.list">
          <view class="r_item" @click="change(index, i)">
            <image class="r_bg" src="/static/active/red_packet.webp"></image>
            <view class="r_body">
              <view class="r_count">
                <view class="rc_count">
                  <text class="rc_icon">￥</text>240
                </view>
              </view>
              <view class="r_content">
                <view class="r_name">现金抵扣补贴</view>
                <view>仅限平台指定商家商品可使用</view>
                <view>有效期至 2026.01.15 24:00:00</view>
              </view>
              <view class="r_icon">
                <u-icon v-if="changeRed.type == index && changeRed.id == i" name="checkmark-circle-fill" color="#FFF3CC" size="56rpx"></u-icon>
                <u-icon v-else name="checkmark-circle" color="#FFF3CC" size="56rpx"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </block>
      <block v-if="item.type==2">
        <view class="type_name">不可使用补贴<text class="n_count">(2张)</text></view>
        <view class="none_list" v-for="(e, i) in item.list">
          <view class="r_body">
            <view class="r_count">
              <view class="rc_count">
                <text class="rc_icon">￥</text>200
              </view>
            </view>
            <view class="r_content">
              <view class="r_name">现金抵扣补贴</view>
              <view>仅限平台指定商家商品可使用</view>
              <view>有效期至 2026.01.15 24:00:00</view>
            </view>
          </view>
          <u-line dashed color="#999999"></u-line>
          <view class="n_tips">本单不可用原因：未在平台指定店铺使用</view>
        </view>
      </block>
    </block> -->
    
    <view style="height: 30rpx;"></view>
    <view class="r_list" v-for="(item, i) in list" :key="i">
      <view class="r_item" @click="change(item)">
        <image class="r_bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/ad7c4202403081750326208.webp"></image>
        <view class="r_body">
          <view class="r_count">
            <view class="rc_count">
              <text class="rc_icon">￥</text>{{item.balance}}
            </view>
          </view>
          <view class="r_content">
            <view class="r_name">{{item.coupon_title}}</view>
            <view>{{item.describe}}</view>
            <view>有效期至 {{item.end_time}}</view>
          </view>
          <view class="r_icon">
            <u-icon v-if="changeRed&&changeRed.coupon_user_id==item.coupon_user_id" name="checkmark-circle-fill" color="#FFF3CC" size="56rpx"></u-icon>
            <!-- <u-icon v-else name="checkmark-circle" color="#FFF3CC" size="56rpx"></u-icon> -->
            <view v-else style="height: 50rpx;width: 50rpx;border-radius: 50%;border: 5rpx solid #FFF3CC;"></view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <view>
        <text>已选 {{ changeRed?1:0 }} 张</text>
        <view v-if="changeRed&&changeRed.coupon_title.includes('抵扣补贴')" style="font-size: 24rpx;margin-left: 10rpx;color: #ed4c3a;">(使用补贴后此订单将不参与任何补贴活动)</view>
        <view v-if="changeRed&&changeRed.coupon_title.includes('通用补贴')" style="font-size: 24rpx;margin-left: 10rpx;color: #ed4c3a;">(使用补贴后此订单将不参与用户消费补贴活动)</view>
        <!-- , 可减 <text class="red_i">¥</text> <text class="red_c">0</text> -->
      </view>
      <view class="btn" @click="comfirm">确定</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: [
          {
            type: 1, // 是否可以使用
            name: '无门槛实物通用补贴',
            list: [1, 2]
          },
          {
            type: 1, // 是否可以使用
            name: '现金抵扣补贴',
            list: [1,2,3]
          },
          {
            type: 2, // 是否可以使用, 2不可以使用
            name: '不可使用补贴',
            list: [1]
          }
        ],
        list: [],
        changeRed: null,
      }
    },
    onLoad(option) {
      const eventChannel = this.getOpenerEventChannel();
      // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
      eventChannel.on('changeRedPacketInfo', (data) => {
        console.log(data);
        this.list = data;
      })
    },
    onShow() {},
    methods: {
      change(e, i) {
        console.log(e, i);
        if(this.changeRed&&this.changeRed.coupon_user_id==e.coupon_user_id)this.changeRed = null;
        else this.changeRed = e;
      },
      comfirm(){
        uni.$emit('changeRedPacket', this.changeRed?.coupon_user_id||'');
        uni.navigateBack()
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #fff;
  }
  .type_name{
    padding: 20rpx;
    font-size: 28rpx;
    .n_count{
      color: #7A7A7A;
      font-size: 24rpx;
      margin-left: 10rpx;
    }
  }
  .r_list {
    padding: 0 20rpx 20rpx 20rpx;

    .r_item {
      height: 156rpx;
      width: 710rpx;
      position: relative;

      .r_bg {
        width: 100%;
        height: 100%;
      }

      .r_body {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;

        .r_count {
          flex: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #A46F32;
          font-size: 44rpx;
          font-weight: bold;

          .rc_count {
            display: flex;
            align-items: flex-end;
          }

          .rc_icon {
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 8rpx;
          }
        }

        .r_content {
          flex: 4;
          color: #FFF3CC;
          font-size: 24rpx;
          padding: 18rpx 10rpx 18rpx 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .r_name {
            font-size: 32rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
          }
          view{
            width: 100%;
            overflow: hidden; /* 隐藏超出宽度的文本 */
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis; /* 文本末尾显示省略号 */
          }
        }

        .r_icon {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .none_list{
    margin: 0 20rpx 20rpx 20rpx;
    background-color: #E2E2E2;
    border-radius: 20rpx;
    
    .r_body {
      height: 156rpx;
      width: 710rpx;
      display: flex;
    
      .r_count {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333;
        font-size: 44rpx;
        font-weight: bold;
    
        .rc_count {
          display: flex;
          align-items: flex-end;
        }
    
        .rc_icon {
          font-size: 28rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
        }
      }
    
      .r_content {
        flex: 5;
        color: #333;
        font-size: 24rpx;
        padding: 18rpx 10rpx 18rpx 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    
        .r_name {
          font-size: 32rpx;
          font-weight: 500;
          margin-bottom: 10rpx;
        }
        view{
          width: 100%;
          overflow: hidden; /* 隐藏超出宽度的文本 */
          white-space: nowrap; /* 不换行 */
          text-overflow: ellipsis; /* 文本末尾显示省略号 */
        }
      }
    
    }
    
    .n_tips{
      padding: 10rpx 30rpx 20rpx 30rpx;
      color: #333;
      font-size: 24rpx;
    }
  }
  .footer{
    height: 130rpx;
    padding: 30rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F6F6F6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    .red_i{
      color: #FF421D;
      margin-left: 20rpx;
    }
    .red_c{
      color: #FF421D;
      font-size: 44rpx;
    }
    .btn{
      width: 128rpx;
      height: 68rpx;
      background-color: #EC693F;
      border-radius: 34rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
</style>