<template>
  <!-- 对话框共用组件 -->
  <v-dialog
    style="z-index: var(--zIndex-dialog)"
    v-model="show"
    persistent
    v-bind="$attrs"
    :fullscreen="fullscreen"
    :max-width="dialogWidth"
    :width="dialogWidth"
  >
    <div class="d-flex" style="width: 100%;height: 100%" ref="print">
      <v-card class="d-flex flex-column" style="width: 100%;" :style="!fullscreen ? 'max-height: 90vh' : ''">
        <v-card-title :class="{'drawer': fullscreen}" class="justify-space-between">
          <span class="text-h5">
            {{ title }}
          </span>
          <div>
            <v-btn v-if="tools.includes('print')" icon class="mr-3" @click="handlePrint">
              <v-icon>
                mdi-printer
              </v-icon>
            </v-btn>
            <v-btn icon @click="handleClose">
              <v-icon :color="fullscreen ? '#fff' : '#000'">
                mdi-close
              </v-icon>
            </v-btn>
          </div>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text
          ref="body"
          :style="(isPrint ? '' : 'flex-grow: 1;') + bodyStyle"
          :class="{ 'd-flex': flexBox, 'overflow-y-auto': !isPrint }"
        >
          <slot></slot>
        </v-card-text>
        <template v-if="footer">
          <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="blue darken-1"
              text
              @click="handleClose"
            >
              取消
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="handleSave"
            >
              提交
            </v-btn>
          </v-card-actions>
        </template>
        <template v-else>
          <slot name="footer"></slot>
        </template>
      </v-card>
    </div>
  </v-dialog>
</template>

<script>
import printJS from 'print-js'
export default {
  name: 'dialog-page',
  props: {
    tools: { // ['print']
      type: Array,
      default: () => []
    },
    printTitle: {
      type: String,
      default: ''
    },
    bodyStyle: {
      type: String,
      default: ''
    },
    // maxWidth: {
    //   type: String,
    //   default: '900px' // 表单类900， 明细类1200
    // },
    widthType: {
      type: [Number, String],
      default: 0
    },
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    },
    footer: {
      type: Boolean,
      default: true
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    flexBox: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogWidth () {
      // 表单类900， 明细类1200, 验证类400
      const arr = ['900px', '1200px', '400px']
      return arr[+this.widthType]
    }
  },
  data () {
    return {
      isPrint: false,
      show: false
    }
  },
  watch: {
    visible (val) {
      this.show = val
    }
  },
  methods: {
    handlePrint () {
      this.isPrint = true
      this.$nextTick(() => {
        // 保持触发focus事件，避免打印关闭无法监听
        const focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500)
        printJS({
          printable: this.$refs.body,
          type: 'html',
          header: this.printTitle || this.title,
          style: 'position: fixed; width: 100%; height: auto;padding-bottom: 50px',
          targetStyle: '*',
          targetStyles: '*',
          headerStyle: 'text-align: center',
          // scanStyles: true,
          maxWidth: '1000',
          onPrintDialogClose: () => {
            clearInterval(focuser)
            this.isPrint = false
          }
        })
      })
    },
    handleClose () {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    handleSave () {
      this.$emit('submit', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer{
  color: #fff;
  background-color: #1976d2;
}
::v-deep .v-dialog:not(.v-dialog--fullscreen) {
  overflow: visible !important;
}
</style>
