<template>
  <div scroll-y="true" :class="['scroll-Y' , theme]">
    <div>
      <div class="parkingFeeCoupon">
        <van-checkbox-group :value="checkedCouponList">
          <div class="card-list" v-if="couponList.length">
            <div class="item" v-for="(item, index) in couponList" :key="index">
              <div class="coupon-active" v-if="checkedCouponList.indexOf(`coupon${index}`) > -1">
                <svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <mask id="path-1-inside-1_304_8" fill="white">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z"/>
                  </mask>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="var(--k-color-primary-06)"/>
                  <path d="M196 0V-1H195V0H196ZM176 0H177V-1H176V0ZM176 197V198H177V197H176ZM196 197H195V198H196V197ZM186 11C192.075 11 197 6.07513 197 0H195C195 4.97056 190.971 9 186 9V11ZM175 0C175 6.07513 179.925 11 186 11V9C181.029 9 177 4.97056 177 0H175ZM4 1H176V-1H4V1ZM1 4C1 2.34314 2.34315 1 4 1V-1C1.23858 -1 -1 1.23857 -1 4H1ZM1 193V4H-1V193H1ZM3.99999 196C2.34314 196 1 194.657 1 193H-1C-1 195.761 1.23856 198 3.99999 198V196ZM176 196H3.99999V198H176V196ZM186 186C179.925 186 175 190.925 175 197H177C177 192.029 181.029 188 186 188V186ZM197 197C197 190.925 192.075 186 186 186V188C190.971 188 195 192.029 195 197H197ZM686 196H196V198H686V196ZM689 193C689 194.657 687.657 196 686 196V198C688.761 198 691 195.761 691 193H689ZM689 4V193H691V4H689ZM686 1C687.657 1 689 2.34314 689 4H691C691 1.23858 688.761 -1 686 -1V1ZM196 1H686V-1H196V1Z" fill="var(--k-color-primary-01)" mask="url(#path-1-inside-1_304_8)"/>
                  <path d="M185.5 12.486V184.514" stroke="#CCCCCC" stroke-linecap="square" stroke-dasharray="8"/>
                </svg>  
              </div>
              <div class="coupon-active" v-else>
                <svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="#FAFBFF"/>
                  <path d="M185.5 10.5V187.5" stroke="#D8DAE0" stroke-linecap="square" stroke-dasharray="8"/>
                </svg>
              </div>

              <div class="item-image">
                <div class="discountFee-box">
                  <span>￥</span>
                  <span class="itemValue">{{ item.discountFee }}</span>
                </div>
                <span style=" font-size: 30px">停车劵</span>
              </div>
              <div class="item-content">
                <div class="content">
                  <span class="h3">{{ item.name }}</span>
                  <span class="span">有效期至 {{ item.expirationDate }}</span>
                </div>
                <div class="erwm_box">
                  <van-checkbox color="#fff" @click="checkboxItemChange(`coupon${index}`, index)" checked-color="var(--k-color-primary)" :disabled="item.disabled" :name="`coupon${index}`"/>
                </div>
              </div>
            </div>
          </div>
          <div class="no-coupon" v-else>
            <img :src="require('./static/images/no-card.png')"/>
            <span class="message">您还没有卡券</span>
          </div>
        </van-checkbox-group>
        <!-- 为避免冲突，小程序 和 H5 跳转 CRM小程序：积分商城 的逻辑分开处理 -->
        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'miniprogram' && source === 'KIP'">
          <div class="guide-title">优惠券兑换指导</div>
          <div class="guide-desc" @click="navigateToMiniProgram">
            停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
            <span class="guide-mini">嘉里中心小程序>积分商城</span>
            进行兑换
          </div>
        </div>
        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'micromessenger' && source === 'KIP'">
          <div class="guide-title">优惠券兑换指导</div>
          <div class="guide-desc">
            停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
            <span class="guide-mini">嘉里中心小程序>积分商城</span>
            <wx-open-launch-weapp username="gh_0bd6a97b6d38" id="launch-btn" :path="`pages/pointsMall/pointsMall.html${launchPath}`" class="wx-open-launch-weapp" :env-version="envVersion" :extra-data="{...extraData, navigate_time:new Date().getTime()}" @launch="launchFn" @error="launchErrorFn">
              <script type="text/wxtag-template">
                <span style="white-space: nowrap;display: inline-block;color: transparent;text-decoration: underline;margin: 0 5px;font-size: 14PX;"></span>
              </script>
            </wx-open-launch-weapp>
            进行兑换
          </div>
        </div>
        <div style="height: 130px;"></div>
      </div>
    </div>
    <div class="flewx">
      <div class="control-box">
        <div class="flewx-content">
          <div class="fee-box">
            <div>合计：</div>
            <div class="actualPayFee">{{
                actualPayFee | currency
              }}
            </div>
            <!-- <van-count-down :time="3 * 60 * 1000" /> -->
          </div>
          <div :class="['van-hairline--surround','usingTotalDiscount', usingTotalDiscount > 0 && 'usingTotalDiscount-red']"
          >已优惠{{ usingTotalDiscount | currency }}元
          </div
          >
        </div>
        <div class="btn-box">
          <k-button style="width: 100%;max-width: 240px" title="确定" disabledColor="#D1D2D9" @click="confirm"/>
        </div>

      </div>
      <!-- 开启底部安全区适配 -->
      <van-number-keyboard safe-area-inset-bottom />
    </div>
  </div>
</template>

<script>
import baseMixins from './mixins/base'
import parkingFeeCouponJs from './mixins/parkingFeeCoupon';
export default {
  mixins: [baseMixins, parkingFeeCouponJs],
};
</script>

<style lang="less" scoped>
//@import '../../styles/common.less';

.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #F4F7FF;

  .parkingFeeCoupon {
    min-height: 99.88vh;
    background: #f4f7ff;
  }
}

.card-list {
  width: 100%;
  //background: #f4f7ff;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  box-sizing: border-box;
  flex: 1;
  position: relative;

  .item {
    width: 100%;
    height: 197px;
    display: flex;
    margin-bottom: 16px;
    border-radius: 4px;
    //background-image: url("./static/images/coupon-bg.png");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size:100% 100%;
    color: var(--k-color-primary);
    position: relative;
    z-index: 2;
    .coupon-active {
      position: absolute;
      z-index: 0;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 100%;      
    }
    svg{
      width: 100%;
      height: 100%;
    }
    .item-image {
      z-index: 2;
      width: 190px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      .discountFee-box {
        margin-top: 31px;
        .itemValue {
          font-size: 60px;
        }
      }
    }

    .item-content {
      z-index: 2;
      display: flex;
      flex: 1;
      padding-left: 44px;
      padding-right: 30px;
      align-items: center;
      justify-content: space-between;

      .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;

        .h3 {
          font-size: 28px;
          line-height: 48px;
          font-weight: 500;
        }

        .span {
          font-size: 24px;
          color: #999999;
          line-height: 40px;
        }
      }

      .erwm_box {
        display: flex;
        align-items: center;
        position: relative;

        img {
          width: 52px;
          height: 52px;
        }

        .tag {
          position: absolute;
          bottom: 0;
          right: 0;
          border-radius: 16px;
          padding: 5px 10px;
          box-sizing: border-box;
          background: #f7931e;
          text-align: center;
          color: #fff;
          width: 122px;
          font-size: 24px;
        }
      }
    }
  }
}

.no-coupon {
  text-align: center;

  img {
    width: 60%;
    display: block;
    margin: 100px auto 20px;
  }

  .message {
    font-size: 36px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #919baa;
    line-height: 50px;
  }
}

.mgb-110 {
  margin-bottom: 110px !important;
}

.guide-box {
  width: calc(100% - 60px);
  margin-left: 30px;

  .guide-title {
    font-size: 34px;
    font-weight: 400;
    color: #333333;
    line-height: 48px;
    margin-bottom: 22px;
  }

  .guide-desc {
    font-size: 28px;
    font-weight: 400;
    color: #999999;
    line-height: 42px;
    position: relative;

    .guide-mini {
      display: inline-block;
      color: var(--k-color-primary);
      text-decoration: underline;
      margin: 0 5px;
    }
  }

  .wx-open-launch-weapp {
    height: 42px;
    position: absolute;
    width: 330px;
    white-space: nowrap;
    left: 90px;
    right: 50px;
    background-color: transparent;
    margin: 0 5px;
  }

  &.flex-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: 20;
  }
}

/*页面底部操作区*/
.flewx {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 3;
  box-shadow: 0 0 2px 0 hsla(0, 6%, 58%, 0.6);
  background-color: #fff;
  .control-box {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-content: flex-start;
    align-items: center;
    //padding-bottom: constant(safe-area-inset-bottom);
    //padding-bottom: env(safe-area-inset-bottom);
    padding: 30px 24px 50px 30px;
    justify-content: space-between;
    .flewx-content {
      font-size: 28px;
      .fee-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .actualPayFee {
        color: #333;
        font-size: 40px;
      }

      .usingTotalDiscount {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        //height: 22px;
        //line-height: 22px;
        margin-left: 90px;
        //border: 1px solid var(--k-color-red-01);
        background-color: #F4F7FF;
        border-radius: 2px;
        &::after {
          border-color: #999999;
        }

        color: #999999;
        padding: 1px 3px;

        &.usingTotalDiscount-red {
          color: var(--k-color-red-01);
          background-color: var(--k-color-red-06);
          &::after {
            border-color: var(--k-color-red-01);
          }
        }
      }
    }
    .btn-box {
      display: flex;
      justify-content: flex-end;
      margin-left: 35px;
      flex: 1;
      max-width: 240px;
    }
  }



  .flewx_index3 {
    width: 150px;
    height: 70px;
    border-radius: 45px;
    text-align: center;
    font-size: 34px;
    line-height: 70px;
    color: #fff;
    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
    background: #064c8a;
    box-shadow: 2px 3px 5px #888888;
    //position: absolute;
    //right: 16px;
  }

}

/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background-color: red !important;
  border-radius: 50% !important;
  border: 1px solid red;
}

/deep/ checkbox .wx-checkbox-input {
  border-radius: 50% !important;
}
</style>
