<template>
  <view
    :style="{
      borderTop: props.borderTop ? borderStyle : '',
      padding: props?.padding || paddingStyle
    }"
  >
    <view class="title">{{ props?.title || '标题' }}<text v-if="required"> * </text></view>
    <textarea
      :placeholder="props?.placeholder || '请输入问题描述'"
      placeholder-style="font-size: 28rpx;color: #ccc;"
      style="height: 200rpx; width: 100%"
      @input="handleChange"
    ></textarea>
  </view>
</template>
<script setup lang="ts">
const borderStyle = '1rpx solid #eee'
const paddingStyle = '10rpx 0'
import { defineProps, defineEmits } from 'vue'
const props = defineProps([
  'title',
  'valueModel',
  'borderTop',
  'required',
  'padding',
  'placeholder'
])
const emit = defineEmits(['click', 'update:valueModel', 'onGetPhoneNumber'])
const handleChange = (e: any) => {
  emit('update:valueModel', e.detail.value)
}
</script>
<style lang="scss" scoped>
.title {
  color: #1d2129;
  font-size: 30rpx;
  padding: 20rpx 0;
  text {
    color: #f00;
  }
}
</style>
