<script setup lang="ts">
import SignatureComponent from '@af-mobile-client-vue3/components/core/Signature/SignatureComponent.vue'
import FilePreview from '@af-mobile-client-vue3/components/data/FilePreview/index.vue'
import { runLogic } from '@af-mobile-client-vue3/services/api/common'
import { showToast, Button as VanButton, Dialog as VanDialog } from 'vant'
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

/** 生成合同接口返回的 data 结构 */
interface ContractDetail {
  f_signature_url?: string
  f_signature_path?: string
  f_contract_signature_id?: string
  f_contract_type?: string
  f_signature_location?: string
  [key: string]: unknown
}

// pdf的路径
const previewPath = ref('')
// pdf查看组件引用
const filePreviewRef = ref()
// 显示签字弹窗
const previewVisible = ref(false)
// 签字组件引用
const signatureRef = ref<any>()
// 生成的合同信息
const contractdetails = ref<ContractDetail>({})
const id = computed(() => useRoute().query.id?.toString() || '')

function openSign() {
  previewVisible.value = true
}
function onDialogCancel() {
  previewVisible.value = false
}
async function onSignSubmit() {
  const signData = await Promise.resolve(signatureRef.value?.getSignatureData?.())
  console.log('signData', signData)
  const resData = {
    f_signature_path: contractdetails.value.f_signature_path,
    f_contract_url: contractdetails.value.f_signature_url,
    f_contract_signature_id: contractdetails.value.f_contract_signature_id,
    f_signature_location: contractdetails.value.f_signature_location,
    f_contract_type: contractdetails.value.f_contract_type,
    image: signData,
  }
  runLogic('contractSignature', resData, 'af-revenue').then(() => {
    showToast('合同签字成功!')
    history.back()
  })
}

onMounted(() => {
  runLogic('getNoSignContract', { id: id.value }, 'af-revenue').then((res) => {
    contractdetails.value = res[0]
    const path = res[0].f_signature_url
    filePreviewRef.value.init({ path })
  })
})
</script>

<template>
  <div class="contract-container">
    <div>
      <FilePreview
        ref="filePreviewRef"
        :key="`pdf-${previewPath}`"
        style="height: 95vh"
      />
      <div class="bottom-bar">
        <VanButton type="primary" block @click="openSign">
          签字提交
        </VanButton>
      </div>
    </div>
    <VanDialog
      v-model:show="previewVisible"
      title="合同信息"
      show-cancel-button
      show-confirm-button
      style="max-width: 90vw; max-height: 40vh;"
      @confirm="onSignSubmit"
      @cancel="onDialogCancel"
    >
      <SignatureComponent ref="signatureRef" style="padding: 20px;" label="用户签字" :form-readonly="false" />
    </VanDialog>
  </div>
</template>

<style scoped lang="less">
.contract-container {
  height: 95vh;
  display: flex;
  flex-direction: column;
}

:deep(.contract-form-group) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.contract-form) {
  flex: 1;
  overflow: auto;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  z-index: 100;
}
</style>
