<template>
  <el-card :class="{ 'has-footer': hasFooter }" class="form-card">
    <div v-if="title" slot="header" class="form-header">
      <span>{{ title }}</span>
      <slot name="extra"></slot>
    </div>
    <slot></slot>
  </el-card>
</template>

<script>
export default {
  name: 'FormCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    hasFooter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {
    doCollapsed() {
      this.collapsed = !this.collapsed
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/mixin.scss';

.form-card {
  border: none;
  margin-top: 10px;

  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    border: none;
  }

  &:first-child {
    margin-top: 0;
  }

  .el-form-item__label {
    width: 120px;
  }

  .el-form-item__content {
    width: 250px;

    .el-cascader,
    .el-select,
    .el-input-number,
    .el-date-editor {
      width: 100%;
    }
  }

  &.has-footer {
    margin-bottom: 56px;
  }

  .is-disabled {
    .el-input__inner {
      border: none;
      background: #fff;
      color: #444;
      padding: 0 15px;
      text-align: left;

      &::input-placeholder {
        color: #fff;
      }
    }

    .el-input__suffix {
      display: none;
    }

    .el-input-group__append {
      background-color: #fff;
      border: none;
    }

    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
  }
}
</style>
