<template>
  <div
    class="l-flex--col c-schedule-wrapper"
    @click.stop
  >
    <div
      v-if="!hideHeader"
      class="l-flex__none l-flex--row c-schedule-wrapper__header has-bottom-padding"
    >
      <div class="l-flex__auto l-flex--row c-sibling-item c-schedule-wrapper__tip u-ellipsis">
        {{ name }}
      </div>
      <template v-if="editable">
        <button
          v-if="useAdd"
          class="l-flex__none c-sibling-item o-button"
          @click="onAdd"
        >
          <i class="o-button__icon el-icon-circle-plus-outline" />
          新增
        </button>
        <button
          v-if="dirty"
          class="l-flex__none c-sibling-item o-button"
          @click="onSave"
        >
          <i class="o-button__icon el-icon-download" />
          保存
        </button>
        <button
          v-else
          class="l-flex__none c-sibling-item o-button"
          @click="onSubmit"
        >
          <i class="o-button__icon el-icon-upload2" />
          提交
        </button>
      </template>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'ScheduleWrapper',
  props: {
    editable: {
      type: [Boolean, String],
      default: false
    },
    hideHeader: {
      type: [Boolean, String],
      default: false
    },
    name: {
      type: String,
      default: ''
    },
    dirty: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    useAdd () {
      return !!this.$listeners.add
    }
  },
  methods: {
    onAdd () {
      this.$emit('add')
    },
    onSubmit () {
      this.$emit('submit')
    },
    onSave () {
      this.$emit('save')
    }
  }
}
</script>

<style lang="scss" scoped>
.c-schedule-wrapper {
  &__header {
    border-bottom: 1px solid $border;
  }

  &__tip {
    color: $black;
    font-size: 24px;
    font-weight: bold;
  }
}
</style>
