<template>
  <view :class="className" :style="style" class="cu-form-group">
    <view class="title">
      <slot name="title">
        <text v-if="required" class="lr-required">*</text>
        {{ title }}
      </slot>
    </view>
    <view @click="itemClick" :class="[arrow ? 'form-item-arrow' : 'form-item-noarrow']" class="action form-item-action">
      <view class="picker"><slot></slot></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-label',

  props: {
    title: {},
    arrow: {},
    required: {}
  },

  methods: {
    itemClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style>
.form-item-action {
  flex: 1;
  padding-right: 40rpx;
  overflow: hidden;
  position: relative;
  text-align: right;
}

.form-item-noarrow {
  padding-right: 0;
}
</style>
