<template>
	<div class="tels-callLog-connect-container">
		<el-dialog v-model="state.dialogVisible" draggable title="关联业务" @close="close">
			<div class="table-search-content">
				<el-form :model="state.queryParams" @submit.native.prevent inline>
					<el-form-item label="关联类型" prop="Keyword">
						<el-radio-group v-model="isOrder" @change="queryList">
							<el-radio :value="true">工单</el-radio>
							<el-radio :value="false">回访</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="" prop="Keyword">
						<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="queryList" class="keyword-input" />
					</el-form-item>
					<el-form-item label="" label-width="0">
						<el-button type="primary" @click="queryList" :loading="loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
						<el-button
							@click="
								state.queryParams.Keyword = null;
								queryList();
							"
							class="default-button"
							:loading="loading"
						>
							<SvgIcon name="ele-Refresh" class="mr5" />重置
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<vxe-table
				border
				:loading="loading"
				:data="state.tableData"
				:sort-config="{ remote: true }"
				:column-config="{ resizable: true }"
				:row-config="{ isHover: true, height: 30,useKey:true }"
				ref="tableRef"
				max-height="400px"
				show-overflow
				:scrollY="{ enabled: true, gt: 100 }"
				:radio-config="{ highlight: true }"
				@radio-change="radioChangeEvent"
			>
				<vxe-column type="radio" width="90" align="center" fixed="left" title="请选择"></vxe-column>
				<template v-if="isOrder">
					<vxe-column field="no" title="工单编码" min-width="140"></vxe-column>
					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
					<vxe-column field="statusText" title="工单状态" width="100">
						<template #default="{ row }">
							<el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.status)">{{ row.statusText }}</el-text>
							<span v-else>{{ row.statusText }}</span>
						</template>
					</vxe-column>
					<vxe-column field="title" title="工单标题" width="200">
						<template #default="{ row }">
							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
						</template>
					</vxe-column>
					<vxe-column field="startTime" title="受理时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="expiredTime" title="工单期满时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="filedTime" title="办结时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
					<vxe-column field="acceptType" title="受理类型" width="110"></vxe-column>
					<vxe-column field="counterSignTypeText" title="是否会签" width="110"></vxe-column>
					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
				</template>
				<template v-else>
					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
					<vxe-column field="order.isProvinceText" title="省/市工单" width="100"></vxe-column>
					<vxe-column field="title" title="工单标题" width="200">
						<template #default="{ row }">
							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
						</template>
					</vxe-column>
					<vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
					<vxe-column field="visitStateText" title="回访状态" width="100"></vxe-column>
					<vxe-column field="visitTypeText" title="回访方式" width="100"></vxe-column>
					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
					<vxe-column field="order.orgLevelOneName" title="一级部门" width="150"></vxe-column>
					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="150"></vxe-column>
					<vxe-column field="order.startTime" title="受理时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="order.filedTime" title="办结时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="publishTime" title="发布时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="creationTime" title="回访任务创建时间" width="170">
						<template #default="{ row }">
							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="employeeName" title="回访人" width="150"></vxe-column>
					<vxe-column field="visitTime" title="回访时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
				</template>
			</vxe-table>
			<pagination
				@pagination="queryList"
				:total="state.total"
				v-model:current-page="state.queryParams.PageIndex"
				v-model:page-size="state.queryParams.PageSize"
				:disabled="loading"
			/>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :disabled="!selectRow" :loading="loading">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="tsx" setup name="blackAdd">
import { ref, reactive, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { formatDate } from '@/utils/formatTime';
import { callLogLink, callLogOrder, callLogVisit } from '@/api/tels/callLog';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const state = reactive<any>({
	queryParams: {
		// 查询条件
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		Keyword: null, // 关键字
	},
	tableData: [],
	total: 0,
	dialogVisible: false, // 弹窗显示隐藏
	currentCall: {}, // 当前通话记录
});
const loading = ref<Boolean>(false);
const isOrder = ref<Boolean>(true); // 关联类型 true工单 false回访
// 打开弹窗
const openDialog = (val: any) => {
	state.currentCall = val;
	queryList();
	state.dialogVisible = true;
};
const queryList = () => {
	loading.value = true;
	if (isOrder.value) {
		callLogOrder(state.queryParams)
			.then((res: any) => {
				state.tableData = res.result?.items ?? [];
				state.total = res.result?.total ?? 0;
				loading.value = false;
			})
			.catch(() => {
				state.tableData = [];
				state.total = 0;
				loading.value = false;
			});
	} else {
		callLogVisit(state.queryParams)
			.then((res: any) => {
				state.tableData = res.result?.items ?? [];
				state.total = res.result?.total ?? 0;
				loading.value = false;
			})
			.catch(() => {
				state.tableData = [];
				state.total = 0;
				loading.value = false;
			});
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	isOrder.value = true;
	state.queryParams.PageIndex = 1;
	state.queryParams.PageSize = 10;
	state.queryParams.Keyword = null;
	state.tableData = [];
	state.total = 0;
	selectRow.value = null;
};

const tableRef = ref<RefType>();
const selectRow = ref<any>(null);
const radioChangeEvent = ({ row }) => {
	selectRow.value = row;
};

// 保存
const onSubmit = () => {
	loading.value = true;
	const request = {
		callId: state.currentCall.otherAccept,
		id: selectRow.value.id,
		isOrder: isOrder.value,
	};
	callLogLink(request)
		.then(() => {
			loading.value = false;
			ElMessage.success('关联成功');
			closeDialog();
			emit('updateList');
		})
		.catch(() => {
			loading.value = false;
		});
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
