<template>
  <div class="cacp-pd-m" style="height: 100%">
    <cacp-complex-table
      class="cacp-pd-m cacp-search__content"
      :actions="tableActions"
      :secondary-colSpan="24"
      :data="list"
      :loading="loading"
      stripe
    >
      <template #title>
        <div class="title cacp-mb-m">表单类型列表</div>
      </template>
      <el-table-column label="应用代码" prop="appCode"></el-table-column>
      <el-table-column label="表单代码" prop="typeCode"></el-table-column>
      <el-table-column label="表单名称" prop="typeName"></el-table-column>
      <el-table-column label="表单分类" prop="typeCategory"></el-table-column>
      <el-table-column label="代字" prop="typeSn"></el-table-column>
    </cacp-complex-table>

    <form-type-detail
      :visible="visible"
      :mode="mode"
      :info="info"
      @on-save="onSave"
      @on-close="onClose"
      @on-closed="onClosed"
    ></form-type-detail>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

import { SuccessResultCode, type TableAction, useLoading, useOperModal } from '@cacp/ui'
import * as apis from '@/apis/form'
import { type FormType, initFormType } from './types'
import FormTypeDetail from './dialog.vue'

const { loading, setLoading } = useLoading(false)
const { mode, visible, info, setOperModal, clearOperModal } = useOperModal(initFormType)

const tableActions: Array<TableAction> = [
  {
    key: 'show',
    type: 'default',
    limit: 'one',
    text: '查看',
    onclick: onShow
  },
  {
    key: 'insert',
    type: 'primary',
    limit: 'none',
    position: 'left',
    text: '新建',
    onclick: onInsert
  },
  {
    key: 'update',
    type: 'warning',
    limit: 'one',
    text: '修改',
    onclick: onUpdate
  },
  {
    key: 'delete',
    type: 'danger',
    limit: 'one',
    text: '删除',
    confirm: '确定要删除吗?',
    onclick: onDelete
  },
  {
    key: 'setting',
    type: 'warning',
    limit: 'one',
    text: '流程',
    onclick: onWorkflow
  }
]

const router = useRouter()
const list = ref<Array<FormType>>([])

onMounted(async () => {
  await initData()
})

async function initData() {
  setLoading(true)

  const res = await apis.getFormTypeList()
  if (res.code === SuccessResultCode && res.data) {
    list.value = res.data
  }

  setLoading(false)
}

function onInsert() {
  setOperModal('insert', true, initFormType)
}
function onUpdate(info: FormType) {
  setOperModal('update', true, info)
}
function onWorkflow(info: FormType) {
  router.push({
    path: 'workflow-relation',
    query: {
      formCode: info.typeCode
    }
  })
}

async function onDelete(info: FormType) {
  const res = await apis.deleteFormType(info.typeCode)
  if (res.code === SuccessResultCode) {
    ElMessage.success('删除成功')
    await initData()
  }
}
function onShow(info: FormType) {
  setOperModal('show', true, info)
}

async function onSave(info: FormType) {
  if (mode.value === 'insert') {
    const res = await apis.insertFormType(info)
    if (res.code === SuccessResultCode) {
      ElMessage.success('保存成功')
      onClose()
      await initData()
    }
  } else if (mode.value === 'update') {
    const res = await apis.updateFormType(info)
    if (res.code === SuccessResultCode) {
      ElMessage.success('保存成功')
      onClose()
      await initData()
    }
  }
}

function onClose() {
  visible.value = false
}

function onClosed(){
  clearOperModal()
}
</script>

<style scoped lang="less"></style>
