<template>
  <view>
    <view v-if="type === 'title'" class="qn-form-item qn-form-item__title">
      <text class="title">{{ label }}</text>
    </view>
    <view v-if="type === 'item'" class="qn-form-item qn-form-item" :style="{ flexWrap: size === 'large' ? 'wrap' : 'nowrap' }">
      <view class="label" :style="{ marginTop: size === 'large' ? '18rpx' : '' }">
        <uni-icons v-if="required" custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
        <text class="label__text">{{ label }}</text>
      </view>
      <view class="value" :style="{ marginTop: size === 'large' ? '10rpx' : '' }">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * @value {string} type 表单类型 title:标题 item:表单项
 * @value label 表单项名称
 * @value size 表单项大小 默认normal ,可选值:normal,large
 * @value required 是否必填 默认false
 *
 */
export default {
  props: {
    type: {
      type: String,
      default: 'item'
    },
    label: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'normal'
    },
    required: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.qn-form-item {
  width: 750rpx;
  padding: 0rpx 32rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
  min-height: 80rpx;
  .label {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-right: 20rpx;
    .label__text {
      font-size: 28rpx;
      color: #000000;
    }
  }
  .value {
    flex-grow: 1;
    flex-shrink: 1;
    text-align: right;
  }
}
.qn-form-item__title {
  background-color: #f7f8fa;
  padding: 20rpx 32rpx;
  border: none;
  .title {
    font-size: 30rpx;
    color: #888888;
  }
}
</style>
