<script setup>
import { postPassengerFeedbackListApi } from '@/api/elevator'

const form = ref(null)
const model = ref({
  content: '',
  contacts: '',
  contactsPhone: ''
})
const rules = ref({
  content: {
    type: 'string',
    required: true,
    message: '请输入反馈内容',
    trigger: ['change']
  }
})

const submit = () => {
  // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
  form.value
    .validate()
    .then(async (res) => {
      console.log(res)
      const { elevatorNum } = options.value || {}
      const { content, contacts, contactsPhone } = model.value
      const { error } = await postPassengerFeedbackListApi({
        elevatorNum,
        content,
        contacts,
        contactsPhone
      })
      if (error) {
        return uni.$u.toast('提交失败')
      }
      uni.$u.toast('提交成功')
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    })
    .catch((errors) => {
      console.log(errors)
      uni.$u.toast('请检查输入内容')
    })
}

const options = ref({})
onLoad(async (e) => {
  options.value = e
})
</script>

<template>
  <view min-h-100vh px-30>
    <up-form
      ref="form"
      label-width="80"
      label-position="top"
      :model="model"
      :rules="rules"
    >
      <up-form-item label="反馈内容：" prop="content" :border="`${'none'}`">
        <up-textarea
          v-model="model.content"
          placeholder="请输入反馈内容"
          maxlength="300"
          count
          height="150"
        />
      </up-form-item>
      <!-- 联系人 和 联系方式 -->
      <up-form-item label="联系人：" prop="contacts" :border="`${'none'}`">
        <up-input
          v-model="model.contacts"
          placeholder="请输入联系人"
          maxlength="20"
        />
      </up-form-item>
      <up-form-item
        label="联系方式："
        prop="contactsPhone"
        :border="`${'none'}`"
      >
        <up-input
          v-model="model.contactsPhone"
          placeholder="请输入联系方式"
          maxlength="20"
        />
      </up-form-item>
    </up-form>

    <up-button
      type="primary"
      text="提交"
      custom-style="margin-top: 30px"
      @click="submit"
    />
  </view>
</template>
