<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" class="zIndex-1100">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <Alert v-show="isPrinterDownload" type="error"><p @click="_download">未安装打印控件,点此<a>下载</a>,安装完请刷新页面</p></Alert>
        <div v-show="!isPrinterDownload">
          <Form ref="formObj" :rules="ruleValidate" :label-width="70" onsubmit="return false">
            <Form-item label="打印机" prop="printerVal">
              <Select v-model="printerVal" @on-change="_printChange" name="printerVal" placeholder="请选择打印机">
                <Option v-for="item in printList" :value="item.value" :key="item.value">{{item.name}}</Option>
              </Select>
            </Form-item>
          </Form>
        </div>
      </div>
      <div slot="footer" class="btn-width">
        <modal-footer ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></modal-footer>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 选择打印机
 */
import global from '../../../api/config'
import { getLodop } from '../../../plugins/clodop/LodopFuncs'

let LODOP
export default {
  components: {},
  data() {
    const validatePrinter = (rule, value, callback) => {
      if (this.printerVal !== null) {
        callback()
      } else {
        callback(new Error('请选择打印机~'))
      }
    }
    return {
      modalTitle: '选择打印机',
      showModal: false,
      ruleValidate: {
        printerVal: [
          { required: true, validator: validatePrinter, trigger: 'change' }
        ]
      },
      placeholder: '',
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '确定', type: 'primary' }
      ],
      printList: [],
      printerVal: null,
      type: '',
      isPrinterDownload: false
    }
  },
  methods: {
    // 获取打印机对象
    _setPrinter() {
      // 首先判断是否获取到打印机对象
      if (undefined === LODOP || LODOP === 'undefined') {
        LODOP = getLodop()
      }
      // 其次判断是否安装打印机控件
      if (undefined === LODOP || LODOP === 'undefined') {
        this.isPrinterDownload = true
        return false
      }
      if (LODOP.GET_PRINTER_COUNT() === 0) {
        this.$Message.warning('系统未关联打印机,请确认....')
        return false
      }
      this._createPrinterList()
    },
    // 获取打印机列表
    _createPrinterList() {
      LODOP = getLodop()
      const iPrinterCount = LODOP.GET_PRINTER_COUNT()
      const printList = []
      for (let i = 0; i < iPrinterCount; i++) {
        printList.push({ name: LODOP.GET_PRINTER_NAME(i), value: i })
      }
      console.log(printList)
      this.printList = printList

      if (this.printList.length) {
        // 默认第一个打印机
        this.printerVal = this.printList[0].value
      }
    },
    _open(type) {
      this.showModal = true
      this.isPrinterDownload = false
      this.type = type // 打印标签还是自定义打印
      this._setPrinter()
      this._createPrinterList()
    },
    _printChange(data) {
      this.printerVal = data
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
      this.$refs.footerModal._hideLoading()
    },
    _cancel() {
      this.showModal = false
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          this.$emit('on-result-change', {
            printerVal: this.printerVal,
            type: this.type
          })
          this.showModal = false
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    // 下载打印机
    _download() {
      window.open(
        global.staticURL + '/clodop/CLodop_Setup_for_Win32NT.exe',
        '_blank'
      )
    }
  }
}
</script>
