<template>
	<div class="business-order-accept-repeat-event-container">
		<el-form :model="state.queryParams" ref="queryParamsRef" inline @submit.native.prevent>
			<el-form-item label="关键词" prop="Keyword">
				<el-input v-model="state.queryParams.Keyword" placeholder="事件标题/关键词" @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="创建时间" prop="exTime">
				<el-date-picker
					v-model="state.queryParams.exTime"
					type="datetimerange"
					unlink-panels
					range-separator="至"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					:shortcuts="shortcuts"
					@change="timeStartChangeCr"
					:clearable="false"
					value-format="YYYY-MM-DD[T]HH:mm:ss"
          :default-time="defaultTimeStartEnd"
				/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
				<el-button @click="resetQuery(queryParamsRef)" :loading="state.loading" class="default-button">
					<SvgIcon name="ele-Refresh" class="mr5" />重置
				</el-button>
			</el-form-item>
		</el-form>
		<div class="mb10">
			<el-button type="primary" @click="onCreate" :loading="state.loading"> <SvgIcon name="ele-Plus" class="mr5" />创建重复事件 </el-button>
		</div>
		<el-table :data="state.tableData" v-loading="state.loading" max-height="300">
			<el-table-column label="操作" width="80" align="center">
				<template #default="{ row }">
					<el-button @click="onAdd(row)" link type="primary" :title="`将当前工单${row.isDeleted ? '移除' : '添加'}重复性事件`">
						{{ row.isDeleted ? '移除' : '添加' }}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="phoneNo" label="标题" show-overflow-tooltip width="180">
				<template #default="{ row }">
					{{ row.title }}
				</template>
			</el-table-column>
			<el-table-column prop="keyWords" label="关键词" show-overflow-tooltip> </el-table-column>
			<el-table-column label="创建时间" show-overflow-tooltip width="170">
				<template #default="{ row }">
					{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</el-table-column>
			<el-table-column prop="creatorName" label="创建人" show-overflow-tooltip></el-table-column>
			<el-table-column prop="statusText" label="事件工单数" width="100" align="center">
				<template #default="{ row }">
					{{ row.details?.length }}
				</template>
			</el-table-column>
		</el-table>
		<pagination
			@pagination="queryList"
			:total="state.total"
			v-model:current-page="state.queryParams.PageIndex"
			v-model:page-size="state.queryParams.PageSize"
      layout="total,prev, pager, next"
		/>
		<!-- 编辑重复性事件 -->
		<repeat-event-edit ref="repeatEventEditRef" @updateList="queryList" />
	</div>
</template>
<script setup lang="ts" name="orderAcceptRepeatEvent">
import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultTimeStartEnd, shortcuts } from "@/utils/constants";
import dayjs from 'dayjs';
import { repeatEventList } from '@/api/business/repeatEvent';
import { formatDate } from '@/utils/formatTime';
// 引入组件
const RepeatEventEdit = defineAsyncComponent(() => import('@/views/business/repeatEvent/components/Repeat-event-edit.vue')); // 编辑重复性事件
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页

const emit = defineEmits(['orderAddRepeat']);
const props = defineProps({
	repeatIds: {
		type: Array,
		default: () => [],
	},
});
const state = reactive<any>({
	queryParams: {
		// 查询条件
		PageIndex: 1,
		PageSize: 10,
		Keyword: null, // 关键字
		CreationTimeStart: dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), // 创建时间 开始
		CreationTimeEnd: dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), // 创建时间 结束
		exTime: [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')], // 创建时间
	},
	loading: false, // 加载
	tableData: <EmptyArrayType>[],
	total: 0, // 总数
});

const queryParamsRef = ref<RefType>(); // 查询参数
const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
	if (val) {
		state.queryParams[startKey] = val[0];
		state.queryParams[endKey] = val[1];
	} else {
		state.queryParams[startKey] = '';
		state.queryParams[endKey] = '';
	}
};
// 时间
const timeStartChangeCr = (val: string[]) => {
	handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
	queryList();
};
/** 搜索按钮操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.queryParams.CreationTimeStart = dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss');
	state.queryParams.CreationTimeEnd = dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss');
	state.queryParams.exTime = [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
	handleQuery();
};
const queryList = () => {
	state.loading = true;
	const request = {
		...state.queryParams,
	};
	Reflect.deleteProperty(request, 'exTime');
	repeatEventList(request)
		.then((res: any) => {
			state.loading = false;
			state.tableData = res.result.items ?? [];
			state.total = res.result.total ?? 0;
		})
		.finally(() => {
			state.loading = false;
		});
};
// 工单数据添加重复工单
const onAdd = (row: any) => {
	row.isDeleted = !row.isDeleted;
	emit('orderAddRepeat', row);
};
// 创建重复事件
const repeatEventEditRef = ref<RefType>();
const onCreate = () => {
	repeatEventEditRef.value.openDialog();
};
onMounted(() => {
	queryList();
});
const stopWatch = watch(
	() => props.repeatIds,
	(newVal: any) => {
		state.tableData.forEach((item: any) => {
			newVal.forEach((_: any) => {
				if (_.repeatableId === item.id) {
					item.isDeleted = true; // 检测是否已经添加了重复事件
					stopWatch(); //数据完成之后停止监听
				}
			});
		});
	}
);
defineExpose({
	queryList,
});
</script>
<style scoped lang="scss"></style>
