<script setup lang="ts">
import AForm from '@/components/AForm/index.vue'
import { FormConfigType } from '@/components/AForm/type'
import { ToolbarConfigType } from '@/components/AToolbar/type'
import { ColumnConfigType } from '@/components/ATable/type'
import { StrAnyObj, StrAnyObjArr } from '@/typings'
import { getDoneListApi, getDonePageApi } from '@/api/flow/execute'
import { getChartApi } from '@/api/flow/definition'

const modules = import.meta.glob('@/views/**/*.vue')

const queryRef = ref<InstanceType<typeof AForm>>()

const showQuery = ref<boolean>(true)
const pageTotal = ref<number>(0)

const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
const tableData = ref<StrAnyObjArr>([])

const chartVisible = ref(false)
const imgUrl = ref('')

const doneListVisible = ref(false)
const doneList = ref([])

const handleVisible = ref(false)
const handleComponent = ref(null)
const businessId = ref(null)

const queryConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'nodeName',
    label: '节点名称'
  }
  // {
  //   type: 'select',
  //   prop: 'flowStatus',
  //   label: '流程状态',
  //   option: [
  //     {
  //       key: '0',
  //       label: '待发起'
  //     },
  //     {
  //       key: '1',
  //       label: '进行中'
  //     },
  //     {
  //       key: '2',
  //       label: '已完成'
  //     },
  //     {
  //       key: '3',
  //       label: '已驳回'
  //     }
  //   ]
  // },
  // {
  //   type: 'datePicker',
  //   prop: 'createTime',
  //   label: '创建时间',
  //   datePickerType: 'date',
  //   format: 'YYYY-MM-DD',
  //   valueFormat: 'YYYY-MM-DD 00:00:00'
  // }
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getPage()
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    prop: 'flowName',
    label: '流程名称'
  },
  {
    prop: 'nodeName',
    label: '节点名称'
  },
  {
    prop: 'flowStatus',
    label: '流程状态',
    formatter: (row) => {
      switch (row.flowStatus) {
        case '0':
          return '待提交'
        case '1':
          return '审批中'
        case '2':
          return '审批通过'
        case '4':
          return '驳回'
        case '6':
          return '撤销'
        case '7':
          return '取回'
        default:
          return ''
      }
    }
  },
  {
    prop: 'createTime',
    label: '审批时间'
  },
  {
    width: 250,
    handleConfig: [
      {
        text: '流程明细',
        click(row) {
          const path = `/src/views/${row.formPath}`
          const module = modules[path]
          if (!module) {
            ElMessage.error(`未知流程表单路径：${path}`)
            return
          }
          businessId.value = row.businessId
          handleComponent.value = markRaw(defineAsyncComponent(module))
          handleVisible.value = true
        }
      },
      {
        text: '审批记录',
        click(row) {
          getDoneListApi(row.instanceId).then((resp) => {
            doneListVisible.value = true
            doneList.value = resp
          })
        }
      },
      {
        text: '流程图',
        click(row) {
          getChartApi(row.instanceId).then((resp) => {
            chartVisible.value = true
            imgUrl.value = 'data:image/gif;base64,' + resp
          })
        }
      }
    ]
  }
]

const doneListColumnConfig: ColumnConfigType[] = [
  {
    prop: 'nodeName',
    label: '审批节点'
  },
  {
    prop: 'targetNodeName',
    label: '跳转节点'
  },
  {
    prop: 'approver',
    label: '审批人'
  },
  {
    prop: 'createTime',
    label: '审批时间'
  },
  {
    prop: 'type',
    label: '审批类型',
    formatter(row) {
      switch (row.flowStatus) {
        case '0':
          return '待提交'
        case '1':
          return '审批中'
        case '2':
          return '审批通过'
        case '4':
          return '驳回'
        case '6':
          return '撤销'
        case '7':
          return '取回'
        default:
          return ''
      }
    }
  },
  {
    prop: 'message',
    label: '审批意见',
    showOverflowTooltip: true
  }
]

onMounted(() => {
  getPage()
})

function getPage() {
  getDonePageApi(queryData.value).then((resp) => {
    tableData.value = resp.records
    pageTotal.value = resp.total
  })
}
</script>

<template>
  <div>
    <el-card v-if="showQuery">
      <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="6"></a-form>
    </el-card>

    <a-table
      :data="tableData"
      :page-total="pageTotal"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:showQuery="showQuery"
      v-model:page-num="queryData.pageNum"
      v-model:page-size="queryData.pageSize"
      @page-num-change="getPage"
      @page-size-change="getPage"
    >
    </a-table>

    <a-dialog title="" v-model="handleVisible" width="1200px" :footer="false">
      <component :is="handleComponent" :businessId="businessId" />
    </a-dialog>

    <a-dialog title="流程图" v-model="chartVisible" width="1200px" :footer="false">
      <img :src="imgUrl" width="100%" style="margin: 0 auto" alt="" />
    </a-dialog>

    <a-dialog title="审批记录" v-model="doneListVisible" width="1000px" :footer="false">
      <a-table :data="doneList" :column-config="doneListColumnConfig" :card="false"></a-table>
    </a-dialog>
  </div>
</template>
