<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :width="width"
    @close="closeDialog('ruleForm')"
    :fullscreen="fullscreen"
    :top="topHeight"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="dialogBox"
  >
    <div slot="title" class="dialog_title">
      <b>{{title}}</b>
      <i class="el-icon-full-screen" @click="handleFullscreen" />
    </div>
    <div class="dialogBox-content">
        <slot></slot>
    </div>
    <div slot="footer" class="dialog_footer">
      <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
      <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
      <el-button size="small" @click="closeDialog('ruleForm')">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: '70%'
    },
    title: {
      type: String,
      default: ''
    },
    topHeight: {
      type: String,
      default: '15vh'
    },
  },
  data() {
    return {
      dialogVisible: false,
      fullscreen: false
    }
  },
  methods: {
    isShow() {
      this.dialogVisible = true;
    },
    isHide() {
      this.dialogVisible = false;
    },
    handleFullscreen() {
      this.fullscreen = !this.fullscreen;
    },
    submitForm(ruleForm) {
      this.$parent.submitForm(ruleForm);
    },
    resetForm(ruleForm) {
      this.$parent.resetForm(ruleForm);
    },
    closeDialog(ruleForm) {
      this.$parent.closeDialog(ruleForm);
    },
  }
};
</script>
<style rel="stylesheet/less" lang="less">
@import "./index.less";
</style>