<template>

	<div>
		<el-card :body-style="cardBodyStyle">
			<el-button type="primary" @click="refresh">刷新</el-button>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row>
				<el-table-column label="操作" header-align="center" align="center" width="80">
					<template #default="scope">
						<el-button type="warning" plain size="small" circle @click="handleDetail( scope.row )"><el-icon>
								<Edit />
							</el-icon></el-button>
						<!-- <el-button type="danger" plain size="small" circle
						@click="handleDelete( scope.row )"><el-icon>
							<Delete />
						</el-icon></el-button> -->
					</template>
				</el-table-column>
				<el-table-column prop="flowName" label="流程名称" min-width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="title" label="标题" min-width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="nodeName" label="当前节点" min-width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="sendTime" label="发起时间" min-width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>

				<!-- <el-table-column prop="workId" label="workId" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="trackId" label="trackId" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="subjectionId" label="subjectionId" width="200" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column> -->
				<el-table-column prop="flowId" label="流程Key" min-width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>

			</el-table>
		</el-card>
    <el-card :body-style="cardBodyStyle">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                     background="background" layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
	</div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  nextTick, onActivated
} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import style from '@/tools/style'
import {ElMessage} from "element-plus";
	const cardBodyStyle = ref(style.card)

	onMounted(() => {
		getTableData()
	})

  onActivated(() => {
    getTableData()
  })

	const refresh = () => {
		currentPage.value = 1
		getTableData()
	}


	const tableData = ref([])
	const getTableData = () => {
    var url = 'workflow/process/doneList'
    var param = {
      page: currentPage.value,
      rows: pageSize.value
    }
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
				// ElMessage.success('操作成功！' + response.data.msg)
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}


	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([10, 20, 30])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}

const handleDetail = (row) => {
  sessionStorage.setItem('workflowQuery', JSON.stringify({
    flowId: row.flowId,
    workId: row.workId,
    trackId: row.trackId,
    subjectionId: row.subjectionId,
    type: '2',
    date:new Date().getTime()
  }))

  proxy.$router.push({
    path: '/workflow/detail',
  })
}
</script>