<template>
  <div :class="[theme, 'bg']">
    <!-- 领取临牌：成功 -->
    <div class="success-box" v-if="type === 'success'">
      <img class="icon" :src="require(`./static/images/unlicensed/success.png`)" />
      <div class="status-title">临牌领取成功</div>
      <div class="status-info">若未正常抬杠，请关闭当前页面重新扫码</div>
      <div class="status-info">或联系车场管理人员处理</div>
      <div class="card-box">
        <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
        <div class="car-number">
          <div class="number">{{ vehicleNo | formatCarno}}</div>
          <div class="tips">车辆类型：无牌车辆</div>
        </div>
      </div>
      <k-button title="进入首页" disabledColor="#D1D2D9" @click="goHome" />
    </div>
    <!-- 领取临牌：失败 -->
    <div class="fail-box" v-if="type === 'fail'">
      <img class="icon" :src="require(`./static/images/unlicensed/fail.png`)" />
      <div class="status-title">临牌领取失败</div>
      <div class="status-info">请关闭当前页面重新扫码</div>
      <div class="status-info">或联系车场管理人员处理</div>
      <div class="card-box">
        <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
        <div class="car-number">
          <div class="number">临K ？？？</div>
          <div class="tips">车辆类型：无牌车辆</div>
        </div>
      </div>
      <k-button disabledColor="#D1D2D9" @click="scanCarCode">
        <template v-slot:left>
          <img class="unlicensed-scan" :src="`${require(`./static/images/unlicensed-scan.png`)}`" />
        </template>
        重新扫码
      </k-button>
    </div>
    <!-- 支付成功 -->
    <div class="pay-box" v-if="type === 'pay'">
      <img class="pay-log" :src="require(`./static/images/unlicensed/pay.svg`)" />
      <span class="info">您已缴费成功，欢迎下次光临</span>
    </div>
  </div>
</template>

<script>
import uni from '@/utils/uniHooks';
import { initWxJsSdkConfig } from '@/utils/login';
import { getPlatform } from '@/utils/index';
export default {
  name: 'parkingFeeMsg',
  data() {
    return {
      theme: 'theme-mall',
      type: '',
      vehicleNo: '',
    };
  },
  async created() {
    setTimeout(() => {
      uni.setNavigationBarTitle({
        title: '停车缴费提示',
      });
    }, 300);
    const platform = getPlatform();
    if (platform === 'micromessenger') {
      await initWxJsSdkConfig(['checkJsApi', 'scanQRCode']);
    }
    console.log(this.$route.query);
    if (this.$route.query?.type) {
      this.type = this.$route.query?.type;
    }
    if (this.type === 'success') {
      this.vehicleNo = this.$route.query?.vehicleNo;
    }
  },
  mounted() {},
  methods: {
    // 无牌车闸机扫码
    scanCarCode() {
      const runScanFn = (res) => {
        if (res.scanType == 'QR_CODE' && res.scanType) {
          console.log(res.result);
          // 获取二维码参数之后，模拟提取参数
          const url = res.result;
          if (url.indexOf('auth/') === -1) {
            // 单纯的code
            console.log('提取到的参数', res.result);
            // this.getPaperCouponInfo(res.result);
          } else {
            // 从url中提取参数
            const start = url.indexOf('auth/');
            const end = url.indexOf('?');
            const params = url.slice(start, end).split('/');
            if (params && params.length) {
              const couponCode = params[1];
              console.log('提取到的参数', couponCode);
              // this.getPaperCouponInfo(couponCode);
            }
          }
        }
      };
      // 微信小程序
      const platform = getPlatform();
      if (platform === 'miniprogram') {
        window.toWXSendMsg({
          type: 'scanQRCode',
        });
        window.subscribe('scanQRCodeOver', (options) => {
          console.log('微信扫码结束之后的返回参数', options);
          runScanFn(options);
        });
      } else {
        this.$wx.scanQRCode({
          desc: 'scanQRCode desc',
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          // scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            console.log('H5页面扫码获取到的参数——成功', res);
            runScanFn(res);
            // this.formMsg.deviceCode = res.resultStr;
          },
          error: (res) => {
            console.log('H5页面扫码获取到的参数——失败', res);
            // console.log(242, res);
          },
        });
      }
    },
    goHome() {
      this.$router.replace({
        path: 'home',
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background-color: #fbfcff;
}
.pay-box {
  text-align: center;
  margin-top: 84px;
  .pay-log {
    width: 523px;
    display: block;
    margin: 0 auto;
  }
  .info {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 39px;
    text-align: center;
    color: #919baa;
  }
}

.success-box,
.fail-box {
  margin-top: 123px;
  text-align: center;
  padding: 0 24px;
  .icon {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 42px;
  }
  .status-title {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 50px;
    color: #333333;
  }
  .status-info {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    color: #999999;
  }
  .card-box {
    height: 230px;
    margin-top: 39px;
    margin-bottom: 52px;
    background: #fbfcff;
    border: 1px solid #d9dbe0;
    border-radius: 4px;
    display: flex;
    // align-items: center;
    // padding-top: 53px;
    // padding-left: 18px;
    // padding-bottom: 34px;

    img {
      width: 288px;
      height: 142px;
      margin-top: 62px;
      display: block;
    }
    .car-number {
      margin-top: 68px;
      .number {
        font-size: 50px;
        line-height: 56px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 23px;
        letter-spacing: 6.5px;
      }
      .tips {
        color: #999999;
      }
    }
  }
  .unlicensed-scan {
    width: 60px;
    height: 60px;
    margin-right: 16px;
  }
}
</style>
