<template>
  <div class="cacp-pd-m" style="height: 100%">
    <cacp-complex-table
      class="cacp-pd-m cacp-search__content"
      :actions="tableActions"
      :data="list"
      :loading="loading"
      stripe
    >
      <template #title>
        <div class="title cacp-mb-m">表单流程关系列表</div>
      </template>
      <el-table-column label="表单代码" prop="formCode"></el-table-column>
      <el-table-column label="部门路径" prop="deptPath"></el-table-column>
      <el-table-column label="流程代码" prop="processCode"></el-table-column>
      <el-table-column label="流程范围" prop="processRange"></el-table-column>
    </cacp-complex-table>

    <workflow-relation-detail
      :visible="visible"
      :mode="mode"
      :info="info"
      @on-save="onSave"
      @on-close="onClose"
    ></workflow-relation-detail>
  </div>
</template>

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

import { SuccessResultCode, type TableAction, useLoading, useOperModal } from '@cacp/ui'
import * as apis from '@/apis/form'
import { type WorkflowRelation, initWorkflowRelation } from './types'

import WorkflowRelationDetail from './WorkflowRelationDetail.vue'

const route = useRoute()
const router = useRouter()
const { loading, setLoading } = useLoading(false)
const { mode, visible, info, setOperModal, clearOperModal } = useOperModal(initWorkflowRelation)

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: 'back',
    type: 'primary',
    limit: 'none',
    position: 'right',
    text: '返回',
    onclick: onBack
  },
  {
    key: 'delete',
    type: 'danger',
    limit: 'one',
    text: '删除',
    confirm: '确定要删除吗?',
    onclick: onDelete
  }
]

const list = ref<Array<WorkflowRelation>>([])
const formCode = ref<string>('')

onMounted(async () => {
  formCode.value = route.query.formCode as string
  await initData()
})

async function initData() {
  setLoading(true)

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

  setLoading(false)
}

function onInsert() {
  setOperModal('insert', true, Object.assign({}, initWorkflowRelation, { formCode: formCode.value }) )
}
async function onDelete(info: WorkflowRelation) {
  const res = await apis.deleteWorkflowRelation(info.formCode, info.deptId, info.processRange)
  if (res.code === SuccessResultCode) {
    ElMessage.success('删除成功')
    await initData()
  }
}
function onShow(info: WorkflowRelation) {
  setOperModal('show', true, info)
}

async function onSave(info: WorkflowRelation) {
  if (mode.value === 'insert') {
    const res = await apis.insertWorkflowRelation(info)
    if (res.code === SuccessResultCode) {
      ElMessage.success('保存成功')
      clearOperModal()
      await initData()
    }
  }
}
function onClose() {
  clearOperModal()
}
function onBack() {
  router.back()
}
</script>

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