<!-- microflow管理列表 -->
<template>
	<a-card class="base-card-full-screen">
		<a-card>
			<a-row>
				<!-- microflow名称 -->
				<a-col :span="6" class="search-item">
					<label>{{
						getI18n('system', 'SYSTEM_Microflow_Management_Name')
					}}</label>
					<a-input
						:placeholder="
							getI18n('common', 'Common_Please_Enter', [
								getI18n(
									'system',
									'SYSTEM_Microflow_Management_Name'
								),
							])
						"
						v-model:value="microflowParams.name"
					/>
				</a-col>

				<a-col :span="6">
					<div class="button-wrapper">
						<!-- 查询按钮 -->
						<a-button
							:loading="searchLoading"
							type="primary"
							@click="onSearchClick"
							class="button-item"
						>
							<search-outlined />
							{{ getI18n('common', 'Common_Search') }}
						</a-button>
						<!-- 重置按钮 -->
						<a-button
							:loading="searchLoading"
							@click="onResetClick"
							class="button-item"
						>
							<reload-outlined />
							{{ getI18n('common', 'Common_Clear') }}
						</a-button>
					</div>
				</a-col>
			</a-row>
		</a-card>
		<a-card>
			<div style="display: flex; justify-content: flex-start">
				<a-button
					type="primary"
					@click="onMicroflowAddClick"
					style="margin-right: 1em"
				>
					<plus-outlined />
					{{ getI18n('common', 'Common_Add') }}
				</a-button>
			</div>
			<a-table
				:rowKey="records => records.id"
				:columns="columns"
				:loading="tableLoading"
				:data-source="microflowList"
				:bordered="true"
				:pagination="tablePagination"
				@change="onTableChange"
				:class="style['custom-table']"
			>
				<template #operation="{ record }">
					<div>
						<!-- 编辑 -->
						<a
							style="margin-right: 1em"
							href="javascript:;"
							@click="() => onBwuEditClick(record.id)"
							>{{ getI18n('common', 'Common_Edit') }}</a
						>
						<!-- 删除 -->
						<a
							class="textC-red"
							href="javascript:;"
							@click="() => onBwuDeleteClick(record.id)"
							>{{ getI18n('common', 'Common_Delete') }}</a
						>
					</div>
				</template>
			</a-table>
		</a-card>
	</a-card>

	<!-- 确认删除 -->
	<base-operational-qualification
		:confirm-modal-visible="confirmModalDeleteVisible"
		@confirm-modal-ok="onDeleteOkClick"
		@confirm-modal-cancel="onDeleteCancelClick"
		:ok-loading="deleteLoading"
	/>

	<!-- 新增/编辑弹窗 -->
	<microflow-management-modal-form
		:confirmModalVisible="confirmModalVisible"
		@confirm-modal-cancel="onMicroflowCancelClick"
		@confirm-modal-refresh="onMicroflowRefreshClick"
		:microflowId="microflowId"
	/>

	<!-- 查看弹窗 -->
	<!-- <microflow-management-modal-view
		:confirmModalVisible="confirmViewModalVisible"
		:microflowId="microflowId"
		@confirm-modal-cancel="onViewCancelClick"
	/> -->
</template>
<script lang="ts">
import dayjs from 'dayjs'
import style from './index.module.less'
import { message } from 'ant-design-vue'
import { getI18n } from '@/utils/i18n'
import {
	ReloadOutlined,
	SearchOutlined,
	PlusOutlined,
} from '@ant-design/icons-vue'
import { defineComponent, onMounted, reactive, ref } from 'vue' // computed
import { getViewText, getDayText } from '@/utils/tool/translateValue'
import { MicroflowManagementConstatnt } from '@/utils/constant'

import { RequestResult, PaginationData } from '@/utils/request/model'
import { AntdPaginationType, AntdTableChangePageType } from '@/types/antd'
import { MicroflowManagementListModel } from '@/types/microflowManagement'
import {
	getMicroflowManagementListApi,
	removeMicroflowManagementApi,
} from '@/api/microflow'
import { GetMicroflowManagementListParamsModel } from '@/api/microflow/model'

import {
	// MicroflowManagementModalView,
	MicroflowManagementModalForm,
} from '@/views/microflow-management/components'

import { useRoute } from 'vue-router'
import Storage from 'web-storage-cache'
import { TOKEN_KEY } from '@/global/cacheKey'

const columns = [
	// 名称
	{
		title: getI18n('system', 'SYSTEM_Microflow_Management_Name'),
		dataIndex: 'name',
		align: 'center',
		width: '40%',
		slots: { customRender: 'name' },
	},
	// 联系人
	{
		title: getI18n('system', 'SYSTEM_Microflow_Management_Username'),
		dataIndex: 'contact',
		align: 'center',
		width: '10%',
	},
	// 联系电话
	{
		title: getI18n('system', 'SYSTEM_Microflow_Management_Contact'),
		dataIndex: 'tel',
		align: 'center',
		width: '10%',
	},
	// 状态
	{
		title: getI18n('system', 'SYSTEM_Microflow_Management_Status'),
		dataIndex: 'status',
		customRender: ({ text }) =>
			getViewText(
				MicroflowManagementConstatnt.detailStatus,
				text?.toString()
			),
		align: 'center',
		width: '10%',
	},
	// 创建时间
	{
		title: getI18n('system', 'SYSTEM_Microflow_Management_CreateDate'),
		dataIndex: 'createTime',
		customRender: ({ text }) => getDayText(text, 'YYYY.MM.DD HH:mm:ss'),
		align: 'center',
		width: '15%',
		sorter: (
			a: MicroflowManagementListModel,
			b: MicroflowManagementListModel
		) => dayjs(a.createTime).valueOf() - dayjs(b.createTime).valueOf(),
	},
	// 操作
	{
		title: getI18n('common', 'Common_Action'),
		align: 'center',
		key: 'operation',
		width: '15%',
		slots: { customRender: 'operation' },
	},
]

export default defineComponent({
	components: {
		// MicroflowManagementModalView,
		MicroflowManagementModalForm,
		ReloadOutlined,
		SearchOutlined,
		PlusOutlined,
	},
	setup() {
		const route = useRoute()
		// 新增、修改
		const confirmModalVisible = ref<boolean>(false)
		// tableId
		const microflowId = ref<string>()
		// 搜索按钮loading
		const searchLoading = ref<boolean>(false)
		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表参数
		const microflowParams = reactive<GetMicroflowManagementListParamsModel>(
			{
				current: 1,
				size: 10,
			}
		)
		// 数据列表
		const microflowList = ref<MicroflowManagementListModel[]>([])
		// 列表分页
		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 getBwuManagementList = async () => {
			tableLoading.value = true
			let paramObj: GetMicroflowManagementListParamsModel = {
				size: microflowParams.size,
				current: microflowParams.current,
			}

			microflowParams.name && (paramObj.name = microflowParams.name)

			const res: RequestResult<
				PaginationData<MicroflowManagementListModel>
			> = await getMicroflowManagementListApi(paramObj).finally(() => {
				tableLoading.value = false
				searchLoading.value = false
			})
			microflowList.value = res.data
			tablePagination.current = res.pageinfo.currentPage
			tablePagination.pageSize = res.pageinfo.perPage
			tablePagination.total = res.pageinfo.total
		}

		// 列表change事件
		const onTableChange = (page: AntdTableChangePageType) => {
			microflowParams.size = page.pageSize
			microflowParams.current = page.current
			getBwuManagementList()
		}
		// 搜索按钮事件
		const onSearchClick = async () => {
			searchLoading.value = true
			await getBwuManagementList()
		}
		// 重置按钮事件
		const onResetClick = () => {
			searchLoading.value = true
			microflowParams.name = undefined
			microflowParams.size = 10
			microflowParams.current = 1
			microflowId.value = undefined
			getBwuManagementList()
		}

		// 删除
		const confirmModalDeleteVisible = ref<boolean>(false)
		const deleteLoading = ref<boolean>(false)
		const deleteBwuId = ref<string>()
		const onDeleteCancelClick = () => {
			confirmModalDeleteVisible.value = false
			deleteLoading.value = false
			deleteBwuId.value = undefined
		}
		const onBwuDeleteClick = (id: string) => {
			confirmModalDeleteVisible.value = true
			deleteBwuId.value = id
		}
		const onDeleteOkClick = async () => {
			deleteLoading.value = true
			await removeMicroflowManagementApi({
				id: deleteBwuId.value,
			}).finally(() => {
				message.success(getI18n('common', 'Common_Success'))
				onDeleteCancelClick()
				getBwuManagementList()
			})
		}

		// 取消新增/修改事件
		const onMicroflowCancelClick = () => {
			microflowId.value = undefined
			confirmModalVisible.value = false
		}
		// 确认新增/修改事件
		const onMicroflowRefreshClick = () => {
			onMicroflowCancelClick()
			getBwuManagementList()
		}
		// 修改
		const onBwuEditClick = (id: string) => {
			microflowId.value = id
			confirmModalVisible.value = true
		}
		// 新增事件
		const onMicroflowAddClick = () => {
			confirmModalVisible.value = true
		}

		onMounted(async () => {
			if (route.query && route.query.token) {
				const localStorage = new Storage()
				localStorage.set(TOKEN_KEY, route.query.token?.toString())
				localStorage.set('token', route.query.token?.toString())
			}
			await getBwuManagementList()
		})

		return {
			style,
			columns,
			searchLoading,
			tableLoading,
			microflowParams,
			microflowList,
			tablePagination,
			onTableChange,
			microflowId,
			confirmModalVisible,
			getI18n,
			onSearchClick,
			onResetClick,
			getBwuManagementList,
			onMicroflowAddClick,
			onMicroflowCancelClick,
			onMicroflowRefreshClick,

			onBwuEditClick,
			onBwuDeleteClick,
			confirmModalDeleteVisible,
			onDeleteOkClick,
			onDeleteCancelClick,
			deleteLoading,
		}
	},
})
</script>
