<template>
  <div class="dialog">
    <el-dialog :title="title"
               lock-scroll
               :visible.sync="visible"
               :modal="modal"
               :width="width+'%'"
               :top="top"
               :before-close="handleClose"
               :append-to-body="isNest"
               :close-on-click-modal="false">
      <!-- <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}"> -->
      <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
        <slot></slot>
      </div>
      <span v-if="showFooter"
            slot="footer"
            class="dialog-footer">
        <el-button v-if="showCancel"
                   @click="handleCancel">{{cancel}}</el-button>
        <el-button v-if="showConfirm"
                   type="primary"
                   :disabled="disabled"
                   @click="handleConfirm">{{confirm}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from 'vuex'
export default {
  computed: {
    formHeight () {
      // let clientHeight = document.documentElement.clientHeight
      return this.clientHeight * 0.6 * this.dialogHeight
    },
    ...mapGetters(['clientHeight'])
  },
  props: {
    title: {
      type: String,
      default: '提示'
    },
    cancel: {
      type: String,
      default: '取消'
    },
    confirm: {
      type: String,
      default: '确定'
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 70
    },
    top: {
      type: String,
      default: '60px'
    },
    isNest: {
      type: Boolean,
      default: true
    },
    modal: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    dialogHeight: {
      type: Number,
      default: 1
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClose () {
      // 点击右上角关闭按钮，双向数据绑定的问题
      this.$emit('cancel')
    },
    handleCancel () {
      this.$emit('cancel')
    },
    handleConfirm () {
      this.$emit('ok')
    }
  }
}
</script>

<style>
</style>
