<template>
  <el-dialog
    :class="['card-preview-dialog', { 'is-print': this.viewType === 'print' }]"
    :visible.sync="modalIsShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal="false"
    append-to-body
    fullscreen
  >
    <div slot="title"></div>
    <div slot="footer"></div>

    <card-preview
      v-if="modalIsShow"
      is-dialog
      :card-data="cardData"
      :view-type="viewType"
      :card-id="cardId"
      @confirm="confirm"
    ></card-preview>
  </el-dialog>
</template>

<script>
import CardPreview from "../views/CardPreview.vue";

export default {
  name: "card-preview-dialog",
  components: { CardPreview },
  props: {
    viewType: {
      type: String,
      default: "view",
    },
    cardData: {
      type: Object,
      default: null,
    },
    cardId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    confirm(content) {
      this.cancel();
      this.$emit("confirm", content);
    },
  },
};
</script>
