// 连接器弹框
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="tableLoading"
		:title="getI18n('system', 'SYSTEM_Process_SelectServiceConfiguration')"
		:closable="true"
		:maskClosable="false"
		@cancel="$emit('confirm-add-modal-cancel')"
		:width="'80%'"
	>
		<a-card>
			<!-- 搜索 -->
			<a-row>
				<!-- 服务名称 -->
				<a-col :span="6" class="search-item">
					<label>{{
						getI18n('system', 'SYSTEM_Process_ServiceName')
					}}</label>
					<a-input
						style="width: 100%"
						:maxLength="100"
						:placeholder="
							getI18n('common', 'Common_Please_Enter', [
								getI18n('system', 'SYSTEM_Process_ServiceName'),
							])
						"
						v-model:value="connectorsParams.name"
					/>
				</a-col>
				<a-col span="6">
					<div class="button-wrapper">
						<!-- 查询按钮 -->
						<a-button
							type="primary"
							class="button-item"
							@click="getProcessConnectors()"
							:loading="searchLoading"
						>
							<SearchOutlined />
							{{ getI18n('common', 'Common_Search') }}
						</a-button>
						<!-- 重置按钮 -->
						<a-button
							@click="onResetClick()"
							class="button-item"
							:loading="searchLoading"
						>
							<ReloadOutlined />
							{{ getI18n('common', 'Common_Clear') }}
						</a-button>
					</div>
				</a-col>
			</a-row>

			<!-- 服务列表 -->
			<a-row>
				<a-col :span="24">
					<div style="display: flex; justify-content: end">
						<!-- 新增按钮 -->
						<a-button type="primary" @click="onConnectorsAddClick">
							<plus-outlined />
							{{ getI18n('common', 'Common_Add') }}
						</a-button>
					</div>

					<a-table
						:rowKey="record => record.id"
						:columns="columns"
						:loading="tableLoading"
						:data-source="tableData"
						:bordered="true"
						:pagination="false"
						:row-selection="rowSelection"
						:scroll="{ y: 500 }"
						style="margin-top: 1em; vertical-align: middle"
					>
						<!-- 序号 -->
						<template #index="{ index }">
							<span>{{ index + 1 }}</span>
						</template>

						<!-- 操作 -->
						<template #operation="{ record }">
							<!-- 编辑 -->
							<a
								href="javascript:;"
								@click="() => onConnectorsEditClick(record.id)"
								>{{ getI18n('common', 'Common_Edit') }}</a
							>
							<!-- 删除 -->
							<a-popconfirm
								:title="getI18n('common', 'Common_Delete_Tips')"
								@confirm="onConnectorsDeleteClick(record.id)"
							>
								<a
									href="javascript:;"
									class="textC-red"
									style="margin-left: 8px"
									>{{ getI18n('common', 'Common_Delete') }}</a
								>
							</a-popconfirm>
						</template>
					</a-table>
				</a-col>
			</a-row>

			<!-- 右侧列表 -->
		</a-card>
		<template #footer>
			<!-- 确定 -->
			<a-button
				type="primary"
				:loading="tableLoading"
				@click="onSubmitButtonClick"
			>
				<save-outlined />
				{{ getI18n('common', 'Common_Certain') }}
			</a-button>
			<!-- 取消 -->
			<a-button @click="onResetButtonClick" :loading="tableLoading">
				<close-outlined />
				{{ getI18n('common', 'Common_Remove') }}
			</a-button>
		</template>
	</a-modal>

	<!-- 新增/编辑 -->
	<design-connectors-edit-modal
		:confirm-modal-visible="confirmEditVisible"
		:connectors-id="connectorsId"
		@connectors-add-modal-refresh="onEditOkClick"
		@connectors-add-modal-cancel="onEditCancelClick"
	/>
</template>
<script lang="ts">
import { getI18n } from '@/utils/i18n'
import { message } from 'ant-design-vue'
import { defineComponent, ref, watch, reactive } from 'vue' // PropType
import style from './index.module.less'
import DesignConnectorsEditModal from '@/views/design/components/components/DesignConnectorsEditModal/DesignConnectorsEditModal.vue'

import { ConnectorsModel } from '@/types/connectors'
import {
	GetProcessConnectorsParamsModel,
	DeleteProcessConnectorsParamsModel,
} from '@/api/process-connectors/model'
import {
	getProcessConnectorsApi,
	deleteProcessConnectorsApi,
} from '@/api/process-connectors'
import {
	CloseOutlined,
	SaveOutlined,
	PlusOutlined,
	ReloadOutlined,
	SearchOutlined,
} from '@ant-design/icons-vue'

const columns = [
	// 序号
	{
		title: getI18n('common', 'Common_Columns_Index'),
		dataIndex: 'index',
		align: 'center',
		slots: { customRender: 'index' },
	},
	// 服务名称
	{
		title: getI18n('system', 'SYSTEM_Process_ServiceName'),
		dataIndex: 'name',
		align: 'center',
	},
	// 请求地址
	{
		title: getI18n('system', 'SYSTEM_Process_ServiceRequestUrl'),
		dataIndex: 'httpUrl',
		align: 'center',
	},
	// 请求方法
	{
		title: getI18n('system', 'SYSTEM_Process_ServiceRequestMethod'),
		dataIndex: 'httpMethod',
		align: 'center',
	},
	// 操作
	{
		title: getI18n('common', 'Common_Action'),
		align: 'center',
		key: 'operation',
		width: 160,
		slots: { customRender: 'operation' },
	},
]

export default defineComponent({
	name: 'DesignConnectors',
	components: {
		DesignConnectorsEditModal,
		CloseOutlined,
		SaveOutlined,
		PlusOutlined,
		ReloadOutlined,
		SearchOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 选中的服务
		currentSelectId: {
			type: String,
			required: false,
			default: '',
			// type: Object as PropType<ConnectorsModel>,
			// required: false,
			// default: () => {},
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)

		// 列表参数
		const connectorsParams = reactive<GetProcessConnectorsParamsModel>({
			current: 1,
			size: 10,
		})
		// 搜索按钮loading
		const searchLoading = ref<boolean>(false)
		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表数据
		const tableData = ref<ConnectorsModel[]>([])
		// 列表单选
		let tableSelectedRowKey = ref<(string | number)[]>([])
		let tableSelectedRow = ref<ConnectorsModel>()

		// 列表
		const getProcessConnectors = async () => {
			// 参数
			let params: GetProcessConnectorsParamsModel = {}
			connectorsParams.name && (params.name = connectorsParams.name)

			searchLoading.value = true
			tableLoading.value = true
			const res = await getProcessConnectorsApi(params).finally(() => {
				searchLoading.value = false
				tableLoading.value = false
			})
			tableData.value = res.data.records
		}

		// 重置按钮点击事件
		const onResetClick = () => {
			connectorsParams.current = 1
			connectorsParams.size = 10
			connectorsParams.name = undefined
			getProcessConnectors()
		}

		// 单选
		const rowSelection = ref({
			checkStrictly: false,
			type: 'radio',
			selectedRowKeys: tableSelectedRowKey,
			onChange: (key: (string | number)[], selectedRow) => {
				tableSelectedRowKey.value = key
				tableSelectedRow.value = selectedRow[0]
			},
		})

		// 取消按钮
		const onResetButtonClick = () => {
			context.emit('confirm-add-modal-cancel')
			confirmModalVisibleValue.value = false
			connectorsParams.current = 1
			connectorsParams.size = 10
			connectorsParams.name = undefined
			tableSelectedRow.value = undefined
			tableSelectedRowKey.value = []
			searchLoading.value = false
			tableLoading.value = false
		}

		// 确定按钮被点击
		const onSubmitButtonClick = () => {
			context.emit('confirm-add-modal-refresh', {
				id: tableSelectedRow.value?.id,
				name: tableSelectedRow.value?.name,
			}) //
			message.success(getI18n('common', 'Common_Success'))
			onResetButtonClick()
		}

		// 新增编辑弹框
		const confirmEditVisible = ref<boolean>(false)
		const connectorsId = ref<string>()
		// 取消新增编辑
		const onEditCancelClick = () => {
			confirmModalVisibleValue.value = true
			confirmEditVisible.value = false
			connectorsId.value = undefined
		}
		// 确定新增编辑
		const onEditOkClick = async () => {
			onEditCancelClick()
			await getProcessConnectors()
		}
		// 新增
		const onConnectorsAddClick = () => {
			confirmModalVisibleValue.value = false
			confirmEditVisible.value = true
		}

		// 编辑
		const onConnectorsEditClick = (id: string) => {
			confirmModalVisibleValue.value = false
			confirmEditVisible.value = true
			connectorsId.value = id
		}

		// 删除弹框
		const onConnectorsDeleteClick = async (id: string) => {
			let params: DeleteProcessConnectorsParamsModel = { id: id }
			await deleteProcessConnectorsApi(params)
			await getProcessConnectors()
		}

		watch(
			() => props.confirmModalVisible,
			async newValue => {
				confirmModalVisibleValue.value = newValue
				if (newValue) {
					await getProcessConnectors()

					tableSelectedRow.value = tableData.value.filter(
						f => f.id == props.currentSelectId
					)[0]
					tableSelectedRowKey.value = [props.currentSelectId]
					// if( !validatenull(props.currentSelectData) ){
					// 	tableSelectedRow.value = props.currentSelectData
					// 	// tableSelectedRowKey.value = props.currentSelectData.map( v => {
					// 	// 	return v.id
					// 	// })
					// }

					// props.currentSelectData?.id && (tableSelectedRowKey.value = [props.currentSelectData.id])
				}
			},
			{ deep: true, immediate: true }
		)

		return {
			style,
			confirmModalVisibleValue,
			getI18n,
			onSubmitButtonClick,
			onResetButtonClick,
			connectorsParams,
			columns,
			tableLoading,
			searchLoading,
			tableData,
			rowSelection,
			getProcessConnectors,
			onResetClick,

			// 删除
			onConnectorsDeleteClick,

			// 新增/编辑
			confirmEditVisible,
			connectorsId,
			onEditOkClick,
			onEditCancelClick,
			onConnectorsAddClick,
			onConnectorsEditClick,
		}
	},
})
</script>