<template>
  <div class="send-index-container">
    <vxe-grid
      ref="tableRef"
      v-bind="gridOptions"
      class="custom-grid"
    >
      <template #operate="{ row }">
        <vxe-button type="text" status="primary" @click="sendFlow(row)">
          发起流程
        </vxe-button>
      </template>
    </vxe-grid>
    <a-drawer
      v-model:open="isShowDrawer"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      title="发起流程"
      placement="right"
      width="80%"
      @close="handleCloseDrawer()"
      >
      <Send ref="refSend" @success="handleSuccess"></Send>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted,nextTick } from 'vue'
import type { VxeGridProps, VxeGridInstance } from 'vxe-table'
import { listDefinition } from '/@/components/Process/api/definition'
import Send from './Send.vue'

interface ProcessDefinition {
  id: string
  name: string
  deploymentId: string
  formName: string
  version: number
  isLastVersion: boolean
  suspensionState: '1' | '2'
  deploymentTime: string
}

interface SearchParams {
  pageNo: number
  pageSize: number
}

interface PageResult {
  total: number
  records: ProcessDefinition[]
}

// 响应式数据
const tableRef = ref<VxeGridInstance>()
const loading = ref(false)
const refSend = ref()

const isShowDrawer = ref(false)

const searchParams = ref<SearchParams>({
  pageNo: 1,
  pageSize: 10
})

// 状态映射
const STATUS_MAP = {
  '1': '已发布',
  '2': '未发布'
} as const

// 表格配置
const gridOptions = reactive<VxeGridProps<ProcessDefinition>>({
  border: true,
  loading: loading,
  rowConfig: {
    keyField: 'id',
    isHover: true
  },
  columnConfig: {
    resizable: true
  },
  checkboxConfig: {
    reserve: true,
    highlight: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100]
  },
  toolbarConfig: {
    refresh: {
      query: () => handleRefresh()
    },
    zoom: true,
    custom: true,
    export: true,
    print: true
  },
  columns: [
    { 
      type : 'seq', 
      width: 50, 
      fixed: 'left'
    },
    { 
      title: '流程名称', 
      field: 'name', 
      align: 'left', 
      minWidth: 160,
      showOverflow: 'tooltip'
    },
    { 
      title: '流程编号', 
      field: 'deploymentId', 
      align: 'left', 
      minWidth: 200,
      showOverflow: 'tooltip'
    },
    { 
      title: '业务表单', 
      field: 'formName', 
      align: 'center', 
      width: 120,
      visible: false
    },
    { 
      title: '流程版本', 
      field: 'version', 
      align: 'center', 
      width: 100,
      formatter: ({ cellValue }) => `v${cellValue}`
    },
    { 
      title: '最新版本', 
      field: 'isLastVersion', 
      align: 'center', 
      width: 100,
      formatter: ({ cellValue }) => cellValue ? '是' : '否'
    },
    { 
      title: '状态', 
      field: 'suspensionState', 
      align: 'center', 
      width: 100,
      formatter: ({ cellValue }) => STATUS_MAP[cellValue] || cellValue
    },
    { 
      title: '部署时间', 
      field: 'deploymentTime', 
      align: 'center', 
      width: 180,
      formatter: ({ cellValue }) => {
        if (!cellValue) return '-'
        return new Date(cellValue).toLocaleString('zh-CN')
      }
    },
    { 
      title: '操作', 
      align: 'center', 
      width: 120, 
      fixed: 'right', 
      slots: { default: 'operate' }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'result',
      total: 'page.total'
    },
    ajax: {
      query: ({ page }) => fetchPageList(page.currentPage, page.pageSize)
    }
  }
})

// 方法
const fetchPageList = async (currentPage: number, pageSize: number): Promise<{ page: { total: number }, result: ProcessDefinition[] }> => {
  loading.value = true
  try {
    searchParams.value.pageNo = currentPage
    searchParams.value.pageSize = pageSize
    
    const result = await listDefinition({
      pageNum: searchParams.value.pageNo,
      pageSize: searchParams.value.pageSize
    })
    
    return {
      page: {
        total: result.total || 0
      },
      result: result.records || []
    }
  } catch (error) {
    console.error('获取流程定义列表失败:', error)
    return {
      page: { total: 0 },
      result: []
    }
  } finally {
    loading.value = false
  }
}

const sendFlow = async (row: ProcessDefinition) => {
  isShowDrawer.value = true
  await nextTick()
  refSend.value.iniData(row)
}

const handleRefresh = async () => {
  if (tableRef.value) {
    await tableRef.value.commitProxy('query')
  }
}

const initData = async () => {
  await fetchPageList(1, 10)
}

const handleSuccess =() => {
  isShowDrawer.value = false
}

const handleCloseDrawer =() => {
  isShowDrawer.value = false
}



// 暴露方法给父组件
defineExpose({
  initData,
  refresh: handleRefresh
})

// 生命周期
onMounted(() => {
  initData()
})
</script>

<style scoped>
.send-index-container {
  margin: 10px;
  height: 100%;
}

.custom-grid {
  height: 100%;
}

:deep(.vxe-table--body-wrapper) {
  scrollbar-width: thin;
}

:deep(.vxe-table--body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.vxe-table--body-wrapper::-webkit-scrollbar-thumb) {
  background: #c1c1c1;
  border-radius: 3px;
}
</style>