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

<script>
/**
 * @property {Array} columns {type:'title | item',label:'表单项,slot:'插槽名',required:false}
 * @value key key 在columns中的key,同时也是插槽名
 * @value type 类型 title:标题 item:表单项
 * @value label 表单项名称
 * @value slot 插槽名 不填则默认使用key做插槽名
 * @value required 是否必填 默认false
 * @value size 表单项大小 默认normal ,可选值:normal,large
 */
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  }
}
</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 #d8d8d8;
  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>
