<template>
  <page-layout>
    <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">
      <q-list class="bg-white q-mt-sm" separator>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>姓名</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.real_name"
              :rules="[Rules.required]"
              :disable="form.state==1 || form.state==3"
              borderless
              dense
              clearable
              placeholder="请填写真实姓名"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>邮箱</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.email"
              :rules="[Rules.required]"
              :disable="form.state==1 || form.state==3"
              type="email"
              borderless
              clearable
              dense
              placeholder="请填写邮箱地址"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>电话</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.phone"
              :rules="[Rules.required,Rules.phone]"
              :disable="form.state==1 || form.state==3"
              borderless
              clearable
              dense
              placeholder="请填写手机号"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>支付宝</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.alipay"
              :rules="[Rules.required]"
              :disable="form.state==1 || form.state==3"
              borderless
              clearable
              dense
              placeholder="请填写支付宝账号"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>店铺地址</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.shop_addr"
              :rules="[Rules.required]"
              :disable="form.state==1 || form.state==3"
              borderless
              dense
              clearable
              placeholder="请填写店铺地址"/>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>门头照</q-item-label>
          </q-item-section>
          <q-item-section>
            <UploadFile
              :multiple="false"
              :disable="form.state==1 || form.state==3"
              url="seller/material/upload_other"
              accept="image/*"
              field-name="file"
              flat
              square
              style="width:100px;"
              @uploaded="(res)=>uploaded('business_door',res)">
              <template #header-content>
                <q-btn v-if="!form.business_door_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.business_door_url" no-spinner width="100px" height="100px" fit="cover"/>
                </div>
              </template>
            </UploadFile>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>经营场所/店内照</q-item-label>
          </q-item-section>
          <q-item-section>
            <UploadFile
              :multiple="false"
              :disable="form.state==1 || form.state==3"
              url="seller/material/upload_other"
              accept="image/*"
              field-name="file"
              flat
              square
              style="width:100px;"
              @uploaded="(res)=>uploaded('business_site',res)">
              <template #header-content>
                <q-btn v-if="!form.business_site_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.business_site_url" no-spinner width="100px" height="100px" fit="cover"/>
                </div>
              </template>
            </UploadFile>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>营业执照</q-item-label>
          </q-item-section>
          <q-item-section>
            <UploadFile
              :multiple="false"
              :disable="form.state==1 || form.state==3"
              url="seller/material/upload_other"
              accept="image/*"
              field-name="file"
              flat
              square
              style="width:100px;"
              @uploaded="(res)=>uploaded('sale_proxy',res)">
              <template #header-content>
                <q-btn v-if="!form.sale_proxy_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.sale_proxy_url" no-spinner width="100px" height="100px" fit="cover"/>
                </div>
              </template>
            </UploadFile>
          </q-item-section>
        </q-item>

      </q-list>
      <div class="q-ma-md">
        <q-btn v-if="form.state!=1 && form.state!=3"
          unelevated color="primary" class="fit" type="submit">确认</q-btn>
      </div>
    </q-form>

    <template #footer>
      <q-footer v-if="form.state==1 || form.state==3" class="bg-white">
        <div class="row">
          <q-btn
          unelevated square
          color="white"
          text-color="dark"
          :class="form.state==3?'col':'col-5'"
          type="submit" disable>状态：{{PAY_CHANNEL_STATE[form.state]  }}</q-btn>
          <template v-if="form.state==1">
            <q-btn
              v-if="form.opened==0"
              class="col-7 q-py-sm"
              unelevated
              square
              color="primary"
              @click="toggleOpen"
            >
              <span class="safe-padding-bottom">启用渠道</span>
            </q-btn>
            <q-btn
              v-else
              class="col-7 q-py-sm"
              unelevated
              square
              color="accent"
              @click="toggleOpen"
            >
              <span class="safe-padding-bottom">关闭渠道</span>
            </q-btn>
          </template>
        </div>
      </q-footer>
    </template>
  </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 { PAY_CHANNEL_STATE } from 'src/utils/const'
const route = useRoute()
const router = useRouter()
const store = useSelfStore()
const $q = useQuasar()

const form = reactive({
  state:'',
  audit_message:'',
  id:'',
  pay_type: route.params.payType,
  pay_channel: route.params.payChannel,
  opened: false,
  real_name: '',
  email: '',
  phone:'',
  alipay:'',
  shop_addr:'',
  business_door: null,
  business_door_url: null,
  business_site: null,
  business_site_url: null,
  sale_proxy: null,
  sale_proxy_url: null,
})
function load(){
  api.getPayChannel({
    pay_type: route.params.payType,
    pay_channel: route.params.payChannel
  }).then(res=>{
    if(!res){
      return
    }
    for(let p in form){
      form[p] = res[p]
    }
  })
}
load()

function submit(){
  const {state,audit_message,...data} = form
  api.setPayChannel(data).then((res)=>{
    $q.notify({type: 'positive',message: res.message||'发起成功' })
    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
  }
}

function toggleOpen(){
  $q.dialog({
    message: '确定'+(form.opened==0?'启用渠道':'关闭渠道')+'吗？',
    cancel: true
  }).onOk(()=>{
    api.uploadPayChannel({id:form.id,opened: form.opened==0?1:0}).then((res)=>{
      load();
      $q.notify({type: 'positive',message: res.message||'操作成功' })
    }).catch(e=>{
      $q.notify({type: 'negative',message: e.message})
    })
  })
}
</script>
<style lang="scss" scoped>

</style>
