<template>
  <div>
    <scroll-view scroll-y="true" class="scroll-Y">
      <van-checkbox-group
        v-model="checkedList"
        @change="checkboxChange"
        checked-color="#064C8A"
      >
        <div class="container" v-if="parkInfoEntity.memberLevelReduce">
          <div class="item">
            <div class="title">会员等级减免</div>
            <div class="content">
              {{ memberDiscount.memberOrderdesc || '' }}减免{{
                memberDiscount.reduceContent || 0
              }}小时。可优惠{{ memberDiscountFee || 0 }}元
            </div>
          </div>
          <van-checkbox
            color="#fff"
            name="member"
            :disabled="
              (!isCheck('member') && isDiscountDisabled) ||
              isMemberDiscountDisabled ||
              memberDiscount.reduceContent <= 0
            "
          />
          <!-- :checked="isCheck('member')" -->
          <div class="member-discount-info" v-if="isMemberDiscountDisabled">
            当日已使用
          </div>
        </div>
        <div class="container" v-if="isShowReduceDiscount">
          <div class="item">
            <div class="title">消费减免</div>
            <!-- <uni-view class="content" v-if="parkInfoEntity.parkMallCode === 1 && parkInfoEntity.expirationDate">{{reduceDiscountMessage}}</uni-view> -->
            <div class="content" v-if="parkInfoEntity.parkMallCode !== 1">
              {{ todayReduceDiscountMessage }}
            </div>
            <uni-number-box
              v-if="parkInfoEntity.isSplit === 0 && maxReduceDiscount > 0"
              :min="1"
              :max="maxReduceDiscount"
              v-model="reduceHours"
              @input="reducesChange"
            ></uni-number-box>
          </div>
          <van-checkbox
            name="reduces"
            color="#fff"
            :disabled="
              (!isCheck('reduces') && isDiscountDisabled) ||
              !reducesDiscount.recuceContent
            "
          />
          <!-- :checked="isCheck('reduces')" -->
        </div>
      </van-checkbox-group>
    </scroll-view>
    <div class="flewx">
      <div class="flewx-content">
        合计<span
          style="
            color: #333;
            font-weight: 600;
            font-size: 36px;
            padding-left: 0px;
          "
          >{{ actualFee | currency }}</span
        >
        元
        <span style="color: #999; padding-left: 0px; font-size: 28px"
          >已优惠{{ discountFee | currency }}元</span
        >
      </div>
      <div class="flewx_index3" @click="confirm">确定</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import uni from '@/utils/uniHooks';
// const app = getApp()
export default {
  components: { uniNumberBox },
  created() {
    console.log('103,', uni.getStorageSync('paperCouponInfo'));
    // 纸质优惠券
    if (uni.getStorageSync('paperCouponInfo')) {
      this.paperCouponFee =
        uni.getStorageSync('paperCouponInfo').paperDiscountFee || 0;
    }
    // 电子券
    if (uni.getStorageSync('couponInfo')) {
      this.couponFee = uni.getStorageSync('couponInfo').couponfee || 0;
    }
    const servicefee = uni.getStorageSync('servicefee'); // 应缴金额
    this.servicefee = servicefee ? Number.parseInt(servicefee) : 0;
    console.log(10101, uni.getStorageSync('servicefee'));
    this.parkDiscountTotal = uni.getStorageSync('parkingTotal'); // 总停车优惠
    console.log('电子券', uni.getStorageSync('parkingTotal'));
    // 重置优惠 防止二次叠加
    try {
      this.discountTotal = uni.getStorageSync('discountTotal');

      if (this.discountTotal) {
        this.parkDiscountTotal.feeCopy -= this.discountTotal.fee;
      }
    } catch (err) {
      console.log('discountTotal 异常', err);
    }

    const parkFee = uni.getStorageSync('parkFee');
    this.parkFee = parkFee ? JSON.parse(uni.getStorageSync('parkFee')) : {};
      console.log('116， 尝试定位问题', this.parkFee);
      this.parkInfoEntity = this.parkFee.parkInfoEntity;
      this.parkInfoEntity.useReduceTime = this.parkInfoEntity.useReduceTime
        ? this.parkInfoEntity.useReduceTime
        : 0; // 已用优惠时长
      this.parkInfoEntity.remainReduceTime =
        this.parkInfoEntity.remainReduceTime > 0
          ? this.parkInfoEntity.remainReduceTime
          : 0; // 剩余可用优惠时长
      this.parkMallCode = this.parkInfoEntity.parkMallCode;
      // 浦东每次上限处理
      if (
        this.parkMallCode === 1 &&
        this.parkInfoEntity.remainReduceTime >
          this.parkInfoEntity.maxonetimediscount
      ) {
        this.parkInfoEntity.remainReduceTime =
          this.parkInfoEntity.maxonetimediscount;
      }

      // 沈阳上限处理
      if (this.parkMallCode === 4) {
        this.parkInfoEntity.remainReduceTime =
          this.parkInfoEntity.maxOneDayHour -
          this.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour;
        if (this.couponFee) {
          this.parkInfoEntity.remainReduceTime -=
            this.couponFee / this.parkInfoEntity.needmoney;
        }
      }

      // 上限金额
      this.maxonetimediscountFee =
        this.parkInfoEntity.maxonetimediscount * this.parkInfoEntity.needmoney;
      this.maxonedaydiscountFee =
        (this.parkInfoEntity.maxOneDayHour -
          this.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour) *
          this.parkInfoEntity.needmoney || 0;
      if (this.maxonedaydiscountFee < 0) {
        this.maxonedaydiscountFee = 0;
      }

      // 会员优惠
      if (
        this.parkFee.parkMemberOrderReducesEntityList &&
        this.parkFee.parkMemberOrderReducesEntityList[0]
      ) {
        this.memberDiscount = this.parkFee.parkMemberOrderReducesEntityList[0];
      }

      // 消费减免
      if (
        this.parkFee.parkConsumeReducesEntityList &&
        this.parkFee.parkConsumeReducesEntityList.length
      ) {
        this.reducesDiscount = this.parkFee.parkConsumeReducesEntityList[0];
      } else {
        this.reducesDiscount = { consumerLimit: 0, recuceContent: 0 };
      }

      // 消费减免可拆分上限
      this.maxReduceDiscount = this.reducesDiscount.recuceContent;
      if (this.maxReduceDiscount > this.parkInfoEntity.remainReduceTime) {
        this.maxReduceDiscount = this.parkInfoEntity.remainReduceTime;
      }
      this.reduceHours = this.maxReduceDiscount;

      // 反显处理
      if (this.discountTotal.consumeFee) {
        this.reduceHours =
          this.discountTotal.consumeFee / this.parkInfoEntity.needmoney || 0;
      }
      const checkedList = uni.getStorageSync('checkedList');
      console.log('反显处理', checkedList);
      if (checkedList && checkedList.length) {
        this.checkedList = JSON.parse(checkedList);
      } else {
        this.checkedList = [];
      }
      console.log('反显处理', this.checkedList);
      /* else {
			if (this.memberDiscount.reduceContent > 0) {
				// 浦东上限控制
				if (this.parkMallCode === 1) {
					if (!this.crossMessage()) {
						this.checkedList = ['member'];
						this.maxReduceDiscount = this.parkInfoEntity.remainReduceTime - this.memberDiscount.reduceContent - (this.discountTotal.time || 0);
						this.reduceHours = this.maxReduceDiscount;
					}
				} else {
					this.checkedList = ['member'];
				}
			} else {
				if (this.parkMallCode === 1) {
					if (!this.isCheck('reduces')) {
						this.maxReduceDiscount = this.parkInfoEntity.remainReduceTime - (this.parkDiscountTotal.time || 0);
						this.reduceHours = this.maxReduceDiscount;
					}
				}
			}
		}*/
      // 浦东上限控制
      if (this.parkMallCode === 1 || this.parkMallCode === 4) {
        if (this.discountTotal.memberGradeFee) {
          this.maxReduceDiscount =
            this.parkInfoEntity.remainReduceTime -
            this.discountTotal.memberGradeFee / this.parkInfoEntity.needmoney;
          if (
            this.parkMallCode === 4 &&
            this.maxReduceDiscount > this.reducesDiscount.recuceContent
          ) {
            this.maxReduceDiscount = this.reducesDiscount.recuceContent;
          }
        }
        if (this.crossMessage()) {
          if (this.isCheck('reduces')) {
            this.maxReduceDiscount = this.reduceHours;
          } else {
            this.maxReduceDiscount = 0;
            this.reduceHours = 0;
          }
        } else {
          if (!this.isCheck('reduces')) {
            this.reduceHours = this.maxReduceDiscount;
          }
        }
      }

      // 会员优惠每天只可使用一次
      if (this.parkInfoEntity.memberLevelFlag == 1) {
        this.isMemberDiscountDisabled = true;
        const memberIndex = this.checkedList.indexOf('member');
        if (memberIndex !== -1) {
          this.checkedList.splice(memberIndex, 1);
        }
      }

      // 超限提示
      this.crossMessage();
  },
  // beforeRouteLeave(to, from, next) {
  //   console.log(251251251251251251, to, from,);
  //   // 设置下一个路由的 meta
  //   to.meta.keepAlive = true; // 让 A 不缓存，即刷新
  //   next();
  // },
  data() {
    return {
      parkFee: {}, // 停车规则信息及优惠信息
      parkInfoEntity: {}, // 停车规则信息
      memberDiscount: {}, // 会员优惠
      isMemberDiscountDisabled: false, // 会员等级减免是否可用(当天仅限使用一次)
      isDiscountDisabled: false, // 浦东减免是否超限
      reducesDiscount: {}, // 消费优惠
      checkedList: [], // 已选优惠列表
      firstPark: 0, // 首停减免金额
      member: 0, // 会员优惠金额
      reduces: 0, // 消费减免金额
      reduceHours: 0, // 消费减免拆分时长
      maxReduceDiscount: 0, // 消费减免规则最大优惠
      servicefee: 0, // 应缴金额
      parkDiscountTotal: {}, // 总停车优惠
      discountTotal: {}, // 首停、会员、消费优惠合计
      // groupId: app.globalData.groupId,
      maxonetimediscountFee: 0, // 每次优惠上限金额
      maxonedaydiscountFee: 0, // 每天优惠上限金额
      parkMallCode: 1, // 0静安 1浦东 2杭州 3北京 4沈阳 5深圳
      paperCouponFee: 0, // 纸质优惠金额
      couponFee: 0, // 电子券优惠金额
      active: 'a',
    };
  },
  computed: {
    // 是否显示消费减免
    isShowReduceDiscount() {
      if (
        this.parkInfoEntity.parkMallCode === 0 ||
        this.parkInfoEntity.parkMallCode === 1
      ) {
        return (
          this.parkInfoEntity.consumeReduce &&
          this.reducesDiscount.consumerLimit
        );
      }
      return this.parkInfoEntity.consumeReduce;
    },
    // 首停减免金额
    firstParkDiscountFee() {
      return this.parkInfoEntity.parkHour * this.parkInfoEntity.needmoney;
    },
    // 会员减免金额
    memberDiscountFee() {
      return this.memberDiscount.reduceContent * this.parkInfoEntity.needmoney;
    },
    // 消费减免金额
    reducesDiscountFee() {
      return this.reduceHours * this.parkInfoEntity.needmoney;
    },
    // 浦东有效期内消费提示
    reduceDiscountMessage() {
      return (
        this.parkInfoEntity.expirationDate +
        '日内消费了' +
        this.parkInfoEntity.totalAmont +
        '元，已使用' +
        parseInt(
          this.parkInfoEntity.useConsumeFee / this.parkInfoEntity.needmoney
        ) +
        '小时满减抵扣。'
      );
    },
    // 消费减免(拆分部分)提示文本
    reduceSplitMessage() {
      if (this.parkInfoEntity.isSplit === 0) {
        return `选择${this.reduceHours}小时，`;
      }
      return '';
    },
    // 当日消费提示
    todayReduceDiscountMessage() {
      if (
        this.parkInfoEntity.remainReduceTime ||
        this.parkInfoEntity.maxOneDayHour -
          this.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour
      ) {
        if (this.reducesDiscount.consumerLimit) {
          if (this.parkMallCode === 0) {
            return `今日可减免${this.reducesDiscount.recuceContent}小时`;
          }
          // 沈阳提示信息
          if (this.parkMallCode === 4) {
            return `未达上限时今日可减免${this.reducesDiscount.recuceContent}小时`;
          }
          if (
            this.reducesDiscount.recuceContent >
            this.parkInfoEntity.remainReduceTime
          ) {
            return `消费已满${this.reducesDiscount.consumerLimit}元，减免${this.reducesDiscount.recuceContent}小时。超出优惠上限，可减免${this.maxReduceDiscount}小时，${this.reduceSplitMessage}可优惠${this.reducesDiscountFee}元`;
          }
          return `消费已满${this.reducesDiscount.consumerLimit}元，减免${this.reducesDiscount.recuceContent}小时。${this.reduceSplitMessage}可优惠${this.reducesDiscountFee}元`;
        }
        return '消费金额未达到最低优惠要求';
      }
      if (this.parkInfoEntity.dateReduceUpperliLimit) {
        return `您今日消费减免已达${this.parkInfoEntity.dateReduceUpperliLimit}小时上限`;
      }
    },
    // 选择优惠数量
    checkedTotal() {
      return this.checkedList.length;
    },
    // 首停、会员、消费优惠总计金额
    totalFee() {
      this.first = 0;
      this.member = 0;
      this.reduces = 0;
      let total = 0;
      console.log(360, this.checkedList);
      this.checkedList.forEach((item) => {
        this[item] = this[item + 'DiscountFee'];
        total += this[item + 'DiscountFee'];
      });
      console.log(364, total);
      return total;
    },
    // 首停、会员、消费优惠总计时长
    totalTime() {
      return this.totalFee / this.parkInfoEntity.needmoney;
    },
    // 实际支付金额
    actualFee() {
      console.log('实际支付金额', this.servicefee, this.discountFee);
      const fee = this.servicefee - this.discountFee;
      console.log('实际支付金额', fee);
      return fee > 0 ? fee : 0;
    },
    // 已优惠金额
    discountFee() {
      let total = this.parkDiscountTotal.feeCopy + this.totalFee;
      console.log(380, this.parkDiscountTotal.feeCopy, this.totalFee);
      // 超出上限按上限计算
      if (this.parkMallCode === 1) {
        if (total - this.paperCouponFee > this.maxonetimediscountFee) {
          total = this.maxonetimediscountFee + this.paperCouponFee;
        }
      }
      if (this.parkMallCode === 4) {
        if (
          total - this.paperCouponFee - this.parkDiscountTotal.bonusfee >
          this.maxonedaydiscountFee
        ) {
          total =
            this.maxonedaydiscountFee +
            this.parkDiscountTotal.bonusfee +
            this.paperCouponFee;
        }
      }
      return total;
    },
    ...mapState({
      custTypeId: (state) => state.custTypeId,
      groupId: (state) => state.groupId,
    }),
  },
  methods: {
    // 选择回调
    checkboxChange(e) {
      console.log(this.checkedList);
      // console.log('checkboxChange');
      // console.log('paperCouponFee------>', this.paperCouponFee);
      // 浦东上限控制
      if (this.parkMallCode === 1) {
        if (this.isCheck('member')) {
          this.maxReduceDiscount =
            this.parkInfoEntity.remainReduceTime -
            (this.discountFee - this.paperCouponFee - this.reduces) /
              this.parkInfoEntity.needmoney;
          this.reduceHours = this.maxReduceDiscount;
        } else {
          if (this.isCheck('reduces')) {
            this.maxReduceDiscount =
              this.parkInfoEntity.remainReduceTime -
              (this.discountFee - this.paperCouponFee - this.reduces) /
                this.parkInfoEntity.needmoney;
          } else {
            this.maxReduceDiscount =
              this.parkInfoEntity.remainReduceTime -
              (this.discountFee - this.paperCouponFee) /
                this.parkInfoEntity.needmoney;
            this.reduceHours = this.maxReduceDiscount;
          }
        }
      }
      // 沈阳上限控制
      if (this.parkMallCode === 4) {
        if (this.isCheck('member')) {
          this.maxReduceDiscount =
            this.parkInfoEntity.remainReduceTime -
            this.memberDiscount.reduceContent;
          if (this.maxReduceDiscount < 0) {
            this.maxReduceDiscount = 0;
          }
          if (this.maxReduceDiscount > this.reducesDiscount.recuceContent) {
            this.maxReduceDiscount = this.reducesDiscount.recuceContent;
          }
          this.reduceHours = this.maxReduceDiscount;
        } else {
          this.maxReduceDiscount = this.parkInfoEntity.remainReduceTime;
          if (this.maxReduceDiscount > this.reducesDiscount.recuceContent) {
            this.maxReduceDiscount = this.reducesDiscount.recuceContent;
          }
          this.reduceHours = this.maxReduceDiscount;
        }
      }
      this.crossMessage();
    },

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

    // 计数器回调
    reducesChange() {
      console.log('reducesChange');
      if (this.isCheck('reduces')) {
        this.crossMessage();
      }
    },

    // 超限提示
    crossMessage() {
      let totalFee = this.parkDiscountTotal.feeCopy;
      const remainReduceFee =
        this.parkInfoEntity.remainReduceTime * this.parkInfoEntity.needmoney;
      // if (this.discountTotal && this.discountTotal.fee !== 0) {
      // 	totalFee += this.totalFee - this.discountTotal.fee;
      // } else {
      // 	totalFee += this.totalFee;
      // }
      totalFee += this.totalFee;
      // 浦东每次总优惠上限
      this.isDiscountDisabled = false;
      if (
        this.parkMallCode === 1 &&
        totalFee - this.paperCouponFee >= this.maxonetimediscountFee
      ) {
        this.isDiscountDisabled = true;
        return uni.showToast({
          title: `超出抵扣上限,每次最高可抵扣${this.parkInfoEntity.maxonetimediscount}小时`,
          icon: 'none',
        });
      }
      // 沈阳超限处理(maxonedaydiscountFee 会员、消费、电子券减免)
      if (
        this.parkMallCode === 4 &&
        totalFee - this.paperCouponFee - this.parkDiscountTotal.bonusfee >=
          this.maxonedaydiscountFee
      ) {
        this.isDiscountDisabled = true;
        return uni.showToast({
          title: `(会员等级、消费、电子券)每日最高可抵扣${this.parkInfoEntity.maxOneDayHour}小时`,
          icon: 'none',
        });
      }
      // 消费每天优惠上限(非浦东、沈阳)
      if (
        this.parkMallCode !== 1 &&
        this.parkMallCode !== 4 &&
        this.reduces > remainReduceFee
      ) {
        this.reduces = remainReduceFee;
        return uni.showToast({
          title: `超出抵扣上限,消费减免每天最高可抵扣${this.parkInfoEntity.dateReduceUpperliLimit}小时,可使用${this.parkInfoEntity.remainReduceTime}小时`,
          icon: 'none',
        });
      }
    },

    // 确认
    confirm() {
      // 计算单价
      const cost =
        this.reducesDiscount.consumerLimit / this.reducesDiscount.recuceContent;
      // 算出消费减免在哪个档
      let useConsumeFee = 0;
      if (this.reduces) {
        if (this.parkInfoEntity.isSplit === 0) {
          useConsumeFee = this.reduceHours * cost;
        } else {
          useConsumeFee = this.reducesDiscount.consumerLimit;
        }
      }

      uni.setStorageSync('checkedList', this.checkedList);
      uni.setStorageSync('checkedTotal', this.checkedTotal);
      uni.setStorageSync('discountTotal', {
        firstParkFee: this.firstPark,
        memberGradeFee: this.member,
        consumeFee: this.reduces,
        useConsumeFee: useConsumeFee,
        time: this.totalTime,
        fee: this.totalFee,
      });
      this.$nextTick(() => {
        this.$router.back();
      });
    },
  },
};
</script>

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

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

.container {
  background-color: #fafbff;
  width: calc(100% - 100px);
  margin: 30px;
  padding-left: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  line-height: 70px;
  position: relative;
  height: inherit;
  border: 1px solid #d8dae0;

  .item {
    width: 570px;
    padding: 20px 0;

    .title {
      font-size: 34px;
    }

    .content {
      font-size: 28px;
      color: #989898;
    }
  }

  .member-discount-info {
    font-size: 20px;
    position: absolute;
    right: 12px;
    bottom: 0;
    color: #989898;
  }

  .page_img {
    width: 49px;
    height: 49px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 50px;
      height: 50px;
      margin-left: -1px;
    }
  }
}

.flewx {
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  font-size: 30px;
  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: 20px;

  .flewx-content {
    position: absolute;
    left: 16px;
  }

  .flewx_index3 {
    width: 150px;
    height: 70px;
    border-radius: 45px;
    text-align: center;
    font-size: 30px;
    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;
  }

  .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>
