<template>
  <vxe-modal
    v-model="visible"
    v-if="visible"
    v-bind="defaultModelConfig"
    @close="close"
    @cancel="close"
    @hide="close"
    @show="showModal"
    @zoom="zoomModal"
    :width="modalWidth"
    :height="modalHeight"
    :class-name="'cms-modal'"
    :destroy-on-close="destroyOnClose"
    :id="'md' + new Date().getTime()"
    :show-footer="showFooter">
    <template slot="header">
      <slot name="header"></slot>
    </template>
    <template #title>
      {{ modalTitle }}
    </template>
    <template #default>
      <slot></slot>
    </template>
    <template slot="footer">
      <slot name="footer">
        <cms-button size="small" @click="close">{{ $t('common.button.close') }}</cms-button>
      </slot>
    </template>
  </vxe-modal>
</template>

<script>
import { CmsModalMix } from "./CmsModalMix";

export default {
  name: "CmsModal",
  mixins: [ CmsModalMix ],
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val); // 通过事件实现组件属性到父组件的传递
      },
    },
  },
  methods: {
    close() {
      this.visible = false
      if (this.modalCallback) {
        this.modalCallback(false)
      }
      this.$emit('close', false);
    },
    zoomModal(status) {
      console.log('--------------', status);
      this.$emit('zoom', status)
    },
    showModal({ type, $modal }) {
      this.$emit('show',$modal);
    }
  }
};
</script>

<style lang="scss">
.cms-modal {
  .vxe-modal--content {
    padding: 0 !important;
  }

  .vxe-modal--wrapper .vxe-modal--content {
    padding: 0 !important;
  }
}
</style>
