<template>
  <page-layout class="bg-white">
    <div class="q-pa-md">
      <q-input
      v-model="form.content"
      filled
      type="textarea"
      counter
      maxlength="300"
      bg-color="grey-2"
      placeholder="请输入店铺公告"
    />
      <div class="row warp q-gutter-sm q-my-md">
        <div class="relative-position col-auto">
        <UploadFile
        :multiple="false"
        url="seller/material/upload_other"
        accept="image/*"
        field-name="file"
        flat
        square
        class="full-width"
        @uploaded="uploaded">
        <template #header-content>
          <q-btn v-if="!form.image?.file_url" style="width:100px; height:100px;" unelevated icon="add" color="grey-2" text-color="grey-6" label="上传图片" stack />
          <div v-else class="bg-grey-2 rounded-borders-xs relative-position">
            <q-img :src="form.image.file_url" no-spinner width="100px" height="100px" fit="cover"/>
          </div>
        </template>
      </UploadFile>
      <q-btn class="absolute-top-right clear-btn"
      style="z-index: 1;" color="grey" unelevated round size="xs" dense icon="clear" @click="form.image=null"></q-btn>
    </div>
      </div>
      <q-btn unelevated class="fit" color="primary" @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 { api } from 'boot/axios'
import { useSelfStore } from 'src/stores/self';
// import { useCamera } from 'src/composables/camera.js'
// const { images,captureImage,deleteImage } = useCamera()
const store = useSelfStore()
const $q = useQuasar()
const route = useRoute()
const router = useRouter()
const form = reactive({
  content:store.shop.announcement,
  image:{file_url:store.shop.announcement_img_full_url,path:store.shop.announcement_img_url}
})
function uploaded(res){
  res && res.data && (form.image = res.data)
}

function submit(){
  $q.loading.show()
  api.updateShopInfo({
    announcement: form.content,
    announcement_img_url: form.image?.path
  }).then(res => {
      $q.notify({type: 'positive',message: res.message || '设置成功'})
      router.go(-1)
    }).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>
