<template>
  <div style="margin: 20px">
    <h1 align="center">发货单</h1>
    <el-row>
      <el-col :span="8">
        <span style="font-size: 18px">下单时间：</span>
        <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="—"
                        value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="this.$i18n.t('date.start')"
                        :end-placeholder="this.$i18n.t('date.end')"
                        :default-time="['00:00:00', '23:59:59']"></el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" size="medium" @click="generatePrintData">生成</el-button>
        <el-button type="success" size="medium" v-if="infoVisible" @click="doPrint">打印</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div style="display: inline">
          <span style="font-size: 18px">数量上限：</span>
          <el-input placeholder="请输入每一单的上限数量" v-model="formData.maxNum" style="width: 400px"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div style="display: inline">
          <span style="font-size: 18px">用户昵称：</span>
          <el-input type="textarea" placeholder="逗号隔开" v-model="nickNameStr" style="width: 400px"></el-input>
        </div>
      </el-col>
    </el-row>
    <div v-if="infoVisible">
      <div style="margin-top: 30px">
        <el-table
          :data="printDataList"
          style="width: 100%"
          width="100%"
          size="medium"
          header-align="center"
          height="600">
          <el-table-column
            fixed
            label="序号"
            type="index"
            width="100">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="provinceCity"
            label="省市"
            width="120">
          </el-table-column>
          <el-table-column
            prop="prodInfo"
            label="商品信息"
            width="700">
          </el-table-column>
          <el-table-column
            prop="prodNum"
            label="数量"
            width="150">
          </el-table-column>
          <el-table-column
            prop="orderTime"
            label="下单时间"
            width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handlePrint(scope.row)">打印</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div>
      <!-- 设计器的 容器 -->
      <div id="hiprint-printTemplate" hidden></div>
    </div>
  </div>
</template>

<script>
// import AddOrUpdate from './orderLogistics-add-or-update'
import {autoConnect, disAutoConnect, hiprint} from 'vue-plugin-hiprint'
import customTemplate from './custom-template-data'
import printData from './custom-print-data'
autoConnect()
hiprint.init()
export default {
  data () {
    return {
      customHiPrintTemplate: null,
      dataList: [],
      showPrintBtn: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      printOrder: {
        orderLogistics: {}
      },
      logisticsList: [],
      // logisticsList:[{logisticsName: "申通快递", logisticsValue: "STO"}],
      logistics: '',
      deviceList: [],
      deviceNo: null,
      infoVisible: false,
      lastInputStr: null,
      scanOrderNo: null,
      searchForm: {}, // 搜索
      dataListLoading: false,
      addOrUpdateVisible: false,
      dateRange: [],
      nickNameStr: '',
      formData: {
        beginTime: null,
        endTime: null,
        maxNum: 2,
        nikeNameList: []
      },
      printDataList: []
    }
  },
  components: {
    // AddOrUpdate
  },
  created () {
    // this.getDeviceList();
    this.getLogisticsList()
  },
  mounted () {
    this.buildCustomDesigner()
  },
  methods: {
    generatePrintData () {
      this.formData.beginTime = this.dateRange[0]
      this.formData.endTime = this.dateRange[1]
      this.formData.nickNameList = this.nickNameStr.split(',')
      this.$http({
        url: this.$http.adornUrl('/print/list'),
        method: 'POST',
        data: this.formData
      }).then(({data}) => {
        if (data) {
          this.printDataList = data
          if (this.printDataList.length > 0) {
            this.infoVisible = true
            this.$forceUpdate()
          }
        }
      })
    },
    doPrint(){
      let _this = this
      _this.printDataList.forEach(item => {
        _this.customHiPrintTemplate.print2(printData.value(item))
      })
    },
    buildCustomDesigner () {
      $('#custom-hiprint-printTemplate').empty() // 先清空, 避免重复构建
      this.customHiPrintTemplate = new hiprint.PrintTemplate({
        // 如果使用 vue ref 创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
        template: customTemplate, // 模板json(object)
        settingContainer: '#PrintElementOptionSetting' // 元素参数容器
      })
      // 构建 并填充到 容器中
      this.customHiPrintTemplate.design('#custom-hiprint-printTemplate')
    },
    handlePrint (item) {
      this.customHiPrintTemplate.print2(printData.value(item))
    }
  }
}
</script>
<style lang="scss">
  .col{
    height: 40px;
    border: gainsboro 1px solid;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
  }
</style>
