<template>
  <scroll-view scroll-y="true" class="scroll-Y">
    <img :src="greenIcon" style="margin: 30px auto; display: block" />
    <div style="font-weight: bold; color: #333; font-size: 34px">
      [支付成功]
    </div>
    <div style="font-size: 34px; color: #999; margin-top: 10px">
      {{ carno | formatCarno }}停车费支付成功
    </div>
    <div style="font-size: 34px; color: #999; margin-top: 10px">
      请在<span style="color: #064c8a">{{ outParkCharging }}分钟</span>内离场
    </div>
    <div
      :class="{
        page_button: true,
        blue_page_button: custTypeId === 1,
        green_page_button: custTypeId === 2,
      }"
      @click="page_button"
    >
      查看缴费记录
    </div>
    <div
      :class="{
        page_button1: true,
        blue_page_button1: custTypeId === 1,
        green_page_button1: custTypeId === 2,
      }"
      @click="page_button1"
    >
      返回首页
    </div>
  </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'));
    this.carno = params.carno;
    if (parkInfo && parkInfo.outParkCharging) {
      this.outParkCharging = parkInfo.outParkCharging;
    }
  },
  data() {
    return {
      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;
    },
  },
  mounted() {
    setTimeout(() => {
      uni.setNavigationBarTitle({
        title: '提示',
      });
    }, 300);
  },
  methods: {
    page_button() {
      this.$router.replace({
        path: 'parkingFeeList',
      });
    },
    page_button1() {
      this.$router.replace({
        path: 'home',
      });
    },
  },
};
</script>

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