<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 ,minHeight: '200rpx'}"
              count
              placeholder="可描述具体投诉内容，至少20字"
              :border="`none`"
              v-model="form.content"
            >
            </uv-textarea>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item label="" prop="photos">
            <view class="w-full">
              <view class="flex justify-between text-15px">
                <view>证明材料（选填）</view>
                <view class="text-hex-999999 text-12px pr-9px">{{form.photos.length}}/9</view>
              </view>
              <view class="mt-10rpx">
                <uv-upload
                  :maxCount="9"
                  multiple
                  :fileList="form.photos"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="photos"
                ></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="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 fileList = ref([])
const form = reactive({
  content: '',
  photos: [],
})
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 afterRead = async (event) => {
  let lists = [].concat(event.file)
  let fileListLen = form[event.name].length

  lists.map((item) => {
    form[event.name].push({
      ...item,
      status: 'uploading',
      message: '上传中',
    })
  })
  for (let i = 0; i < lists.length; i++) {
    // console.log(lists[i]);
    const result = await uploadFilePromise(lists[i].url)
    let item = form[event.name][fileListLen]
    form[event.name].splice(
      fileListLen,
      1,
      Object.assign(item, {
        status: 'success',
        message: '',
        url: result,
      })
    )
    fileListLen++
  }
}
const deletePic = (event) => {
  form[event.name].splice(event.index, 1)
}

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    http
      .upload('/fileupload', {
        filePath: url,
        name: 'file',
      })
      .then((res) => {
        resolve(res.url)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

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