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

    <image :src="icon"></image>
    <view style="font-weight: bold; font-size: 32rpx">[支付成功]</view>
    <view style="font-size: 30rpx; color: #888888; margin-top: 10rpx"
      >{{ carno | formatCarno }}停车费支付成功</view
    >
    <view style="font-size: 30rpx; color: #888888; margin-top: 10rpx"
      >请在<text style="color: red">{{ outParkCharging }}分钟</text>内离场</view
    >
    <view
      :class="{
        page_button: true,
        blue_page_button: custTypeId === 1,
        green_page_button: custTypeId === 2,
      }"
      @click="page_button"
      >查看缴费记录</view
    >
    <view
      :class="{
        page_button1: true,
        blue_page_button1: custTypeId === 1,
        green_page_button1: custTypeId === 2,
      }"
      @click="page_button1"
      >返回首页</view
    >
  </scroll-view>
</template>

<script>
import payIcon from './static/images/hint.png';
import { mapState } from 'vuex';
export default {
  onLoad(params) {
    const parkInfo = JSON.parse(uni.getStorageSync('parkinfo'));
    const actualFee = uni.getStorageSync('actualFee');
    const bonus = uni.getStorageSync('bonus');
    this.parkingTrack = new this.$trackFactory('parking_pay_order', {});
    this.parkingTrack.track(1);
    this.parkingTrack.track(200, {
      order_id: parkInfo.orderno,
      plate_type: 1,
      plate_num: parkInfo.carno,
      area: parkInfo.parkname,
      parking_duration: parkInfo.servicehour * 3600,
      start_time: parkInfo.createDate,
      total_amount: (parkInfo.servicefee / 100).toFixed(2),
      pay_amount: actualFee,
      // total_point: this.parkInfo.parkname,
      pay_point: bonus,
      coupon_type: parkInfo.paykind || '',
      coupon_id: parkInfo.couponcode || '',
      // coupon_name: this.parkInfo.parkname,
      coupon_value: parkInfo.bonusfee || 0,
      pay_type: parkInfo.paytype || '',
      pay_time: parkInfo.createDate || '',
    });
    this.carno = params.carno;
    if (parkInfo && parkInfo.outParkCharging) {
      this.outParkCharging = parkInfo.outParkCharging;
    }
  },
  data() {
    return {
      parkingTrack: null,
      carno: '',
      outParkCharging: 15,
      blueIcon: this.$picUrl + '/images/icon-success-blue.png',
      greenIcon: this.$picUrl + '/images/icon-success-green.png',
    };
  },
  computed: {
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
    icon() {
      return this.custTypeId === 0
        ? payIcon
        : this.custTypeId === 1
        ? this.blueIcon
        : this.greenIcon;
    },
  },
  methods: {
    page_button() {
      uni.redirectTo({
        url: './parkingFeeList',
      });
    },
    page_button1() {
      uni.redirectTo({
        url: '/pages/automatic/automaticIndex',
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
  text-align: center;
  image {
    width: 160rpx;
    height: 160rpx;
    margin-top: 250rpx;
  }
}
.page_button {
  width: 86%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  margin-top: 40rpx;
  margin-left: 7%;
  font-size: 30rpx;
  color: #fff;
  background-image: linear-gradient(to right, #7e4fa1, #433c7f);
}
.blue_page_button {
  .color-background-color('blue');
}
.green_page_button {
  .color-background-color('green');
}
.page_button1 {
  width: 86%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  margin-top: 40rpx;
  margin-left: 7%;
  font-size: 30rpx;
  color: #7e4fa1;
  border: 1rpx solid #7e4fa1;
}
.style-color(@value) {
  @color: 'color-@{value}';
  color: @@color;
  border-color: @@color;
}
.blue_page_button1 {
  .style-color('blue');
}
.green_page_button1 {
  .style-color('green');
}
</style>
