<template>
  <el-dialog :visible.sync="visible" :title="title">
    <div slot="default">
      <div class="render-dialog-body">
        <slot></slot>
      </div>
    </div>
    <div slot="footer">
      <slot name="footer">
        <el-button size="medium" class="render-button" @click="cancel">{{ cancelButtonText }}</el-button>
        <el-button size="medium" class="render-button" type="primary" @click="confirm">{{ confirmButtonText }}</el-button>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'index',
  data() {
    return {}
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    }
  },
  watch: {},
  components: {},
  filters: {},
  methods: {
    cancel() {
      this.$emit('cancel')
      this.$emit('update:visible', false)
    },
    confirm() {
      this.$emit('confirm')
      this.$emit('update:visible', false)
    }
  },
  created() {},
  mounted() {},
  computed: {}
}
</script>
<style scoped lang="scss">
#index-container {
}
</style>
