<!-- *
 * 请讲此组件放进你的项目中进行使用
 * 此处是处理与业务相关的入口处，是你需要进行按照业务进行修改的地方
 * 如 获取数据 提交表单等等
 *
 * 如果需要使用anchor锚点功能 请在component中 useAnchor:true
 * 并根据页面样式高度 自定义在样式中设置锚点滚动盒子的高度
 * 示例：
 :deep(.anchor-scroll-box) {
  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - 210px) !important;
}
-->

<script setup lang="tsx">
import { ref, unref, watch, shallowRef } from 'vue'
import FormCommon from './templates/FormCommon.vue'
import FormDeptAuth from './templates/FormDeptAuth.vue'
import ButtonBottom from '../../ButtonBottom.vue'
import {
  getFormConfig,
  getFormData
} from './api/dynamic-form'
// 以下是业务接口 按需进行修改 【获取详情 新增 修改】
// @ts-ignore
import { findById, updateForm, addForm } from '@/api/xxx'

// 如果需要集成按钮部分
import { useRouter } from 'vue-router'

const { go } = useRouter()

const props = defineProps({
  // 查询详情用的参数
  findId: {
    type: String,
    default: ''
  },
  // 表单是否可编辑模式
  formMode: {
    type: String,
    default: ''
  }
})

// 详情
const detail = ref()
const getDeatil = async () => {
  const { data } = await findById({ reportNo: props.findId })
  detail.value = data

  formType.value = formTypeEnum[data.pageTemplate]

  getFormConfigMethod()
}
watch(
  () => props.findId,
  () => {
    getDeatil()
  },
  {
    immediate: true
  }
)

//**** 表单相关
const formType = shallowRef(FormCommon)
// 多种表单类型
const formTypeEnum = {
  custom: FormCommon,
  auth: FormDeptAuth
}
// 动态表单数据 信息获取
const templateForm = ref([])
const templateFormData = ref()
const getFormConfigMethod = async () => {
  // 1. 获取表单数据
  const { data: formData } = await getFormData({
    tableName: detail.value.tableName,
    key: 'id',
    value: detail.value.dataId
  })
  templateFormData.value = formData
  // 2. 获取表单配置
  const { data } = await getFormConfig({ leadServiceTableId: detail.value.dataType })
  templateForm.value = data
}
const formRef = ref()

// 表单提交操作
const submit = async () => {
  const write = unref(formRef)
  const data = await write?.submit()
  const { tableName, xxx } = unref(detail)

  let res
  if (templateFormData.value) {
    res = await updateData(tableName, 'task_no', props.findId, data)
  } else res = await addData(tableName, data)
  const { success } = res

  // showBtn为true 在本组件内处理状态
  // 否则将状态返回给调用者
  // 请自行选择
  if (props.showBtn) {
    if (success) close()
  } else {
    return success
  }
}

const close = () => {
  go(-1)
}

defineExpose({
  submit
})
</script>

<template>
  <component
    :is="formType"
    ref="formRef"
    :templateForm="templateForm"
    :templateFormData="templateFormData"
    :formMode="formMode"
  >
    <ButtonBottom
      v-if="formMode !== 'look'"
      :hide-save="formMode === 'look'"
      :cancel-text="'取消'"
      @close="close"
      @submit="submit"
    />
  </component>
</template>

<style lang="less" scoped>
.dynamic-form {
  position: relative;

  &:has(.button-bottom) {
    padding-bottom: 60px;
  }
}
</style>
