<template>
  <a-modal
    centered
    class="common-selectPrint-modal"
    :footer="null"
    :maskClosable="false"
    :zIndex="1002"
    v-model="isShow"
    :title="title"
    :bodyStyle="{padding: title?'25px 32px 20px':'50px 32px 15px'}"
    @cancel="handleCommonCancel"
    :width="416">
    <a-spin :spinning="spinning" tip="Loading...">
      <div class="common-main" v-if="printList&&printList.length">
        <p style="color: #666;">选择打印机后，针式打印以后就会按这里设置的打印机去打印。<br>所以请正确选择打印机，如果选择错误，可以在顶部栏“设置”里面修改打印机。</p>
        <a-select v-model="printIndex" @change="changePrint" style="width: 100%" placeholder="选择打印机">
          <a-select-option v-for="item in printList" :key="'print-'+item.value" :value="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <div v-else class="common-main">
        <p>暂未发现打印机，请检查您的打印机是否连接正常</p>
      </div>
      <div class="btn-box">
        <a-button type="default" style="margin-right:20px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
        <a-button type="primary" v-if="printList&&printList.length" class="button-error" @click="handleCommonOk">{{ okText }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getPrintList, pdfPrint, hasExitTaskByName } from '@/libs/JGPrint'
export default {
  name: 'CommonModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    modalHtml: {
      type: String,
      default: ''
    },
    okText: { // 确定 按钮文字
      type: String,
      default: '确定'
    },
    cancelText: { // 取消 按钮文字
      type: String,
      default: '取消'
    },
    isCancel: { // 是否显示  取消 按钮
      type: Boolean,
      default: true
    },
    spinning: { // 加载中
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      printIndex: undefined,
      printList: [],
      isSetting: 0,
      printType: '',
      title: ''
    }
  },
  methods: {
    // 确定
    handleCommonOk () {
      if (this.printIndex) {
        // 保存默认设置
        if (this.printType == 'NEEDLE') {
          this.$store.commit('SET_printDefNeedle', this.printIndex)
        }
        // 继续打印
        if (!this.isSetting) {
          const pdfList = this.$store.state.app.pdfPrintList
          hasExitTaskByName(function () {
            pdfPrint(pdfList, 0)
          })
        }
        // 关闭弹框
        this.$store.commit('SET_showSelectPrint', false)
        this.$emit('cancel')
      } else {
        this.$message.info('请选择打印机')
      }
    },
    // 取消
    handleCommonCancel () {
      this.$emit('cancel')
      this.$store.commit('SET_pdfPrintList', [])
      this.$store.commit('SET_showSelectPrint', false)
    },
    getPrintList () {
      this.isSetting = this.$store.state.app.printUseing == 0
      this.printType = this.$store.state.app.printSettingType
      this.printList = getPrintList()
      this.printIndex = this.printIndex > 0 ? this.printIndex : undefined
      console.log(this.printType)
      this.title = this.printType == 'NEEDLE' ? '选择针式默认打印机' : '选择打印机'
    },
    changePrint (v) {
      this.$store.state.app.printTaskID = undefined
      this.printIndex = v
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.printIndex = undefined
      } else {
        // 获取打印机列表
        this.getPrintList()
      }
    }
  }
}
</script>

<style lang="less">
  .common-selectPrint-modal{
    .common-main{
      display: flex;
      flex-direction: column;
      line-height: 24px;
      .common-cont{
      }
    }
    .btn-box{
      text-align: center;
      margin-top: 20px;
    }
  }
</style>
