<template>
  <view class="detail-textarea-wrap">
    <textarea class="detail-textarea" :value="value" :placeholder="placeholder" placeholder-class="placeholder" maxlength="200" @input="onInput" />
    <text class="detail-count">{{ (value || '').length }}/200</text>
  </view>
</template>

<script>
export default {
  name: 'FormItemTextarea',
  props: {
    value: { type: String, default: '' },
    placeholder: { type: String, default: '请输入' }
  },
  methods: {
    onInput: function(e) {
      this.$emit('input', e.target.value);
    }
  }
};
</script>

<style scoped>
.detail-textarea-wrap {
  position: relative;
  background: #f7f7f7;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 52rpx;
  box-sizing: border-box;
}
.detail-textarea {
  width: 100%;
  height: 108rpx;
  min-height: 108rpx;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333333;
  box-sizing: border-box;
}
.detail-count {
  position: absolute;
  right: 24rpx;
  bottom: 16rpx;
  font-size: 22rpx;
  color: #999999;
  line-height: 32rpx;
}
</style>
