<template>
  <!--  文件上传转码-->
  <div class="transcoding">
    <navbar :name="name"/>
    <div class="file2" v-if="name=='身份证打印'">
      <div class="li">
        <div class="title flex-center">转码处理中，请稍后</div>
        <div class="progressBar"></div>
      </div>
    </div>
    <div class="file" v-else>
      <div class="li flex-between">
        <div class="flex-start">
          <img src="../assets/demo11.png" alt="">文件文件文件文件
        </div>
        <div class="progressBar"></div>
      </div>
    </div>
    <div class="box flex-between">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('argument',name)">下一步</div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "transcoding",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='身份证打印'?'信息转码处理':'文档列表',
      name: this.$route.params.name,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
  mounted() {
    let name = this.$route.params.name
    if(name=='U盘打印') {
      this.content='当您处理多个文件或者文件体积较大时，有可能受设备所处的网络宽带影响，上传速度可能会略微缓慢，请您耐心等待。全部文件上传完成后，可按“下一步”继续后续操作。'
    }else if(name=='扫描打印') {
      this.content='当您处理多个文件或者文件体积较大时，有可能受设备所处的网络宽带影响，上传速度可能会略微缓慢，请您耐心等待。全部文件上传完成后，可按“下一步”继续后续操作。'
    }else if(name=='身份证打印') {
      this.content='请您耐心等候，信息转码处理完成后，可按“下一步”继续后操作。'
    }
  }
}
</script>

<style scoped lang="less">
.transcoding {
  .file {
    width: 110.81rem;
    height: 17rem;
    margin: 0 auto 2.94rem;
    font-size: 2.13rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;
    overflow-y: auto;
    .li {
      padding: 0 2.56rem 0 2.69rem;
      height: 8.13rem;
      background: #FFFFFF;
      box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14);
      border-radius: 1.63rem;
      margin-bottom: 1.25rem;
      img {
        width: 3.66rem;
        margin-right: 1.63rem;
      }
    }
  }
  .file2 {
    width: 114.06rem;
    height: 18rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14);
    border-radius: 1.63rem;
    margin: 0 auto 1.31rem;
    .title {
      font-size: 3.5rem;
      font-weight: 400;
      color: #D41212;
      line-height: 3.69rem;
      padding: 4.88rem 0 3rem;
    }
    .progressBar {
      margin: 0 auto;
    }
  }
  .progressBar {
    width: 35.75rem;
    height: 3rem;
    background: #FFFFFF;
    border: 0.06rem solid #707070;
  }
  .box {
    width: 114.06rem;
    height: 24.63rem;
    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 {
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3.13rem;
      width: 102.19rem;
      margin: 0 auto;
      .title {
        font-size: 2.88rem;
        font-weight: bold;
        color: #D41212;
        line-height: 4.06rem;
      }
      .content {
        margin: 0.81rem auto 3.81rem;
        text-align: left;
      }
      .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>