<template>
  <section class="AiDialogBtn">
    <div @click="dialog=true">
      <slot v-if="$scopedSlots.btn" name="btn"/>
      <el-button v-else type="text">{{ text }}</el-button>
    </div>
    <ai-dialog :visible.sync="dialog" :title="dialogTitle" :width="width" :customFooter="needFooter" v-on="$listeners"
               @onConfirm="handleConfirm" v-bind="$attrs">
      <slot/>
      <template #footer>
        <el-button @click="dialog=false">关闭</el-button>
      </template>
    </ai-dialog>
  </section>
</template>

<script>
export default {
  name: "AiDialogBtn",
  props: {
    text: {default: "点击弹窗"},
    dialogTitle: {default: "展示信息"},
    customFooter: {default: true},
    width: {default: "1200px"},
    submit: {default: null}
  },
  computed: {
    needFooter: v => v.customFooter && !v.submit
  },
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    handleConfirm() {
      if (!this.submit) {
        this.dialog = false
        this.$emit('onConfirm')
        this.$emit("confirm")
      } else {
        this.submit?.()?.then(() => this.dialog = false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AiDialogBtn {
}
</style>
