<template>
	<div class="phoneControls" v-loading="state.loading">
		<el-popover placement="top-start" :width="240" trigger="hover" v-model:visible="showPop">
			<template #reference>
				<div class="status-box">
					<span class="color-primary">{{ currentStatusText }}</span>
					<el-text tag="b" v-if="currentStatusText === '通话中'">{{ formatDuration(talkTime) }}</el-text>
					<el-text tag="b" v-else-if="currentStatusText === '空闲'">{{ formatDuration(idleTime) }}</el-text>
					<el-text tag="b" v-else-if="currentStatusText === '外呼中'">{{ formatDuration(outboundTime) }}</el-text>
					<el-text tag="b" v-else-if="currentStatusText === '小休中'">{{ formatDuration(busyTime) }}</el-text>
					<el-text tag="b" v-else-if="currentStatusText === '整理中'">{{ formatDuration(arrangeTime) }}</el-text>
					<SvgIcon name="ele-CaretBottom" class="arrow" :class="{ 'is-reverse': showPop }" />
				</div>
			</template>
			<template #default>
				<template v-if="telStatusInfo.isDutyOn">
					<div class="flex-center-between" v-if="telStatusInfo.telsNo">
						<span class="ml10">分机号</span>
						<el-text tag="b">{{ telStatusInfo.telsNo }}</el-text>
					</div>
					<div class="flex-center-between mt10" v-if="signTime">
						<span class="ml10">签入时长</span>
						<el-text tag="b">{{ formatDuration(signTime) }}</el-text>
					</div>
					<div class="flex-center-between mt10" v-if="talkTime && currentStatusText !== '通话中'">
						<span class="ml10">通话时长</span>
						<el-text tag="b">{{ formatDuration(talkTime) }}</el-text>
					</div>
					<div class="flex-center-between mt10" v-if="outboundTime && currentStatusText !== '外呼中'">
						<span class="ml10">外呼时长</span>
						<el-text tag="b">{{ formatDuration(outboundTime) }}</el-text>
					</div>
					<div class="flex-center-between mt10" v-if="idleTime && currentStatusText !== '空闲'">
						<span class="ml10">空闲时长</span>
						<el-text tag="b">{{ formatDuration(idleTime) }}</el-text>
					</div>
					<div class="flex-center-between mt10" v-if="busyTime && currentStatusText !== '小休中'">
						<span class="ml10">示忙时长</span>
						<el-text tag="b">{{ formatDuration(busyTime) }}</el-text>
					</div>
					<div class="flex-center-between mt10" v-if="arrangeTime && currentStatusText !== '整理中'">
						<span class="ml10">整理时长</span>
						<el-text tag="b">{{ formatDuration(arrangeTime) }}</el-text>
					</div>
				</template>
				<template v-else> <span class="color-info flex-center-center">请签入</span> </template>
			</template>
		</el-popover>

		<!--  按钮列表  -->
		<div class="btn-container">
			<!-- 签入 -->
			<template v-if="telStatusInfo.isDutyOn">
				<!-- 签出可用 -->
				<div class="item active" @click="onControlClick('dutyOff')" v-if="activeArr.includes('dutyOff')" title="签出">
					<SvgIcon name="iconfont icon-dutyOff" class="icon mr3" size="18px" />
					<span>签出</span>
				</div>
				<!-- 签出不可用 -->
				<div class="item disabled" v-else title="签出">
					<SvgIcon name="iconfont icon-dutyOff" class="icon mr3" size="18px" />
					<span>签出</span>
				</div>
			</template>
			<!-- 灰色签入不可用 -->
			<template v-else>
				<div class="item active" @click="onControlClick('dutyOn')" title="签入">
					<SvgIcon name="iconfont icon-dutyOn" class="icon mr3" size="18px" />
					<span>签入</span>
				</div>
			</template>

			<!-- 外呼模式和取消外呼模式 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('callOut')">
				<div
					class="item active"
					:title="telStatusInfo.isHold ? '取消外呼' : '外呼模式'"
					@click="onControlClick(telStatusInfo.isCallOut ? 'unCallOut' : 'callOut')"
				>
					<SvgIcon name="iconfont icon-callOut" class="icon mr3" size="16px" />
					<span>{{ telStatusInfo.isCallOut ? '取消外呼' : '外呼模式' }}</span>
				</div>
			</template>
			<!-- 灰色外呼不可用 -->
			<template v-else>
				<div class="item disabled" title="外呼模式">
					<SvgIcon name="iconfont icon-callOut" class="icon mr3" size="16px" />
					<span>外呼模式</span>
				</div>
			</template>

			<!-- 可用挂断 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('hangup')">
				<div class="item active" @click="onControlClick('hangup')" title="挂断">
					<SvgIcon name="iconfont icon-hangup" class="icon mr3" size="16px" />
					<span>挂断</span>
				</div>
			</template>
			<!-- 灰色挂断 不可用 -->
			<template v-else>
				<div class="item disabled" title="挂断">
					<SvgIcon name="iconfont icon-hangup" class="icon mr3" size="16px" />
					<span>挂断</span>
				</div>
			</template>

			<!-- 小休和结束休息 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('rest')">
				<div class="item active" @click="onControlClick('restEnd')" v-if="telStatusInfo.isRest === 'resting'" title="结束小休">
					<SvgIcon name="iconfont icon-rest" class="icon mr3" size="18px" />
					<span
						>结束<span v-if="restReason">({{ restReason }})</span></span
					>
				</div>
				<div class="item active" @click="onControlClick('rest')" v-else-if="telStatusInfo.isRest === 'unRest'" title="小休">
					<SvgIcon name="iconfont icon-rest" class="icon mr3" size="18px" />
					<span>小休 </span>
				</div>
				<div class="item disabled" title="审批中" v-else-if="telStatusInfo.isRest === 'InReview'">
					<SvgIcon name="iconfont icon-rest" class="icon mr3" size="18px" />
					<span>审批中</span>
				</div>
			</template>
			<!-- 灰色小休不可用 -->
			<template v-else>
				<div class="item disabled" title="小休">
					<SvgIcon name="iconfont icon-rest" class="icon mr3" size="18px" />
					<span>小休</span>
				</div>
			</template>

			<!-- 保持和取消保持 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('hold')">
				<div
					class="item active"
					:title="telStatusInfo.isHold ? '取消保持' : '保持'"
					@click="onControlClick(telStatusInfo.isHold ? 'unHold' : 'hold')"
				>
					<SvgIcon name="iconfont icon-hold" class="icon mr3" size="16px" />
					<span>{{ telStatusInfo.isHold ? '取消保持' : '保持' }}</span>
				</div>
			</template>
			<!-- 灰色保持不可用 -->
			<template v-else>
				<div class="item disabled" title="保持">
					<SvgIcon name="iconfont icon-hold" class="icon mr3" size="16px" />
					<span>保持</span>
				</div>
			</template>

			<!-- 静音和取消静音 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('mute')">
				<div
					class="item active"
					:title="telStatusInfo.isMute ? '取消静音' : '静音'"
					@click="onControlClick(telStatusInfo.isMute ? 'unMute' : 'mute')"
				>
					<SvgIcon name="iconfont icon-mute" class="icon mr3" size="18px" />
					<span>{{ telStatusInfo.isMute ? '取消静音' : '静音' }}</span>
				</div>
			</template>
			<!-- 灰色静音不可用 -->
			<template v-else>
				<div class="item disabled" title="静音">
					<SvgIcon name="iconfont icon-mute" class="icon mr3" size="18px" />
					<span>静音</span>
				</div>
			</template>

			<!-- 话后整理和取消话后整理中 可用-->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('TalkingDeal')">
				<div
					class="item active"
					@click="onControlClick(telStatusInfo.isTalkingDeal ? 'unTalkingDeal' : 'TalkingDeal')"
					:title="telStatusInfo.isTalkingDeal ? '取消整理' : '话后整理'"
				>
					<SvgIcon name="iconfont icon-talkingDeal" class="icon mr3" size="18px" />
					<span>{{ telStatusInfo.isTalkingDeal ? '取消整理' : '话后整理' }}</span>
				</div>
			</template>
			<!-- 话后整理中不可用 -->
			<template v-else>
				<div class="item disabled" title="话后整理">
					<SvgIcon name="iconfont icon-talkingDeal" class="icon mr3" size="18px" />
					<span>话后整理</span>
				</div>
			</template>

			<!-- 转接 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('transfer')">
				<div class="item active" @click="onControlClick('transfer')" title="保持">
					<SvgIcon name="iconfont icon-transfer" class="icon mr3" size="18px" />
					<span>转接</span>
				</div>
			</template>
			<!-- 转接不可用 -->
			<template v-else>
				<div class="item disabled" title="保持">
					<SvgIcon name="iconfont icon-transfer" class="icon mr3" size="18px" />
					<span>转接</span>
				</div>
			</template>

			<!--			&lt;!&ndash; 三方会议 可用(当前处于通话中)&ndash;&gt;
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('conference') && onCallArr.length !== 1">
				<div class="item active" title="三方会议" @click="onControlClick('conference')">
					<SvgIcon name="iconfont icon-conference" class="icon mr3" size="16px" />
					<span>三方会议</span>
				</div>
			</template>
			&lt;!&ndash; 三方会议并且处于三方会议中  &ndash;&gt;
			<template v-else-if="telStatusInfo.isDutyOn && activeArr.includes('conference') && onCallArr.length === 1">
				<el-popover :width="130 * onCallArr.length" :offset="0" v-model:visible="threeWayVisible" trigger="hover" popper-class="hangup-popover">
					<template #reference>
						<div class="item active" title="三方会议">
							<SvgIcon name="iconfont icon-conference" class="icon mr3" size="16px" />
							<span>三方会议（{{ onCallArr.length }}）</span>
						</div>
					</template>
					<div class="hangup-container">
						<div class="hangup-item" v-for="(item, index) in onCallArr" :key="index">
							<p class="hangup-item-phoneNumber">{{ item.telNo }}</p>
							<el-button size="small" @click="kickOut(item)" class="default-button">踢出</el-button>
						</div>
					</div>
				</el-popover>
			</template>
			&lt;!&ndash; 三方会议 不可用 &ndash;&gt;
			<template v-else>
				<div class="item disabled" title="三方会议">
					<SvgIcon name="iconfont icon-conference" class="icon mr3" size="16px" />
					<span>三方会议</span>
				</div>
			</template>-->

			<!-- 呼叫 可用-->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('outbound')">
				<div class="item active" title="呼叫" @click="onControlClick('outbound')">
					<SvgIcon name="iconfont icon-outbound" class="icon mr3" size="18px" />
					<span>呼叫</span>
				</div>
			</template>
			<!-- 呼叫 不可用 -->
			<template v-else>
				<div class="item disabled" title="呼叫">
					<SvgIcon name="iconfont icon-outbound" class="icon mr3" size="18px" />
					<span>呼叫</span>
				</div>
			</template>
		</div>
		<!-- 等待人数 -->
		<div class="wait-box">
			<div class="today-wait">
				<span class="today-wait-label">今日等待:</span
				><el-text class="today-wait-num ml5" tag="b" type="danger">{{ todayWaitValue.toFixed(0) }}</el-text>
			</div>
			<div class="current-wait">
				<span class="current-wait-label">当前等待:</span
				><el-text class="current-wait-time ml5" tag="b" type="danger">{{ currentWaitValue.toFixed(0) }}</el-text>
			</div>
		</div>
	</div>

	<!-- 占位标签 -->
	<div class="seizeSeat-box"></div>
	<!-- 功能 -->
	<!-- 签入弹窗 -->
	<el-dialog v-model="state.dutyDialogVisible" draggable title="签入" width="500px" :show-close="false">
		<el-form :model="state.dutyForm" label-width="80px" ref="dutyFormRef">
			<el-form-item
				label="分机"
				prop="telNo"
				:rules="[{ required: true, message: '请选择需要签入的分机', trigger: 'change' }]"
				v-if="AppConfigInfo.isNeedTelNo"
			>
				<el-select-v2
					v-model="state.dutyForm.telNo"
					:options="state.telsList"
					:props="{
						label: 'telNo',
						value: 'telNo',
					}"
					placeholder="选择要签入的分机"
					filterable
					class="w100"
					:height="500"
				/>
			</el-form-item>
			<!-- 是否需要填写分机密码 -->
			<el-form-item
				label="分机密码"
				prop="password"
				:rules="[{ required: true, message: '请填写分机密码', trigger: 'blur' }]"
				v-if="AppConfigInfo.isTelNeedVerify"
			>
				<el-input v-model="state.dutyForm.password" placeholder="请填写分机密码" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dutyDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnDuty(dutyFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 小休弹窗 -->
	<el-dialog
		v-model="state.restDialogVisible"
		ref="dialogRestRef"
		draggable
		title="小休申请"
		:width="AppConfigInfo.isRestApproval ? '60%' : '500px'"
		@mouseup="mouseup"
		:style="'transform: ' + state.transform + ';'"
		@close="restFormOpened"
	>
		<!-- 需要审核 -->
		<template v-if="AppConfigInfo.isRestApproval">
			<el-form :model="state.restForm" label-width="100px" ref="restFormRef">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="小休" prop="reason" :rules="[{ required: true, message: '请选择小休原因', trigger: 'change' }]">
							<el-select v-model="state.restForm.reason" placeholder="请选择小休原因" class="w100" clearable>
								<el-option v-for="item in state.restReasonOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item.dicDataValue" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="下一环节" prop="nextStepCode" :rules="[{ required: true, message: '请选择下一环节', trigger: 'change' }]">
							<el-select v-model="state.restForm.nextStepCode" placeholder="请选择下一环节" class="w100" @change="selectNextStep">
								<el-option v-for="item in state.nextStepOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="处理人" prop="nextHandlers" :rules="[{ required: false, message: '请选择处理人', trigger: 'change' }]">
							<el-select
								v-model="state.restForm.nextHandlers"
								multiple
								filterable
								placeholder="请选择处理人"
								class="w100"
								@change="selectHandlers"
								value-key="key"
							>
								<el-option v-for="item in state.handlerOptions" :key="item.key" :label="item.value" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-if="state.restForm.nextHandlers.length > 1">
						<el-form-item
							label="主办"
							prop="nextMainHandler"
							multiple
							filterable
							:rules="[{ required: false, message: '请选择主办', trigger: 'change' }]"
						>
							<el-select v-model="state.restForm.nextMainHandler" placeholder="请选择主办" class="w100">
								<el-option v-for="item in state.handlerMainOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="" prop="acceptSms">
							<el-checkbox v-model="state.restForm.acceptSms" label="短信通知" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item
							label="是否发起会签"
							prop="isStartCountersign"
							:rules="[{ required: false, message: '请选择是否发起会签', trigger: 'change' }]"
						>
							<el-switch v-model="state.restForm.isStartCountersign" inline-prompt active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="办理意见" prop="opinion" :rules="[{ required: true, message: '请填写小休办理意见', trigger: 'blur' }]">
							<common-advice
								@chooseAdvice="chooseAdvice"
								v-model="state.restForm.opinion"
								placeholder="请填写小休办理意见"
								:loading="state.loading"
								:commonEnum="commonEnum.RestReason"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="附件" prop="remark" :rules="[{ required: false, message: '请填写诉求内容', trigger: 'change' }]">
							<annex-list name="小休附件" businessId="" classify="小休上传" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</template>
		<!-- 不需要审核 -->
		<template v-else>
			<el-form :model="state.restForm" label-width="90px" ref="restFormRef">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="小休" prop="reason" :rules="[{ required: true, message: '请选择小休原因', trigger: 'change' }]">
							<el-select v-model="state.restForm.reason" placeholder="请选择小休原因" class="w100" clearable>
								<el-option v-for="item in state.restReasonOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item.dicDataValue" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.restDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnRest(restFormRef)" :loading="state.loading">提 交</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 转接弹窗 -->
	<el-dialog v-model="state.transferDialogVisible" draggable title="转接" width="500px">
		<el-form :model="state.transferForm" label-width="100px" ref="transferFormRef">
			<el-form-item label="转接号码" prop="telNo" :rules="[{ required: true, message: '请选择转接分机或填写外部电话', trigger: 'blur' }]">
				<el-select-v2
					v-model="state.transferForm.telNo"
					:options="state.threeWayAndTransfer"
					placeholder="请选择转接分机或填写外部电话"
					filterable
					class="w100"
					allow-create
					default-first-option
					:props="{
						label: 'dicDataName',
						value: 'dicDataValue',
					}"
					:height="650"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.transferDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnTransfer(transferFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 呼叫弹窗 -->
	<el-dialog v-model="state.outboundDialogVisible" draggable title="呼叫" width="450px">
		<el-form :model="state.outboundForm" label-width="80px" ref="outboundFormRef">
			<el-form-item label="呼叫号码" prop="telNo" :rules="[{ required: true, message: '请选择或填写呼叫号码', trigger: 'blur' }]">
				<el-select-v2
					v-model="state.outboundForm.telNo"
					:options="state.telsList"
					placeholder="请选择或填写呼叫号码"
					filterable
					class="w100"
					allow-create
					default-first-option
					:props="{
						label: 'telNo',
						value: 'telNo',
					}"
					:height="500"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.outboundDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnOutbound(outboundFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 三方通话弹窗 -->
	<el-dialog v-model="state.threeWayDialogVisible" draggable title="三方会议" width="450px">
		<el-form :model="state.threeWayForm" label-width="120px" ref="threeWayFormRef">
			<el-form-item label="三方通话号码" prop="telNo" :rules="[{ required: true, message: '请选择或填写三方通话号码', trigger: 'blur' }]">
				<el-select-v2
					v-model="state.threeWayForm.telNo"
					:options="state.threeWayAndTransfer"
					placeholder="请选择或填写三方通话号码"
					filterable
					class="w100"
					allow-create
					default-first-option
					:props="{
						label: 'dicDataName',
						value: 'dicDataValue',
					}"
					:height="650"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.threeWayDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnThreeWay(threeWayFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="ybTelControl">
import { reactive, ref, computed, defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue';
import { ElMessageBox, ElNotification, ElMessage, FormInstance } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useTelStatus, TelStates, RestStates } from '@/stores/telStatus';
import { useUserInfo } from '@/stores/userInfo';
import { useAppConfig } from '@/stores/appConfig';
import { formatDuration } from '@/utils/formatTime';
import { commonEnum, getNowDateTime } from '@/utils/constants';
import other from '@/utils/other';
import { workflowStepOptions } from '@/api/system/workflow';
import {
	restFlowStart,
	restFlowDel,
	restFlowStartWex,
	telRestBaseData,
	dutyOff,
	dutyOn,
	busyOff,
	busyOn,
	queryBlacklist,
	getTelStatus,
	switchMode,
	startAfterCall,
	endAfterCall,
	getTodayWaitNum,
} from '@/api/public/wex';
import signalR from '@/utils/signalR';
import { Local } from '@/utils/storage';
import { useRouter } from 'vue-router';
import mittBus from '@/utils/mitt';
import { voiceAssistant } from '@/api/todo/voiceAssistant';
import { submitLog } from '@/api/public/log';
import { getDataByCode } from '@/api/system/dict';
import { useTransition } from '@vueuse/core';
import { useWebSocket } from '@/hooks/useWebsocket';
import { olaFn } from '@/utils/olaFn';
import { useIntervalFn, useTimeoutFn } from '@vueuse/shared/index';
import { useGlobalState } from '@/utils/callCenter';
import { useThemeConfig } from '@/stores/themeConfig';
import { extensionList } from '@/api/tels/extension';
import XEUtils from 'xe-utils';
// 引入组件
const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue'));

const globalState = useGlobalState(); // 全局变量
const state = reactive<any>({
	active: <EmptyArrayType>[], // 当前选中
	currentStatus: '', //当前通话状态
	dutyDialogVisible: false, //签入选分机弹窗
	dutyForm: {
		//签入选分机表单
		telNo: null, //分机号
	},
	telsList: <EmptyArrayType>[], // 分机列表
	threeWayAndTransfer: <EmptyArrayType>[], // 三方通话和转接
	loading: false,
	showHangupList: false, //是否展示挂断列表
	restDialogVisible: false, //小休弹窗
	restForm: {
		//小休表单
		opinion: '', //小休原因
		nextStepCode: '', //下一步
		nextHandlers: [], //下一步处理人
		acceptSms: false, //是否接收短信
		nextMainHandler: '', //下一步主办人
		reason: '', //小休原因
		expiredTime: '', //期满时间
		isStartCountersign: false, //是否发起会签
	},
	handlerMainOptions: [], // 主办
	transferDialogVisible: false, // 转接弹窗
	transferForm: {
		//转接表单
		telNo: null,
	},
	outboundDialogVisible: false, //外呼弹窗
	outboundForm: {
		// 外呼表单
		telNo: null, //外呼号码
	},
	restReasonOptions: [], // 小休原因
	nextStepOptions: [], // 下一个环节
	handlerOptions: [], // 处理人
	handleId: '', // 流程处理ID
	transform: 'translate(0px, 0px)',
	fileList: [], // 文件上传列表
	threeWayDialogVisible: false, // 三方会议弹窗
	threeWayForm: {
		// 三方会议表单
		telNo: null, // 三方会议号码
	},
	whiteList: [], // 白名单
});

const useTelStatusStore = useTelStatus();
const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
const appConfigStore = useAppConfig();
const { AppConfigInfo } = storeToRefs(appConfigStore); // 系统配置信息
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
const showPop = ref(false);

const talkTime = ref(0); // 通话时长
const talkTimer = useIntervalFn(
	() => {
		talkTime.value += 1;
		Local.set('talkTime', String(talkTime.value));
	},
	1000,
	{ immediate: false }
);
// 开始通话计时
const startTalkTimer = () => {
	let localTalkTime = Local.get('talkTime');
	if (talkTime.value) {
		talkTime.value = Number(localTalkTime);
	}
	talkTimer.resume();
	stopIdleTime();
	stopOutboundTime();
};
// 结束通话计时
const stopTalkTimer = () => {
	talkTimer.pause();
	talkTime.value = 0;
	Local.remove('talkTime');
};

const signTime = ref(0); //签入时长
// 使用 useInterval 创建定时器
const signInTimer = useIntervalFn(
	() => {
		signTime.value += 1;
	},
	1000,
	{ immediate: false }
);
// 签入时长及时开始
const startSignTime = (second?: number) => {
	if (second) {
		// 从后台获取签入时长
		if (second < 0) second = 0; // 防止后台返回的签入时间大于当前时间
		signTime.value = second;
		signInTimer.resume();
	} else {
		signInTimer.resume();
	}
};
//  签入时长计时结束
const stopSignTime = () => {
	signTime.value = 0;
	signInTimer.pause();
};

// 空闲时长
const idleTime = ref(0);
const idleTimer = useIntervalFn(
	() => {
		idleTime.value += 1;
	},
	1000,
	{ immediate: false }
);
// 空闲时长开始
const startIdleTime = () => {
	idleTimer.resume();
	stopBusyTime();
};
//  空闲时长计时结束
const stopIdleTime = () => {
	idleTime.value = 0;
	idleTimer.pause();
};
// 外呼时长
const outboundTime = ref(0);
const outboundTimer = useIntervalFn(
	() => {
		outboundTime.value += 1;
	},
	1000,
	{ immediate: false }
);
// 外呼时长开始
const startOutboundTime = () => {
	outboundTimer.resume();
	stopIdleTime();
};
//  外呼时长计时结束
const stopOutboundTime = () => {
	outboundTime.value = 0;
	outboundTimer.pause();
};
// 示忙时长
const busyTime = ref(0);
const busyTimer = useIntervalFn(
	() => {
		busyTime.value += 1;
	},
	1000,
	{ immediate: false }
);
// 示忙时长开始
const startBusyTime = () => {
	busyTimer.resume();
	stopIdleTime();
};
//  示忙时长计时结束
const stopBusyTime = () => {
	busyTime.value = 0;
	busyTimer.pause();
};

// 整理时长
const arrangeTime = ref(0);
const arrangeTimer = useIntervalFn(
	() => {
		arrangeTime.value += 1;
	},
	1000,
	{ immediate: false }
);
// 整理时长开始
const startArrangeTime = () => {
	arrangeTimer.resume();
	stopIdleTime();
};
//  整理时长计时结束
const stopArrangeTime = () => {
	arrangeTime.value = 0;
	arrangeTimer.pause();
};
// 监听消息
const signalRStart = async () => {
	signalR?.SR?.on('RestApplyPass', (data) => {
		// 小休审批通过消息
		console.log(`${getNowDateTime()}：小休审批通过消息`, data);
		RestApplyPassFn(data);
	});
};
// 检查用户状态
// 设置当前可用的按钮
const activeArr = computed(() => {
	const switchCases: any = {
		dutyOff: ['dutyOn'], // 签出状态
		dutyOn: ['dutyOff', 'callOut', 'rest', 'outbound'], // 已签入无通话状态
		onCallOut: ['dutyOff', 'callOut', 'outbound'], // 外呼模式中
		rest: ['rest', 'dutyOff'], // 小休中状态
		ring: ['hangup'], //振铃中
		onCall: ['hangup', 'hold', 'transfer', 'conference', 'mute'], // 单个通话中
		onMute: ['hangup', 'transfer', 'mute'], // 静音中
		onHold: ['hangup', 'hold', 'transfer'], // 保持中
		onTalkingDeal: ['rest', 'TalkingDeal', 'dutyOff'], // 话后整理中
		onConference: ['hangup'], // 三方会议中 只能挂断
		onThreeWay: ['hangup', 'conference'], // 三方会议呼出中 只能挂断和踢人
	};
	let arr = <EmptyArrayType>[];
	if (telStatusInfo.value.phoneControlState in switchCases) {
		arr = switchCases[telStatusInfo.value.phoneControlState];
	}
	return arr;
});
// 设置当前状态的值
const currentStatusText = computed(() => {
	const statusMap: any = {
		dutyOff: '签出',
		dutyOn: '空闲',
		onCallOut: '外呼中',
		rest: '小休中',
		ring: '振铃中',
		onHold: '保持中',
		onMute: '静音中',
		onCall: '通话中',
		onTalkingDeal: '整理中',
		onConference: '会议中',
		onThreeWay: '会议中',
	};
	return statusMap[telStatusInfo.value.phoneControlState] || '';
});
// 小休审批通过消息
const RestApplyPassFn = (data: any) => {
	ElNotification({
		title: '成功',
		message: '小休审批通过，开始小休',
		type: 'success',
	});
	//不需要审核直接开始小休
	olaRef.value.go_break(state.restForm.reason); //设置忙碌
	console.log(`${getNowDateTime()}：调用示忙审核`);
};
// 查询所有分机
const getTelsLists = async () => {
	try {
		const { result } = await extensionList({ hasListen: false });
		state.telsList = result ?? [];
		return state.telsList;
	} catch (err) {
		console.log(`${getNowDateTime()}：获取分机错误}`, err);
	}
};
// 查询三方会议和转接的号码
const getThreeWayAndTransfer = async () => {
	try {
		const { result } = await getDataByCode('TransferNumber');
		state.threeWayAndTransfer = result ?? [];
	} catch (err) {
		console.log(`${getNowDateTime()}:获取转接和三方会议的号码错误`, err);
	}
};
// 点击事件
const onControlClick = (val: string) => {
	switch (val) {
		case 'dutyOn': //签入
			onDutyFn();
			break;
		case 'dutyOff': //签出
			offDutyFn();
			break;
		case 'unCallOut': //取消外呼模式
			onUnCallOut();
			break;
		case 'callOut': //外呼模式
			onCallOut();
			break;
		case 'hangup': //挂断
			onHangup();
			break;
		case 'rest': //小休
			onRest();
			break;
		case 'restEnd': //结束小休
			onRestEnd();
			break;
		case 'hold': //保持
			onHold();
			break;
		case 'unHold': //取消保持
			onUnHold();
			break;
		case 'mute': //保持
			onMute();
			break;
		case 'unMute': //取消保持
			onUnMute();
			break;
		case 'unTalkingDeal': // 取消话后整理
			unTalkingDeal();
			break;
		case 'transfer': //转接
			onTransfer();
			break;
		case 'conference': //三方会议
			onConference();
			break;
		case 'outbound': //外呼
			onOutbound();
			break;
		default:
			break;
	}
};
// 链接呼叫中心
const olaRef = ref();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const websocket_connect = () => {
	olaRef.value = olaFn(themeConfig.value.callCenterSocketUrl, {
		username: currentTel.value.telNo,
		password: currentTel.value.password,
		onConnected: onConnected, // 连接成功
		onDisconnected: onDisconnected, // 断开链接
		onMessage: onMessage, // 接收消息
		onError: onError, // 错误
		autoReconnect: {
			delay: 5000,
		}, // 自动重连
		heartbeat: {
			message: JSON.stringify({ cmd: 'ping' }),
			interval: 5000,
			// pongTimeout: 1000,
		},
	});
	console.log(`${getNowDateTime()}：开始链接呼叫中心`);
};
// 呼叫中心链接成功
const onConnected = () => {
	Local.set('currentTel', currentTel.value.telNo);
	olaRef.value.logout(currentTel.value.telNo); //连接之后，先登出一次,防止其他地方已经登陆
	let array_ola_queue: EmptyArrayType = []; // 队列
	if (currentTel.value.telModel === 2) {
		// 外呼模式
		let array = currentTel.value.queueCallOut.split(',');
		for (let i = 0; i < array.length; i++) {
			array_ola_queue[i] = array[i];
		}
	} else {
		// 普通模式
		let array = currentTel.value.queue.split(',');
		for (let i = 0; i < array.length; i++) {
			array_ola_queue[i] = array[i];
		}
	}
	olaRef.value.login(array_ola_queue, currentTel.value.telNo, { type: 'onhook' });
	globalState.callCenterWs = olaRef.value;
	if (currentTel.value.telModel != 2) {
		// 普通模式才链接语音助手
		connectVoiceAssistant(currentTel.value.telNo); // 坐席助手开启
	}
	const name: string = `天润分机号：${currentTel.value.telNo}的websocket链接成功`;
	const remark: string = `天润websocket 链接成功：分机模式：${currentTel.value.telModel}`;
	const request = {
		creationTime: new Date(),
		name,
		remark,
		executeUrl: themeConfig.value.callCenterSocketUrl,
	};
	submitLogFn(request);
	console.log(`${getNowDateTime()}：呼叫中心链接成功`);
};
// 呼叫中心链接关闭
const onDisconnected = (event: any) => {
	globalState.callCenterWs = null; //
	globalState.callCenterIsSignIn = false; // 签出状态
	resetState();
	const currentTel = Local.get('currentTel');
	const name: string = `天润分机号：${currentTel}的websocket断开链接`;
	const remark: string = `天润websocket 断开: 错误code：${event.code}, 错误原因：${event.reason}, 是否正常断开：${event.wasClean}`;
	const request = {
		creationTime: new Date(),
		name,
		remark,
		executeUrl: themeConfig.value.callCenterSocketUrl,
	};
	submitLogFn(request);
	console.log(`${getNowDateTime()}：呼叫中心断开链接`, event);
};
// 来电弹屏方式 1-接通弹屏；2-振铃弹屏
const openFlag = ref('2');
openFlag.value = XEUtils.toValueString(AppConfigInfo.value.callInOpenType)?.trim(); // 转换为字符串
// 呼叫中心消息
const onMessage = async (event: any) => {
	const data = JSON.parse(event);
	if (data.agent_extn) {
		// 设置分机号和坐席组
		useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
	}
	if (data.event_type == 'agent_state') {
		// 坐席状态改变
		switch (data.state) {
			case 'login': // 签入消息回调
				useTelStatusStore.setDutyState(true);
				globalState.callCenterIsSignIn = true; // 签入状态
				useTimeoutFn(() => {
					if (currentTel.value.telModel == 2) {
						// 设置示闲状态
						olaRef.value.go_ready();
						// 设置外呼模式
						useTelStatusStore.setCallOut(true);
						// 设置话机状态 外呼模式中
						useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
					} else {
						if (isRest.value) {
							// 如果是小休状态
							olaRef.value.go_break(''); //设置忙碌
						} else {
							// 设置示闲状态
							olaRef.value.go_ready();
						}
					}
				}, 100);
				console.log(
					`${getNowDateTime()}：接收消息：呼叫中心：已签入,当前分机模式：${currentTel.value.telModel},当前分机是否正在休息：${isRest.value}`
				);
				break;
			case 'logout': // 签出消息回调
				const currentTelLogOut = Local.get('currentTel');
				const name: string = `天润分机号：${currentTelLogOut}手动签出`;
				const remark: string = `天润分机号：${currentTelLogOut}手动签出`;
				const request = {
					creationTime: new Date(),
					name,
					remark,
					executeUrl: themeConfig.value.callCenterSocketUrl,
				};
				await submitLogFn(request);
				seatAssistOff(); // 坐席助手关闭
				olaRef.value.close();
				globalState.callCenterIsSignIn = false; // 签出状态
				console.log(`${getNowDateTime()}:接收消息：呼叫中心：已签出`);
				break;
			case 'ready': // 示闲消息回调
				if (currentTel.value.telModel === 2) {
					// 设置外呼模式
					useTelStatusStore.setCallOut(true);
					// 设置话机状态 修改为外呼状态
					useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
					startOutboundTime();
					stopTalkTimer();
					sendMsg('ready');
				} else {
					// 示闲中
					// 设置话机状态 结束休息改为签入状态
					useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
					// 设置取消休息
					useTelStatusStore.setRest(RestStates.unRest);
					state.loading = false;
					if (isAcw.value) {
						// 如果是话后整理中
						await onEndRecord('1'); //话后整理结束
						stopArrangeTime();
						isAcw.value = false;
					}
					startIdleTime();
					stopTalkTimer();
					stopArrangeTime();
					sendMsg('ready');
				}
				console.log(`${getNowDateTime()}：接收消息：呼叫中心：示闲中,当前分机模式：${currentTel.value.telModel}`);
				break;
			case 'unready': // 示忙消息回调
				break_reason(data.private_data);
				// 示忙中
				useTelStatusStore.setPhoneControlState(TelStates.rest);
				useTelStatusStore.setRest(RestStates.resting);
				sendMsg('unready'); // 发送消息 业务系统消息通知
				startBusyTime(); // 开始示忙
				console.log(`${getNowDateTime()}:接收消息：呼叫中心：示忙中,小休开始`);
				break;
			case 'acw': // 整理消息回调
				if (currentTel.value.telModel === 2) {
					// 出直接调用示闲
					olaRef.value.go_ready(); // 示闲
				} else {
					if (call_direction.value === 'inbound') {
						isAcw.value = true;
						startArrangeTime(); // 开始整理时长
						// 话后整理中
						const time: number = AppConfigInfo.value.talkingDealTime * 1000; // 话后整理时间
						ElNotification({
							title: '自动开启话后整理成功',
							message: `${time / 1000}秒后自动结束话后整理,或者手动结束话后整理`,
							type: 'success',
							duration: 1000 * 10,
						});
						// 设置话后整理
						useTelStatusStore.setTalkingDeal(true);
						// 设置话机状态 设置为话后整理中
						useTelStatusStore.setPhoneControlState(TelStates.onTalkingDeal);
						talkDealTimer.value = useTimeoutFn(() => {
							// 设置话后整理
							useTelStatusStore.setTalkingDeal(false);
							// 设置话机状态 取消话后整理修改为空闲状态
							useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
							olaRef.value.go_ready(); // 示闲
							talkDealTimer.value?.stop();
							stopArrangeTime();
						}, time);

						// 如果不是话后整理中
						await onBeginRecord('1'); // 挂机后整理开始
						sendMsg('acw');
					} else {
						// 呼出直接调用示闲
						olaRef.value.go_ready(); // 示闲
					}
				}
				console.log(`${getNowDateTime()}:接收消息：呼叫中心：话后整理，电话方向：${call_direction.value}`);
				break;
			case 'busy': // 其他消息回调
				console.log(`${getNowDateTime()}：接收消息：呼叫中心：其他消息回调`);
				break;
		}
		if (data.state == 'busy') {
			useTelStatusStore.setDutyState(true); // 确保一进来消息就是通话中 设置签入状态
			globalState.callCenterIsSignIn = true; // 签入状态
			call_direction.value = data.call_direction; // 保存呼叫方向
			globalState.callCenterIsOnThePhone = true; // 当前正在通话状态
			if (['held', 'unheld'].includes(data.private_data)) {
				console.log(`${getNowDateTime()}：接收消息：呼叫中心：保持，是否保持模式：${isCallHold.value}`);
				if (isCallHold.value) {
					// 保持
					if (data.private_data == 'held') {
						// 设置电话状态
						useTelStatusStore.setHold(true);
						// 设置电话状态 保持中
						useTelStatusStore.setPhoneControlState(TelStates.onHold);
						sendMsg('held');
						await onBeginRecord('2'); // 保持开始 业务系统统计需要
						isCallHold.value = true;
					} else {
						// 设置电话状态  取消单个保持为通话中
						useTelStatusStore.setHold(false);
						// 设置电话状态
						useTelStatusStore.setPhoneControlState(TelStates.onCall);
						sendMsg('busy');
						await onEndRecord('2'); // 保持结束 业务系统统计需要
						isCallHold.value = false;
					}
				} else {
					// 如果是静音状态
					if (data.private_data == 'held') {
						// 设置电话状态
						useTelStatusStore.setMute(true);
						// 设置电话状态 静音中
						useTelStatusStore.setPhoneControlState(TelStates.onMute);
						sendMsg('mute');
						await onBeginRecord('4'); // 保持开始 业务系统统计需要
						isMute.value = false;
					} else {
						// 设置电话状态  取消单个静音为通话中
						useTelStatusStore.setMute(false);
						// 设置电话状态
						useTelStatusStore.setPhoneControlState(TelStates.onCall);
						sendMsg('busy');
						await onEndRecord('4'); // 记录静音结束
						isMute.value = false;
					}
				}
			} else {
				// 非保持状态
				if (data.private_data == 'monitoring') {
					// 三方来电振铃中
					useTelStatusStore.setPhoneControlState(TelStates.ring);
					console.log(`${getNowDateTime()}：接收消息：呼叫中心：三方来电振铃中`);
				} else if (data.private_data == 'three_way') {
					// 三方来电通话中
					// 开始计时
					startTalkTimer();
					// 设置电话状态 三方通话中
					useTelStatusStore.setPhoneControlState(TelStates.onConference);
					console.log(`${getNowDateTime()}：接收消息：呼叫中心：三方来电通话中`);
					sendMsg('busy');
				} else if (data.private_data == 'three_way_hangup') {
					// 三方来电挂断
					// 设置电话状态 通话中
					useTelStatusStore.setPhoneControlState(TelStates.onCall);
					onCallArr.value = [];
					sendMsg('busy');
					console.log(`${getNowDateTime()}：接收消息：呼叫中心：三方来电挂断`);
				} else if (data.private_data == 'three_way_ring') {
					// 三方通话呼出中
					// 设置振铃中
					useTelStatusStore.setPhoneControlState(TelStates.ring);
					sendMsg('busy');
					console.log(`${getNowDateTime()}：接收消息：呼叫中心：三方通话呼出中`);
				} else if (data.private_data == 'three_way_answered') {
					// 三方通话呼出接通
					onCallArr.value.push({ telNo: state.threeWayForm.telNo }); // 三方通话呼出接通
					// 设置电话状态 呼出三方通话中 可以踢人和挂断通话
					useTelStatusStore.setPhoneControlState(TelStates.onThreeWay);
					sendMsg('treeWay');
					console.log(`${getNowDateTime()}：接收消息：呼叫中心：三方通话呼出接通，推送一次`);
				} else if (data.call_direction == 'outbound') {
					// 呼出
					if (data.private_data == 'calling') {
						// 拨号中
						// 设置电话状态 振铃中
						useTelStatusStore.setPhoneControlState(TelStates.ring);
						sendMsg('ring');
						console.log(`${getNowDateTime()}：接收消息：呼叫中心：呼出拨号中`);
					} else if (data.private_data == 'answered') {
						//振铃中
						if (!data.other_answered) {
							// 设置电话状态 振铃中
							useTelStatusStore.setPhoneControlState(TelStates.ring);
							console.log(`${getNowDateTime()}：接收消息：呼叫中心：呼出振铃中`);
						} else if (data.other_answered == true) {
							// 开始计时
							startTalkTimer();
							// 设置电话状态 通话中
							useTelStatusStore.setPhoneControlState(TelStates.onCall);
							mittBus.emit('outboundConnect', {
								callId: data.other_accept, // callID
								callNumber: data.dnis, // 被叫号码
							}); // 外呼接通之后收到的消息
							console.log(`${getNowDateTime()}：接收消息：呼叫中心：呼出通话中`);
						}
						sendMsg('busy');
					}
				} else {
					// 呼入
					if (data.private_data == 'ring') {
						try {
							const name: string = `振铃消息：分机号:${currentTel.value.telNo},来电号码:${data.ani},转接来源:${data.gateway},按键接收:${data.app_data.dtmf_his},通话ID:${data.other_accept}`;
							const remark: string = `振铃消息：分机号:${currentTel.value.telNo},来电号码:${data.ani},转接来源:${data.gateway},按键接收:${data.app_data.dtmf_his},通话ID:${data.other_accept}`;
							const request = {
								creationTime: new Date(),
								name,
								remark,
								executeUrl: themeConfig.value.callCenterSocketUrl,
							};
							await submitLogFn(request);
						} catch (e) {
							console.log(`getNowDateTime()：日志记录错误`);
						}
						// 设置电话状态 振铃中
						useTelStatusStore.setPhoneControlState(TelStates.ring);
						console.log(`${getNowDateTime()}：接收消息：呼叫中心：振铃弹单信息`, data);
						if (openFlag.value === '2') {
							// 振铃弹单
							await getWithList(); // 获取白名单列表
							const isWhite = state.whiteList.find((item: any) => item.phone === data.ani);
							if (isWhite) {
								// 如果来电电话在呼入白名单中 需要提示
								ElNotification({
									title: '来电提醒',
									message: '该市民为白名单。',
									type: 'success',
								});
							}
							await router.push({
								name: 'orderAccept',
								query: {
									createBy: 'tel',
									fromTel: data.ani, // 来电号码
									callId: data.other_accept,
									transfer: data.gateway, // 转接来源（如12345，12333）
									identityType: data.app_data.dtmf_his, // 按键接收（1：市民 2：企业 3：智能应答）
									timeStamp: new Date().getTime(),
								},
							});
						}
						sendMsg('ring');
					} else if (data.private_data == 'answered') {
						try {
							const name: string = `接通消息：分机号:${currentTel.value.telNo},来电号码:${data.ani},转接来源:${data.gateway},按键接收:${data.app_data.dtmf_his},通话ID:${data.other_accept}`;
							const remark: string = `接通消息：分机号:${currentTel.value.telNo},来电号码:${data.ani},转接来源:${data.gateway},按键接收:${data.app_data.dtmf_his},通话ID:${data.other_accept}`;
							const request = {
								creationTime: new Date(),
								name,
								remark,
								executeUrl: themeConfig.value.callCenterSocketUrl,
							};
							await submitLogFn(request);
						} catch (e) {
							console.log(`getNowDateTime()：日志记录错误`);
						}
						console.log(data, '接通的消息体');
						// 开始计时
						startTalkTimer();
						// 设置电话状态 通话中
						useTelStatusStore.setPhoneControlState(TelStates.onCall);
						if (openFlag.value === '1') {
							// 接通弹单
							await getWithList(); // 获取白名单列表
							const isWhite = state.whiteList.find((item: any) => item.phone === data.ani);
							if (isWhite) {
								// 如果来电电话在呼入白名单中 需要提示
								ElNotification({
									title: '来电提醒',
									message: '该市民为白名单。',
									type: 'success',
								});
							}
							await router.push({
								name: 'orderAccept',
								query: {
									createBy: 'tel',
									fromTel: data.ani, // 来电号码
									callId: data.other_accept,
									transfer: data.gateway, // 转接来源（如12345，12333）
									identityType: data.app_data.dtmf_his, // 按键接收（1：市民 2：企业 3：智能应答）
									timeStamp: new Date().getTime(),
								},
							});
						}
						console.log(`${getNowDateTime()}：接收消息：呼叫中心：呼入通话中`);
						sendMsg('busy');
					}
				}
			}
		} else if (data.old_state == 'busy') {
			//挂机后系统可以返回两种状态:acw 话后整理状态 ready 示闲状态，如果不需要acw，可以联系我们后台修改配置，如果需要保留，如果需要再次拨打电话的话，需要手动点击示闲按钮
			// 结束计时
			stopTalkTimer();
			onCallArr.value = [];
			/*		if (currentTel.value.telModel === 2) {
				// 设置外呼模式
				useTelStatusStore.setCallOut(true);
				// 设置话机状态 修改为外呼状态
				useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
				startIdleTime();
				stopTalkTimer();
				sendMsg('ready');
			} else {
				// 示闲中
				// 设置话机状态 结束休息改为签入状态
				useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
				// 设置取消休息
				useTelStatusStore.setRest(RestStates.unRest);
				state.loading = false;
				if (isAcw.value) {
					// 如果是话后整理中
					await onEndRecord('1'); //话后整理结束
					stopArrangeTime();
					isAcw.value = false;
				}
				startIdleTime();
				stopTalkTimer();
				stopArrangeTime();
				sendMsg('ready');
			}*/
			console.log(`${getNowDateTime()}:接收消息：呼叫中心：已挂机`, data);
			globalState.callCenterIsOnThePhone = false; // 结束通话状态
		}
	} else if (data.event_type == 'agent_caller_state') {
		//通话状态
		if (data.action == 'in') {
			console.log(`${getNowDateTime()}:接收消息：呼叫中心：呼入`);
		} else {
			console.log(`${getNowDateTime()}:接收消息：呼叫中心：呼出`);
		}
	} else if (data.event_type == 'command/reply') {
		// 其他消息
		// console.log('command/reply', data);
	}
};

// 呼叫中心链接错误
const onError = (ws: any, e: any) => {
	globalState.callCenterIsSignIn = false; // 签出状态
	console.log(`${getNowDateTime()}:呼叫中心链接错误`, e);
};
// 业务系统发送消息
const sendMsg = (state: string) => {
	if (signalR.SR.state === 'Connected') {
		signalR.SR.invoke('SendSeatState', {
			telNo: telStatusInfo.value.telsNo,
			state,
			workUserName: userInfos.value.name,
			workUserId: userInfos.value.id,
		});
	}
};
// 业务系统记录开始 1话后整理 2保持 3静音
const onBeginRecord = async (type: string) => {
	// type 1话后整理 2保持 3静音
	const typeMap = {
		'1': '话后整理',
		'2': '保持',
		'4': '静音',
		'5': '外呼模式',
	};
	try {
		const res: any = await startAfterCall({ actionType: type });
		console.log(`${getNowDateTime()}：业务系统记录开始,业务类型：${typeMap[type]}`, res);
	} catch (err) {
		console.log(`${getNowDateTime()}：业务系统记录开始失败,业务类型：${typeMap[type]}`, err);
	}
};
// 业务系统记录结束
const onEndRecord = async (type: string) => {
	// 映射中文
	const typeMap = {
		'1': '话后整理',
		'2': '保持',
		'4': '静音',
		'5': '外呼模式',
	};
	try {
		const res: any = await endAfterCall({ actionType: type });
		console.log(`${getNowDateTime()}：业务系统记录结束,业务类型：${typeMap[type]}`, res);
	} catch (err) {
		console.log(`${getNowDateTime()}：业务系统记录结束失败,业务类型：${typeMap[type]}`, err);
	}
};
const router = useRouter();
const talkDealTimer = ref<any>(null); // 话后整理定时器
const call_direction = ref<any>(''); // 呼叫方向
// 记录日志
const submitLogFn = async (request: any) => {
	try {
		await submitLog(request);
		Local.remove('telNo');
	} catch (error) {
		console.log(`${getNowDateTime()}：日志记录失败,${error}`);
	}
};

const dutyFormRef = ref<RefType>();
const currentTel = ref<any>({}); // 当前分机
const isRest = ref<boolean>(false); // 是否小休
//签入
const onDutyFn = async () => {
	if (AppConfigInfo.value.isNeedTelNo || AppConfigInfo.value.isTelNeedVerify) {
		// 需要选择分机号或者填写密码 打开弹窗选择分机号
		dutyFormRef.value?.resetFields();
		state.dutyDialogVisible = true;
	} else {
		state.loading = true;
		dutyOn({ telNo: userInfos.value.defaultTelNo })
			.then((res: any) => {
				currentTel.value.password = res.result.telPwd;
				currentTel.value.telNo = res.result.telNo;
				currentTel.value.queue = res.result.queueId; // 呼入分机组
				currentTel.value.telModel = res.result.telModel; // 1：普通模式 2：呼出模式
				currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
				// 不需要选择分机号和密码 直接签入 传入默认分机号
				websocket_connect(); //开启消息监听
				startSignTime(res.result.second); // 开启计时 签入时长
				isRest.value = res.result.isRest;
				state.loading = false;
			})
			.catch(() => {})
			.finally(() => {
				state.loading = false;
			});
	}
};
// 确认签入
const clickOnDuty = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		let request = {};
		if (AppConfigInfo.value.isNeedTelNo && AppConfigInfo.value.isTelNeedVerify) {
			// 需要分机和密码
			request = {
				telNo: state.dutyForm.telNo,
				telPwd: state.dutyForm.password,
				telModelState: 2, // 默认呼出模式
			};
		} else if (AppConfigInfo.value.isNeedTelNo) {
			//需要分机号
			request = {
				telNo: state.dutyForm.telNo,
				telModelState: 2, // 默认呼出模式
			};
		} else if (AppConfigInfo.value.isTelNeedVerify) {
			// 需要密码
			request = {
				telNo: state.dutyForm.telNo,
				telPwd: userInfos.value.defaultTelNo,
				telModelState: 2, // 默认呼出模式
			};
		}
		dutyOn(request)
			.then((res: any) => {
				if (AppConfigInfo.value.isNeedTelNo && AppConfigInfo.value.isTelNeedVerify) {
					// 需要分机和密码
					currentTel.value.password = state.dutyForm.password;
					currentTel.value.telNo = state.dutyForm.telNo;
					currentTel.value.queue = res.result.queueId; // 呼入分机组
					currentTel.value.telModel = res.result.telModel; // 1：普通模式 2：呼出模式
					currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
				} else if (AppConfigInfo.value.isNeedTelNo) {
					//需要分机号
					currentTel.value.password = res.result.telPwd;
					currentTel.value.telNo = res.result.telNo;
					currentTel.value.queue = res.result.queueId; // 呼入分机组
					currentTel.value.telModel = res.result.telModel; // 1：普通模式 2：呼出模式
					currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
				} else if (AppConfigInfo.value.isTelNeedVerify) {
					// 需要密码
					currentTel.value.password = state.dutyForm.password;
					currentTel.value.telNo = res.result.telNo;
					currentTel.value.queue = res.result.queueId; // 呼入分机组
					currentTel.value.telModel = res.result.telModel; // 1：普通模式 2：呼出模式
					currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
				}
				websocket_connect(); //开启消息监听
				startSignTime(res.result.second); // 开启计时 签入时长
				isRest.value = res.result.isRest;
				state.loading = false;
				state.dutyDialogVisible = false;
			})
			.catch(() => {
				resetState(); // 重置所有状态
				console.log(`${getNowDateTime()}：业务系统：签入错误`);
			})
			.finally(() => {
				state.loading = false;
				state.dutyDialogVisible = false;
			});
	});
};
// 签出
const offDutyFn = () => {
	ElMessageBox.confirm(`确定要签出，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			dutyOff()
				.then(() => {
					sendMsg('logout');
					resetState();
					olaRef.value.logout(currentTel.value.telNo); //签出
					state.loading = false;
				})
				.catch(() => {})
				.finally(() => {
					state.loading = false;
				});
		})
		.catch(() => {
			state.loading = false;
		});
};
// 开启外呼模式
const onCallOut = () => {
	ElMessageBox.confirm(`确定要进入外呼模式，进入外呼模式后将无法接听到来电`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			switchMode({ isCallOut: true })
				.then(() => {
					olaRef.value.logout(currentTel.value.telNo);
					olaRef.value.close();
					currentTel.value.telModel = 2;
					useTimeoutFn(() => {
						websocket_connect();
						// 设置电话状态 外呼模式中
						useTelStatusStore.setCallOut(true);
						// 设置电话状态 外呼模式中
						useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
						getTelStatusFn();
						seatAssistOff(); // 关闭坐席辅助
					}, 500);
					onBeginRecord('5'); // 记录外呼模式开始
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		})
		.catch(() => {});
};
// 关闭外呼模式
const onUnCallOut = () => {
	ElMessageBox.confirm(`确定要取消外呼模式，取消外呼模式后将会收到市民来电?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			switchMode({ isCallOut: false })
				.then(() => {
					olaRef.value.logout(currentTel.value.telNo);
					olaRef.value.close();
					currentTel.value.telModel = 1;
					useTimeoutFn(() => {
						websocket_connect();
						// 设置电话状态 取消外呼模式
						useTelStatusStore.setCallOut(false);
						// 设置电话状态 保持中
						useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
						getTelStatusFn();
					}, 500);
					onEndRecord('5'); // 记录外呼模式结束
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		})
		.catch(() => {});
};
// 挂断
const onHangup = () => {
	ElMessageBox.confirm(`确定要挂断，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			olaRef.value.hangup(); //挂断
		})
		.catch(() => {});
};
// 小休原因
const restReason = ref(''); // 小休原因
const break_reason = (reason: string) => {
	switch (reason) {
		case 'away':
			restReason.value = '外出中';
			break;
		case 'rest':
			restReason.value = '休息中';
			break;
		case 'conference':
			restReason.value = '会议中';
			break;
		case 'train':
			restReason.value = '培训中';
			break;
		case 'eat':
			restReason.value = '用餐中';
			break;
		default:
			restReason.value = '休息中';
			break;
	}
	if (telStatusInfo.value.isRest !== 'resting' && !isRest.value) {
		// 判断当前状态是否在话后整理中 如果在话后整理中先结束话后整理
		if (isAcw.value || telStatusInfo.value.isTalkingDeal) {
			// 如果是话后整理中
			onEndRecord('1'); // 小休结束话后整理也结束
			isAcw.value = false;
		}
		// 如果当前状态不在小休中
		const restReasons = state.restReasonOptions.find((item: any) => item.dicDataValue === reason);
		busyOn({ reason: restReasons?.dicDataName ?? '' }) // 开始小休 设置示忙 业务系统统计需要
			.then(() => {
				console.log(`${getNowDateTime()}：业务系统调用示忙开始成功`);
				isRest.value = true;
				state.loading = false;
			})
			.catch((err) => {
				console.log(`${getNowDateTime()}：业务系统调用示忙开始失败,${err}`);
				state.loading = false;
			});
	} else {
		state.loading = false;
	}
};
// 小休
const restFormRef = ref<RefType>(); //小休表单
const onRest = async () => {
	if (AppConfigInfo.value.isRestApproval) {
		// 如果小休需要审核
		// 查询流程节点参数
		const res: any = await restFlowStart();
		state.nextStepOptions = res.result.steps;
		state.handleId = res.result.id;
	}
	//  重置表单
	restFormRef.value?.resetFields();
	state.restDialogVisible = true;
};
// 打开弹窗清空表单
const restFormOpened = () => {
	restFormRef.value?.resetFields();
	restFormRef.value?.clearValidate();
};
// 小休流程选择下一个环节
const selectNextStep = (val: any) => {
	const next = state.nextStepOptions.find((item: any) => item.key === val);
	getNextStepOption(state.handleId, next.key);
};
// 查询流程下一节点参数
const getNextStepOption = async (DefineId: string, Code: string) => {
	try {
		const res: any = await workflowStepOptions({ DefineId, Code });
		state.handlerOptions = res.result ?? [];
	} catch (error) {
		console.log(`${getNowDateTime()}：查询流程下一节点参数失败,${error}`);
	}
};
// 小休选择处理人
const selectHandlers = () => {
	restFormRef.value?.resetFields('nextMainHandler');
};
// 主办从处理人中选择
state.handlerMainOptions = computed(() => {
	return state.restForm.nextHandlers;
});
// 确定小休(示忙)
const clickOnRest = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		if (AppConfigInfo.value.isRestApproval) {
			//如果需要审核
			state.restForm.additions = state.fileList;
			let submitObj = other.deepClone(state.restForm);
			if (submitObj.nextHandlers && submitObj.nextHandlers.length) {
				submitObj.nextHandlers = submitObj.nextHandlers.map((item: any) => {
					return {
						id: item.key,
						name: item.value,
					};
				});
				if (submitObj.nextHandlers.length === 1) {
					submitObj.nextMainHandler = submitObj.nextHandlers[0].id;
				}
			}
			restFlowStartWex(submitObj)
				.then(() => {
					ElNotification({
						title: '成功',
						message: '申请小休成功',
						type: 'success',
					});
					// 设置休息状态 审核中
					useTelStatusStore.setRest(RestStates.InReview);
					state.restDialogVisible = false;
					state.loading = false;
				})
				.catch(() => {
					restFlowDel().then(() => {
						state.loading = false;
						state.restDialogVisible = false;
					});
				});
		} else {
			//不需要审核直接开始小休
			olaRef.value.go_break(state.restForm.reason); //设置忙碌
			talkDealTimer.value?.stop(); // 关闭话后整理定时器
			console.log(`${getNowDateTime()}:发送消息：呼叫中心：调用示忙`);
			state.restDialogVisible = false;
			state.loading = false;
		}
	});
};
// 设置抽屉
const dialogRestRef = ref<RefType>(); // 小休申请弹窗
const mouseup = () => {
	state.transform = dialogRestRef.value.dialogContentRef.$el.style.transform;
};
// 选择常用意见 填入填写框
const chooseAdvice = (item: any) => {
	state.restForm.opinion += item.content;
};
// 小休结束
const onRestEnd = () => {
	ElMessageBox.confirm(`确定要结束小休，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			olaRef.value.go_ready(); // 示闲
			busyOff() // 结束小休 设置示忙 业务系统统计需要
				.then(() => {
					console.log(`${getNowDateTime()}：业务系统调用示忙结束成功`);
					isRest.value = false;
					state.loading = false;
				})
				.catch((err) => {
					console.log(`${getNowDateTime()}：业务系统调用示忙结束失败,${err}`);
					state.loading = false;
				}); // 结束小休（调用业务系统接口，统计需要）
			isRest.value = false;
		})
		.catch(() => {});
};
// 通话保持
const onHold = () => {
	ElMessageBox.confirm(`确定要保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			isCallHold.value = true;
			olaRef.value.hold(); //保持
		})
		.catch(() => {});
};
// 取消保持
const onUnHold = () => {
	ElMessageBox.confirm(`确定要取消保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			olaRef.value.unhold(); //取消保持
		})
		.catch(() => {});
};
// 静音
const isMute = ref(false);
const onMute = () => {
	ElMessageBox.confirm(`确定要静音，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			isMute.value = true;
			olaRef.value.hold(); //保持
		})
		.catch(() => {});
};
// 静音取消
const onUnMute = () => {
	ElMessageBox.confirm(`确定要取消静音，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			olaRef.value.unhold(); //取消保持
		})
		.catch(() => {});
};
// 取消话后整理
const unTalkingDeal = () => {
	ElMessageBox.confirm(`确定要取消话后整理，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			// 设置话后整理
			useTelStatusStore.setTalkingDeal(false);
			// 设置话机状态 取消话后整理修改为空闲状态
			useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
			olaRef.value.go_ready(); // 示闲
			talkDealTimer.value?.stop();
			onEndRecord('1'); // 话后整理结束
			isAcw.value = false;
		})
		.catch(() => {});
};
// 打开转接弹窗
const transferFormRef = ref<RefType>(); // 转接表单
const onTransfer = () => {
	//  重置表单
	transferFormRef.value?.resetFields();
	// 获取所有分机列表
	state.transferDialogVisible = true;
};
// 确认转接
const clickOnTransfer = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		olaRef.value.transfer(state.transferForm.telNo); //转接
		state.transferDialogVisible = false;
	});
};
// 三方会议开始
const onConference = () => {
	//  重置表单
	transferFormRef.value?.resetFields();
	// 获取所有分机列表
	state.threeWayDialogVisible = true;
};
// 三方会议确定
const onCallArr = ref<EmptyArrayType>([]); // 三方会议选中的分机
const threeWayVisible = ref(false); // 三方会议弹窗
const threeWayFormRef = ref<RefType>(); // 三方会议表单
const clickOnThreeWay = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		olaRef.value.three_way(telStatusInfo.value.telsNo, state.threeWayForm.telNo); //三方会议

		// 三方通话呼出接通
		onCallArr.value.push({ telNo: state.threeWayForm.telNo }); // 三方通话呼出接通
		// 设置电话状态 呼出三方通话中 可以踢人和挂断通话
		useTelStatusStore.setPhoneControlState(TelStates.onThreeWay);
		sendMsg('treeWay');
		state.threeWayDialogVisible = false;
	});
};
const kickOut = (item: any) => {
	ElMessageBox.confirm(`确定确定要踢出${item.telNo},并恢复通话，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			olaRef.value.exit_three_way(item.telNo); // 踢出第三方
			// 恢复通话
			useTelStatusStore.setPhoneControlState(TelStates.onCall);
			onCallArr.value = [];
		})
		.catch(() => {});
};
// 外呼
const outboundFormRef = ref<RefType>(); //外呼
const onOutbound = () => {
	//  重置表单
	outboundFormRef.value?.resetFields();
	// 获取所有分机列表
	state.outboundDialogVisible = true;
};
// 外呼保存
const clickOnOutbound = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		useTimeoutFn(() => {
			olaRef.value.dial(state.outboundForm.telNo);
			state.outboundDialogVisible = false;
			state.loading = false;
		}, 300);
	});
};
// 坐席辅链接
const socket = ref<any>(null);
const jths_uid = ref<string>('');
const jths_trans = ref<string>('');
const jths_notice = ref<string>('');
const jths_userName = ref<string>('');
// 打开websocket链接
const connectVoiceAssistant = async (telNo: string) => {
	try {
		const { result } = await voiceAssistant(telNo);
		jths_uid.value = `8#User-${result.uid}`;
		jths_trans.value = `/trans/${result.orgCode}/${result.groupUid}/${jths_uid.value}`;
		jths_notice.value = `/notice/${result.orgCode}/${result.groupUid}/${jths_uid.value}`;
		jths_userName.value = result.userName;
		socket.value = useWebSocket(import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL, {
			heartbeat: {
				message: JSON.stringify({
					id: '',
					type: 2,
					from: jths_uid.value,
					to: 'sys',
					timestamps: new Date().getTime(),
					body: 'PING',
				}),
				interval: 2000,
				pongTimeout: 2000,
			},
			autoReconnect: {
				delay: 2000,
			}, // 自动重连
			immediate: true, // 是否立即链接
			onMessage: jths_receive, // 消息接收
			onError: jths_error, // 错误
			onDisconnected: jths_disconnected, // 断开
			onConnected: jths_connected, // 链接成功
		});
	} catch (err) {
		ElMessage.error('坐席辅助链接失败');
		console.log(`${getNowDateTime()}：坐席辅助链接失败,${err}`);
	}
};
// 捷通华声链接成功
const jths_connected = () => {
	socket.value.send(
		JSON.stringify({ id: '', type: 1, from: jths_uid.value, to: 'sys', timestamps: new Date().getTime(), body: jths_userName.value })
	);
	socket.value.send(
		JSON.stringify({
			id: '',
			type: 8,
			from: jths_uid.value,
			to: jths_trans.value,
			timestamps: new Date().getTime(),
			body: 'subscribe',
		})
	);
	socket.value.send(
		JSON.stringify({
			id: '',
			type: 8,
			from: jths_uid.value,
			to: jths_notice.value,
			timestamps: new Date().getTime(),
			body: 'subscribe',
		})
	);
	const name: string = `捷通华声的websocket链接成功`;
	const remark: string = `捷通华声的websocket链接成功`;
	const request = {
		creationTime: new Date(),
		name,
		remark,
		executeUrl: import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL,
	};
	submitLogFn(request);
	console.log(`${getNowDateTime()}：坐席辅助连接成功`);
};
// 捷通华声推送消息
const jths_receive = (ws: any, message: any) => {
	try {
		const data = JSON.parse(message.data);
		const toTransfer = jths_trans.value;
		const toNoticer = jths_notice.value;
		if (data.to === toTransfer) {
			// 判断当前转写消息是否是发送给当前用户的
			mittBus.emit('wsReceive', message);
		}
		if (data.to === toNoticer) {
			// 推送消息
			mittBus.emit('wsNotice', message);
		}
	} catch (e) {
		return;
	}
};
// 捷通华声链接错误
const jths_error = () => {
	console.log(`${getNowDateTime()}：捷通华声链接错误`);
};
// 捷通华声链接断开
const jths_disconnected = () => {
	const name: string = `捷通华声的websocket链接断开`;
	const remark: string = `捷通华声的websocket链接断开`;
	const request = {
		creationTime: new Date(),
		name,
		remark,
		executeUrl: import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL,
	};
	submitLogFn(request);
};
// 坐席辅助关闭
const seatAssistOff = () => {
	if (socket.value) {
		socket.value.close();
		socket.value = null;
	}
	console.log(`${getNowDateTime()}：坐席辅助手动关闭不再重连`);
};
// 重置状态和清除定时器
const resetState = () => {
	useTelStatusStore.resetState();
	startIdleTime(); // 移除空闲时长
	stopOutboundTime(); // 移除外呼时长
	stopSignTime(); // 移除签入时长定时器
	stopTalkTimer(); // 移除通话计时器
	talkDealTimer.value?.stop();
	state.loading = false;
};
// 获取当前分机状态
const isCallHold = ref(false); // 是否是保持中
const isAcw = ref(false); // 是否是话后整理中
const getTelStatusFn = async () => {
	try {
		const { result } = await getTelStatus();
		currentTel.value.password = result.telPwd;
		currentTel.value.telNo = result.telNo;
		currentTel.value.queue = result.queueId; // 呼入分机组
		currentTel.value.telModel = result.telModel; // 1：普通模式 2：呼出模式
		currentTel.value.queueCallOut = result.queueCallOut; // 呼出分机组
		startSignTime(result.second); // 开启计时 签入时长
		isRest.value = result.isRest;
		isCallHold.value = result.isCallHold;
		isAcw.value = result.isCallEndArrange; // 是否话后整理中
		isMute.value = result.isTelMute; // 是否静音中
	} catch (err) {
		console.log(`${getNowDateTime()}：获取分机状态错误:${err}`);
	}
};
// 刷新页面呼叫中心链接
const callCenterConnect = async () => {
	state.loading = true;
	try {
		// 查询当前用户状态
		const { result } = await getTelStatus();
		if (result) {
			// 查询到当前用户的状态
			// 刷新页面
			currentTel.value.password = result.telPwd;
			currentTel.value.telNo = result.telNo;
			currentTel.value.queue = result.queueId; // 呼入分机组
			currentTel.value.telModel = result.telModel; // 1：普通模式 2：呼出模式
			currentTel.value.queueCallOut = result.queueCallOut; // 呼出分机组
			websocket_connect(); //开启消息监听
			startSignTime(result.second); // 开启计时 签入时长
			isCallHold.value = result.isCallHold;
			isRest.value = result.isRest; //
			isAcw.value = result.isCallEndArrange; // 是否话后整理中
			isMute.value = result.isTelMute; // 是否静音中
			state.loading = false;
		} else {
			state.loading = false;
		}
	} catch (e) {
		// 重置所有状态
		resetState();
		state.loading = false;
	}
};
// 获取小休原因
const getReason = async () => {
	try {
		// 查询小休原因
		const { result } = await telRestBaseData();
		state.restReasonOptions = result?.restReason ?? [];
	} catch (err) {
		console.log(err);
	}
};
// 获取白名单列表
const getWithList = async () => {
	try {
		const { result } = await queryBlacklist({ SpecialFlag: 1 });
		state.whiteList = result;
	} catch (err) {
		console.log(err);
	}
};
// 查询今日等待数量
const getTodayWaitNumFn = async () => {
	try {
		const { result } = await getTodayWaitNum();
		todayWait.value = result;
	} catch (err) {
		console.log(err);
	}
};
// 今日等待
const todayWait = ref(0);
const todayWaitValue = useTransition(todayWait, {
	duration: 500,
});
// 当前等待
const currentWait = ref<number>(0);
const currentWaitValue = useTransition(currentWait, {
	duration: 500,
});
onMounted(async () => {
	await getReason(); // 获取小休原因
	resetState(); // 先重置状态
	await getTelsLists(); // 查询需要签入的分机列表
	await getThreeWayAndTransfer(); // 查询转接和三方
	await callCenterConnect(); // 呼叫中心链接
	await getTodayWaitNumFn(); // 查询今日等待数量
	await signalRStart(); //开启消息监听
	signalR.SR?.on('ToDayWaitNum', (data: number) => {
		todayWait.value = data;
	});
	signalR.SR?.on('CurrentWaitNum', (data: number) => {
		currentWait.value = data;
	});
});
onBeforeUnmount(() => {
	signalR.SR.off('RestApplyPass');
	signalR.SR.off('ToDayWaitNum');
	signalR.SR.off('CurrentWaitNum');
});
</script>

<style scoped lang="scss">
.seizeSeat-box {
	display: none;
}
.phoneControls {
	display: flex;
	flex: 1;
	color: var(--hotline-color-text-main);
	height: 100%;
	align-items: center;
	.status-box {
		width: 240px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		box-sizing: border-box;
		cursor: pointer;
		text-align: left;
		font-size: 14px;
		padding: 4px 26px 4px 12px;
		gap: 6px;
		min-height: 32px;
		line-height: 24px;
		border-radius: var(--el-border-radius-round);
		background-color: var(--el-color-info-light-8);
		transition: var(--el-transition-duration);
		margin-right: 10px;
		.arrow {
			position: absolute;
			right: 10px;
			transition: transform var(--el-transition-duration);
		}
		.is-reverse {
			transform: rotate(180deg);
		}
	}
	// 按钮列表
	.btn-container {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 100px);
		height: 100%;
		border-right: 1px solid var(--el-border-color);
		border-left: 1px solid var(--el-border-color);
		overflow: hidden;
		.item {
			text-align: center;
			cursor: pointer;
			width: 100%;
			user-select: none;
			display: flex;
			align-items: center;
			justify-content: center;
			//border-right: 1px solid var(--el-border-color);
			.icon {
				color: var(--el-color-primary);
			}
			&.disabled {
				cursor: not-allowed;
				overflow: hidden;
				.icon {
					color: #cccccc;
				}
			}
		}

		.active {
			&:hover {
				color: var(--hotline-color-white);
				background-color: var(--el-color-primary);
				.icon {
					color: var(--hotline-color-white);
				}
			}
		}
	}
	.wait-box {
		width: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		border-right: 1px solid var(--el-border-color);
		height: 100%;
	}
}
</style>
<style lang="scss">
.el-popover.hangup-popover {
	.hangup-container {
		display: flex;
		flex-wrap: nowrap;
		.hangup-item {
			text-align: center;
			width: 120px;
			border-right: 1px solid var(--el-border-color-darker);
			&:last-child {
				border-right: 0;
			}
			&-phoneNumber {
				padding-top: 4px;
				margin-bottom: 10px;
			}
		}
	}
}
</style>
