<template>
  <view class="px-base">
    <CuNavbar title="意见箱"> </CuNavbar>
    <view class="space-y-base mt-base">
      <view class="card-shadow bg-white rounded-19rpx px-base">
        <uv-form
          labelWidth="160rpx"
          :borderBottom="false"
          :model="form"
          :rules="rules"
          errorType="toast"
          ref="formRef"
          labelPosition="top"
        >
          <uv-form-item label="意见内容" prop="content">
            <uv-textarea
              maxlength="200"
              :customStyle="{ padding: 0 }"
              count
              placeholder="可描述具体意见内容，至少20字"
              border="none"
              v-model="form.content"
            >
            </uv-textarea>
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    <view class="mt-100rpx">
      <uv-button type="primary" @click="submit">提交</uv-button>
    </view>

    <uv-modal
      ref="modalRef"
      title="提示"
      content="确定提交意见？"
      @confirm="onSubmit"
      :showCancelButton="true"
    ></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import Cell from '@/components/cell/index'
import { ref, reactive } from 'vue'
import { http } from '@/utils/request'
const modalRef = ref(null)
const formRef = ref(null)
const form = reactive({
  content: '',
})
const rules = reactive({
  content: [
    { required: true, message: '可描述具体意见内容，至少20字' },
    { min: 20, message: '至少20字' },
    { max: 200, message: '最多200字' },
  ],
})

const submit = () => {
  formRef.value.validate().then((res) => {
    modalRef.value.open()
  })
}

const onSubmit = () => {
  http
    .post('/feedback', {
      content: form.content,
    })
    .then((ress) => {
      uni.showToast({
        title: '提交成功',
        duration: 2000,
        icon: 'none',
      })
      formRef.value.resetFields()
    })
}
</script>
