<template>
	<el-drawer v-model="visibleDialog" title="审批流程" :direction="direction" size="900" @close="handleCancel">
		<LeTable
			ref="tableRef"
			v-model:searchParams="tableOpts.searchParams"
			v-bind="tableOpts"
			v-model:curRow="tableOpts.curRow"
			v-model:checked-options="checkedColumns"
			:columns="activeColumns"
		>
			<template #statusSlot="scope">
				<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
				<status-indicator v-else pulse type="danger"></status-indicator>
			</template>
		</LeTable>
	</el-drawer>
</template>

<script setup>
import app from '@/api/system/app'
import { computed, nextTick, ref } from 'vue'
import { useTablePage } from '@/hooks/useTablePage'

const direction = ref('rtl')

const myProps = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	userIds: {
		type: Array,
		default: () => []
	}
})

// 同步值
const $myEmit = defineEmits(['update:modelValue', 'successFn'])


// 关闭按钮
const closeDrawer = () => {
	$myEmit('successFn')
	$myEmit('update:modelValue', false)
}

// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const { records: list, total } = await app.appPageApi(searchParams)
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		console.log('获取列表数据失败')
		tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'identification',
		label: '处理人',
		minWidth: 80
	},
	{
		prop: 'name',
		label: '转交人',
		minWidth: 100
	},
	{
		prop: 'secretKey',
		label: '原处理人',
		minWidth: 100
	},
	{
		prop: 'sort',
		label: '任务类型',
		minWidth: 80
	},
	{
		prop: 'sort1',
		label: '节点名称',
		minWidth: 80
	},
	{
		prop: 'sort2',
		label: '任务状态',
		minWidth: 80
	},
	{
		prop: 'sort3',
		label: '接收时间',
		minWidth: 80
	},
	{
		prop: 'sort4',
		label: '捎话',
		minWidth: 80
	},
	{
		prop: 'sort5',
		label: '审批意见',
		minWidth: 80
	}
]

const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
	{
		options: {
			showIndex: false,
			multipleSelect: false
		},
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)

nextTick(() => {
	queryList()
})

const visibleDialog = computed({
	get() {
		return myProps.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})
</script>

<style scoped></style>
