<template>
  <view class="ml-form-group" :class="className || ''">
    <view v-if="title || showHeader" class="ml-form-group-header">
      <view class="ml-form-group-title">
        <slot name="title">{{ title }}</slot>
      </view>
      <view class="ml-form-group-extra">
        <slot name="extra"></slot>
      </view>
    </view>
    <view class="ml-form-group-content">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MlFormGroup',
  options: {
    virtualHost: true
  },
  props: {
    title: String,
    showHeader: Boolean,
    className: String
  }
})
</script>

<style lang="scss">
.ml-form-group {
  margin-bottom: $ml-page-interval-margin;
  font-size: $ml-base-font-size;
  .ml-form-group-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 80rpx;
    padding: 20rpx;
    .ml-form-group-title {
      flex-grow: 1;
      position: relative;
      padding-left: 20rpx;
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 8rpx;
        height: 30rpx;
        transform: translateY(-50%);
        background: $ml-theme-primary-color;
      }
    }
    .ml-form-group-extra {
      flex-shrink: 0;
    }
  }
  .ml-form-group-content {
    border-radius: $ml-border-radius;
  }
}
</style>
