import './style.scss'
export default {
  name: 'ESimpleCard',
  props: {
    direction: {
      type: String,
      default: 'horizontal'
    },
    title: {
      type: String,
      default: ''
    },
    extra: {
      type: [String, Boolean],
      default: false
    },
    labelStyle: {
      type: Object
    },
    contentStyle: {
      type: Object
    },
    labelClassName: {
      type: String,
      default: ''
    },
    contentClassName: {
      type: String,
      default: ''
    },
    data: {
      type: [String, Object, Number, Array]
    },
    colon: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: 'el-icon-s-grid'
    }

  },
  methods: {
    handleExtra() {
      const { data } = this;
      this.$emit('click', data)
    },
  },
  render() {
    const { title, extra, $slots, icon, color } = this;
    return (
      <div class="e-simple-card">
        {
          (title || extra || $slots.cardHeader) ?
            <div class="e-simple-card__header">
                { $slots.cardHeader ||
                  <template class="e-header-template">
                    <div class="template-left">
                      <i class={[ icon ? icon : 'el-icon-s-grid', 'template-icon' ]}></i>
                      <div class="template-title">
                        { title }
                      </div>
                    </div>

                    { extra ?
                      <div class="template__extra">
                        <i class="el-icon-setting icon" onClick={this.handleExtra}></i>
                      </div> : null
                    }
                  </template>
                }
            </div>
            : null
        }
        <div class="e-simple-card__body">
          {
            $slots.cardBody
          }
        </div>
      </div>
    )
  }
}
