<template>
  <div class="app-container">
    <el-form>
      <!-- <el-form-item label="C-Lodop服务地址" label-width="200">
        <el-input v-model="clodopSvcAddr" style="width:400px" />
      </el-form-item> -->
      <el-form-item label="打印机" label-width="150px">
        <div style="display:flex">
          <el-select v-model="printIndex" placeholder="打印机" style="width: 300px">
            <el-option
              v-for="(item, index) in printList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div v-loading="loadingPrinters" class="loading-wrap" />
        </div>
      </el-form-item>
      <el-form-item label="C-Lodop端桥编号" label-width="150px">
        {{ bridgeId }}
      </el-form-item>
      <el-form-item label="C-Lodop端桥标识" label-width="150px">
        {{ bridgeName }}
      </el-form-item>
      <el-form-item label="当前打印机" label-width="150px">
        {{ currentPrinterName }}
      </el-form-item>
      <el-form-item label-width="150px">
        <el-button type="success" @click="savePrintSetting">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const printerNameCacheKey = 'printerNameCache'
const printerIndexCacheKey = 'printerIndexCache'
const clodopBridgeIdCacheKey = 'clodopBridgeIdCache'
const clodopBridgeNameCacheKey = 'clodopBridgeName'
// const clodopSvcAddrCacheKey = 'clodopSvcAddrCache'
export default {
  name: 'PrinterSetting',
  data: function() {
    return {
      printIndex: null,
      loadingPrinters: false,
      currentPrinterName: null,
      printList: [],
      bridgeId: 0,
      bridgeName: null
      //   clodopSvcAddr: null
    }
  },
  computed: {
    storedPrinterName() {
      const name = localStorage.getItem(printerNameCacheKey)
      return name
    }
  },
  watch: {
    printList: function(n, o) {
      const currentPrinter = this.storedPrinterName
      if (currentPrinter && n && n.length > 0) {
        const idx = n.findIndex((i) => i.label == currentPrinter)
        if (idx > -1) {
          this.printIndex = n[idx].value
        }
      }
    }
  },
  mounted() {
    this.currentPrinterName = this.storedPrinterName
    this.initClodop()
  },
  methods: {
    initClodop() {
      this.loadingPrinters = true
      var oscript = document.createElement('script')
      oscript.src = 'http://localhost:8000/CLodopfuncs.js?name=ALODOP'
      var head =
        document.head ||
        document.getElementsByTagName('head')[0] ||
        document.documentElement

      head.insertBefore(oscript, head.firstChild)

      var sbTaskId = 0
      var that = this
      WLODOP.On_Return_Remain = true
      WLODOP.On_Return = (taskId, r) => {
        if (taskId == sbTaskId) {
          that.loadingPrinters = false
          var s = JSON.parse(r)
          var list = s.subdevlist[0].ssbprinter.list
          for (var i = 0; i < list.length; i++) {
            that.printList.push({ label: list[i].name, value: i })
          }
        }
      }

      setTimeout(() => {
        ALODOP.On_Return_Remain = true
        var idTaskId = ALODOP.GET_VALUE('AO_PRINT_BridgeID', 0)
        var nameTaskId = ALODOP.GET_VALUE('AO_PRINT_BridgeName', 0)
        ALODOP.On_Return = (taskId, r) => {
          if (taskId == idTaskId) {
            that.bridgeId = r
            sbTaskId = WLODOP.GET_VALUE(
              'AO_PRINT_JSON_PrinterDetail',
              '(AO)Client-Bridge Driver,' + r
            )
          }
          if (taskId == nameTaskId) {
            that.bridgeName = r
          }
        }
      }, 2000)
    },
    savePrintSetting() {
      if (this.printIndex ==null || this.printIndex < 0) {
        this.$message('请先选择打印机')
        return
      }
      localStorage.setItem(printerIndexCacheKey, this.printIndex)
      console.log(this.currentPrinterName)
      localStorage.setItem(clodopBridgeIdCacheKey, this.bridgeId)
      localStorage.setItem(clodopBridgeNameCacheKey, this.bridgeName)

      const printerName = this.printList[ this.printIndex].label
      localStorage.setItem(printerNameCacheKey, printerName)
      this.currentPrinterName = printerName

      // 设置当前端桥信息
      WLODOP.SET_BRIDGE_INDEX(this.bridgeId + ';' + this.bridgeName + ',' + this.printIndex)

      this.$message('保存成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.loading-wrap{
  width:25px;
  height:25px;
}
</style>
