<template>
	<div class="phoneControls" v-loading="state.loading">
		<div class="infos">
			<div class="pt10" :class="state.time ? '' : 'mt8'"><span>分机号：</span>{{ telStatusInfo.telsNo }}</div>
			<div class="pt5" :class="state.time ? '' : 'mt8'">
				<span>状态：</span><b class="dutyOn_status">{{ currentStatusText }}</b>
			</div>
			<div class="pt5" v-if="state.time">
				<span>通话时长：</span><b class="dutyOn_timer">{{ formatDuraton(state.time, false) }}</b>
			</div>
		</div>
		<div class="btns">
			<!-- 签出 -->
			<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')">
				<!-- 多个挂断 -->
				<el-popover
					:width="130 * telStatusInfo.onCallArr.length"
					:offset="0"
					v-model:visible="state.showHangupList"
					:show-arrow="false"
					trigger="hover"
					popper-class="hangup-popover"
					v-if="telStatusInfo.onCallArr.length > 1"
				>
					<template #reference>
						<div
							class="item active"
							:class="state.active.includes('hangup') ? 'active' : ''"
							@mouseenter="onHover('hangupSrc', 'phoneControls/hangup_white.png')"
							@mouseleave="onHover('hangupSrc', 'phoneControls/hangup_blue.png')"
						>
							<img :src="state.hangupSrc" alt="" />
							<span>挂断（{{ telStatusInfo.onCallArr.length }}）</span>
						</div>
					</template>
					<div class="hangup-container">
						<div class="hangup-item" v-for="(item, index) in telStatusInfo.onCallArr" :key="index">
							<p class="hangup-item-name">{{ state.callTypes[item.callType] }}</p>
							<p class="hangup-item-phoneNumber">{{ item.from }}</p>
							<button class="hangup-item-button" @click="hanupItem(item)">挂断</button>
						</div>
					</div>
				</el-popover>
				<!-- 单个挂断 -->
				<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')"
					v-else
				>
					<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>
				</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')">
				<!-- 多个保持 -->
				<template v-if="telStatusInfo.onHoldArr.length > 1">
					<el-popover
						:width="130 * telStatusInfo.onHoldArr.length"
						:offset="0"
						v-model:visible="state.showHoldList"
						:show-arrow="false"
						trigger="hover"
						popper-class="hangup-popover"
					>
						<template #reference>
							<div
								class="item active"
								@mouseenter="onHover('holdSrc', 'phoneControls/hold_white.png')"
								@mouseleave="onHover('holdSrc', 'phoneControls/hold_blue.png')"
							>
								<img :src="state.holdSrc" alt="" />
								<span>保持（{{ telStatusInfo.onHoldArr.length }}）</span>
							</div>
						</template>
						<div class="hangup-container">
							<div class="hangup-item" v-for="(item, index) in telStatusInfo.onHoldArr" :key="index">
								<p class="hangup-item-name">{{ state.callTypes[item.callType] }}</p>
								<p class="hangup-item-phoneNumber">{{ item.to }}</p>
								<button class="hangup-item-button" @click="holdItem(item)">{{ item.isHold ? '取消保持' : '保持' }}</button>
							</div>
						</div>
					</el-popover>
				</template>
				<template v-else>
					<div
						class="item active"
						:title="telStatusInfo.onHoldArr[0]?.isHold ? '取消保持' : '保持'"
						@click="onControlClick(telStatusInfo.onHoldArr[0]?.isHold ? 'unHold' : 'hold')"
						@mouseenter="onHover('holdSrc', 'phoneControls/hold_white.png')"
						@mouseleave="onHover('holdSrc', 'phoneControls/hold_blue.png')"
					>
						<img :src="state.holdSrc" alt="" />
						<span>{{ telStatusInfo.onHoldArr[0]?.isHold ? '取消保持' : '保持' }}</span>
					</div>
				</template>
			</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('mute')">
				<div
					class="item active"
					@click="onControlClick(telStatusInfo.isMute ? 'unMute' : 'mute')"
					@mouseenter="onHover('muteSrc', 'phoneControls/mute_white.png')"
					:title="telStatusInfo.isMute ? '取消静音' : '静音'"
					@mouseleave="onHover('muteSrc', 'phoneControls/mute_blue.png')"
				>
					<img :src="state.muteSrc" alt="" />
					<span>{{ telStatusInfo.isMute ? '取消静音' : '静音' }}</span>
				</div>
			</template>
			<!-- 静音不可用 -->
			<template v-else>
				<div class="item disabled" title="保持">
					<img :src="getImageUrl('phoneControls/mute_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(telStatusInfo.isMeeting ? 'conferenceEnd' : 'conference') &&
					telStatusInfo.onHoldArr.length === 2 &&
					telStatusInfo.onHoldArr.filter((item) => item.isHold) &&
					telStatusInfo.onHoldArr.filter((item) => !item.isHold)
				"
			>
				<div
					class="item active"
					@mouseenter="onHover('conferenceSrc', 'phoneControls/conference_white.png')"
					:title="telStatusInfo.isMeeting ? '结束会议' : '三方会议'"
					@mouseleave="onHover('conferenceSrc', 'phoneControls/conference_blue.png')"
					@click="onControlClick('conference')"
				>
					<img :src="state.conferenceSrc" alt="" />
					<span>{{ telStatusInfo.isMeeting ? '结束会议' : '三方会议' }}</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>

			<!-- 呼叫转移 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('callForwarding')">
				<div
					class="item active"
					title="呼叫转移"
					@mouseenter="onHover('callForwardingSrc', 'phoneControls/callForwarding_white.png')"
					@mouseleave="onHover('callForwardingSrc', 'phoneControls/callForwarding_blue.png')"
					@click="onControlClick('callForwarding')"
				>
					<img :src="state.callForwardingSrc" alt="" />
					<span>呼叫转移</span>
				</div>
			</template>
			<!-- 呼叫转移 不可用 -->
			<template v-else>
				<div class="item disabled" title="呼叫转移">
					<img :src="getImageUrl('phoneControls/callForwarding_grey.png')" alt="" />
					<span>呼叫转移</span>
				</div>
			</template>

			<!-- 评价 可用 -->
			<template v-if="telStatusInfo.isDutyOn && activeArr.includes('evaluate')">
				<div
					class="item active"
					@mouseenter="onHover('evaluateSrc', 'phoneControls/evaluate_white.png')"
					title="评价"
					@mouseleave="onHover('evaluateSrc', 'phoneControls/evaluate_blue.png')"
					@click="onControlClick('evaluate')"
				>
					<img :src="state.evaluateSrc" alt="" />
					<span>评价</span>
				</div>
			</template>
			<!-- 评价 不可用 -->
			<template v-else>
				<div class="item disabled" title="评价">
					<img :src="getImageUrl('phoneControls/evaluate_grey.png')" alt="" />
					<span>评价</span>
				</div>
			</template>
		</div>
	</div>
	<!-- 占位标签 -->
	<div class="seizeSeat-box"></div>
	<!-- 功能 -->
	<!-- 签入 -->
	<el-dialog v-model="state.showDutyDialog" draggable title="签入" width="400px">
		<el-form :model="state.dutyForm" label-width="80px" ref="dutyFormRef">
			<el-form-item label="分机" prop="telNo" :rules="[{ required: true, message: '请选择需要签入的分机', trigger: 'change' }]">
				<el-select v-model="state.dutyForm.telNo" placeholder="请选择需要签入的分机" class="w100">
					<el-option v-for="item in state.telsList" :key="item.id" :label="item.no" :value="item.no" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showDutyDialog = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="clickOnDuty" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 小休弹窗 -->
	<el-dialog
		v-model="state.showRestDialog"
		ref="dialogRestRef"
		draggable
		title="小休申请"
		:width="AppConfigInfo.isRestApproval ? '60%' : '400px'"
		@mouseup="mouseup"
		:style="'transform: ' + state.trasform + ';'"
	>
		<!-- 需要审核 -->
		<template v-if="AppConfigInfo.isRestApproval">
			<el-form :model="state.restForm" label-width="90px" 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.id" :label="item.content" :value="item.id" />
							</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.code" :label="item.name" :value="item.code" />
							</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="selectHanders"
								value-key="key"
							>
								<el-option v-for="item in state.handerOptions" :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">
						<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.handerOptions" :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="24" :md="24" :lg="24" :xl="24">
						<el-form-item
							label="办理意见"
							class="textarea"
							prop="opinion"
							:rules="[{ required: true, message: '请填写小休办理意见', trigger: 'blur' }]"
						>
							<el-input
								v-model="state.restForm.opinion"
								type="textarea"
								:autosize="{ minRows: 10, maxRows: 10 }"
								placeholder="请填写小休办理意见"
								clearable
							>
							</el-input>
							<span class="bttons">
								<el-button @click="showComents" class="default-button" :loading="state.loading">常用意见</el-button>
								<el-button type="primary" @click="onAddComments" :loading="state.loading">添加到常用意见</el-button>
							</span>
						</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' }]">
							<el-upload
								v-model:file-list="state.fileList"
								class="upload-demo w100"
								action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
								multiple
								:before-remove="beforeRemove"
								:on-exceed="handleExceed"
								ref="uploadListRef"
							>
								<el-button> <SvgIcon name="ele-Upload" /> 上传附件 </el-button>
								<template #file="{ file }">
									<div class="el-upload-list__item-info">
										<a class="el-upload-list__item-name">
											<SvgIcon class="mr5" :name="fileType(checkFile(file.name))" size="16px" />
											<span class="el-upload-list__item-file-name">{{ file.name }}</span>
										</a>
									</div>
									<SvgIcon name="ele-Close" class="el-icon--close" size="14px" title="删除文件" @click="handleRemove(file)" />
								</template>
							</el-upload>
						</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.id" :label="item.content" :value="item.content" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showRestDialog = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="clickOnRest" :loading="state.loading">提 交</el-button>
			</span>
		</template>
		<!-- 常用意见管理 -->
		<Comment ref="CommentRef" @chooseComment="chooseComment" />
	</el-dialog>

	<!-- 转接 -->
	<el-dialog v-model="state.showTransferDialog" draggable title="转接" width="500px">
		<el-form :model="state.transferForm" label-width="80px" ref="transferFormRef">
			<el-form-item label="线路" prop="way" :rules="[{ required: true, message: '请选择线路', trigger: 'change' }]">
				<el-radio-group v-model="state.transferForm.way">
					<el-radio label="inside">内线</el-radio>
					<el-radio label="external">外线</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item
				label="转接号码"
				prop="telNo"
				:rules="[{ required: true, message: '请输入内线号码', trigger: 'blur' }]"
				v-if="state.transferForm.way === 'inside'"
			>
				<el-select v-model="state.transferForm.telNo" placeholder="请选择转接分机" class="w100" filterable clearable>
					<el-option v-for="item in state.telsList" :key="item.id" :label="item.no" :value="item.no" />
				</el-select>
			</el-form-item>
			<el-form-item
				label="转接号码"
				prop="outerNo"
				:rules="[{ required: true, message: '请输入外线号码', trigger: 'blur' }]"
				v-if="state.transferForm.way === 'external'"
			>
				<el-select
					v-model="state.transferForm.outerNo"
					placeholder="请选择转接分机或输入外部电话"
					class="w100"
					filterable
					allow-create
					default-first-option
					clearable
				>
					<el-option v-for="item in state.telsList" :key="item.id" :label="item.no" :value="item.no" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showTransferDialog = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="clickOnTransfer" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 呼叫 -->
	<el-dialog v-model="state.showOutboundDialog" draggable title="呼叫" width="450px">
		<el-form :model="state.outboundForm" label-width="80px" ref="outboundFormRef">
			<el-form-item label="线路" prop="way" :rules="[{ required: true, message: '请选择线路', trigger: 'change' }]">
				<el-radio-group v-model="state.outboundForm.way">
					<el-radio label="inside">内线</el-radio>
					<el-radio label="external">外线</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item
				label="呼叫号码"
				prop="telNo"
				:rules="[{ required: true, message: '请输入内线号码', trigger: ['blur', 'change'] }]"
				v-if="state.outboundForm.way === 'inside'"
			>
				<el-select v-model="state.outboundForm.telNo" placeholder="请选择呼叫分机" class="w100" filterable clearable>
					<el-option v-for="item in state.telsList" :key="item.id" :label="item.no" :value="item.no" />
				</el-select>
			</el-form-item>
			<el-form-item
				label="外线号码"
				prop="outerNo"
				:rules="[{ required: true, message: '请输入外线号码', trigger: 'blur' }]"
				v-if="state.outboundForm.way === 'external'"
			>
				<el-select
					v-model="state.outboundForm.outerNo"
					placeholder="请选择呼叫分机或输入外部电话"
					class="w100"
					filterable
					allow-create
					default-first-option
					clearable
				>
					<el-option v-for="item in state.telsList" :key="item.id" :label="item.no" :value="item.no" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showOutboundDialog = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="clickOnOutbound" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 呼叫转移 -->
	<el-dialog v-model="state.showCallForwardingDialog" draggable title="呼叫转移" width="500px">
		<el-form :model="state.callForwardingForm" label-width="100px" ref="callForwardingFormRef">
			<el-form-item prop="way">
				<template #label>
					<p class="flex-center-align">
						<el-popover :width="360" trigger="hover">
							<template #reference>
								<SvgIcon name="ele-QuestionFilled" color="var(--el-color-info)" class="mr5" />
							</template>
							<div>
								<p>1.全转：所有来电全部转移；</p>
								<p>2.遇忙转：来电时，当前话机忙时来电转移；</p>
								<p>3.无应答转：来电时，当前话机无人接听时来电转移。</p>
							</div>
						</el-popover>
						转移方式
					</p>
				</template>
				<el-radio-group v-model="state.callForwardingForm.way">
					<el-radio label="quanzhuan">全转</el-radio>
					<el-radio label="yumang">遇忙转</el-radio>
					<el-radio label="wuyingda">无应答转</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="转移号码" prop="phoneNo" :rules="[{ required: true, message: '请输入呼叫转移号码', trigger: 'blur' }]">
				<el-input v-model="state.callForwardingForm.phoneNo" placeholder="请输入呼叫转移号码" clearable></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showCallForwardingDialog = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="clickOnCallForwarding" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="telControl">
import { reactive, ref, computed, watch, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElNotification, ElMessage } from 'element-plus';
import type { UploadProps } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { useTelStatus } from '/@/stores/telStatus';
import { useAppConfig } from '/@/stores/appConfig';
import { getImageUrl } from '/@/utils/tools';
import { getTelsList } from '/@/api/login/user';
import signalR from '/@/utils/signalR';
import { formatDuraton } from '/@/utils/formatTime';
import { checkFile, fileType, commonEeum } from '/@/utils/tools';
import { Local } from '/@/utils/storage';
import {
	onDuty,
	offDuty,
	telRest,
	telUnrest,
	telHold,
	telUnhold,
	telMute,
	telUnMute,
	visitorToTel,
	telToOuter,
	telToTel,
	visitorToOuter,
	meeting,
	hangupApi,
	restFlowStart,
} from '/@/api/login/user';
import { addCommon, commonList } from '/@/api/business/commonP';

// 引入组件
const Comment = defineAsyncComponent(() => import('/@/views/business/order/components/Comment.vue'));

const state = reactive<any>({
	active: <any>[], // 当前选中
	currentStatus: '', //当前通话状态
	showDutyDialog: false, //签入选分机弹窗
	dutyForm: {
		telNo: '', //分机号
	},
	telsList: <any>[], // 分机列表
	loading: false,
	showHangupList: false, //是否展示挂断列表
	showRestDialog: false, //小休弹窗
	restForm: {
		//小休表单
		opinion: '',
		nextStepCode: '',
		nextHandlers: [],
		acceptSms: false,
		nextMainHandler: '',
		reason: '',
	},
	showTransferDialog: false, // 转接弹窗
	transferForm: {
		//转接表单
		way: 'inside',
		telNo: '',
		outerNo: '',
	},
	showOutboundDialog: false, //外呼弹窗
	outboundForm: {
		// 外呼表单
		way: 'inside',
		telNo: '',
		outerNo: '',
	},
	showCallForwardingDialog: false, // 呼叫转移弹窗
	callForwardingForm: {
		// 呼叫转移表单
		phoneNo: '',
		way: 'quanzhuan',
	},
	showHoldList: false, // 是否展示保持列表
	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'), //保持图片
	muteSrc: getImageUrl('phoneControls/mute_blue.png'), //静音图片
	transferSrc: getImageUrl('phoneControls/transfer_blue.png'), //转接图片
	conferenceSrc: getImageUrl('phoneControls/conference_blue.png'), //三方会议图片
	outboundSrc: getImageUrl('phoneControls/outbound_blue.png'), //外呼图片
	callForwardingSrc: getImageUrl('phoneControls/callForwarding_blue.png'), //呼叫转移图片
	evaluateSrc: getImageUrl('phoneControls/evaluate_blue.png'), //评价图片
	callTypes: {
		// 通话类型
		0: '坐席',
		1: '坐席',
		2: '市民',
		3: '市民',
	},
	time: 0, // 毫秒数
	timer: null as any, // 计时器
	restReasonOptions: [], // 小休原因
	nextStepOptions: [], // 下一环节
	handerOptions: [], // 处理人
	genderList: [],
	trasform: 'translate(0px, 0px)',
	fileList: [],
});
const usetelStatusStore = useTelStatus();
const { telStatusInfo } = storeToRefs(usetelStatusStore);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const appConigStore = useAppConfig();
const { AppConfigInfo } = storeToRefs(appConigStore);
const dutyFormRef = ref(); //签入
const restFormRef = ref(); //小休
const transferFormRef = ref(); // 转接
const outboundFormRef = ref(); //外呼
const callForwardingFormRef = ref(); //呼叫转移
const CommentRef = ref(); // 常用意见
const uploadListRef = ref(); // 上传组件
const dialogRestRef = ref(); // 小休申请弹窗
const router = useRouter();
//  signalR 初始化signalr
signalR.init();

// 开始计时
const startTime = () => {
	let talkTime = Local.get('talkTime')
	if (talkTime) {
		state.time = Number(talkTime);
		state.timer = setInterval(() => {
			state.time++;
			Local.set('talkTime',String(state.time))
		}, 1000);
	} else {
		state.timer = setInterval(() => {
			state.time++;
			Local.set('talkTime',String(state.time))
		}, 1000);
	}
};
// 结束计时
const removeTimer = () => {
	state.time = 0;
	Local.remove('talkTime');
	clearInterval(state.timer);
};

// 如果当前是已经签入状态 监听消息事件
if (telStatusInfo.value.isDutyOn) {
	if (
		(telStatusInfo.value.phonecontrolState === 'onCall' ||
			telStatusInfo.value.phonecontrolState === 'oneCallHold' ||
			telStatusInfo.value.phonecontrolState === 'onMute' ||
			telStatusInfo.value.phonecontrolState === 'onConference' ||
			telStatusInfo.value.phonecontrolState === 'oneHoldOneCall') &&
		telStatusInfo.value.onCallArr.length >= 1
	) {
		//如果当前状态是通话中  刷新继续计时
		// 开始计时
		startTime();
	}
	signalR.start();
	signalR.SR.on('Ring', (data: any) => {
		// 接收来电消息
		console.log(data, '来电消息');
		data.isHold = false; // 默认保持为false
		telStatusInfo.value.onCallArr.push(data);
		// 拨打电话通话数 = 保持数量
		telStatusInfo.value.onHoldArr = telStatusInfo.value.onCallArr;
		// 将状态存入Pina
		usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
		usetelStatusStore.setCallState(telStatusInfo.value.onCallArr);
		// 设置电话控件状态
		usetelStatusStore.setPhonecontrolState('ring');
		// 跳转到录入工单页面
		router.push({
			path: '/business/order/accept',
			query: {
				form: 'tel',
			},
		});
	});
	signalR.SR.on('Answered', (data: any) => {
		//接收接听消息
		console.log(data, '接听消息');
		// 设置电话状态
		usetelStatusStore.setPhonecontrolState('onCall');
		if (telStatusInfo.value.onCallArr.length === 1) {
			// 开始计时
			startTime();
		}
	});
	signalR.SR.on('Bye', (data: any) => {
		// 接收挂断消息
		console.log(data, '挂断消息');
		// 设置电话状态
		usetelStatusStore.setPhonecontrolState('dutyOn');
		// 挂断从挂断列表中移除
		telStatusInfo.value.onCallArr = telStatusInfo.value.onCallArr.filter((item: any) => item.id != data.id);
		// 如果保持也有 直接去除保持列表中的数据
		telStatusInfo.value.onHoldArr = telStatusInfo.value.onHoldArr.filter((item: any) => item.id != data.id);

		// 将状态存入Pina
		usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
		usetelStatusStore.setCallState(telStatusInfo.value.onCallArr);

		if (telStatusInfo.value.onCallArr.length === 0) {
			// 关闭定时器
			removeTimer();
		}
	});
	signalR.SR.on('RestApplyPass', (data: any) => {
		// 小休审批通过消息
		console.log(data, '小休审批通过消息');
		// 设置电话状态小休中
		usetelStatusStore.setPhonecontrolState('rest');
	});
}
// 设置当前可用的按钮
const activeArr = computed(() => {
	const switchCases = {
		dutyOff: ['dutyOn'], // 签出状态
		dutyOn: ['dutyOff', 'rest', 'outbound', 'callForwarding'], // 已签入无通话状态
		rest: ['rest', 'callForwarding'], // 小休中状态
		ring: ['hangup'], //振铃中
		onCall: ['hangup', 'hold', 'mute', 'transfer', 'evaluate'], // 单个通话中
		oneCallHold: ['hangup', 'hold', 'mute', 'transfer', 'outbound', 'evaluate'], // 单个保持中
		oneHoldOneCall: ['hangup', 'hold', 'mute', 'transfer', 'conference'], // 通话一保持通话二通话中（可用三方通话）
		onMute: ['hangup', 'hold', 'mute', 'transfer', 'conference', 'evaluate'], // 通话静音中
		onConference: ['hangup', 'hold', 'mute', 'transfer', 'conference', 'evaluate'], // 三方会议中
	};
	let arr = <any>[];
	if (telStatusInfo.value.phonecontrolState in switchCases) {
		arr = switchCases[telStatusInfo.value.phonecontrolState];
	}
	return arr;
});
// 设置当前状态的值
const currentStatusText = computed(() => {
	const statusMap = {
		dutyOff: '签出',
		dutyOn: '空闲',
		rest: '小休中',
		ring: '振铃中',
		onCall: '通话中',
		oneCallHold: '通话保持',
		onMute: '静音',
		onConference: '会议中',
	};
	return statusMap[telStatusInfo.value.phonecontrolState] || '';
});

// 查询所有分机
const getTelsLists = () => {
	getTelsList().then((res: any) => {
		state.telsList = res?.result ?? [];
	});
};
// 鼠标移入移出改变图标
const onHover = (val: string, path: string) => {
	state[val] = getImageUrl(path);
};
// 点击事件
const onControlClick = (val: string) => {
	switch (val) {
		case 'dutyOn': //签入
			if (userInfos.value.authBtnList.includes('999101')) {
				// 签入权限
				onDutyFn();
			} else {
				console.warn('您没有签入权限');
				ElMessage.warning('您没有签入权限');
			}
			break;
		case 'dutyOff': //签出
			if (userInfos.value.authBtnList.includes('999102')) {
				// 签出权限
				offDutyFn();
			} else {
				ElMessage.warning('您没有签出权限');
			}
			break;
		case 'hangup': //挂断
			if (userInfos.value.authBtnList.includes('999124')) {
				// 挂断权限
				onHangup();
			} else {
				ElMessage.warning('您没有挂断权限');
			}
			break;
		case 'rest': //小休
			if (userInfos.value.authBtnList.includes('999103')) {
				// 小休权限
				onRest();
			} else {
				ElMessage.warning('您没有小休权限');
			}
			break;
		case 'restEnd': //结束小休
			if (userInfos.value.authBtnList.includes('999104')) {
				// 结束小休权限
				onRestEnd();
			} else {
				ElMessage.warning('您没有结束小休权限');
			}
			break;
		case 'hold': //保持
			if (userInfos.value.authBtnList.includes('999105')) {
				// 保持权限
				onHold();
			} else {
				ElMessage.warning('您没有保持权限');
			}
			break;
		case 'unHold': //取消保持
			if (userInfos.value.authBtnList.includes('999106')) {
				// 取消保持权限
				onUnHold();
			} else {
				ElMessage.warning('您没有取消保持权限');
			}
			break;
		case 'mute': //静音
			if (userInfos.value.authBtnList.includes('999126')) {
				// 静音权限
				onMute();
			} else {
				ElMessage.warning('您没有静音权限');
			}
			break;
		case 'unMute': // 取消静音
			if (userInfos.value.authBtnList.includes('999127')) {
				// 取消静音权限
				onunMute();
			} else {
				ElMessage.warning('您没有取消静音权限');
			}
			break;
		case 'transfer': //转接
			if (userInfos.value.authBtnList.includes('999110')) {
				// 转接权限
				onTransfer();
			} else {
				ElMessage.warning('您没有转接权限');
			}
			break;
		case 'conference': //三方会议
			if (userInfos.value.authBtnList.includes('999115')) {
				//三方会议权限
				onConference();
			} else {
				ElMessage.warning('您没有三方会议权限');
			}
			break;
		case 'conferenceEnd': //结束三方会议
			if (userInfos.value.authBtnList.includes('999104')) {
				//三方会议权限
				onConferenceEnd();
			} else {
				ElMessage.warning('您没有三方会议权限');
			}
			break;
		case 'outbound': //呼叫
			if (userInfos.value.authBtnList.includes('999111')) {
				// 呼叫权限
				onOutbound();
			} else {
				ElMessage.warning('您没有呼叫权限');
			}
			break;
		case 'callForwarding': //呼叫转移
			if (userInfos.value.authBtnList.includes('999104')) {
				// 呼叫转移权限
				onCallForwarding();
			} else {
				ElMessage.warning('您没有呼叫转移权限');
			}
			break;
		case 'evaluate': //评价
			if (userInfos.value.authBtnList.includes('999104')) {
				// 评价权限
				onEvaluate();
			} else {
				ElMessage.warning('您没有评价权限');
			}
			break;
		default:
			break;
	}
};
//签入
const onDutyFn = () => {
	dutyFormRef.value?.resetFields();
	state.showDutyDialog = true;
};
// 确认签入
const clickOnDuty = () => {
	dutyFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			onDuty(state.dutyForm.telNo)
				.then(() => {
					// 设置分机号
					usetelStatusStore.setTelsNo(state.dutyForm.telNo);
					// 设置签入状态
					usetelStatusStore.setDutyState(true);
					// 设置电话状态
					usetelStatusStore.setPhonecontrolState('dutyOn');
					// 开启 signalr 链接
					signalR.start();
					signalR.SR.on('Ring', (data: any) => {
						// 接收来电消息
						console.log(data, '来电消息');
						data.isHold = false; // 默认保持为false
						telStatusInfo.value.onCallArr.push(data);
						// 拨打电话通话数 = 保持数量
						telStatusInfo.value.onHoldArr = telStatusInfo.value.onCallArr;
						// 将状态存入Pina
						// 将状态存入Pina
						usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
						usetelStatusStore.setCallState(telStatusInfo.value.onCallArr);
						// 设置电话状态
						usetelStatusStore.setPhonecontrolState('ring');
						// 跳转到录入工单页面
						router.push({
							path: '/business/order/accept',
							query: {
								form: 'tel',
							},
						});
					});
					signalR.SR.on('Bye', (data: any) => {
						// 接收挂断消息
						console.log(data, '挂断消息');
						// 设置电话状态
						usetelStatusStore.setPhonecontrolState('dutyOn');

						// 挂断从挂断列表中移除
						telStatusInfo.value.onCallArr = telStatusInfo.value.onCallArr.filter((item: any) => item.id != data.id);
						// 如果保持也有 直接去除保持列表中的数据
						telStatusInfo.value.onHoldArr = telStatusInfo.value.onHoldArr.filter((item: any) => item.id != data.id);

						// 将状态存入Pina
						usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
						usetelStatusStore.setCallState(telStatusInfo.value.onCallArr);
						if (telStatusInfo.value.onCallArr.length === 0) {
							// 关闭定时器
							removeTimer();
						}
					});
					signalR.SR.on('Answered', (data: any) => {
						//接收接听消息
						console.log(data, '接听消息');
						// 设置电话状态
						usetelStatusStore.setPhonecontrolState('onCall');

						if (telStatusInfo.value.onCallArr.length === 1) {
							// 开始计时
							startTime();
						}
					});
					signalR.SR.on('RestApplyPass', (data: any) => {
						// 小休审批通过消息
						console.log(data, '小休审批通过消息');
						// 设置电话状态小休中
						usetelStatusStore.setPhonecontrolState('rest');
					});
					ElNotification({
						title: '成功',
						message: '签入成功',
						type: 'success',
					});
					//  重置表单
					dutyFormRef.value?.resetFields();
					state.showDutyDialog = false;
					state.loading = false;
				})
				.catch((err:any) => {
					console.log(err,'签入出现错误')
					state.showDutyDialog = false;
					state.loading = false;
				});
		} else {
			return false;
		}
	});
};
// 签出
const offDutyFn = () => {
	ElMessageBox.confirm(`确定要签出，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			offDuty().then(() => {
				ElNotification({
					title: '成功',
					message: '签出成功',
					type: 'success',
				});
				// 断开链接
				signalR.stop();
				// 重置所有状态
				usetelStatusStore.resetState();
			});
		})
		.catch(() => {});
};
// 挂断
const onHangup = () => {
	ElMessageBox.confirm(`确定要挂断，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			hangupApi(telStatusInfo.value.onCallArr[0])
				.then(() => {
					ElNotification({
						title: '成功',
						message: '挂断成功',
						type: 'success',
					});
					// 设置话机状态 设置为签入状态
					usetelStatusStore.setPhonecontrolState('dutyOn');
					// 清空当前的通话数组
					usetelStatusStore.setCallState([]);
					// 关闭定时器
					removeTimer();
				})
				.catch((err: any) => {
					console.log(err);
				});
		})
		.catch(() => {});
};
// 挂断其中一个
const hanupItem = (value: any) => {
	ElMessageBox.confirm(`确定要挂断，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			hangupApi(value).then(() => {
				ElNotification({
					title: '成功',
					message: '挂断成功',
					type: 'success',
				});
				// state.showHangupList = false;
				console.log(telStatusInfo.value.onCallArr, telStatusInfo.value.onHoldArr, value.id);
				// 挂断从挂断列表中移除
				telStatusInfo.value.onCallArr = telStatusInfo.value.onCallArr.filter((item: any) => item.id != value.id);
				// 如果保持也有 直接去除保持列表中的数据
				telStatusInfo.value.onHoldArr = telStatusInfo.value.onHoldArr.filter((item: any) => item.id != value.id);

				// 将状态存入Pina
				usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
				usetelStatusStore.setCallState(telStatusInfo.value.onCallArr);

				if (telStatusInfo.value.onCallArr.length === 0) {
					//没有通话
					// 关闭定时器
					removeTimer();
				}
				console.log(telStatusInfo.value.onCallArr, telStatusInfo.value.onHoldArr, 'newArr');
			});
		})
		.catch(() => {});
};
// 小休
const onRest = async () => {
	if (AppConfigInfo.value.isRestApproval) {
		// 如果小休需要审核
		// 查询流程节点参数
		const res: any = await restFlowStart();
		state.nextStepOptions = res.result;
	}
	//  重置表单
	restFormRef.value?.resetFields();
	// 查询小休原因
	const response: any = await commonList({ typecode: commonEeum.RestReason });
	state.restReasonOptions = response.result;
	state.showRestDialog = true;
};
// 小休流程选择下一环节
const selectNextStep = (val: any) => {
	const next = state.nextStepOptions.find((item: any) => item.code === val);
	state.handerOptions = next.nextSteps ?? [];
};
// 小休选择处理人
const selectHanders = (val: any) => {
	state.restForm.nextHandlers = val.map((item: any) => {
		return {
			id: item.key,
			name: item.value,
			label: item.value,
			key: item.key
		};
	});
};
// 确定小休
const clickOnRest = () => {
	restFormRef.value.validate((valid: boolean) => {
		if (valid) {
			ElMessageBox.confirm(`确认提交?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				draggable: true,
				cancelButtonClass: 'default-button',
				autofocus: false,
			})
				.then(() => {
					if (AppConfigInfo.value.isRestApproval) {
						//如果需要审核
						telRest(state.restForm).then(() => {
							ElNotification({
								title: '成功',
								message: '申请小休成功',
								type: 'success',
							});
							// 设置休息状态 审核中
							usetelStatusStore.setRest('Inreview');
							state.showRestDialog = false;
						});
					} else {
						//不需要审核直接开始小休
						telRest(state.restForm).then(() => {
							ElNotification({
								title: '成功',
								message: '小休开始',
								type: 'success',
							});
							state.showRestDialog = false;
							// 设置休息状态 小休中
							usetelStatusStore.setRest('resting');
							// 设置话机状态 开始休息设置为小休状态
							usetelStatusStore.setPhonecontrolState('rest');
						});
					}
				})
				.catch(() => {});
		} else {
			return false;
		}
	});
};
// 设置抽屉
const mouseup = () => {
	state.trasform = dialogRestRef.value.dialogContentRef.$el.style.transform;
};
// 删除确认
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
	return ElMessageBox.confirm(`确定要删除 ${uploadFile.name} ?`).then(
		() => true,
		() => false
	);
};
// 删除文件
const handleRemove = (file: any) => {
	uploadListRef.value.handleRemove(file);
};
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
	ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
};

// 打开常用意见管理
const showComents = () => {
	CommentRef.value.openDialog(commonEeum.Rest);
};
// 添加到常用意见
const onAddComments = async () => {
	if (!state.restForm.opinion) {
		ElMessage.warning(`请先填写小休常用意见`);
		return;
	}
	await addCommon({
		typeCode: commonEeum.Rest,
		content: state.restForm.opinion,
	});
	ElMessage.success('操作成功');
	CommentRef.value.closeDialog();
};
// 选择常用意见 填入填写框
const chooseComment = (item: any) => {
	state.restForm.opinion += item.content;
	CommentRef.value.closeDialog();
};
// 小休结束
const onRestEnd = () => {
	ElMessageBox.confirm(`确定要结束小休，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			telUnrest().then(() => {
				ElNotification({
					title: '成功',
					message: '小休结束',
					type: 'success',
				});
				// 设置休息状态 设置未正常状态
				usetelStatusStore.setRest('unRest');
				// 设置话机状态 结束休息改为签入状态
				usetelStatusStore.setPhonecontrolState('dutyOn');
			});
		})
		.catch(() => {});
};
// 单个通话保持
const onHold = () => {
	ElMessageBox.confirm(`确定要保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			telHold(telStatusInfo.value.onCallArr[0].id).then(() => {
				ElNotification({
					title: '成功',
					message: '保持开始',
					type: 'success',
				});
				// 把当前保持添加进保持列表
				telStatusInfo.value.onHoldArr = telStatusInfo.value.onCallArr;
				telStatusInfo.value.onHoldArr[0].isHold = true;
				console.log(telStatusInfo.value.onHoldArr);
				// 将状态存入Pina
				usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);

				// 设置电话状态  单个通话保持
				usetelStatusStore.setPhonecontrolState('oneCallHold');
			});
		})
		.catch(() => {});
};
// 取消保持
const onUnHold = () => {
	ElMessageBox.confirm(`确定要取消保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			telUnhold(telStatusInfo.value.onCallArr[0].id).then(() => {
				ElNotification({
					title: '成功',
					message: '取消保持',
					type: 'success',
				});
				// 设置保持状态
				telStatusInfo.value.onHoldArr[0].isHold = false;
				usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
				// 设置电话状态  取消单个保持为通话中
				usetelStatusStore.setPhonecontrolState('onCall');
			});
		})
		.catch(() => {});
};
// 保持或者取消保持其中一个
const holdItem = (item: any) => {
	ElMessageBox.confirm(`确定要${item.isHold ? '取消保持' : '保持'}，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			console.log(item);
			if (item.isHold) {
				// 取消保持
				telUnhold(item.id).then(() => {
					ElNotification({
						title: '成功',
						message: '取消保持',
						type: 'success',
					});
					// 设置保持状态
					for (let i of telStatusInfo.value.onHoldArr) {
						if (i.id === item.id) {
							i.isHold = false;
						}
					}
					console.log(telStatusInfo.value.onHoldArr);
					usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
					// 判断两个通话 一个保持 一个通话中
					if (
						telStatusInfo.value.onHoldArr.length === 2 &&
						telStatusInfo.value.onHoldArr.filter((item: any) => !item.isHold) &&
						telStatusInfo.value.onHoldArr.filter((item: any) => !item.isHold)
					) {
						// 设置电话状态 // 通话一保持通话二通话中（可用三方通话）
						usetelStatusStore.setPhonecontrolState('oneHoldOneCall');
					}
				});
			} else {
				//保持
				telHold(item.id).then(() => {
					ElNotification({
						title: '成功',
						message: '保持开始',
						type: 'success',
					});
					// 设置保持状态
					for (let i of telStatusInfo.value.onHoldArr) {
						if (i.id === item.id) {
							i.isHold = true;
						}
					}
					console.log(telStatusInfo.value.onHoldArr);
					usetelStatusStore.setHoldState(telStatusInfo.value.onHoldArr);
					// 判断两个通话 一个保持 一个通话中
					if (
						telStatusInfo.value.onHoldArr.length === 2 &&
						telStatusInfo.value.onHoldArr.filter((item: any) => !item.isHold) &&
						telStatusInfo.value.onHoldArr.filter((item: any) => !item.isHold)
					) {
						// 设置电话状态 // 通话一保持通话二通话中（可用三方通话）
						usetelStatusStore.setPhonecontrolState('oneHoldOneCall');
					}
				});
			}
		})
		.catch(() => {});
};
// 静音
const onMute = () => {
	ElMessageBox.confirm(`确定要静音，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			telMute().then(() => {
				ElNotification({
					title: '成功',
					message: '静音开始',
					type: 'success',
				});
				// 设置静音状态
				usetelStatusStore.setMute(true);
				// 设置话机状态 静音修改为静音状态
				usetelStatusStore.setPhonecontrolState('onMute');
			});
		})
		.catch(() => {});
};
// 取消静音
const onunMute = () => {
	ElMessageBox.confirm(`确定要取消静音，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			telUnMute().then(() => {
				ElNotification({
					title: '成功',
					message: '静音结束',
					type: 'success',
				});
				// 设置静音状态
				usetelStatusStore.setMute(false);
				// 设置话机状态 取消静音修改为通话状态
				usetelStatusStore.setPhonecontrolState('onCall');
			});
		})
		.catch(() => {});
};
// 转接
const onTransfer = () => {
	// 转接分为咨询转接和盲转
	// 只有一条通话线路时 保持当前通话且不存在多通电话的情况下 盲转
	if (telStatusInfo.value.onHoldArr.length === 1) {
		//  重置表单
		transferFormRef.value?.resetFields();
		state.showTransferDialog = true;
	} else {
		// 咨询转 当前已存在通话一、通话二的情况下，点击【转接】按钮，直接将通话一转接给通话二
	}
};
// 确认转接
const clickOnTransfer = () => {
	transferFormRef.value.validate((valid: boolean) => {
		if (valid) {
			if (state.transferForm.way === 'inside') {
				// 内线
				visitorToTel({ telNo: state.transferForm }).then(() => {
					ElNotification({
						title: '成功',
						message: '转接成功',
						type: 'success',
					});
					state.showTransferDialog = false;
				});
			} else if (state.transferForm.way === 'external') {
				// 外线
				visitorToOuter({ outerNo: state.transferForm }).then(() => {
					ElNotification({
						title: '成功',
						message: '转接成功',
						type: 'success',
					});
					state.showTransferDialog = false;
				});
			}
		} else {
			return false;
		}
	});
};
// 三方会议开始
const onConference = () => {
	meeting({ telNo: telStatusInfo.value.telsNo }).then(() => {
		ElNotification({
			title: '成功',
			message: '三方会议开始',
			type: 'success',
		});
		// 设置三方会议状态
		usetelStatusStore.setMetting(true);
		// 设置话机状态 取消静音修改为会议状态
		usetelStatusStore.setPhonecontrolState('onConference');
	});
};
// 确定要结束三方会议
const onConferenceEnd = () => {
	ElMessageBox.confirm(`确定确定要结束三方会议，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			// 设置三方会议状态
			usetelStatusStore.setMetting(false);
			// 设置话机状态 取消静音修改为通话状态
			usetelStatusStore.setPhonecontrolState('onCall');
		})
		.catch(() => {});
};
// 外呼
const onOutbound = () => {
	//  重置表单
	outboundFormRef.value?.resetFields();
	state.showOutboundDialog = true;
};
// 外呼保存
const clickOnOutbound = () => {
	outboundFormRef.value.validate((valid: boolean) => {
		console.log(state.outboundForm, valid);
		if (valid) {
			if (state.outboundForm.way === 'inside') {
				// 呼叫分机
				telToTel({ telNo: state.outboundForm.telNo }).then(() => {
					ElNotification({
						title: '成功',
						message: '外呼成功',
						type: 'success',
					});
					state.showOutboundDialog = false;
				});
			} else {
				// 呼叫外部电话
				telToOuter({ outerNo: state.outboundForm.outerNo }).then(() => {
					ElNotification({
						title: '成功',
						message: '外呼成功',
						type: 'success',
					});
					state.showOutboundDialog = false;
				});
			}
		} else {
			return false;
		}
	});
};
// 呼叫转移
const onCallForwarding = () => {
	//  重置表单
	callForwardingFormRef.value?.resetFields();
	state.showCallForwardingDialog = true;
};
// 呼叫转移保存
const clickOnCallForwarding = () => {
	callForwardingFormRef.value.validate((valid: boolean) => {
		if (valid) {
			visitorToOuter(state.callForwardingForm).then(() => {
				ElNotification({
					title: '成功',
					message: '呼叫转移成功',
					type: 'success',
				});
			});
		} else {
			return false;
		}
	});
};
// 评价
const onEvaluate = () => {};
// 监听电话状态变化
watch(
	() => telStatusInfo.value.phonecontrolState,
	(newVal, oldVal) => {
		console.log(`状态改变了：${oldVal}=====>${newVal}`);
	}
);
// 清理定时器
onUnmounted(() => {
	removeTimer();
});
onMounted(async () => {
	// 获取所有分机列表
	getTelsLists();
});
</script>

<style scoped lang="scss">
.seizeSeat-box {
	display: none;
}
.textarea {
	position: relative;
	.bttons {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
}
.phoneControls {
	display: flex;
	flex: 1;
	background-color: var(--el-color-white) !important;
	box-shadow: 0px 1px 8px 0px rgba(0, 15, 49, 0.1);
	border-bottom-left-radius: 90px;
	border-bottom-right-radius: 90px;
	padding: 0 52px;
	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;
		}
	}

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

		.item {
			text-align: center;
			cursor: pointer;
			width: 100%;
			height: 100%;
			user-select: none;
			height: calc(100% + 20px);

			img {
				display: block;
				margin: 0 auto;
				padding-top: 15px;
			}

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

			&.disabled {
				cursor: not-allowed;
				overflow: hidden;
				// &:hover{
				//     background-color:var(--hotline-bg-main-color);
				// }
			}
		}

		.active {
			&:hover {
				color: var(--hotline-color-white);
				background-image: url('../../../assets/images/phoneControls/active.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
</style>
<style lang="scss">
.el-popover.hangup-popover {
	background: var(--el-color-primary);
	border-radius: 16px;
	opacity: 0.9;
	box-shadow: 0px 1px 8px 0px rgba(0, 15, 49, 0.1);
	border: 1px solid var(--el-color-primary);
	padding: 15px;

	.hangup-container {
		display: flex;
		flex-wrap: nowrap;
		color: var(--hotline-color-white);
		font-size: var(--el-font-size-small);

		.hangup-item {
			text-align: center;
			width: 130px;
			border-right: 1px solid var(--el-border-color-darker);

			&:last-child {
				border-right: 0;
			}

			&-phoneNumber {
				padding-top: 4px;
			}

			&-button {
				background: linear-gradient(0deg, #e3e3e3, #ffffff);
				border-radius: 8px;
				color: var(--el-color-primary);
				outline: none;
				padding: 5px 15px;
				border: none;
				margin-top: 6px;
				font-weight: bold;
				cursor: pointer;
			}
		}
	}
}
</style>
