<template>
  <page-layout class="bg-white">
    <div class="q-pa-md">
      <div v-if="route.params.type" class="text-subtitle text-weight-bold row items-center q-mb-md">
        <q-img :src="ComplainTypeMap[route.params.type].img" width="18px" no-spinner class="q-mr-sm"/>{{ComplainTypeMap[route.params.type].name}}
      </div>
      <q-input
      v-model="form.content"
      filled
      type="textarea"
      counter
      maxlength="300"
      bg-color="grey-2"
      placeholder="请描述您的问题，以便我们尽快处理"
    />
    <!-- TODO [delay] 暂时不支持上传图片 -->
      <!-- <div class="row warp q-gutter-sm q-my-md">
        <div class="bg-grey-2 rounded-borders-xs relative-position" v-for="(item,i) in form.images" :key="i">
          <q-img :src="item.path" no-spinner width="100px" height="100px" fit="cover"/>
          <q-btn class="absolute-top-right clear-btn" color="grey" unelevated round size="xs" dense icon="clear" @click="deleteImage(i)"></q-btn>
        </div>
        <UploadFile
        v-if="form.images.length<5"
        :multiple="false"
        url="seller/material/upload"
        :form-fields="[{name: 'type', value: '3'}]"
        accept="image/*"
        field-name="file"
        flat
        square
        class="col-auto"
        @uploaded="uploaded">
        <template #header-content>
          <q-btn style="width:100px; height:100px;" unelevated icon="add" color="grey-2" text-color="grey-6" label="添加图片" stack />
        </template>
      </UploadFile>

      </div> -->
      <q-btn unelevated class="fit q-mt-lg" color="primary" :disable="!form.content" @click="submit">提交</q-btn>
    </div>
  </page-layout>
</template>
<script setup>
import UploadFile from 'components/UploadFile.vue'
import { reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { ComplainTypeMap } from './ComplainTypes'
import { api } from 'boot/axios'
// import { useCamera } from 'src/composables/camera.js'
// const { images,captureImage,deleteImage } = useCamera()
const $q = useQuasar()
const router = useRouter()
const route = useRoute()
const form = reactive({
  content:'',
  images:[]
})
function uploaded(res){
  res && res.data && form.images.push(res.data)
}
function deleteImage(i){
  form.images.splice(i,1)
}
function submit(){
  $q.loading.show()
  api.feedback({
    // type: ComplainTypeMap[route.params.type]?.value,
    content:form.content,
    // material_ids: form.images.map(item=>item.id)
  }).then(res => {
      $q.notify({type: 'positive',message: res.message || '修改成功'})
      router.back()
    }).catch(e=>{
      $q.notify({type: 'negative',message: e.message})
    }).finally(()=>{
      $q.loading.hide()
    })
}
</script>
<style lang="scss" scoped>
.clear-btn{ top: -5px; right:-5px;}
</style>
