<script setup lang="ts">
import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
import { useStepStore } from '@af-mobile-client-vue3/stores/modules/step'
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const configName = 'userinfoContractCRUD'
const serviceName = 'af-system'
const stepStore = useStepStore()
const workflowId = ref(useRoute().query.workflowId?.toString() || stepStore.getWorkflowId() || '')
const userId = computed(() => useRoute().query.userId?.toString() || '')
function addContract() {
  router.push({
    name: 'addcontract',
    query: {
      userId: userId.value,
    },
  })
}
function previewContract(res) {
  router.push({
    name: 'viewContract',
    query: {
      previewPath: res.c_f_signature_url,
    },
  })
}
</script>

<template>
  <XCellList
    :config-name="configName"
    :service-name="serviceName"
    :custom-add="true"
    :fix-query-form="{
      c_f_userinfo_id: userId,
      c_f_process_id: workflowId,
    }"
    @add="addContract"
    @preview-contract="previewContract"
  />
</template>
