<template>
  <div class="codeExtract">
    <navbar :name="name"/>
    <!--    提取码打印-->
    <div :class="['box', 'flex-center',{ 'screenPortrait': isVertical }]">
      <div class="main">
        <!--        <div class="tit">取件码提取打印</div>-->
        <div class="flex-center">
          <input v-model="qjmData" class="myInput" disabled placeholder="请输入取件码" type="text">
        </div>
        <div class="numjp flex-between">
          <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div>
        </div>
        <div class="btn flex-center" @click="open()">提取打印</div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在左边的取件码输入框中输入需要打印订单的取件码，然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效，如无法提取打印时，请核对改取件码是否已经使用过并已失效。
        </div>
      </div>
    </div>

    <!--    预约文件选择-->
    <div v-if="listSta">
      <div class="curtain" @click="listSta=false"></div>
      <div class="onPopup">
        <div class="list">
          <div v-for="(item,index) in list" class="flex-between li" :key="item" @click="xzwj(index)">
            <div class="flex-start">
              <div v-show="item.sta===true" class="yuanIcon flex-center act"><div></div></div>
              <div v-show="!(item.sta===true)" class="yuanIcon flex-center"></div>
              <div>
                <div class="name ellipsis-1">{{ item.printTaskVoList[0].fileName }}</div>
                <div>{{ item.printTaskVoList.length }}个文件</div>
              </div>
            </div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </div>
        <div class="flex-center btn" @click="printAll()">确认打印</div>
<!--        <div class="flex-center btn" @click="listSta=false">取消</div>-->
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/nav'
import {orderGetReservationPrintOrderByPickupCode, orderSubmitPickupCodePrintingTaskByDevice} 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: '',
      numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'],
      list: [],
      listSta: false,
      isVertical: false
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  methods: {
    onImport(num) {
      let _this = this
      if (num === '清除') {
        _this.qjmData = ''
        return
      } else if (num === '删除') {
        _this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1)
        return
      } else if (_this.qjmData.length > 12) {
        return
      }
      _this.qjmData = _this.qjmData + num
    },
    open() {
      let _this = this
      // let data = {
      //   deviceCode: _this.cite.code,
      //   pickupCode: _this.qjmData
      // }
      if (_this.qjmData.length < 6) {
        this.cite.state = {
          name: '请最少输入6位取件码！',
          sta: true
        }
        return
      }
      _this.printList()
      // orderSubmitPrintingTask(data).then(res => {
      //   if(res.code) {
      //     this.cite.state = {
      //       name: res.msg,
      //       sta: true
      //     }
      //   }
      // }).catch(error => {
      //   alert(error, this)
      // })
    },
    printList() {
      let _this = this
      let data = {
        pickupCode: _this.qjmData
      }
      orderGetReservationPrintOrderByPickupCode(data).then(res => {
        if(res.code) {
          _this.cite.state = {
            name: res.msg,
            sta: true
          }
        }else{
          console.log('printList', res)
          if (res.length < 1) {
            _this.cite.state = {
              name: '该取件码没有打印文件！',
              sta: true
            }
          } else if (res.length === 1) {
            _this.printAll(res[0].code)
          } else {
            res.forEach(item => {
              item.sta= false
            })
            _this.list = res || []
            _this.xzwj(0)
            _this.listSta = true
          }
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    // 打印
    printAll(code) {
      let _this = this
      if(!code) {
        this.list.forEach(item=>{
          if(item.sta) {
            code = item.code
          }
        })
      }
      if(!code) {
        this.cite.state = {
          name: '请选择打印文件！',
          sta: true
        }
        return
      }
        let data = {
        code: code,
        deviceCode: _this.cite.code,
        pickupCode: _this.qjmData
      }
      orderSubmitPickupCodePrintingTaskByDevice(data).then(res => {
        if(res.code) {
          this.cite.state = {
            name: res.msg,
            sta: true
          }
        }else{
          this.listSta = false
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    xzwj(ind) {
      let re = this.list
      re.forEach((item, i) => {
        if (i === ind) {
          item.sta = true
        } else {
          item.sta = false
        }
      })
      this.list = re
    },
  }
}
</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: 1.25rem 0 0;
        border-radius: 1.25rem;
        border: 0.0625rem solid #C9C7C0;
      }
    }

    .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;
    }

    .numjp {
      flex-wrap: wrap;
      width: 25rem;
      font-size: 1.75rem;
      margin: 1.25rem auto 0.625rem;

      .li {
        width: 6.875rem;
        height: 3.125rem;
        margin-bottom: 1.25rem;
        border: 0.0625rem solid #ccc;
        border-radius: 0.625rem;
        cursor: pointer;
      }
    }
  }
  .curtain {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 10;
  }
  .onPopup {
    width: 320px;
    background: #FFFFFF;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -185px;
    padding: 0 25px 30px;
    z-index: 20;
    .list {
      max-height: 300px;
      overflow: auto;
    }
    .li {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      border-bottom: 1px solid #E8E8E8;
      padding: 20px 0 15px;
      text-align: left;
      .name {
        font-size: 18px;
        color: #333333;
        width: 180px;
      }
      .yuanIcon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #C3C3C3;
        margin-right: 10px;
      }
      .act {
        border: 1px solid #7DB575;
        div {
          width: 18px;
          height: 18px;
          background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%);
          border-radius: 50%;
        }
      }
    }
    .btn {
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
      width: 100%;
      height: 48px;
      background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%);
      border-radius: 24px;
      margin-top: 25px;
      cursor: pointer;
    }
  }
  .screenPortrait {
    width: auto;
    margin: 0 3rem;
    height: auto;
    padding: 3rem;
    flex-wrap: wrap;
    .main {
      margin: 8rem 0 10rem;
    }
  }
}
</style>