<template>
  <!--  操作指南-->
  <div class="operationGuide">
    <navbar :name="name" />
    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
      <div class="picture" v-show="name == 'U盘打印'">
        <img class="icon" src="../assets/typeUp.png" />
        <div class="flex-between name">
          <div>U盘</div>
          <div>USB接口</div>
        </div>
      </div>
      <div class="picture" v-show="name == '扫描打印'">
        <img src="../assets/typeSMFY.png" :class="[{ 'vertical-img-margin': isVertical }]" />
      </div>
      <div class="picture" v-show="name == '身份证打印'">
        <img src="../assets/typeSFZ.png" :class="[{ 'vertical-img-margin': isVertical }]" />
      </div>
      <div :class="['tip', { 'vertical-bottom-btn': isVertical }]">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('selectFile', name)">{{ btnName }}</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/IdCardReaderGuide.mp3" autoplay />
    </audio>
  </div>
</template>

<script>
import navbar from '@/components/nav'
export default {
  name: 'operationGuide',
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交',
      name: this.cite.modeName,
      content: '',
      btnName: '',
      isVertical: false
    }
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    play(addr) {
      console.log(addr)
      let music = new Audio()
      music = addr
      this.$refs.audio.src = music
      this.$refs.audio.play()
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    let name = this.cite.modeName
    if (name == 'U盘打印') {
      this.content = '如图所示，请先将存放打印资料的U盘插入打印终端机器上标记有"USB"字样的接口中，确认正确插入后，请按下面的“选取文件”按钮开始选取需要打印的资料。'
      this.btnName = '选取文件'
    } else if (name == '扫描打印') {
      this.content =
        '如左图所示，请先把需要扫码的资料页面展开，将需要的版面朝上放置在机器的“扫描复印”口中，并保持页面纸张靠格口右上角紧贴放好，这时您可以在实时预览小窗中查看并确认是否是自己需要的版面。确认无误后，请按下面的“开始扫描”按钮开始资料的扫描。'
      this.btnName = '开始扫描'
    } else if (name == '身份证打印') {
      this.content = '身份证件信息已读取成功。请您核对个人信息确认无误后，按“信息无读，继续提按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。'
      this.btnName = '开始读卡'

      // this.$refs.audio.play()
      // this.speackFont('您好，请先将身份证水平放置在机器的“身份证”读卡窗口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。')
    }
  }
}
</script>

<style scoped lang="less">
.operationGuide {
  .box {
    width: 114.06rem;
    height: 42.13rem;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    margin: 0 auto;
    .picture {
      margin-left: 4.75rem;
      img {
        width: 29.06rem;
        margin-left: 11.81rem;
      }
      .icon {
        margin-left: 0;
        width: 56rem;
        margin-bottom: 2.69rem;
      }
      .name {
        font-size: 2.13rem;
        font-weight: bold;
        color: #323232;
        line-height: 3rem;
        div {
          width: 30%;
          text-align: center;
        }
      }
    }
    .tip {
      margin-right: 7.81rem;
      width: 40rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      .title {
        font-size: 2.88rem;
        font-weight: bold;
        color: #d41212;
        line-height: 4.06rem;
      }
      .content {
        margin: 3rem auto 3.69rem;
        text-align: center;
      }
      .btn {
        width: 100%;
        height: 5.5rem;
        background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
        border-radius: 1.25rem;
        font-size: 1.88rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 2.63rem;
        cursor: pointer;
      }
    }
  }
}
.vertical-width-direction {
  width: 95% !important;
  flex-direction: column;
  height: 78rem !important;
  padding-bottom: 10rem;
  padding-top: 8rem;
}
.vertical-bottom-btn {
  margin-right: 0 !important;
}
.vertical-img-margin {
  margin-left: 0 !important;
}
</style>