// 流程管理 - 流程设计 - 调用活动节点 - 右侧基本信息面板 - 调用元素 - 列表
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="searchLoading"
		:title="getI18n('system', 'SYSTEM_Process_CallActivitySelect')"
		:closable="true"
		:maskClosable="false"
		@cancel="onCloseButtonClick()"
		:width="'80%'"
	>
		<a-card>
			<a-row>
				<!-- microflow名称 -->
				<a-col :span="6" class="search-item">
					<label>{{
						getI18n('system', 'SYSTEM_Process_Name')
					}}</label>
					<a-input
						:placeholder="
							getI18n('common', 'Common_Please_Enter', [
								getI18n('system', 'SYSTEM_Process_Name'),
							])
						"
						v-model:value="processsListParams.name"
					/>
				</a-col>
				<a-col :span="6">
					<div class="button-wrapper">
						<!-- 查询按钮 -->
						<a-button
							:loading="searchLoading"
							type="primary"
							@click="onSearchClick"
							class="button-item"
						>
							<search-outlined v-if="!searchLoading" />
							{{ getI18n('common', 'Common_Search') }}
						</a-button>
						<!-- 重置按钮 -->
						<a-button
							:loading="searchLoading"
							@click="onResetClick"
							class="button-item"
						>
							<reload-outlined v-if="!searchLoading" />
							{{ getI18n('common', 'Common_Clear') }}
						</a-button>
					</div>
				</a-col>
			</a-row>
		</a-card>

		<a-card>
			<a-table
				style="margin-top: 1em"
				:rowKey="records => records.id"
				:columns="columns"
				:loading="tableLoading"
				:data-source="tableData"
				:bordered="true"
				:pagination="tablePagination"
				:row-selection="rowSelection"
				@change="onTableChange"
				:class="style['custom-table']"
			>
				<!-- 序号 -->
				<template #index="{ index }">{{ index + 1 }}</template>
			</a-table>
		</a-card>

		<template #footer>
			<a-button
				type="primary"
				:loading="searchLoading"
				@click="onSubmitButtonClick"
			>
				<save-outlined v-if="!searchLoading" />
				{{ getI18n('common', 'Common_Certain') }}
			</a-button>
			<a-button @click="onCloseButtonClick" :loading="searchLoading">
				<close-outlined v-if="!searchLoading" />
				{{ getI18n('common', 'Common_Remove') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import {
	ReloadOutlined,
	SearchOutlined,
	SaveOutlined,
	CloseOutlined,
} from '@ant-design/icons-vue'

import style from './index.module.less'
import { getI18n } from '@/utils/i18n'
import { defineComponent, ref, watch, reactive } from 'vue' //   computed, reactive PropType,

import { getProcessListApi } from '@/api/process-management'
import { GetProcessListParamsModel } from '@/api/process-management/model'
import { ProcessManagementModel } from '@/types/process'
import { AntdPaginationType, AntdTableChangePageType } from '@/types/antd'
import { PaginationData, RequestResult } from '@/utils/request/model'

const columns = [
	// 流程名称
	{
		title: getI18n('system', 'SYSTEM_Process_Name'),
		dataIndex: 'name',
		align: 'center',
		fixed: 'left',
		slots: { customRender: 'name' },
		width: '35%',
	},
	// 流程描述
	{
		title: getI18n('system', 'SYSTEM_Process_Remark'),
		dataIndex: 'remark',
		align: 'center',
		slots: { customRender: 'remark' },
		width: '35%',
	},
	// 流程标识
	{
		title: getI18n('system', 'SYSTEM_Process_Sign'),
		dataIndex: 'processKey',
		align: 'center',
		width: '15%',
	},
	// 更新时间
	{
		title: getI18n('system', 'SYSTEM_Process_UpdateTime'),
		dataIndex: 'updateTime',
		align: 'center',
		width: '15%',
	},
]

export default defineComponent({
	components: {
		// FormModal,
		// PlusOutlined,
		ReloadOutlined,
		SearchOutlined,
		SaveOutlined,
		CloseOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		//
		callActivitySelectKey: {
			type: String,
			required: true,
			default: '',
		},
		// 列表过滤此流程
		currentProcessDesignKey: {
			type: String,
			required: true,
			default: '',
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		const searchLoading = ref<boolean>(false)
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)

		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表参数
		const processsListParams = reactive<GetProcessListParamsModel>({
			current: 1,
			size: 10,
		})
		// 列表数据
		const tableData = ref<any[]>([])
		// 列表单选
		const tableSelectedRowKey = ref<(string | number)[]>([])
		const currentSelectedRowKey = ref<ProcessManagementModel>({})

		// 列表分页
		const tablePagination = reactive<AntdPaginationType>({
			current: 1,
			pageSize: 10,
			total: 0,
			showSizeChanger: true,
			showQuickJumper: true,
			pageSizeOptions: ['10', '20', '30', '40', '50'],
			showTotal: (total: number) =>
				getI18n('common', 'Common_Table_Total', [total.toString()]),
		})
		// 单选
		const rowSelection = ref({
			checkStrictly: false,
			type: 'radio',
			selectedRowKeys: tableSelectedRowKey,
			onChange: (key: (string | number)[], selectedRow) => {
				tableSelectedRowKey.value = key
				currentSelectedRowKey.value = Object.assign({}, selectedRow[0])
			},
		})
		// 获取列表
		const getProcessList = async () => {
			tableLoading.value = true
			const res: RequestResult<
				PaginationData<GetProcessListParamsModel>
			> = await getProcessListApi(processsListParams).finally(() => {
				tableLoading.value = false
				searchLoading.value = false
			})
			tableData.value = res.data.records.filter(
				f => f.processKey !== props.currentProcessDesignKey
			)
			tablePagination.current = res.data.current
			tablePagination.pageSize = res.data.size
			tablePagination.total = res.data.total
		}
		// 列表change事件
		const onTableChange = (page: AntdTableChangePageType) => {
			processsListParams.size = page.pageSize
			processsListParams.current = page.current
			getProcessList()
		}

		// 初始化数据
		const initData = () => {
			processsListParams.name = undefined
			processsListParams.size = 10
			processsListParams.current = 1
			tableData.value = []
			tableSelectedRowKey.value = []
			rowSelection.value.selectedRowKeys = []
		}

		// 搜索
		const onSearchClick = async () => {
			processsListParams.size = 10
			processsListParams.current = 1
			await getProcessList()
		}
		const onResetClick = async () => {
			processsListParams.name = undefined
			onSearchClick()
		}

		//  取消
		const onCloseButtonClick = () => {
			context.emit('confirm-add-modal-cancel')
		}

		// 确认
		const onSubmitButtonClick = () => {
			context.emit(
				'confirm-add-modal-refresh',
				currentSelectedRowKey.value
			)
		}

		watch(
			() => props.confirmModalVisible,
			async newValue => {
				confirmModalVisibleValue.value = newValue
				if (newValue) {
					await getProcessList()
					if (props.callActivitySelectKey) {
						let selectArr = tableData.value.filter(
							f => f.processKey === props.callActivitySelectKey
						)
						if (Array.isArray(selectArr) && selectArr.length) {
							tableSelectedRowKey.value = [selectArr[0].id || '']
							// 	context.emit('confirm-form-key-select', {
							// 		id: selectArr[0].name,
							// 		name: selectArr[0].id,
							// 	})
						}
					}
				} else {
					initData()
				}
			},
			{ deep: true, immediate: true }
		)

		return {
			confirmModalVisibleValue,
			style,
			columns,
			tableLoading,
			processsListParams,
			tableData,
			rowSelection,
			tablePagination,
			onTableChange,
			getI18n,

			searchLoading,
			onSearchClick,
			onResetClick,

			onSubmitButtonClick,
			onCloseButtonClick,
		}
	},
})
</script>