<template>
  <view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)">
    <com-empty-view v-if="data.length == 0"></com-empty-view>
    <!-- 只用于展示页面 -->
    <view class="box" style="margin-bottom: 20rpx">
      <view class="top">
        <view class="mb-kw">
          目标库位：<text>{{ data.toLocationCode }}</text>
        </view>
        <view class="mb-text">
          任务编号：<text>{{ data.number }}</text>
        </view>
        <view class="mb-text">
          创建人：<text>{{ data.creator || '' }}</text>
        </view>
        <view class="mb-text">
          创建时间：<text>{{ formatDate(data.createTime) }}</text>
        </view>
      </view>
      <u-table style="margin-top: 20rpx">
        <u-tr>
          <u-th>物品代码</u-th>
          <u-th>物品描述</u-th>
          <u-th>批次</u-th>
          <u-th>包装号</u-th>
          <u-th>包装规格</u-th>
          <u-th>数量</u-th>
          <u-th>计量单位</u-th>
        </u-tr>
        <u-tr v-for="(cur, key) in data.sublist" :key="key">
          <u-td>{{ cur.itemCode }}</u-td>
          <u-td>{{ cur.itemDesc1 }}</u-td>
          <u-td>{{ cur.batch }}</u-td>
          <u-td>{{ cur.packingNumber }}</u-td>
          <u-td>{{ cur.packUnit }}</u-td>
          <u-td>{{ cur.packQty }}</u-td>
          <u-td>{{ cur.uom }}</u-td>
        </u-tr>
      </u-table>
    </view>
    <view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px">
      <button @click="printImage" style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button>
    </view>
  </view>
</template>

<script>
import { getJimuPutawayJobDetail } from '@/api/request2.js'
import { dateFormat } from '@/common/basic.js'
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/pointPutawayJob.html'
// #ifdef APP
const testModule = uni.requireNativePlugin('TestModule')
// #endif

export default {
  name: 'pointPutawayJob',
  data() {
    return {
      data: {
        sublist: []
      },
      newHtmlContent: '', // 打印传入的html
      isLoadFinish: false,
      ids: ''
    }
  },

  methods: {
    // #ifdef APP
    // 打印
    printImage() {
      testModule.doHTMLPrint(this.newHtmlContent)
    },
    // 读取html文件
    readFile(path, callback) {
      plus.io.resolveLocalFileSystemURL(
        path,
        function (entry) {
          entry.file(
            function (file) {
              const reader = new plus.io.FileReader()
              reader.onloadend = function (e) {
                callback(e.target.result)
              }
              reader.readAsText(file)
            },
            function (e) {
              console.log(`读取文件失败：${e.message}`)
            }
          )
        },
        function (e) {
          console.log(`获取图片资源失败：${e.message}`)
        }
      )
    },
    // #endif
    formatDate(val) {
      return dateFormat(val)
    }
  },
  watch: {
    isLoadFinish: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          // 读取html文件将文件中的内容图换成当前页面的数据
        }
      },
      immediate: true
    }
  },

  onLoad(option) {
    if (option.data) {
      this.data = JSON.parse(decodeURIComponent(option.data))
    }
  },
  async onShow() {
    await getJimuPutawayJobDetail({
      masterIds: this.data.ids
    }).then((res) => {
      this.data.sublist = res.data
    })
    // 获取数据
    // this.data = [{
    // 	toLocationCode: 'C13-12-11',
    // 	jobNumber: '555555',
    // 	creator: '就是我',
    // 	createTime: '2019-12-12 05:00:00',
    // 	sublist: [{
    // 		itemNumber: '66',
    // 		itemDes: 'hahah',
    // 		batch: '201450513',
    // 		packingNumber: '201450513',
    // 		packUnit: '201450513',
    // 		packQty: '40',
    // 		uom: '张'
    // 	},{
    // 		itemNumber: '77',
    // 		itemDes: '8888',
    // 		batch: '201450513',
    // 		packingNumber: '201450513',
    // 		packUnit: '201450513',
    // 		packQty: '40',
    // 		uom: '张'
    // 	}]
    // }, {
    // 	toLocationCode: 'C13-12-11',
    // 	jobNumber: '555555',
    // 	creator: '就是我',
    // 	createTime: '2019-12-12 05:00:00',
    // 	sublist: [{
    // 		itemNumber: '66',
    // 		itemDes: 'hahah',
    // 		batch: '201450513',
    // 		packingNumber: '',
    // 		packUnit: '',
    // 		packQty: '',
    // 		uom: ''
    // 	}]
    // }, {
    // 	toLocationCode: 'C13-12-11',
    // 	jobNumber: '555555',
    // 	creator: '就是我',
    // 	createTime: '2019-12-12 05:00:00',
    // 	sublist: [{
    // 		itemNumber: '66',
    // 		itemDes: 'hahah',
    // 		batch: '201450513',
    // 		packingNumber: '',
    // 		packUnit: '',
    // 		packQty: '',
    // 		uom: ''
    // 	}]
    // }]
    this.$nextTick(async () => {
      let str = ''
      this.readFile(htmlFileUrl, (htmlContent) => {
        this.newHtmlContent = htmlContent
        // this.data.forEach(item => {
        str += `<div class="box" style="page-break-before:always;"><br />
							<div class="top">
								<div class="mb-kw">
									目标库位：<span>${this.data.toLocationCode}</span>
								</div>
								<div class="mb-text">
									任务编号：<span>${this.data.number}</span>
								</div>
								<div class="mb-text">
									创建人：<span>${this.data.creator}</span>
								</div>
								<div class="mb-text">
																	创建时间：<span>${this.formatDate(this.data.createTime)}</span>
																</div>
							</div>
							<table style="margin-top: 20rpx;" style='border-collapse: collapse;'>
								<tr>
									<th>物品代码</th>
									<th>物品描述</th>
									<th>批次</th>
									<th>包装号</th>
									<th>包装规格</th>
									<th>数量</th>
									<th>计量单位</th>
								<tr>
								tableTrTd
							</table>
							<div>
							`
        let str1 = ''
        this.data.sublist.forEach((cur, key) => {
          str1 += `
								<tr>
									<td>${cur.itemCode}</td>
									<td>${cur.itemDesc1}</td>
									<td>${cur.batch}</td>
									<td>${cur.packingNumber}</td>
									<td>${cur.packUnit}</td>
									<td>${cur.packQty}</td>
									<td>${cur.uom}</td>
								</tr>
							`
        })
        str = str.replace('tableTrTd', str1)
        // })
        this.newHtmlContent = this.newHtmlContent.replace('mainBody', str) // 替换物品代码
      })
    })
  }
}
</script>

<style>
.box {
  font-size: 26rpx;
  /* display: flex; */
  padding: 20rpx;
  border: 1px solid #dedede;
}

.left {
  border-top: 1px solid #b1b1b1;
  border-left: 1px solid #b1b1b1;
  flex: 1;
}

.left-item {
  display: flex;
}

.label {
  border-bottom: 1px solid #b1b1b1;
  border-right: 1px solid #b1b1b1;
  width: 140rpx;
  padding: 0px 10rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.value {
  border-bottom: 1px solid #b1b1b1;
  border-right: 1px solid #b1b1b1;
  padding: 0px 5px;
  height: 60rpx;
  flex: 1;
  width: 0px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
}

.right {
  width: 50%;

  border-top: 1px solid #b1b1b1;
}

.image {
  width: 100%;
  height: 301rpx;
  border-bottom: 1px solid #b1b1b1;
  border-top: 1px solid #b1b1b1;
  border-right: 1px solid #b1b1b1;
}

.image img {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: 4rpx;
}

.mb-kw {
  border-bottom: 1px solid #dedede;
  padding-bottom: 20rpx;
}

.mb-kw text {
  font-weight: bold;
  font-size: 32rpx;
}

.mb-text {
  margin-top: 10rpx;
}

::v-deep .u-th {
  font-size: 24rpx !important;
}

::v-deep .u-td {
  height: auto !important;
  font-size: 24rpx !important;
  word-break: break-all;
}
</style>
