<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="选择推送工单" @close="close" append-to-body destroy-on-close>
		<vxe-grid v-bind="gridOptions" v-on="gridEvents" ref="gridRef" @checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent">
			<template #form>
				<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
					<el-form-item label="工单标题" prop="Title">
						<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
					</el-form-item>
					<el-form-item label="工单编码" prop="No">
						<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
					</el-form-item>
					<el-form-item prop="OrderStatus" label="工单状态">
						<el-select v-model="state.queryParams.OrderStatus" placeholder="请选择工单状态" clearable class="w100" @change="handleQuery">
							<el-option v-for="item in orderStatusOptions" :value="item.key" :key="item.key" :label="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="推送状态" prop="OrderPushStatus">
						<el-select v-model="state.queryParams.OrderPushStatus" placeholder="请选择推送状态" @change="handleQuery">
							<el-option v-for="item in orderPushStatusOptions" :value="item.key" :key="item.key" :label="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery" :loading="gridOptions.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
						<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
					</el-form-item>
				</el-form>
			</template>
			<template #order_detail="{ row }">
				<order-detail :order="row.order">{{ row.order?.title }}</order-detail>
			</template>
			<template #statusText="{ row }">
				<el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.order?.status)">{{
					row.order?.statusText
				}}</el-text>
				<span v-else>{{ row.order?.statusText }}</span>
			</template>
			<template #pager>
				<pagination
					@pagination="queryList"
					:total="state.total"
					v-model:current-page="state.queryParams.PageIndex"
					v-model:page-size="state.queryParams.PageSize"
					:disabled="gridOptions.loading"
					class="mt10"
				/>
			</template>
		</vxe-grid>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="gridOptions.loading" :disabled="isChecked">保存</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="tsx">
import { computed, defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { getEarlyPushOrderList, getEarlyPushOrderListBaseData } from '@/api/early/push';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		Keyword: null, // 关键字
		Title: null, // 工单标题
		No: null, // 工单编码
		OrderStatus: null, // 工单状态
		OrderPushStatus: null, // 推送状态
	},
	total: 0, // 总条数
});
const gridOptions = reactive<any>({
	loading: false,
	border: true,
	showOverflow: true,
	columnConfig: {
		resizable: true,
	},
	scrollY: {
		enabled: true,
		gt: 100,
	},
	checkboxConfig: {
		reserve: true,
		showReserveStatus: true,
	},
	rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true, keyField: 'id' },
	minHeight: 300,
	maxHeight: 500,
	columns: [
		{
			type: 'checkbox',
			width: 110,
			title: '是否推送',
		},
		{
			field: 'isSendWord',
			title: '是否展示附件',
			width: 110,
			slots: {
				default: ({ row }) => {
					return <el-checkbox v-model={row.isSendWord}></el-checkbox>;
				},
			},
		},
		{
			field: 'order.title',
			title: '工单标题',
			minWidth: 200,
			slots: { default: 'order_detail' },
		},
		{
			field: 'order.no',
			title: '工单编码',
			width: 140,
		},
		{
			field: 'order.hotspotName',
			title: '热点分类',
		},
		{
			field: 'order.currentStepName',
			title: '当前节点',
		},
		{
			field: 'order.statusText',
			title: '工单状态',
			width: 100,
			slots: {
				default: 'statusText',
			},
		},
		{
			field: 'orderPushStatusText',
			title: '推送状态',
			width: 100,
		},
	],
	data: [],
	sortConfig: {
		remote: true,
	},
});
const gridEvents = {
	sortChange(val: any) {
		state.queryParams.SortField = val.order ? val.field : null;
		// 0 升序 1 降序
		state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
		handleQuery();
	},
};
// 打开弹窗
const ruleFormRef = ref<RefType>();
const openDialog = async () => {
	state.dialogVisible = true;
	queryList();
	getBaseData();
};
/** 搜索按钮操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	handleQuery();
};
// 获取可以选择的推送工单列表
const queryList = () => {
	gridOptions.loading = true;
	getEarlyPushOrderList(state.queryParams)
		.then((res: any) => {
			gridOptions.loading = false;
			gridOptions.data = res.result.items ?? [];
			state.total = res.result.total ?? 0;
		})
		.catch((err: any) => {
			gridOptions.loading = false;
		});
};

// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.resetFields();
	ruleFormRef.value?.resetFields();
	checkTable.value = [];
};
const checkTable = ref<EmptyArrayType>([]);
const gridRef = ref<RefType>();
const selectAllChangeEvent = ({ checked }) => {
	if (gridRef.value) {
		const records = gridRef.value.getCheckboxRecords();
		checkTable.value = records;
		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
	}
};

const selectChangeEvent = ({ checked }) => {
	if (gridRef.value) {
		const records = gridRef.value.getCheckboxRecords();
		checkTable.value = records;
		console.log(checked ? '勾选事件' : '取消事件', records);
	}
};
const isChecked = computed(() => {
	return !Boolean(checkTable.value.length);
});
const emit = defineEmits(['selectOrder']);
// 保存
const onSubmit = throttle(() => {
	console.log(checkTable.value, '保存');
	emit('selectOrder', checkTable.value);
	state.dialogVisible = false;
}, 300);
// 获取基础数据
const orderStatusOptions = ref<EmptyArrayType>([]); // 工单状态
const orderPushStatusOptions = ref<EmptyArrayType>([]); // 推送状态
const getBaseData = () => {
	getEarlyPushOrderListBaseData().then((res) => {
		orderStatusOptions.value = res.result?.orderStatus ?? [];
		orderPushStatusOptions.value = res.result?.orderPushStatus ?? [];
	});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
