<template>
  <div style="height: 100vh">
    <div class="header">
      <div style="font-size: 20px;margin: 15px;font-weight: bold; text-shadow:1px 1px 1px #4FC9F2;
  letter-spacing: 2px;">芯片打印</div>
      <Button ghost style="margin: 15px" @click="handlePrint">打印</Button></div>
    <div class="bdy">
     <div v-for="(item,index) in list" :key="index" :class="item.is_choose?'choose_item':'item'" @click="handleClick(index)">
       <div style="margin-bottom:10px">
         <span>派工单号：</span>
         <span>{{item.dispatch_no}}</span>
       </div>
<!--       <div>-->
<!--         <span>派工单号：</span>-->
<!--         <span>{{item.dispatch_no}}</span>-->
<!--       </div>-->
     </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'

export default {
  data () {
    return {
      list: [],
      selectData: []
    }
  },
  mounted () {
    if (this.$route.query.print_list) {
      let text = decodeURIComponent(this.$route.query.print_list)
      // text.shift()
      // text.pop()
      this.list = JSON.parse(text)
      // eslint-disable-next-line no-return-assign
      this.list.forEach(v => v.is_choose = false)
    }
  },
  methods: {
    handleClick (index) {
      this.list[index].is_choose = !this.list[index].is_choose
      this.selectData = this.list.filter(v => v.is_choose)
      this.$forceUpdate()
    },
    handlePrint () {
      if (this.selectData.length === 0) {
        return this.$Message.warning('请选择需要打印的标签')
      }
      let arr = [{ PTK_OpenUSBPort: 255 }, { PTK_ClearBuffer: "" }, { PTK_SetDarkness: 10 }, { PTK_SetPrintSpeed: 4 }, { PTK_SetDirection: "B" }, { PTK_SetLabelHeight: "204,24,0,false" }, { PTK_SetLabelWidth: 800 }]
      this.selectData.forEach(v => {
        let cont = (this.func.stringToHex(v.dispatch_no).length)%4;
        v.chip = this.func.stringToHex(v.dispatch_no)
        for(let i = 0;i<cont;i++){
          v.chip = '0'+ v.chip
        }
        let obj = [{ PTK_DrawText_TrueType: "0,25,45,0,微软雅黑,1,700,0,0,0,派工单号：" }, { PTK_DrawText_TrueType: "150,25,45,0,微软雅黑,1,700,0,0,0,"+v.dispatch_no }, { PTK_RWRFIDLabel: `1,0,0,${v.chip.length / 2},1,${v.chip}` }, { PTK_PrintLabel: "1,1" }]
        arr.push(...obj)
      })
      arr.push({ PTK_CloseUSBPort: "" })
      let _this = this
      let printparams = JSON.stringify(arr)
      $.ajax({
        type: "post",
        url: 'http://127.0.0.1:888/postek/print',
        data: { reqParam: 1, printparams },
        dataType: "json",
        timeout: 5000,
        success: function (result) {
          // _this.getChipDetail();
          if (result.retval == "0") {
            _this.$Message.success("发送成功");
          } else {
            _this.$Message.error("发送失败，返回结果：" + result.msg);
          }
        },
        error: function () {

        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header{
  display: flex;
justify-content: space-between;
align-items: center;
  border-bottom: 1px solid #356070;
}
.bdy{
  height: calc(100% - 5rem);
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
.bdy::-webkit-scrollbar{
  width: 8px;
}
.bdy::-webkit-scrollbar-track{
  background: linear-gradient(to bottom,#f5f5f5, #002359);
}
.bdy::-webkit-scrollbar-thumb{
  background: linear-gradient(to bottom, #a1a1a1, #3b4169);
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
.choose_item{
cursor: pointer;
  border-radius: 20px;
  background: #ffffff;
  color: black;
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 20px 0 20px 2.5%;
  width: 30%;
  height: 80px;
}
.item{
  display: flex;
align-items: center;
  cursor: pointer;
  border: 1px solid #797878;
  color: #797878;
  border-radius: 20px;
  padding: 10px;
  margin: 20px 0 20px 2.5%;
  width: 30%;
  height: 80px;
}
</style>
