<template>
  <scroll-view scroll-y="true" class="scroll-Y">
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>

    <checkbox-group @change="checkboxChange">
      <view class="card-list">
        <view
          class="item"
          v-for="(item, index) in list"
          :key="index"
          :class="index == list.length - 1 ? 'mgb-110' : ''"
        >
          <view class="item-image cro">
            <div class="cro_right_top"></div>
            <div class="cro_right_bottom"></div>
            <view class="img">
              <view>
                <text style="font-weight: bold; color: #ed1c24">￥</text>
                <text
                  style="font-weight: bold; color: #ed1c24; font-size: 50rpx"
                  >{{ item.value }}</text
                >
              </view>
              <text style="color: #989898; font-size: 30rpx">停车劵</text>
            </view>
          </view>
          <view class="item-content cro_">
            <div class="cro_left_top"></div>
            <div class="cro_left_bottom"></div>
            <view class="content">
              <text class="h3">{{ item.ticketName }}</text>
              <text class="span">有效期至 {{ item.cancelEndTime }}</text>
            </view>
            <view class="erwm_box">
              <checkbox
                :value="index"
                color="#fff"
                :disabled="item.disabled"
                :checked="item.checked"
              />
            </view>
          </view>
        </view>
      </view>
    </checkbox-group>
    <view class="flewx">
      <view class="flewx-content"
        >应付<text style="color: red; font-size: 32rpx; padding-left: 20rpx">{{
          actualFee | currency
        }}</text>
        元
        <text style="color: #8d8d8d; padding-left: 30rpx; font-size: 28rpx"
          >已优惠{{ discountFee | currency }}元</text
        ></view
      >
      <view
        :class="{
          flewx_index3: true,
          blue_flewx_index3: custTypeId === 1,
          green_flewx_index3: custTypeId === 2,
          'btn-disabled': !parkInfo.servicefee,
        }"
        @click="confirm"
        >确定</view
      >
    </view>
  </scroll-view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  onLoad() {
    // 纸质优惠券
    if (uni.getStorageSync('paperCouponInfo')) {
      this.paperCouponFee =
        uni.getStorageSync('paperCouponInfo').paperDiscountFee || 0;
    }
    this.servicefee = uni.getStorageSync('servicefee'); // 应缴金额
    this.parkDiscountTotal = uni.getStorageSync('parkingTotal'); // 总停车优惠
    // 本页面数据缓存
    this.couponInfo = uni.getStorageSync('couponInfo');
    if (this.couponInfo) {
      this.parkDiscountTotal.feeCopy -= this.couponInfo.couponfee;
    }
    this.checkedCouponList = uni.getStorageSync('checkedCouponList') || [];
  },
  onShow() {
    const list = uni.getStorageSync('list');
    this.parkFee = JSON.parse(uni.getStorageSync('parkFee'));
    this.parkFee.parkInfoEntity.useReduceTime = this.parkFee.parkInfoEntity
      .useReduceTime
      ? this.parkFee.parkInfoEntity.useReduceTime
      : 0;
    this.parkMallCode = this.parkFee.parkInfoEntity.parkMallCode;
    // 上限金额
    this.maxonetimediscountFee =
      this.parkFee.parkInfoEntity.maxonetimediscount *
      this.parkFee.parkInfoEntity.needmoney;
    // 深圳特殊处理(单位:金额)
    if (this.parkMallCode === 5) {
      this.maxonedaydiscountFee =
        this.parkFee.parkInfoEntity.maxOneDayHour -
          this.parkFee.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour ||
        0;
    } else {
      this.maxonedaydiscountFee =
        (this.parkFee.parkInfoEntity.maxOneDayHour -
          this.parkFee.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour) *
          this.parkFee.parkInfoEntity.needmoney || 0;
    }
    if (this.maxonedaydiscountFee < 0) {
      this.maxonedaydiscountFee = 0;
    }
    if (list && list.length > 0) {
      this.list = list;
      if (this.checkedCouponList.length > 0) {
        const index = this.checkedCouponList[0];
        const item = this.list[index];
        // 根据电子券规则判断是否可选
        this.isDisabledByRule(item);
      } else {
        this.list.map((e) => {
          // 没有选中项初始化状态
          e.checked = false;
          e.disabled = false;
        });
      }
      // 浦东上限控制
      if (
        this.parkMallCode === 1 ||
        this.parkMallCode === 4 ||
        this.parkMallCode === 5 ||
        this.parkMallCode === 6
      ) {
        if (this.crossMessage()) {
          this.list.forEach((item) => {
            if (!item.checked) {
              item.disabled = true;
            }
          });
        }
      }
    } else {
      this.list = this.parkFee.memberTicketList;
      this.list.forEach((item) => {
        item.disabled = false;
        item.checked = false;
        if (
          (this.parkMallCode === 1 ||
            this.parkMallCode === 4 ||
            this.parkMallCode === 5 ||
            this.parkMallCode === 6) &&
          this.crossMessage()
        ) {
          item.disabled = true;
        }
        if (item.carType == '2') {
          item.value = item.parktime * this.parkFee.parkInfoEntity.needmoney;
        } else if (item.carType == '1') {
          item.value = item.ticketValue;
        }
      });
    }
  },
  data() {
    return {
      parkFee: {}, // 停车规则信息及优惠信息
      list: [], // 电子券列表
      checkedCouponList: [], // 选中的电子券列表
      couponCode: [], // 选中的电子券码组
      servicefee: 0, // 应缴金额
      parkDiscountTotal: {}, // 总停车优惠
      couponInfo: {}, // 页面缓存(电子券优惠)
      maxonetimediscountFee: 0, // 每次优惠上限金额
      maxonedaydiscountFee: 0, // 每天优惠上限金额
      parkMallCode: 1, // 0静安 1浦东 2杭州 3北京 4沈阳 5深圳 6天津
      paperCouponFee: 0, // 纸质优惠金额
    };
  },
  computed: {
    // 电子券优惠金额总计
    totalFee() {
      this.couponCode = [];
      let total = 0;
      this.checkedCouponList.forEach((i) => {
        this.couponCode.push(this.list[i].couponCode);
        total += this.list[i].value;
      });
      return total;
    },
    // 实际支付金额
    actualFee() {
      const fee = this.servicefee - this.discountFee;
      return fee > 0 ? fee : 0;
    },
    // 已优惠金额
    discountFee() {
      let total = this.parkDiscountTotal.feeCopy + this.totalFee;
      // 超出上限按上限计算
      if (this.parkMallCode === 1) {
        if (total - this.paperCouponFee > this.maxonetimediscountFee) {
          total = this.maxonetimediscountFee + this.paperCouponFee;
        }
      }
      if (this.parkMallCode === 4 || this.parkMallCode === 6) {
        if (
          total - this.paperCouponFee - this.parkDiscountTotal.bonusfee >
          this.maxonedaydiscountFee
        ) {
          total =
            this.maxonedaydiscountFee +
            this.parkDiscountTotal.bonusfee +
            this.paperCouponFee;
        }
      }
      if (this.parkMallCode === 5) {
        if (total > this.maxonedaydiscountFee) {
          total = this.maxonedaydiscountFee;
        }
      }
      return total;
    },
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  methods: {
    // 选择回调
    checkboxChange(e) {
      // 获取动作项目索引
      const current = e.detail.value;
      const pre = this.checkedCouponList;
      const diff = pre.concat(current).filter((v, i, arr) => {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
      console.log(diff);

      this.checkedCouponList = e.detail.value;

      // 如果有选中项
      if (this.checkedCouponList.length > 0) {
        const index = diff[0];
        const item = this.list[index];
        // 根据电子券规则判断是否可选
        this.isDisabledByRule(item);
      } else {
        this.list.map((e) => {
          // 没有选中项初始化状态
          e.checked = false;
          e.disabled = false;
        });
      }
      console.log(this.list);
    },

    // 根据电子券规则判断是否可选
    isDisabledByRule(item) {
      // 杭州电子券使用上限(单位: 张)
      if (this.parkMallCode === 2) {
        // 达到上限
        if (
          this.checkedCouponList.length ===
          this.parkFee.parkInfoEntity.useTicketNum -
            this.parkFee.parkInfoEntity.couponcodeNum
        ) {
          this.list.forEach((e, i) => {
            if (this.checkedCouponList.findIndex((c) => c == i) === -1) {
              e.disabled = true;
            } else {
              e.checked = true;
            }
          });
          return uni.showToast({
            title: `电子券每天最多可使用${this.parkFee.parkInfoEntity.useTicketNum}张`,
            icon: 'none',
          });
        } else {
          this.list.forEach((e) => {
            e.disabled = false;
          });
        }
      }

      // 浦东每次缴费超限控制、沈阳每日超限控制
      if (
        (this.parkMallCode === 1 ||
          this.parkMallCode === 4 ||
          this.parkMallCode === 5 ||
          this.parkMallCode === 6) &&
        this.crossMessage()
      ) {
        this.list.forEach((e, i) => {
          if (this.checkedCouponList.findIndex((c) => c == i) === -1) {
            e.disabled = true;
            e.checked = false;
          } else {
            e.checked = true;
          }
        });
        return;
      }

      // 选中状态赋值
      this.list.forEach((e, i) => {
        if (this.checkedCouponList.findIndex((c) => c == i) !== -1) {
          e.checked = true;
        } else {
          e.checked = false;
        }
        // superpositionrule  叠加使用规则 （1不可叠加，2仅同类型可叠加，3可叠加）
        if (item.superpositionrule == '1') {
          if (e.couponCode !== item.couponCode) {
            e.disabled = true;
          }
        } else if (item.superpositionrule == '2') {
          if (e.superpositionrule == '2') {
            // 统计当前(同类型&同可叠加次数)
            let count = 0;
            this.checkedCouponList.forEach((i) => {
              if (this.list[i].ticketId === item.ticketId) {
                count++;
              }
            });
            console.log(item.ticketId + '合计：' + count);
            if (item.ticketId === e.ticketId) {
              // 超限判断
              if (item.limitUseNum !== 0 && count + 1 > item.limitUseNum) {
                if (e.checked === false) {
                  e.disabled = true;
                }
              } else {
                e.disabled = false;
              }
            } else {
              e.disabled = false;
            }
          } else {
            // 异类
            e.disabled = true;
          }
        } else {
          // 类型3可叠加
          e.disabled = false;
        }
      });
    },

    // 是否选中
    isCheck(val) {
      return this.checkedCouponList.findIndex((e) => e == val) !== -1;
    },

    // 超限提示
    crossMessage() {
      let totalFee = this.parkDiscountTotal.feeCopy;
      totalFee += this.totalFee;
      // 浦东每次优惠上限
      if (
        this.parkMallCode === 1 &&
        totalFee - this.paperCouponFee >= this.maxonetimediscountFee
      ) {
        return uni.showToast({
          title: `超出抵扣上限,每次最高可抵扣${this.parkFee.parkInfoEntity.maxonetimediscount}小时`,
          icon: 'none',
        });
      }
      // 沈阳超限处理(maxonedaydiscountFee 会员、消费、电子券减免)
      if (
        (this.parkMallCode === 4 || this.parkMallCode === 6) &&
        totalFee - this.paperCouponFee - this.parkDiscountTotal.bonusfee >=
          this.maxonedaydiscountFee
      ) {
        return uni.showToast({
          title: `(会员等级、消费、电子券)每日最高可抵扣${this.parkFee.parkInfoEntity.maxOneDayHour}小时`,
          icon: 'none',
        });
      }
      // 深圳超限处理
      if (this.parkMallCode === 5 && totalFee >= this.maxonedaydiscountFee) {
        return uni.showToast({
          title: `每日最高可抵扣${this.parkFee.parkInfoEntity.maxOneDayHour}元`,
          icon: 'none',
        });
      }
    },

    // 确认
    confirm() {
      uni.setStorageSync('checkedCouponList', this.checkedCouponList);
      uni.setStorageSync('list', this.list);
      uni.setStorageSync('couponInfo', {
        couponfee: this.totalFee,
        couponcode: this.couponCode.join('#'),
      });
      uni.navigateBack();
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f1f1f1;
}
.card-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  flex: 1;
  position: relative;

  .item {
    display: flex;
    margin-bottom: 16rpx;

    .item-image {
      border: 2rpx solid #f2f2f2;
      border-right: 2rpx dashed #f2f2f2;
      padding: 16rpx;
      border-radius: 16rpx 0 0 16rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;

      &.cro {
        position: relative;
      }

      .img {
        width: 130rpx;
        height: 130rpx;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .item-content {
      flex: 1;
      border: 2rpx solid #f2f2f2;
      border-radius: 0 8rpx 8rpx 0;
      padding: 16rpx;
      box-sizing: border-box;
      background: #fff;
      display: flex;

      &.cro_ {
        position: relative;
      }

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

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

        .span {
          font-size: 24rpx;
          color: #838181;
          line-height: 40rpx;
        }
      }

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

        image {
          width: 52rpx;
          height: 52rpx;
        }

        .tag {
          position: absolute;
          bottom: 0;
          right: 0;
          border-radius: 16rpx;
          padding: 5rpx 10rpx;
          box-sizing: border-box;
          background: #f7931e;
          text-align: center;
          color: #fff;
          width: 122rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
// 凹圆角
.cro_left_top,
.cro_left_bottom,
.cro_right_top,
.cro_right_bottom {
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  border: 1px solid #eee;
  z-index: 1;
  background: #f2f2f2;
}

.cro_left_top {
  top: -1px;
  left: -1px;
  border-radius: 0px 0px 8rpx 0px;
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
}

.cro_left_bottom {
  left: -1px;
  bottom: -1px;
  border-radius: 0px 8rpx 0px 0px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
}

.cro_right_top {
  top: -1px;
  right: -1px;
  border-radius: 0px 0px 0px 8rpx;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
}

.cro_right_bottom {
  right: -1px;
  bottom: -1px;
  border-radius: 8rpx 0px 0px 0px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
}
.mgb-110 {
  margin-bottom: 110rpx !important;
}
.flewx {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 20rpx;
  .flewx-content {
    position: absolute;
    left: 16px;
  }
  .flewx_index3 {
    width: 150rpx;
    height: 70rpx;
    border-radius: 50rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 70rpx;
    color: #fff;
    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
    box-shadow: 2px 3px 5px #888888;
    position: absolute;
    right: 16px;
  }
  .blue_flewx_index3 {
    .color-background-color('blue');
  }
  .green_flewx_index3 {
    .color-background-color('green');
  }
}
/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>
