<script setup lang="ts">
import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
import { runLogic } from '@af-mobile-client-vue3/services/api/common'
import { showToast, Popup as VanPopup } from 'vant'
import { ref } from 'vue'

const emit = defineEmits(['signSuccess', 'photoQualityChange'])
const loading = ref(false)
const signDetailFormRef = ref(null)
const form = ref({})
const showContractSignPopup = ref(false)

function init(contractPhoto: any, contractSign?: any) {
  form.value = {
    Images: contractPhoto,
  }
  showContractSignPopup.value = true
}

async function submitPhoto(formData: any) {
  if (loading.value)
    return
  loading.value = true
  const res: any = await runLogic('contractSignLogic', formData, 'af-safecheck')
  if (res?.code === 200 && res?.photo?.length > 0) {
    emit('signSuccess', res?.photo)
    showToast('合同签名成功')
    loading.value = false
    showContractSignPopup.value = false
  }
  else {
    showToast('合同签名失败')
    loading.value = false
  }
}

defineExpose({ init })
</script>

<template>
  <VanPopup
    v-model:show="showContractSignPopup"
    position="bottom"
    :style="{ height: '70vh', width: '100vw' }"
    closeable
    @close="showContractSignPopup = false"
  >
    <div class="popup-header">
      <div class="popup-title">
        签字
      </div>
    </div>
    <XForm
      ref="signDetailFormRef"
      config-name="signDetailForm"
      :show-tab-header="false"
      :form-data="form"
      service-name="af-safecheck"
      :is-group-form="true"
      mode="新增"
      @on-submit="submitPhoto"
      @photo-quality-change="(type: string) => emit('photoQualityChange', type)"
    />
  </VanPopup>
</template>

<style scoped lang="less">
.popup-header {
  padding: 16px;
  border-bottom: 1px solid #ebedf0;
  background: #fff;

  .popup-title {
    font-size: 16px;
    font-weight: 600;
    color: #323233;
    text-align: center;
  }
}
</style>
