<template>
  <el-dialog :title="title" visible :before-close="closeDialog" width="1200px">
    <div v-if="detail" id="laay">
      <!--startprint-->
      <div id="myproa">
        <p style="padding-bottom:10px;font-size:16px;">
          {{ $t('printWarehouseReceipt.orderNo') }}：{{ detail.orderNo }}
          &nbsp;&nbsp;&nbsp;{{ $t('printWarehouseReceipt.phone') }}：{{ detail.name }} {{ detail.phone }}
          &nbsp;&nbsp;&nbsp;{{ $t('printWarehouseReceipt.address') }}：{{ objective.titleZh }}
          <img :src="qrcode" style="margin-left: 10px;width:17mm;vertical-align:middle">
        </p>
        <div id="table1" width="205mm">
          <table id="rclist" class="ptab" cellspacing="0" cellpadding="0" style="border:1px dashed #ccc;width:100%;">
            <tr>
              <th v-if="!preview" style="text-align:center;width: 50px;">
                <label class="checkbox checkbox-indent">
                  <input v-model="checkAll" type="checkbox" name="" value="">
                </label>
              </th>
              <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.marks') }}</th>
              <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.prodTitle') }}</th>
              <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.cartonsNum') }}</th>
              <th style="text-align:center;padding:0 0px;width:150px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.boxGauge') }}</th>
              <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.volume') }}</th>
              <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.weight') }}</th>
              <th style="text-align:center;padding:0 0px;width:110px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{ $t('printWarehouseReceipt.inTime') }}</th>
            </tr>
            <template v-for="(item, index) in items">
              <tr v-if="!preview || item.checked" :key="index">
                <td v-if="!preview" style="text-align:center;width: 50px;">
                  <label class="checkbox checkbox-indent">
                    <input v-model="item.checked" type="checkbox" class="alla" name="ids[]">
                  </label>
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ detail.marks }}
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ item.prodTitleZh }}<br>{{ item.prodTitleEn }}
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ item.cartonsNum }}
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ item.boxGauge }}
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ item.volume }}
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ item.weight }}
                </td>
                <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                  {{ item.inTime|parseTime }}
                </td>
              </tr>
            </template>
          </table>
        </div>
        <!--edit by liuyc 20210121 结尾增加文字-->
        <p>
          {{ $t('printWarehouseReceipt.text1') }}
          {{ $t('printWarehouseReceipt.text2') }}
        </p>
      </div>
      <p class="subs" style="text-align:center">
        <el-button v-if="!preview" type="primary" @click="preview=true">{{ $t('printWarehouseReceipt.print') }}</el-button>
        <el-button v-if="preview" type="primary" @click="print">{{ $t('printWarehouseReceipt.comprint') }}</el-button>
      </p>
    </div>
  </el-dialog>
</template>
<script>
import { parseTime } from '@/utils/ruoyi'
import lodop from '@/utils/lodop'
import { getOrderWarehouseIn, getOrderDetail } from '@/api/order'
import qrcode from 'qrcode'
export default {
  filters: { parseTime },
  components: { },
  props: {
    orderId: [String, Number]
  },
  data() {
    return {
      show: false,
      detail: null,
      list: [],
      qrcode: null,
      preview: false,
      checkAll: false
    }
  },
  computed: {
    title() {
      let t = this.$t('printWarehouseReceipt.printNo')
      if (this.detail) {
        t += '-' + this.detail.orderNo
      }
      return t
    },
    objective() {
      if (this.detail && this.detail.orderObjectiveVO && this.detail.orderObjectiveVO.objective) {
        return JSON.parse(this.detail.orderObjectiveVO.objective)
      }
      return {}
    },
    items() {
      const arr = []
      this.list.forEach(item => {
        item.orderWarehouseInBackItemDoList.forEach(witem => {
          arr.push({
            marks: this.detail.remarks,
            prodTitleEn: item.prodTitleEn,
            prodTitleZh: item.prodTitleZh,
            cartonsNum: witem.cartonsNum,
            boxGauge: witem.boxGauge,
            volume: witem.volume,
            weight: witem.weight,
            inTime: witem.inTime
          })
        })
      })
      return arr
    }
  },
  watch: {
    checkAll(val) {
      this.items.forEach(item => {
        this.$set(item, 'checked', val)
      })
    }
  },
  created() {
    this.show = true
    this.loadData()
  },
  methods: {
    loadData() {
      getOrderDetail(this.orderId).then(res => {
        this.detail = res.data
        qrcode.toDataURL(this.detail.orderNo, (err, url) => {
          this.qrcode = url
        })
      })
      getOrderWarehouseIn(this.orderId).then(res => {
        this.list = res.data
      })
    },
    closeDialog() {
      this.show = false
      this.$emit('close')
    },
    print() {
      this.$nextTick(() => {
        lodop().then(LODOP => {
          LODOP.PRINT_INIT(this.title)
          LODOP.SET_PRINT_PAGESIZE(0, 2100, 1800, 'A4')
          LODOP.ADD_PRINT_HTM('2%', '2%', '96%', '96%', document.getElementById('myproa').innerHTML)
          LODOP.PREVIEW()

          // LODOP.PREVIEW(); // 预览
          /* LODOP.PRINTA(); // 选择打印机
                    // 直接打印 */
        }).catch(err => {
          console.error('lodop异常', err)
          alert(this.$t('printWarehouseReceipt.lodop'))
        })
      })
    }
  }
}
</script>
<style scoped>
.ptab th{border:1px solid #333;text-align: center;font-size: 14px;border:1px dashed #ccc;}
.ptab td{border:1px solid #333;padding:0px 5px;font-size: 14px;border:1px dashed #ccc;word-wrap:break-word}
.ptab td input[type='text']{width:60%;}
.ptab td a{color:#4e9cdd;font-weight:600;}
#laay{width:98%;margin:0 auto;margin-top: 30px;}
#laay table{width:100%;margin:0 auto;}
#laay table tr{min-height:30px;}
#laay table tr th{font-size: 16px;text-align: right;vertical-align: top;padding: 15px 0px;width:120px;}
#laay table tr th span{color:red;padding:0px 0px 0px 5px;}
#laay table tr td{font-size: 16px;text-align: left;padding:10px 10px; position: relative;}
#laay table tr td #xlss{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlss p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td #xlssa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlssa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td #xlssaa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlssaa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td input[type='text']{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:60%;}
#laay table tr td textarea{height:50px;border:1px solid #ddd;padding: 10px 15px;font-size: 16px;width:60%;}
#laay table tr td input[type='radio']{height:30px;float:left;cursor: pointer;}
#laay table tr td .span{float:left;line-height: 30px;}
#laay table tr td .p{border:1px solid #ddd;font-size:16px;width:60%;padding: 0 16px;line-height:30px;cursor: pointer;}
#laay table tr td select{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:67%;}
#laay table tr td div p{padding: 5px 0px;line-height: 40px;}
#laay table tr td .dels{padding: 1px 8px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;}
#laay table tr td .adds{padding: 1px 5px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;}
.checkbox{text-align: center;}
.checkbox input{text-decoration: none;padding:10px 15px;background:#ccc;border-radius: 5px; cursor: pointer;margin-bottom: 15px;font-size: 16px;margin:0 2px;}

</style>
