<template>
  <section class="AiEditCard">
    <ai-card v-bind="{...$props,...$attrs}">
      <template v-if="showBtn" #right>
        <template v-if="edit">
          <el-button type="text" @click="handleCancel">取消</el-button>
          <el-button type="text" @click="handleSave">保存</el-button>
        </template>
        <template v-else>
          <el-button type="text" icon="iconfont iconEdit" @click="edit=true">修改</el-button>
        </template>
      </template>
      <template #content>
        <slot v-if="edit" name="edit"/>
        <slot v-else/>
      </template>
    </ai-card>
  </section>
</template>

<script>
export default {
  name: "AiEditCard",
  props: {
    editable: Boolean,
    showBtn: {default: true}
  },
  data() {
    return {
      edit: false
    }
  },
  methods: {
    handleSave() {
      if (this.$listeners.save) {
        this.$emit('save', () => this.edit = false)
      } else this.edit = false
    },
    handleCancel() {
      if (this.$listeners.cancel) {
        this.$emit('cancel')
        this.edit = false
      } else this.edit = false
    }
  },
  created() {
    this.edit = this.editable
  }
}
</script>

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