<template>
  <div class="codeExtract">
    <navbar :name="name"/>
    <!--    提取码打印-->
    <div class="box flex-center">
      <div class="main">
        <div class="tit">取件码提取打印</div>
        <div class="flex-center">
          <input v-model="qjmData" class="myInput" maxlength="6" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入取件码"
                 type="number">
        </div>
        <div class="btn flex-center" @click="open()">提取打印</div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在左边的取件码输入框中输入需要打印订单的取件码，然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效，如无法提取打印时，请核对改取件码是否已经使用过并已失效。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/nav'
import {orderSubmitPrintingTask} from "@/api/resultApi";
import alert from "@/utils/alert";
export default {
  name: 'codeExtract',
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: '取件码打印',
      name: '取件码打印',
      qjmData: '',
    }
  },
  methods: {
    open() {
      let _this = this
      let data = {
        deviceCode: _this.cite.code,
        pickupCode: _this.qjmData
      }
      orderSubmitPrintingTask(data).then(res => {
        if (res===true) {
          // _this.$router.push({
          //   name: 'complete',
          //   params: {
          //     name: _this.name
          //   }
          // })
        }
      }).catch(error => {
        alert(error, this)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'STHeiti'; //自定义字体名字
  src: url('../assets/typeface/STHeiti.ttf') format('truetype'); //定义好文件的相对地址
}

@font-face {
  font-family: 'OCR'; //自定义字体名字
  src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址
}

.codeExtract {
  .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;
    font-size: 2.25rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;

    .main {
      width: 32.6875rem;
      margin-right: 18.75rem;

      .myInput {
        width: 100%;
        padding: 0 1.5rem;
        height: 5.625rem;
        font-size: 1.875rem;
        margin: 3.75rem 0;
        border-radius: 1.25rem;
        border: 0.0625rem solid #C9C7C0;
      }

      /* 仅隐藏特定输入框旁的上下箭头 */

      .myInput::-webkit-inner-spin-button,
      .myInput::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      .myInput {
        -moz-appearance: textfield;
      }
    }

    .tip {
      width: 40rem;

      .title {
        font-size: 2.88rem;
        font-weight: bold;
        color: #d41212;
        line-height: 4.06rem;
      }

      .content {
        margin: 3rem auto;
        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;
    }
  }
}
</style>