<template>
  <el-popover :placement="placement" :disabled="isDisabled" :width="width || 300" v-model="show" trigger="click" :visible-arrow="true">
    <div class="el-popover__header">
      {{title}}
      <slot name="title"></slot>
      <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button>
    </div>
    <slot name="form"></slot>

    <div v-if="withSubmitBtn" class="el-popover__footer">
      <slot name="footer"></slot>
      <el-button type="primary" class="wp100" @click="handleSubmit">{{ okText }}</el-button>
    </div>
    <span slot='reference'>
      <slot name='reference'></slot>
    </span>
  </el-popover>
</template>
<script>
export default {
  name: 'PopoverForm',
  props: {
    title: String,
    width: Number,
    placement: {
      type: String,
      default: 'left',
    },
    withSubmitBtn: {
      type: Boolean,
      default: true,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    okText: {
      type: String,
      default: '确认',
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    handleClose() {
      this.show = false;
    },
    handleSubmit() {
      this.$emit('on-sure');
    },
  },
  watch: {
    show(val) {
      this.$emit('on-change', val);
    },
  },
};
</script>
<style type="scss" scoped>
  .wp100{
    width: 100%;
  }
</style>
