<template>
  <view class="ml-section" :class="[className || '', type ? `type-${type}` : '']">
    <view v-if="title || $slots.header" class="ml-section-header">
      <slot name="header">
        <text class="ml-section-header-title">{{ title }}</text>
      </slot>
    </view>
    <view class="ml-section-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MlSection',
  options: {
    virtualHost: true
  },
  props: {
    title: String,
    type: String,
    className: String
  }
}
</script>

<style lang="scss">
.ml-section {
  &.type-line {
    .ml-section-header-title {
      border-left: 2px solid $ml-theme-primary-color;
    }
  }
  .ml-section-header {
    padding: 10rpx 20rpx;
    .ml-section-header-title {
      padding-left: 20rpx;
    }
  }
  .ml-section-content {
    padding: 0 20rpx;
  }
}
</style>
