hotline-web/src/layout/navBars/breadcrumb/telControl.vue

<template>
	<div class="phoneControls" v-loading="state.loading">
		<div class="infos">
			<div class="pt5" :class="talkTime ? '' : 'mt8'"><span>分机号：</span>{{ telStatusInfo.telsNo }}</div>
			<div class="pt5" :class="talkTime ? '' : 'mt8'">
				<span>状态：</span><b class="dutyOn_status">{{ currentStatusText }}</b>
			</div>
			<div class="pt5" v-if="talkTime">
				<span>通话时长：</span><b class="dutyOn_timer">{{ formatDuration(talkTime, false) }}</b>
			</div>
		</div>
		<div class="btn">
			<!-- 签出 -->
			<template v-if="telStatusInfo.isDutyOn">
				<!-- 签出可用 -->
				<div
					class="item active"
					@click="onControlClick('dutyOff')"
					v-if="activeArr.includes('dutyOff')"
					@mouseenter="onHover('dutyOffSrc', 'phoneControls/dutyOff_white.png')"
					@mouseleave="onHover('dutyOffSrc', 'phoneControls/dutyOff_blue.png')"
					title="签出"
				>
					<img :src="state.dutyOffSrc" alt="" />
					<span>签出</span>
				</div>
				<!-- 签出不可用 -->
				<div class="item disabled" v-else title="签出">
					<img :src="getImageUrl('phoneControls/dutyOff_grey.png')" alt="" />
					<span>签出</span>
				</div>
				<!-- 签出不可用 -->
			</template>
			<!-- 灰色签入不可用 -->
			<template v-else>
				<div
					class="item active"
					@click="onControlClick('dutyOn')"
					title="签入"
					@mouseenter="onHover('dutyOnSrc', 'phoneControls/dutyOn_white.png')"
					@mouseleave="onHover('dutyOnSrc', 'phoneControls/dutyOn_blue.png')"
				>
					<img :src="state.dutyOnSrc" alt="" />
					<span>签入</span>
				</div>
			</template>

			<!-- 可用挂断 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('hangup')">
				<div
					class="item active"
					:class="state.active.includes('hangup') ? 'active' : ''"
					@click="onControlClick('hangup')"
					title="挂断"
					@mouseenter="onHover('hangupSrc', 'phoneControls/hangup_white.png')"
					@mouseleave="onHover('hangupSrc', 'phoneControls/hangup_blue.png')"
				>
					<img :src="state.hangupSrc" alt="" />
					<span>挂断</span>
				</div>
			</template>
			<!-- 灰色挂断 不可用 -->
			<template v-else>
				<div class="item disabled" title="挂断">
					<img :src="getImageUrl('phoneControls/hangup_grey.png')" alt="" />
					<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="结束小休"
					@mouseenter="onHover('restSrc', 'phoneControls/rest_white.png')"
					@mouseleave="onHover('restSrc', 'phoneControls/rest_blue.png')"
				>
					<img :src="state.restSrc" alt="" />
					<span
						>结束<span v-if="restReason">({{ restReason }})</span></span
					>
				</div>
				<div
					class="item active"
					@click="onControlClick('rest')"
					v-else-if="telStatusInfo.isRest === 'unRest'"
					title="小休"
					@mouseenter="onHover('restSrc', 'phoneControls/rest_white.png')"
					@mouseleave="onHover('restSrc', 'phoneControls/rest_blue.png')"
				>
					<img :src="state.restSrc" alt="" />
					<span>小休 </span>
				</div>
				<div class="item disabled" title="审批中" v-else-if="telStatusInfo.isRest === 'InReview'">
					<img :src="getImageUrl('phoneControls/rest_grey.png')" alt="" />
					<span>审批中</span>
				</div>
			</template>
			<!-- 灰色小休不可用 -->
			<template v-else>
				<div class="item disabled" title="小休">
					<img :src="getImageUrl('phoneControls/rest_grey.png')" alt="" />
					<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')"
					@mouseenter="onHover('holdSrc', 'phoneControls/hold_white.png')"
					@mouseleave="onHover('holdSrc', 'phoneControls/hold_blue.png')"
				>
					<img :src="state.holdSrc" alt="" />
					<span>{{ telStatusInfo.isHold ? '取消保持' : '保持' }}</span>
				</div>
			</template>
			<!-- 灰色保持不可用 -->
			<template v-else>
				<div class="item disabled" title="保持">
					<img :src="getImageUrl('phoneControls/hold_grey.png')" alt="" />
					<span>保持</span>
				</div>
			</template>

			<!-- 事后处理和取消事后处理 可用-->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('TalkingDeal')">
				<div
					class="item active"
					@click="onControlClick(telStatusInfo.isTalkingDeal ? 'unTalkingDeal' : 'TalkingDeal')"
					@mouseenter="onHover('talkingDealSrc', 'phoneControls/talkingDeal_white.png')"
					:title="telStatusInfo.isTalkingDeal ? '取消事后处理' : '事后处理'"
					@mouseleave="onHover('talkingDealSrc', 'phoneControls/talkingDeal_blue.png')"
				>
					<img :src="state.talkingDealSrc" alt="" />
					<span>{{ telStatusInfo.isTalkingDeal ? '取消事后处理' : '事后处理' }}</span>
				</div>
			</template>
			<!-- 事后处理不可用 -->
			<template v-else>
				<div class="item disabled" title="事后处理">
					<img :src="getImageUrl('phoneControls/talkingDeal_grey.png')" alt="" />
					<span>事后处理</span>
				</div>
			</template>

			<!-- 转接 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('transfer')">
				<div
					class="item active"
					@click="onControlClick('transfer')"
					title="保持"
					@mouseenter="onHover('transferSrc', 'phoneControls/transfer_white.png')"
					@mouseleave="onHover('transferSrc', 'phoneControls/transfer_blue.png')"
				>
					<img :src="state.transferSrc" alt="" />
					<span>转接</span>
				</div>
			</template>
			<!-- 转接不可用 -->
			<template v-else>
				<div class="item disabled" title="保持">
					<img :src="getImageUrl('phoneControls/transfer_grey.png')" alt="" />
					<span>转接</span>
				</div>
			</template>

			<!-- 三方会议 可用(两个通话 一个取消保持 一个保持 才能使用三方通话) -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('conference')">
				<div
					class="item active"
					@mouseenter="onHover('conferenceSrc', 'phoneControls/conference_white.png')"
					title="三方会议"
					@mouseleave="onHover('conferenceSrc', 'phoneControls/conference_blue.png')"
					@click="onControlClick('conference')"
				>
					<img :src="state.conferenceSrc" alt="" />
					<span>三方会议</span>
				</div>
			</template>
			<!-- 三方会议 不可用 -->
			<template v-else>
				<div class="item disabled" title="三方会议">
					<img :src="getImageUrl('phoneControls/conference_grey.png')" alt="" />
					<span>三方会议</span>
				</div>
			</template>

			<!-- 呼叫 可用-->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('outbound')">
				<div
					class="item active"
					@mouseenter="onHover('outboundSrc', 'phoneControls/outbound_white.png')"
					title="呼叫"
					@mouseleave="onHover('outboundSrc', 'phoneControls/outbound_blue.png')"
					@click="onControlClick('outbound')"
				>
					<img :src="state.outboundSrc" alt="" />
					<span>呼叫</span>
				</div>
			</template>
			<!-- 呼叫 不可用 -->
			<template v-else>
				<div class="item disabled" title="呼叫">
					<img :src="getImageUrl('phoneControls/outbound_grey.png')" alt="" />
					<span>呼叫</span>
				</div>
			</template>
		</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' }]">
				<el-select-v2 v-model="state.dutyForm.telNo" :options="state.telsList" placeholder="选择要签入的分机" filterable class="w100" />
			</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 + ';'"
		@opend="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.telsList"
					placeholder="请选择转接分机或输入外部电话"
					filterable
					class="w100"
					allow-create
					default-first-option
				/>
			</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
				/>
			</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>

  <!-- 三方通话弹窗 -->

</template>

<script setup lang="ts" name="telControl">
import { reactive, ref, computed, defineAsyncComponent, onMounted } 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 { getImageUrl } from '/@/utils/tools';
import { formatDuration } from '/@/utils/formatTime';
import { commonEnum } from '/@/utils/constants';
import other from '/@/utils/other';
import { workflowStepOptions } from '/@/api/system/workflow';
import { restFlowStart, restFlowDel, restFlowStartWex, getTelList, telRestProcess, telRestAdd, telRestBaseData } from '/@/api/public/wex';
import { auth } from '/@/utils/authFunction';
import { VoiceInterfaceObject } from '/@/utils/PhoneScript';
import signalR from '/@/utils/signalR';
import { Local } from '/@/utils/storage';
import { ola } from '/@/utils/ola_api';

// 引入组件
const CommonAdvice = defineAsyncComponent(() => import('/@/components/CommonAdvice/index.vue')); // 常用意见
const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue'));

const state = reactive<any>({
	active: <EmptyArrayType>[], // 当前选中
	currentStatus: '', //当前通话状态
	dutyDialogVisible: false, //签入选分机弹窗
	dutyForm: {
		//签入选分机表单
		telNo: null, //分机号
	},
	telsList: <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, //外呼号码
	},
	dutyOnSrc: getImageUrl('phoneControls/dutyOn_blue.png'), //签入图片
	dutyOffSrc: getImageUrl('phoneControls/dutyOff_blue.png'), //签出图片
	hangupSrc: getImageUrl('phoneControls/hangup_blue.png'), //挂断图片
	restSrc: getImageUrl('phoneControls/rest_blue.png'), //小休图片
	holdSrc: getImageUrl('phoneControls/hold_blue.png'), //保持图片
	talkingDealSrc: getImageUrl('phoneControls/talkingDeal_blue.png'), //时候处理图片
	transferSrc: getImageUrl('phoneControls/transfer_blue.png'), //转接图片
	conferenceSrc: getImageUrl('phoneControls/conference_blue.png'), //三方会议图片
	outboundSrc: getImageUrl('phoneControls/outbound_blue.png'), //外呼图片
	evaluateSrc: getImageUrl('phoneControls/evaluate_blue.png'), //评价图片
	restReasonOptions: [], // 小休原因
	nextStepOptions: [], // 下一个环节
	handlerOptions: [], // 处理人
	handleId: '', // 流程处理ID
	transform: 'translate(0px, 0px)',
	fileList: [], // 文件上传列表
	metingDialogVisible: false, // 三方会议弹窗
	metingForm: {
		// 三方会议表单
		metingId: '', // 三方会议ID
		phoneNo: '', // 三方会议号码
	},
	groupName: '', //坐席组名称
});

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

const talkTime = ref<any>(0); // 通话时长
const talkTimer = ref<any>(null); // 通话时长定时器

// 开始计时
const startTime = () => {
	let localTalkTime = Local.get('talkTime');
	if (talkTime) {
		talkTime.value = Number(localTalkTime);
		talkTimer.value = setInterval(() => {
			talkTime.value++;
			Local.set('talkTime', String(talkTime.value));
		}, 1000);
	} else {
		talkTimer.value = setInterval(() => {
			talkTime.value++;
			Local.set('talkTime', String(talkTime.value));
		}, 1000);
	}
};
// 结束计时
const removeTimer = () => {
	talkTime.value = 0;
	Local.remove('talkTime');
	clearInterval(talkTimer.value);
};
// 监听消息
const signalRStart = () => {
	signalR.SR.on('Send', (data: any) => {
		// 加入分组成功
		console.log(data, '加入分组成功');
	});
	signalR.SR.on('RestApplyPass', (data: any) => {
		// 小休审批通过消息
		console.log(data, '小休审批通过消息');
		RestApplyPassFn(data);
	});
};
// 检查用户状态
// 设置当前可用的按钮
const activeArr = computed(() => {
	const switchCases: any = {
		dutyOff: ['dutyOn'], // 签出状态
		dutyOn: ['dutyOff', 'rest', 'outbound', 'callForwarding'], // 已签入无通话状态
		rest: ['rest', 'callForwarding'], // 小休中状态
		ring: ['hangup'], //振铃中
		onCall: ['hangup', 'hold', 'transfer', 'evaluate','conference'], // 单个通话中
		onHold: ['hangup', 'hold', 'transfer', 'evaluate'], // 保持中
		onTalkingDeal: ['dutyOff', 'rest', 'outbound', 'callForwarding', 'TalkingDeal'], // 事后处理中
		onTransferSuccess: ['hangup', 'conference'], // 转接成功
		onConference: ['hangup'], // 三方会议中 只能挂断
	};
	let arr = <EmptyArrayType>[];
	if (telStatusInfo.value.phoneControlState in switchCases) {
		arr = switchCases[telStatusInfo.value.phoneControlState];
	}
	return arr;
});
// 设置当前状态的值
const currentStatusText = computed(() => {
	const statusMap: any = {
		dutyOff: '签出',
		dutyOn: '空闲',
		rest: '小休中',
		ring: '振铃中',
		onHold: '保持中',
		onCall: '通话中',
		onTalkingDeal: '事后处理',
		onConference: '会议中',
		onTransferSuccess: '转接成功',
	};
	return statusMap[telStatusInfo.value.phoneControlState] || '';
});
// 小休审批通过消息
const RestApplyPassFn = (data: any) => {
	ElNotification({
		title: '成功',
		message: '小休审批通过，开始小休',
		type: 'success',
	});
	VoiceInterfaceObject.SetBusy(data); //设置忙碌
};
// 查询所有分机
const getTelsLists = async (object?: object) => {
	state.loading = true;
	try {
		const res: any = await getTelList(object);
		state.telsList = res?.data ?? [];
		state.telsList = state.telsList.map((item: any) => ({
			value: item.device,
			label: item.device,
			...item,
		}));
		state.loading = false;
		return Promise.resolve(state.telsList);
	} catch (err) {
		console.log(err);
		state.loading = false;
	}
};
// 鼠标移入移出改变图标
const onHover = (val: string, path: string) => {
	state[val] = getImageUrl(path);
};
// 点击事件
const onControlClick = (val: string) => {
	switch (val) {
		case 'dutyOn': //签入
			if (!auth('public:seat:dutyOn')) ElMessage.error('抱歉，您没有签入权限！');
			else onDutyFn();
			break;
		case 'dutyOff': //签出
			if (!auth('public:seat:dutyOff')) ElMessage.error('抱歉，您没有签出权限！');
			else offDutyFn();
			break;
		case 'hangup': //挂断
			if (!auth('public:seat:hangup')) ElMessage.error('抱歉，您没有挂断权限！');
			else onHangup();
			break;
		case 'rest': //小休
			if (!auth('public:seat:rest')) ElMessage.error('抱歉，您没有小休权限！');
			else onRest();
			break;
		case 'restEnd': //结束小休
			if (!auth('public:seat:restEnd')) ElMessage.error('抱歉，您没有结束小休权限！');
			else onRestEnd();
			break;
		case 'hold': //保持
			if (!auth('public:seat:hold')) ElMessage.error('抱歉，您没有保持权限！');
			else onHold();
			break;
		case 'unHold': //取消保持
			if (!auth('public:seat:unHold')) ElMessage.error('抱歉，您没有取消保持权限！');
			else onUnHold();
			break;
		case 'TalkingDeal': //事后处理
			if (!auth('public:seat:TalkingDeal')) ElMessage.error('抱歉，您没有事后处理权限！');
			else onTalkingDeal();
			break;
		case 'unTalkingDeal': // 取消事后处理
			if (!auth('public:seat:unTalkingDeal')) ElMessage.error('抱歉，您没有取消事后处理权限！');
			else unTalkingDeal();
			break;
		case 'transfer': //转接
			if (!auth('public:seat:transfer')) ElMessage.error('抱歉，您没有转接权限！');
			else onTransfer();
			break;
		case 'conference': //三方会议
			if (!auth('public:seat:meeting')) ElMessage.error('抱歉，您没有三方会议权限！');
			else onConference();
			break;
		case 'outbound': //外呼
			if (!auth('public:seat:outbound')) ElMessage.error('抱歉，您没有呼叫权限！');
			else onOutbound();
			break;
		default:
			break;
	}
};

// 当前分机对象
const ola_object = {
	ola_extn: '1001', //分机hao
	ola_password: '!@#123Qw', //分机密码
	queues: '10010', //队列
};
// 链接呼叫中心
const websocket_connect = () => {
	ola.onConnect = onConnect;
	ola.onClose = onClose;
	ola.onMessage = onMessage;
	ola.connect(import.meta.env.VITE_CALLCENTER_SOCKET_URL, ola_object.ola_extn, ola_object.ola_password);
};
// 呼叫中心链接
const onConnect = () => {
	ola.subscribe('ola.agent.' + ola_object.ola_extn);
	ola.subscribe('ola.caller.' + ola_object.ola_extn);
	ola.get_agent_state(ola_object.ola_extn);

	callCenterLogin();
};
// 呼叫中心登录
const callCenterLogin = () => {
	ola.logout(ola_object.ola_extn); //连接之后，先登出一次,防止其他地方已经登陆
	let array_ola_queue: EmptyArrayType = []; // 队列
	if (ola_object.queues) {
		let array = ola_object.queues.split(',');
		for (let i = 0; i < array.length; i++) {
			array_ola_queue[i] = array[i];
		}
		ola.login(array_ola_queue, ola_object.ola_extn, { type: 'onhook' });
	}
};
// 呼叫中心消息
const onMessage = (event: any) => {
	const data = JSON.parse(event.data);
	console.log('onMessage', data);
	if (data.event_type == 'agent_state') {
		// 坐席状态
		if (data.state == 'login') {
			// 签入
			// 设置分机号和坐席组
			useTelStatusStore.setCallInfo({ telsNo: ola_object.ola_extn });
			// 设置签入状态
			useTelStatusStore.setDutyState(true);
			// 设置电话状态
			useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
			setTimeout(() => {
				// 设置示闲状态
				ola.go_ready();
			}, 1000);
			console.log('已签入');
		} else if (data.state == 'logout') {
			// 签出
			state.loading = true;
			// 重置所有状态
			useTelStatusStore.resetState();
			state.loading = false;
			console.log('已签出');
		} else if (data.state == 'ready') {
			// 示闲中
			// 设置休息状态 设置未正常状态
			useTelStatusStore.setRest(RestStates.unRest);
			// 设置话机状态 结束休息改为签入状态
			useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
			console.log('示闲中');
		} else if (data.state == 'unready') {
			// 示忙中
			useTelStatusStore.setPhoneControlState(TelStates.rest);
			useTelStatusStore.setRest(RestStates.resting);
			/*if (AppConfigInfo.value.IsRestApproval) {
        // 如果小休需要审核
        telRestProcess()
            .then((res: any) => {
              console.log('小休申请成功', res);
              // 设置电话状态小休中
              useTelStatusStore.setPhoneControlState(TelStates.rest);
              useTelStatusStore.setRest(RestStates.resting);
              ElMessage.success('小休开始！');
            })
            .catch((err: any) => {
              console.log('小休申请失败', err);
              restFlowDel().then(() => {
                // 删除小休流程
              });
              ola.go_ready();// 示闲
            });
      } else {
        // ElMessage.success('小休开始！');
        // 设置电话状态小休中
        useTelStatusStore.setPhoneControlState(TelStates.rest);
        useTelStatusStore.setRest(RestStates.resting);
        // 添加小休记录
        telRestAdd({ reason: data.private_data })
            .then((res: any) => {
              console.log('小休记录添加成功 开始休息', res);
              ElMessage.success('小休开始！');
            })
            .catch((err: any) => {
              console.log('小休记录添加失败 开始休息', err);

            });
      }*/
			break_reason(data.private_data);
			console.log('示忙中');
		} else if (data.state == 'acw') {
			// 话后整理中
			const time: number = AppConfigInfo.value.TalkingDealTime * 1000; // 事后处理时间
			ElNotification({
				title: '自动开启事后处理成功',
				message: `${AppConfigInfo.value.TalkingDealTime}秒后自动结束事后处理,或者手动结束事后处理`,
				type: 'success',
				duration: time,
			});
			// 设置事后处理
			useTelStatusStore.setTalkingDeal(true);
			// 设置话机状态 设置为事后处理中
			useTelStatusStore.setPhoneControlState(TelStates.onTalkingDeal);
			setTimeout(() => {
				// 设置事后处理
				useTelStatusStore.setTalkingDeal(false);
				// 设置话机状态 取消事后处理修改为空闲状态
				useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
				ola.go_ready(); // 示闲
			}, time);
			console.log('话后整理中');
		} else if (data.state == 'busy') {

		} else {
			console.log(data.state, '其他状态');
		}

		if (data.state == 'busy') {
      holdStatus(data.private_data); //处理保持
			if (data.call_direction == 'outbound') {
				// 呼出
				if (data.private_data == 'calling') {
					// 拨号中
					// 设置电话状态 振铃中
					useTelStatusStore.setPhoneControlState(TelStates.ring);
					console.log('呼出拨号中');
				} else if (data.private_data == 'answered') {
					//振铃中
					if (data.other_answered == false) {
						// 设置电话状态 振铃中
						useTelStatusStore.setPhoneControlState(TelStates.ring);
						console.log('呼出振铃中');
					} else if (data.other_answered == true) {
						// 通话中
            // 开始计时
            startTime();
						// 设置电话状态 通话中
						useTelStatusStore.setPhoneControlState(TelStates.onCall);
						console.log('呼出通话中');
					}
				}
			} else {
				// 呼入
				if (data.private_data == 'ring') {
					// 设置电话状态 振铃中
					useTelStatusStore.setPhoneControlState(TelStates.ring);
					console.log('呼入振铃中');
				} else if (data.private_data == 'answered') {
          // 开始计时
          startTime();
					// 设置电话状态 通话中
					useTelStatusStore.setPhoneControlState(TelStates.onCall);
					console.log('呼入通话中');
				}
			}
		} else if (data.old_state == 'busy') {
			//挂机后系统可以返回两种状态:acw 话后整理状态 ready 示闲状态，如果不需要acw，可以联系我们后台修改配置，如果需要保留，如果需要再次
			//拨打电话的话，需要手动点击示闲按钮

			// 设置电话状态
			useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
			// 结束计时
			removeTimer();
			console.log('已挂机');
		}
	} else if (data.event_type == 'agent_caller_state') {
		//通话状态
		// special feature, never mind
		if (data.action == 'in') {
			console.log('呼入', data.caller.cid_number, data.caller.uuid);
			// ola.take_call(data.caller.uuid);
		} else {
			console.log('呼出', data.caller.uuid);
		}
	} else if (data.event_type == 'command/reply') {
		// 其他消息
		// console.log('command/reply', data);
	}
};
// 呼叫中心链接关闭
const onClose = () => {
	ElMessage.error('呼叫中心断开链接');
};
// 小休原因
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;
	}
};
// 保持状态处理
const holdStatus = (holdStatus:string)=>{
  switch (holdStatus) {
    case 'held':
      // 设置电话状态
      useTelStatusStore.setHold(true);
      // 设置电话状态 保持中
      useTelStatusStore.setPhoneControlState(TelStates.onHold);
      break;
    case 'unheld':
      // 设置电话状态 通话中
      // 设置电话状态  取消单个保持为通话中
      useTelStatusStore.setHold(false);
      // 设置电话状态
      useTelStatusStore.setPhoneControlState(TelStates.onCall);
      break;
    default:
      break;
  }
}
//签入
const dutyFormRef = ref<RefType>();
const onDutyFn = async () => {
	websocket_connect();
	/*dutyFormRef.value?.resetFields();
	// 获取所有分机列表（未签入的）
	const list = await getTelsLists({ sigin: 0 });
	const isDefaultTelNo = list.some((item: any) => item.value === userInfos.value.defaultTelNo);
	if (isDefaultTelNo) {
		// 如果默认分机号是空闲的，就默认选中
		state.dutyForm.telNo = userInfos.value.defaultTelNo;
	}
	state.dutyDialogVisible = true;*/
};
// 确认签入
const clickOnDuty = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		// {telNo:state.dutyForm.telNo}
		websocket_connect(); //开启消息监听
	});
};
// 签出
const offDutyFn = () => {
	ElMessageBox.confirm(`确定要签出，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			ola.logout(ola_object.ola_extn); //签出
			// 重置所有状态
			useTelStatusStore.resetState();
			state.loading = false;
			state.dutyOnSrc = getImageUrl('phoneControls/dutyOn_blue.png'); //签入图片
		})
		.catch(() => {
			state.loading = false;
		});
};
// 挂断
const onHangup = () => {
	ElMessageBox.confirm(`确定要挂断，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			ola.hangup(); //挂断
			state.loading = false;
		})
		.catch(() => {});
};
// 小休
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();
	// 查询小休原因
	const response: any = await telRestBaseData();
	state.restReasonOptions = response.result?.restReason ?? [];
	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(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 {
			//不需要审核直接开始小休
			ola.go_break(state.restForm.reason); //设置忙碌
			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(() => {
			state.loading = true;
			ola.go_ready(); // 示闲
			state.loading = false;
		})
		.catch(() => {});
};
// 通话保持
const onHold = () => {
	ElMessageBox.confirm(`确定要保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			ola.hold(); //保持
			state.loading = false;
		})
		.catch(() => {});
};
// 取消保持
const onUnHold = () => {
	ElMessageBox.confirm(`确定要取消保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			ola.unhold(); //取消保持
			state.loading = false;
		})
		.catch(() => {});
};
// 事后处理（系统默认进入）
const onTalkingDeal = () => {};
// 取消事后处理
const unTalkingDeal = () => {
	ElMessageBox.confirm(`确定要取消事后处理，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			// 设置事后处理
			useTelStatusStore.setTalkingDeal(false);
			// 设置话机状态 取消事后处理修改为空闲状态
			useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
			ola.go_ready(); // 示闲
			state.loading = false;
		})
		.catch(() => {});
};
// 打开转接弹窗
const transferFormRef = ref<RefType>(); // 转接表单
const onTransfer = () => {
	//  重置表单
	transferFormRef.value?.resetFields();
	// 获取所有分机列表
	getTelsLists().then(() => {
		state.transferDialogVisible = true;
	});
};
// 确认转接
const clickOnTransfer = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		ola.transfer(state.transferForm.telNo); //转接
		state.transferDialogVisible = false;
	});
};
// 三方会议开始
const onConference = () => {
	ElMessageBox.confirm(`确定确定要开启三方会议，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			VoiceInterfaceObject.Dtmf('0'); // 开启dtmf 三方通话
		})
		.catch(() => {});
};
// 外呼
const outboundFormRef = ref<RefType>(); //外呼
const onOutbound = () => {
	//  重置表单
	outboundFormRef.value?.resetFields();
	// 获取所有分机列表
	getTelsLists().then(() => {
		state.outboundDialogVisible = true;
	});
};
// 外呼保存
const clickOnOutbound = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		setTimeout(() => {
			ola.dial(state.outboundForm.telNo, 'dsadasdsa');
			state.outboundDialogVisible = false;
			state.loading = false;
		}, 300);
	});
};
onMounted(() => {
	signalRStart(); //开启消息监听
	if (telStatusInfo.value.telsNo) {
		// 有分机号
		websocket_connect(); // 链接呼叫中心
	}
});
</script>

<style scoped lang="scss">
.seizeSeat-box {
	display: none;
}
.phoneControls {
	display: flex;
	flex: 1;
	background-color: var(--el-color-white) !important;
	box-shadow: 0 1px 8px 0 rgba(0, 15, 49, 0.1);
	border-bottom-left-radius: 90px;
	border-bottom-right-radius: 90px;
	padding: 0 18px 0 40px;
	color: var(--hotline-color-text-main);
	height: 100%;

	.infos {
		text-align: left;
		width: 140px;

		.dutyOn_status {
			color: var(--el-color-primary);
			font-weight: normal;
		}

		.dutyOn_timer {
			color: var(--el-color-danger);
			font-weight: normal;
		}

		span {
			display: inline-block;
			width: 80px;
			text-align: right;
		}
	}

	// 按钮列表
	.btn {
		display: flex;
		width: calc(100% - 120px);
		justify-content: space-between;

		.item {
			text-align: center;
			cursor: pointer;
			width: 100%;
			user-select: none;
			height: calc(100% + 20px);
			img {
				display: block;
				margin: 0 auto;
				padding-top: 10px;
			}

			span {
				margin-top: 5px;
				display: inline-block;
			}

			&.disabled {
				cursor: not-allowed;
				overflow: hidden;
			}
		}

		.active {
			&:hover {
				color: var(--hotline-color-white);
				background-image: url('/@/assets/images/phoneControls/active.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
</style>