<template>
  <el-dialog
    :visible.sync="visible"
    :width=" actions.width"
    :modal="actions.modal"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template slot="title">
      <div class="title">{{ actions.title }}</div>
    </template>
    <span>
      <slot name="content" />
    </span>
    <span v-if="actions.buttom" slot="footer" class="dialog-footer">
      <el-button v-if="actions.cancelButtom" @click="close"> {{ actions.buttonTextLeft }}</el-button>
      <el-button :loading="loading" v-if="actions.confirmButtom" type="primary" @click="handleSubmit">{{
        actions.buttonTextRight
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogActions: {
      type: Object,
      default: () => ({})
    },
    loading:{
      type: Boolean,
      default:false
    }

  },
  data() {
    return {
      visible: false,
      actions: Object.assign(
        {
          title: '提示',
          editTip: '',
          width: '1080px',
          buttom: true, // /是否显示按钮
          confirmButtom: true,
          cancelButtom: true,
          buttonTextLeft: '取消',
          buttonTextRight: '确定',
          modal: true, // 是否显示遮罩层
          ...this.dialogActions
        }
      )

    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    open() {
      this.visible = true
      this.$emit('update:visible', true)
    },
    close() {
      this.visible = false
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      this.$emit('confirm')
    }

  }
}
</script>
<style lang="scss" scoped>
.title {
  font-weight: 800;
  font-size: 20px;
  color: #3E7BFA;
  line-height: 23px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
