<template>
  <div>
    <cacp-search-layout class="typical-six">
      <template #search>
        <cacp-search-panel-layout :model="state.model" label-position="left" :gutter="30">
          <el-form-item label="应用代码" prop="appCode">
            <el-input v-model="state.model.appCode" placeholder="" />
          </el-form-item>
          <el-form-item label="人员代码" prop="flowCode">
            <el-input v-model="state.model.flowCode" placeholder="" />
          </el-form-item>
					<el-form-item label="流程名称" prop="flowName">
            <el-input v-model="state.model.flowName" placeholder="" />
          </el-form-item>
					<el-form-item label="流程定义描述" prop="flowDescription">
            <el-input v-model="state.model.flowDescription" placeholder="" />
          </el-form-item>
          <template #buttonGroup>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button type="info" @click="onReset">重置</el-button>
          </template>
        </cacp-search-panel-layout>
      </template>
      <cacp-complex-table
        :title-isinline="true"
        :data="data"
        :actions="actions"
        :secondary-col-span="24"
        :action-space="20"
        table-layout="fixed"
        :actions-width="60"
        :loading="loading"
      >
        <el-table-column property="appCode" label="应用代码" />
        <el-table-column property="flowCode" label="流程定义代码" />
        <el-table-column property="flowName" label="流程名称" />
        <el-table-column property="flowDescription" label="流程定义描述" />
        <el-table-column label="操作" min-width="60" fixed="right">
          <template #default="{ $index }">
            <template>
              <el-button link type="primary" @click="onDel($index)">删除</el-button>
              <el-button link type="primary" @click="onEdit($index)">编辑</el-button>
            </template>
          </template>
        </el-table-column>
      </cacp-complex-table>
    </cacp-search-layout>
    <add-flow
      :visible="visible"
      :mode="mode"
      :info="info"
      @on-save="onSave"
      @on-close="onClose"
    ></add-flow>
  </div>
</template>
  <script lang="ts" setup>
  import { SuccessResultCode, useLoading, type TableAction, type HeaiMessageTypeInfo, useOperModal } from '@cacp/ui'
  import { ElMessage } from 'element-plus'
  import { onMounted, reactive, ref } from 'vue'
  import { type FlowMangeDataType, flowMangeDataType } from './types'
  import AddFlow from './AddFlow.vue'
  
  const data = ref<FlowMangeDataType[]>([])
  const { loading, setLoading } = useLoading()

  const state = reactive({
    model: {
    	appCode: '',
      flowCode: '',
			flowName: '',
			flowDescription: '',
      stateList: [],
      eventList: []
    }
  })
  const { mode, visible, info, setOperModal, clearOperModal } = useOperModal(flowMangeDataType)

  const actions: TableAction[] = [
    {
      key: 'show',
      type: 'default',
      limit: 'one',
      text: '查看',
      onclick: onShow
    },
    {
      key: 'insert',
      type: 'primary',
      limit: 'none',
      position: 'left',
      text: '新建',
      onclick: onInsert
    },
    {
      key: 'delete',
      type: 'danger',
      limit: 'one',
      text: '删除',
      confirm: '确定要删除吗?',
      onclick: onDelete
    }
  ]

  function onInsert() {
    setOperModal('insert', true, flowMangeDataType)
  }

  async function onDelete(info: FlowMangeDataType) {
    // const res = await apis.deleteMessageType(info.typeCode)
    // if (res.code === SuccessResultCode) {
    //   const idx = list.value.findIndex((item) => item.typeCode === info.typeCode)
    //   list.value.splice(idx, 1)
    //   ElMessage.success('删除成功')
    // }
  }
  
  function onShow(info: FlowMangeDataType) {
    setOperModal('show', true, info)
  }

  async function onSave(info: FlowMangeDataType) {
    if (mode.value === 'insert') {
      // const res = await apis.insertMessageType(info)
      // if (res.code === SuccessResultCode) {
      //   list.value.push(info)
      //   ElMessage.success('保存成功')
      //   clearOperModal()
      // }
    }
  }
  
  function onClose() {
    clearOperModal()
  }

  const onQuery = () => {}

  const onReset = () => {}

  const onDel = (num: number) => {}
  
  const onEdit = (num: number) => {}

  </script>
  