<template>
  <div class="page-help">
    <h1>一、什么是VIN码，在什么地方能够找到？</h1>
    <p>
      VIN码即车辆识别码，由17位字符组成。
      <img :src="require('./assets/vin.png')">
      行驶证上可以查到VIN码。
      <img :src="require('./assets/driver-book.png')">
      车身上一般位于汽车风挡玻璃左下角，主驾驶前方；还有副驾车门打开，B柱位置；发动机舱防火墙上。
      <img :src="require('./assets/vin-black.png')">
      <img :src="require('./assets/vin-position.png')">
    </p>
    <h1>二、服务时间</h1>
    <p>从早上8:00到晚上21:30，我们会提供新车车主认证、企业实名认证等服务。超出这个时间范围，系统会自动关闭服务。</p>
    <h1>三、ICCID</h1>
    <p>车主录入本车的VIN，系统默认会自动带出ICCID信息。如果没有带出ICCID，则请联系经销商，获取本车的ICCID信息。</p>
    <h1>四、身份证识别</h1>
    <p>
      请在光线充足的地方，对身份证的正反面拍照，以自动识别身份证信息。
      人像面示例如下：
      <img :src="require('./assets/idcard-demo.png')">
      国徽面示例如下：
      <img :src="require('./assets/idcard-back-demo.png')" >
    </p>
    <h1>五、手机号验证</h1>
    <p>请切记使用车主自身常用的手机号，该手机号未来会用于车辆实名的解绑操作。</p>
    <h1>六、企业实名认证</h1>
    <p>企业实名认证授权书由企业自行出具，并盖章生效。模板可<a @click="handleDownload">点此链接下载</a>。</p>
    <van-overlay :show="loading">
      <van-loading size="40px" vertical>加载中...</van-loading>
    </van-overlay>
  </div>
</template>
<script>
import { queryPotocolCustomerManage } from '@/api/rnr'
import { Toast } from 'vant'

export default {
  name: 'Help',
  data() {
    return {
      loading: false,
      link: ''
    }
  },
  async mounted() {
    // 展示loading框
    this.loading = true
    try {
      const protocal = await queryPotocolCustomerManage()
      // 取出链接
      this.link = protocal.companyAuthorizeWord.fileUrl
    } catch (error) {
      console.error(error)
    }
    // 关闭loading框
    this.loading = false
  },
  methods: {
    /**
     * 下载文件
     */
    handleDownload() {
      // 如果链接不存在
      if (!this.link) {
        return Toast('请补齐协议文件')
      }
      // 如果当前是微信，则使用
      if (window.os.isWx) {
        this.$router.push({ name: 'Download', query: { url: encodeURIComponent(this.link) }})
      } else {
        window.location.href = this.link
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page-help {
  padding: 10px 20px 60px;
  h1 {
    font-size: 32px;
    margin: 32px 0 0;
  }
  p {
    font-size: 28px;
    line-height: 42px;
    img {
      width: 100%;
      height: auto;
      margin: 12px 0;
    }
    a {
      color: #1989fa;
    }
  }
  .van-loading {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
  }
}
</style>
