<!--  -->
<template>
  <div>
    <v-textarea 
      v-model="advantage" 
      :label="$t('resume.dataDefaultPrompt') + $t('resume.personalAdvantages') + '...'" 
      variant="outlined" 
      counter="300" 
      color="primary" 
      validate-on="input"
      :rules="advantageRules"
    ></v-textarea>
  </div>
</template>

<script setup>
defineOptions({ name: 'resumeAnalysis-selfEvaluation'})
// import Snackbar from '@/plugins/snackbar'
import DOMPurify from 'dompurify'
import { ref } from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  data: {
    type: String,
    default: ''
  }
})

const advantage = ref(props.data)
const advantageRules = ref([
  value => {
    if (value) return true
    return '请输入您的个人优势'
  },
  value => {
    if (value?.length <= 300) return true
    return '请输入2-300个字符'
  }
])

const submit = async () => {
  advantage.value = DOMPurify.sanitize(advantage.value)
  if (!advantage.value) {
    // Snackbar.warning('请先输入个人优势！')
    return { id: props.id, data: null}
  }
  return { id: props.id, data: { content: advantage.value}}
}

defineExpose({
  id: props.id,
  submit
})
</script>
<style lang="scss" scoped>
</style>
