<template>
  <page-layout>
    <WarnTip>您所提交的资料仅用户核实店铺信息，审核过后平台将不会保留照片。</WarnTip>

    <div
      v-if="form.state == 2"
      class="q-mx-md q-mt-sm bg-orange-2 q-pa-xs rounded-borders-xs"
    >
      <div class="text-deep-orange q-pa-sm">审核失败原因</div>
      <div class="bg-white q-pa-sm rounded-borders-xs">{{ form.audit_message }}</div>
    </div>

    <q-form ref="formRef" @submit="submit" class="q-pa-md">
      <div class="row q-col-gutter-sm">
        <div v-for="item,i in images" :key="i" class="col-6">
        <q-card>
        <q-card-section>
          <div class="q-pb-sm text-center">
            {{ item.name }}
          </div>
          <UploadFile
            :multiple="false"
            :disable="form.state==1 || form.state==3"
            url="seller/material/upload_other"
            accept="image/*"
            field-name="file"
            flat
            square
            class="full-width"
            @uploaded="(res)=>uploaded(item.key,res)">
            <template #header-content>
              <div class="bg-grey-2 rounded-borders-xs relative-position">
                <q-img :src="form[item.key+'_url']" no-spinner
                  class="full-width" :ratio="1" fit="cover"/>
                <q-btn v-if="!form[item.key+'_url']"
                  class="absolute-center"
                  unelevated icon="add"
                  color="grey-2" text-color="grey-6"
                  label="上传图片" stack />
              </div>
            </template>
          </UploadFile>
        </q-card-section>
        </q-card>
      </div>
      </div>
      <div class="q-my-md">
        <q-btn v-if="form.state!=1 && form.state!=3"
         unelevated color="primary" class="fit" type="submit">
          提交
        </q-btn>
        <q-btn v-else unelevated color="primary" class="fit" type="submit" disable>{{AUTH_STATE[form.state]  }}</q-btn>
      </div>
    </q-form>
  </page-layout>
</template>
<script setup>
import {ref,reactive} from 'vue'
import { useSelfStore } from 'stores/self';
import { useQuasar } from 'quasar';
import { Rules,formatMoney } from 'src/utils/tools';
import { api } from 'boot/axios'
import { useRoute, useRouter } from 'vue-router';
import { AUTH_STATE } from 'src/utils/const'
const route = useRoute()
const store = useSelfStore()
const router = useRouter()
const $q = useQuasar()

const form = reactive({
  state:'',
  audit_message:'',
  id:'',
  individual:1,
  business_door: null,
  business_door_url: null,
  sale_proxy: null,
  sale_proxy_url: null,
  sale_proxy_hand: null,
  sale_proxy_hand_url: null,
  identity_pros:null,
  identity_pros_url:null,
  identity_cons:null,
  identity_cons_url:null,
  identity_hand:null,
  identity_hand_url:null,
})
const images = [
  {key:'business_door',name:'店铺门头照片'},
  {key:'sale_proxy',name:'代销证照片'},
  {key:'sale_proxy_hand',name:'手持代销证照片'},
  {key:'identity_pros',name:'本人身份证人面像'},
  {key:'identity_cons',name:'本人身份证国徽面'},
  {key:'identity_hand',name:'手持身份证照片'},
]
api.getShopCertify().then(res=>{
  if(!res){
    return
  }
  for(let p in form){
    form[p] = res[p]
  }
})
function submit(){
  const {state,audit_message,...data} = form
  api.applyShopCertify(data).then((res)=>{
    $q.notify({type: 'positive',message: res.message||'发起成功' })
    store.refresh().then(res=>{
      router.back()
    })
  }).catch(e=>{
    $q.notify({type: 'negative',message: e.message})
  })
}
function uploaded(key,res){
  if(res?.data){
    form[key] = res.data.path
    form[key+'_url'] = res.data.file_url
  }
}
</script>
<style lang="scss" scoped>

</style>
