<template>
  <!--  选取资料-->
  <div class="selectFile">
    <navbar :name="name"/>
<!--    U盘打印-->
    <div class="box flex-center" v-show="name=='U盘打印'">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。</div>
      </div>
      <div class="file">
        <div class="main"></div>
        <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div>
      </div>
    </div>
<!--    扫描复印-->
    <div class="box flex-center" v-show="name=='扫描复印'">
      <div class="file2">
        <div class="title">已完成扫描的版面</div>
        <div class="main"></div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
          按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。</div>
        <div class="flex-between but">
          <div class="btn flex-center">继续扫描</div>
          <div class="btn flex-center" @click="skip('transcoding',name)">完成扫描</div>
        </div>
      </div>
    </div>
<!--    身份证打印-->
    <div class="box flex-center" v-show="name=='身份证打印'">
      <div class="file2 file3">
        <div class="title">请核对您的信息</div>
        <div class="main"></div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。</div>
        <div class="btn flex-center" @click="skip('transcoding',name)">信息无误，继续</div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/nav'

export default {
  name: "selectFile",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
  mounted() {

  }
}
</script>

<style scoped lang="less">
.selectFile {
  .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;
    .tip {
      //margin-right: 15.31rem;
      width: 37rem;
      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 59px;
        text-align: center;
      }
    }
    .file {
      margin-left: 15.31rem;
      width: 32.69rem;
      .main {
        width: 31.63rem;
        height: 28.56rem;
        background: #FFFFFF;
        border: 0.06rem solid #707070;
        margin: 0 auto 2.81rem;
      }
    }
    .tip2 {
      width: 52rem;
      .but {
        .btn {
          width: 24.44rem;
        }
      }
    }
    .file2 {
      margin-right: 9.69rem;
      .title {
        font-size: 2.13rem;
        font-weight: bold;
        color: #323232;
        line-height: 3rem;
        text-align: left;
      }
      .main {
        width: 39.81rem;
        height: 31.31rem;
        background: #EEEEEE;
        margin: 1.38rem auto 0;
      }
    }
    .file3 {
      margin-right: 28.13rem;
      .main {
        width: 20.75rem;
        height: 28.88rem;
        border: 0.06rem solid #707070;
        margin: 1.06rem 0 0 13.38rem;
      }
    }
    .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;
    }
  }
}
</style>