<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="清洁范围" required prop="content">
            <uv-input
              :border="`bottom`"
              placeholder="请输入清洁范围"
              v-model="form.content"
            ></uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item label="" prop="photos" required>
            <view class="w-full">
              <view class="flex justify-between text-15px">
                <view>清洁结果</view>
                <view class="text-hex-999999 text-12px pr-9px">0/9</view>
              </view>
              <view class="mt-10rpx">
                <uv-upload></uv-upload>
              </view>
            </view>
          </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="changePassword"
      :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: '',
  photos: [],
})
const rules = reactive({
  content: [
    { required: true, message: '请输入投诉内容' },
    { min: 20, message: '至少20字' },
    { max: 200, message: '最多200字' },
  ],
  photos: {
    type: 'array',
  },
})

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

const changePassword = () => {
  // http
  //   .post('/auth/profile', {
  //     password: form.password,
  //     password_confirmation: form.password2,
  //   })
  //   .then((ress) => {
  //     uni.showToast({
  //       title: '修改成功',
  //       duration: 2000,
  //       icon: 'none',
  //     })
  //     formRef.value.resetFields()
  //   })
}
</script>
