<template>
	<view class="f-straight wrapper">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="105px" label-align="right">
      <uni-forms-item label="个人优势" name="advantage" required>
        <textarea
          placeholder-style="color:#F76260"
          placeholder="请填写您的个人优势..."
          auto-focus
          maxlength="300"
          v-model="formData.advantage"
          style="border: 1rpx solid gray; width: 100%; min-height: 300px;"
        ></textarea>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup>
import { ref, watch, unref } from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  data: {
    type: String,
    default: ''
  }
})

const form = ref()
const formData = ref({ advantage:'' })

watch(
  () => props.data,
  (newVal) => {
    formData.value.advantage = newVal
  },
  { immediate: true },
)


const rules = {
	advantage:{
		rules: [{required: true, errorMessage: '请上传头像' }]
	}
}

const submit = async () => {
  try {
    const valid = await unref(form).validate()
    // if (!valid) return { id: props.id, data: null}
    return { id: props.id, data: { content: formData.value.advantage }}
  } catch (error) {
    return { text: props.text }
  }
}

defineExpose({
  id: props.id,
  submit
})

</script>

<style lang="less" scoped>

.wrapper{
	padding: 15px;
  padding-top: 30px;
}
.upload-img{
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
}
.upload-file{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>