<template>
  <el-dialog class="mu-modal mu-modal-center" top="0"
             :class="['mu-'+ currentConfig.size]"
             :style="getCurrentStyle"
             :visible.sync="visible"
             :title="currentConfig.title"
             :modal="currentConfig.modal"
             :show-close="false"
             :fullscreen="currentConfig.fullscreen"
             :close-on-click-modal="currentConfig.closeOnClickModal"
             :close-on-press-escape="currentConfig.closeOnPressEscape"
             v-mu-dialog-drag="currentConfig.dragable"
             @onDialogDrag="handleDialogDrag"
             ref="dialog__wrapper">
    <div slot="title" class="dialog-title">
      <slot name="title" v-if="$slots.title"></slot>
      <span v-else class="header-title">{{currentConfig.title}}</span>
      <div class="title-right">
        <slot name="tool" v-if="$slots.tool"></slot>
        <i class="icon-close" v-if="currentConfig.showClose" @click="onClose()"></i>
      </div>
    </div>
    <div class="modal-content" :class="{'pb-16': !currentConfig.showFooter}">
      <slot></slot>
    </div>
    <template slot="footer" v-if="currentConfig.showFooter">
      <slot name="footer" v-if="$slots.footer"></slot>
      <div class="dialog-footer" v-else>
        <mu-btn :config="{type:'text', text: currentConfig.cancelText}" @click="onClose()"></mu-btn>
        <mu-btn :config="{text: currentConfig.okText}" @click="onOk()"></mu-btn>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';

  type Size = 'small' | 'medium' | 'large';
  type Type = 'border' | 'text';
  type DialogConfig = {
    title?: string,
    width?: string,
    size?: Size,
    dragable?: boolean,
    showClose?: boolean,
    showFooter?: boolean,
    okText?: string,
    cancelText?: string,
    modal?: boolean,
    fullscreen?: boolean,
    closeOnClickModal?: boolean,
    closeOnPressEscape?: boolean,
    onOk?: Function,
    onCancel?: Function
  }

  @Component({
  })
  export default class MuDialog extends Vue {
    @Prop({ default: () => [] }) private config: DialogConfig;
    @Prop() private extension?: (value: any) => void;
    private visible: boolean = false;
    private defaultConfig: any = {
      closeOnClickModal: false,
      closeOnPressEscape: false,
      fullscreen: false,
      modal: true,
      size: 'medium',
      showFooter: true,
      okText: "确定",
      cancelText: "取消",
      showClose: true
    };

    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

    mounted() {
      this.extension && this.extension({
        open: this.onOpen,
        close: this.onClose
      });
    }

    /**
     * 获取当前弹出框样式
     * @author tanxj
     */
    getCurrentStyle() {
      const result: any = {};
      if (this.config.width) result.width = this.config.width + 'px';
      return result;
    }

    /**
     * 打开弹出框
     * @author tanxj
     */
    onOpen(callback?: any) {
      this.visible = true;
      if (callback) callback();
    }

    /**
     * 关闭弹出框
     * @author tanxj
     */
    onClose(callback?: any) {
      this.visible = false;
      if (this.config.onCancel) this.config.onCancel();
      if (callback) callback();
    }

    /**
     * 确定保存事件
     * @author tanxj
     */
    onOk() {
      if (this.config.onOk) this.config.onOk();
    }

    /**
     * 拖拽中事件
     * @author tanxj
     */
    private handleDialogDrag() {
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-title {
    overflow: hidden;

    .header-title {
      float: left;
      max-width: calc(100% - 30px);
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
</style>
