<template>
	<div class="phoneControls" v-loading="state.loading">
		<div class="infos">
			<div class="pt10" :class="telStatusInfo.callTime ? '' : 'mt8'"><span>分机号：</span>{{ telStatusInfo.telsNo }}</div>
			<div class="pt5" :class="telStatusInfo.callTime ? '' : 'mt8'">
				<span>状态：</span><b class="dutyOn_status">{{ currentStatusText }}</b>
			</div>
			<div class="pt5" v-if="telStatusInfo.callTime">
				<span>通话时长：</span><b class="dutyOn_timer">{{ formatDuration(telStatusInfo.callTime, 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>
				</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('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>

			<!-- 三方会议 可用(两个通话 一个取消保持 一个保持 才能使用三方通话) -->
<!--    && activeArr.includes('conference')   -->
			<template v-if="telStatusInfo.isDutyOn">
				<div
					class="item active"
					@mouseenter="onHover('conferenceSrc', 'phoneControls/conference_white.png')"
					:title="telStatusInfo.isMeeting ? '结束会议' : '三方会议'"
					@mouseleave="onHover('conferenceSrc', 'phoneControls/conference_blue.png')"
					@click="onControlClick(telStatusInfo.isMeeting ? 'conferenceEnd' : '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> -->

			<!-- 评价 可用 来电才可以评价 callType === 3 -->
			<template
				v-if="
					telStatusInfo.isDutyOn &&
					activeArr.includes('evaluate') &&
					telStatusInfo.telType === 3
				"
			>
				<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="500px" :show-close="false">
		<el-form :model="state.dutyForm" label-width="80px" ref="dutyFormRef">
			<el-form-item label="分机" prop="telNo" :rules="[{ required: false, 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" :loading="state.loading">取 消</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%' : '500px'"
		@mouseup="mouseup"
		:style="'transform: ' + state.transform + ';'"
	>
		<!-- 需要审核 -->
		<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.content" />
							</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="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="办理意见" prop="opinion" :rules="[{ required: true, message: '请填写小休办理意见', trigger: 'blur' }]">
							<Comment
								@chooseComment="chooseComment"
								v-model="state.restForm.opinion"
								:loading="state.loading"
								placeholder="请填写小休办理意见"
								: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' }]">
							<Upload :fileList="state.fileList" />
						</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" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnRest" :loading="state.loading">提 交</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 转接 -->
	<el-dialog v-model="state.showTransferDialog" draggable title="转接" width="500px">
		<el-form :model="state.transferForm" label-width="100px" ref="transferFormRef">
<!--			<el-form-item label="是否咨询转" active-text="咨询转" inactive-text="盲转" prop="isConsult" :rules="[{ required: false, message: '请选择线路', trigger: 'change' }]">-->
<!--				<el-switch v-model="state.transferForm.isConsult" inline-prompt active-text="是" inactive-text="否" />-->
<!--			</el-form-item>-->
<!--			<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' }]"
			>
				<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" :loading="state.loading">取 消</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' }]"
			>
				<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" :loading="state.loading">取 消</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>
					<div 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>
						转移方式
					</div>
				</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" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="clickOnCallForwarding" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>

  <!-- 三方会议 -->
  <el-dialog v-model="state.showMetingDialog" draggable title="三方会议" width="500px">
    <el-form :model="state.metingForm" label-width="120px" ref="metingFormRef">
      <el-form-item label="会议号码" prop="metingId" :rules="[{ required: true, message: '请输入会议号码', trigger: 'blur' }]">
        <el-input v-model="state.metingForm.metingId" placeholder="请输入会议号码" clearable></el-input>
      </el-form-item>
      <el-form-item label="参加会议号码" prop="phoneNo" :rules="[{ required: true, message: '请输入会议号码', trigger: 'blur' }]">
        <el-input v-model="state.metingForm.phoneNo" placeholder="请输入转移号码以英文逗号隔开" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showMetingDialog = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="onMetingSubmit" :loading="state.loading">确 定</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="telControl">
import { reactive, ref, computed, watch, onUnmounted, defineAsyncComponent, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElNotification, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useTelStatus } from '/@/stores/telStatus';
import { useUserInfo } from '/@/stores/userInfo';
import { useAppConfig } from '/@/stores/appConfig';
import { getImageUrl } from '/@/utils/tools';
import { getTelsList } from '/@/api/device/phone';
import { formatDuration } from '/@/utils/formatTime';
import { commonEnum } from '/@/utils/tools';
import other from '/@/utils/other';
import { userState } from '/@/api/login';
import {
  onDuty,
  offDuty,
  telRest,
  telUnrest,
  telHold,
  telUnHold,
  telMute,
  telUnMute,
  visitorToTel,
  telToOuter,
  telToTel,
  visitorToOuter,
  meeting,
  hangupApi,
  restFlowStart,
  evaluateCall,
  outerToTel,
  outerToOuter, restFlowStartWex, restFlowDel,
} from '/@/api/login/user';
import { TelStates, RestStates } from '/@/stores/interface';
import { workflowStepOptions } from '/@/api/system/workflow';
import { commonList } from '/@/api/business/commonP';
import { auth } from '/@/utils/authFunction';
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
import { VoiceInterfaceObject } from '/@/utils/PhoneScript';
import { WebsocketInterface } from '/@/utils/websocket';
import signalR from '/@/utils/signalR';

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

const state = reactive<any>({
	active: <EmptyArrayType>[], // 当前选中
	currentStatus: '', //当前通话状态
	showDutyDialog: false, //签入选分机弹窗
	dutyForm: {
		telNo: '', //分机号
	},
	telsList: <EmptyArrayType>[], // 分机列表
	loading: false,
	showHangupList: false, //是否展示挂断列表
	showRestDialog: false, //小休弹窗
	restForm: {
		//小休表单
		opinion: '',
		nextStepCode: '',
		nextHandlers: [],
		acceptSms: false,
		nextMainHandler: '',
		reason: '',
	},
	handlerMainOptions: [], // 主办
	showTransferDialog: false, // 转接弹窗
	transferForm: {
		//转接表单
		isConsult: false,
		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'), //评价图片
	time: 0, // 毫秒数 记录通话时长
	timer: null as any, // 计时器
	restReasonOptions: [], // 小休原因
	nextStepOptions: [], // 下一个环节
	handlerOptions: [], // 处理人
	handleId: '', // 流程处理ID
	transform: 'translate(0px, 0px)',
	fileList: [], // 文件上传列表
  showMetingDialog: false, // 三方会议弹窗
  metingForm:{
    metingId:'',
    phoneNo:'',
  }, // 三方会议表单
});
const useTelStatusStore = useTelStatus();
const { telStatusInfo } = storeToRefs(useTelStatusStore);
const appConfigStore = useAppConfig();
const { AppConfigInfo } = storeToRefs(appConfigStore);
const dutyFormRef = ref<RefType>(); //签入
const restFormRef = ref<RefType>(); //小休
const transferFormRef = ref<RefType>(); // 转接
const outboundFormRef = ref<RefType>(); //外呼
const callForwardingFormRef = ref<RefType>(); //呼叫转移
const dialogRestRef = ref<RefType>(); // 小休申请弹窗
const metingFormRef = ref<RefType>(); // 三方会议表单
const router = useRouter();

// 小休审批通过消息
const RestApplyPassFn = (data:any) => {
	ElNotification({
		title: '成功',
		message: '小休审批通过，开始小休',
		type: 'success',
	});
  VoiceInterfaceObject.SetBusy(data); //设置忙碌
};
// 链接websocket
const initWebsocket = ()=>{
  // 设置变量
  VoiceInterfaceObject.SetSendModel({
    GongHao: '8029',
    FenJi: '8029',
    DepartmentID: 'Default',
    AgentGroupName: '座席6组',
  });
  // 初始化参数
  const wsParams = {
    url: 'ws://222.212.82.225:1003',
    IsReConnect: true, //是否重连
    reConnectTime: 40, //重连间隔
    IsKeepAlive: true, //是否发送心跳
    KeepAliveTime: 30, //20秒发送1次
    KeepAliveData: JSON.stringify(VoiceInterfaceObject.GetSendModel('keeplive')), //心跳
    onOpen:() =>{
      //登录语音系统
      VoiceInterfaceObject.Login();
    },
    onMessage : (e:any)=> {
      // 收到消息调用方法
      let str: string = e.data; // 收到的消息
      const methodsName = str.split('(')[0]; // 方法名
      const parsers = str.split('(')[1].split(')')[0]; // 参数
      VoiceInterfaceObject[methodsName](JSON.parse(parsers));
    },
    onClose:  ()=> {
      console.info('链接关闭了');
    },
    onError:  (e: any)=> {
      console.info('链接出错', e);
    },
  };
  //初始化WebSocket
  WebsocketInterface(wsParams);
}

//  signalR 初始化signalr
signalR.init();
// 监听消息
const signalRStart = () => {
	// 加入分组
	signalR.joinGroup('CallCenter');
	signalR.SR.on('Send', (data: any) => {
		// 加入分组成功
		console.log(data, '加入分组成功');
	});
	signalR.SR.on('RestApplyPass', (data: any) => {
		// 小休审批通过消息
		console.log(data, '小休审批通过消息');
		RestApplyPassFn(data);
	});
};
signalRStart(); //开启消息监听
// 检查用户状态
// 设置当前可用的按钮
const activeArr = computed(() => {
	const switchCases = {
		dutyOff: ['dutyOn'], // 签出状态
		dutyOn: ['dutyOff', 'rest', 'outbound', 'callForwarding'], // 已签入无通话状态
		rest: ['rest', 'callForwarding'], // 小休中状态
		ring: ['hangup'], //振铃中
		onCall: ['hangup', 'hold', 'mute', 'transfer', 'evaluate'], // 单个通话中
    onHold: ['hangup', 'hold', 'mute', 'transfer', 'evaluate'], // 保持中
		oneHoldOneCall: ['hangup', 'hold', 'mute', 'transfer', 'conference'], // 通话一保持通话二通话中（可用三方通话）
		onMute: ['hangup', 'hold', 'mute', 'transfer', 'conference'], // 通话静音中
		onConference: ['hangup', 'hold', 'mute', 'transfer', '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: '空闲',
		rest: '小休中',
		ring: '振铃中',
    onHold:'保持中',
		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 (!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 'mute': //静音
			if (!auth('public:seat:mute')) ElMessage.error('抱歉，您没有静音权限！');
			else onMute();
			break;
		case 'unMute': // 取消静音
			if (!auth('public:seat:unMute')) ElMessage.error('抱歉，您没有取消静音权限！');
			else unMute();
			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 'conferenceEnd': //结束三方会议
			if (!auth('public:seat:meeting')) ElMessage.error('抱歉，您没有结束三方会议权限！');
			else onConferenceEnd();
			break;
		case 'outbound': //呼叫
			if (!auth('public:seat:outbound')) ElMessage.error('抱歉，您没有呼叫权限！');
			else onOutbound();
			break;
		case 'callForwarding': //呼叫转移
			if (!auth('999104')) ElMessage.error('抱歉，您没有呼叫转移权限！');
			else onCallForwarding();
			break;
		case 'evaluate': //评价
			if (!auth('public:seat:evaluate')) ElMessage.error('抱歉，您没有评价权限！');
			else onEvaluate();
			break;
		default:
			break;
	}
};
//签入
const onDutyFn = () => {
	dutyFormRef.value?.resetFields();
	// 获取所有分机列表
	getTelsLists();
	state.showDutyDialog = true;
};
// 确认签入
const clickOnDuty = () => {
  state.loading = true;
  // {telNo:state.dutyForm.telNo}
  initWebsocket(); //开启消息监听
  state.loading = false;
  state.showDutyDialog = false;
  // onDuty({telNo:'8020'}).then(() => {
  //   initWebsocket(); //开启消息监听
  //   state.loading = false;
  //   state.showDutyDialog = false;
  // }).catch(() => {state.loading = false;});
};
// 签出
const offDutyFn = () => {
	ElMessageBox.confirm(`确定要签出，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
      state.loading = true;
      VoiceInterfaceObject.LogOut(); // 退出语音系统
      // 重置所有状态
      useTelStatusStore.resetState();
      state.loading = false;
      // offDuty().then(() => {
      //   VoiceInterfaceObject.LogOut(); // 退出语音系统
      //   // 重置所有状态
      //   useTelStatusStore.resetState();
      //   state.loading = false;
      // }).catch(() => {state.loading = false;});
		})
		.catch(() => {state.loading = false;});
};
// 挂断
const onHangup = () => {
	ElMessageBox.confirm(`确定要挂断，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
      VoiceInterfaceObject.HangUp(); // 挂断
		})
		.catch(() => {});
};
// 小休
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 commonList({ typecode: commonEnum.RestReason });
	state.restReasonOptions = response.result;
	state.showRestDialog = true;
};
// 小休流程选择下一个环节
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 = () => {
	restFormRef.value.validate((valid: boolean) => {
		if (valid) {
			ElMessageBox.confirm(`确认提交?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				draggable: true,
				cancelButtonClass: 'default-button',
				autofocus: false,
			})
				.then(() => {
					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.showRestDialog = false;
								state.loading = false;
							})
							.catch(() => {
                restFlowDel().then(() => {
                  state.loading = false;
                  state.showRestDialog = false;
                });
							});
					} else {
            //不需要审核直接开始小休
            VoiceInterfaceObject.SetBusy(state.restForm.reason); //设置忙碌
            state.showRestDialog = false;
            state.loading = false;
					}
				})
				.catch(() => {});
		}
	});
};
// 设置抽屉
const mouseup = () => {
	state.transform = dialogRestRef.value.dialogContentRef.$el.style.transform;
};
// 选择常用意见 填入填写框
const chooseComment = (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;
      VoiceInterfaceObject.SetIdle(); //设置空闲
      state.loading = false;
		})
		.catch(() => {});
};
// 单个通话保持
const onHold = () => {
	ElMessageBox.confirm(`确定要保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
      VoiceInterfaceObject.KeepInTouch();
      state.loading = false;
		})
		.catch(() => {});
};
// 取消保持
const onUnHold = () => {
	ElMessageBox.confirm(`确定要取消保持，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
      VoiceInterfaceObject.KeepCancelInTouch();
      state.loading = false;
		})
		.catch(() => {});
};
// 静音
const onMute = () => {
	ElMessageBox.confirm(`确定要静音，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			telMute()
				.then(() => {
					ElNotification({
						title: '成功',
						message: '静音开始',
						type: 'success',
					});
					// 设置静音状态
					useTelStatusStore.setMute(true);
					// 设置话机状态 静音修改为静音状态
					useTelStatusStore.setPhoneControlState(TelStates.onMute);
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		})
		.catch(() => {});
};
// 取消静音
const unMute = () => {
	ElMessageBox.confirm(`确定要取消静音，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			telUnMute()
				.then(() => {
					ElNotification({
						title: '成功',
						message: '静音结束',
						type: 'success',
					});
					// 设置静音状态
					useTelStatusStore.setMute(false);
					// 设置话机状态 取消静音修改为通话状态
					useTelStatusStore.setPhoneControlState(TelStates.onCall);
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		})
		.catch(() => {});
};
// 打开转接弹窗
const onTransfer = () => {
	//  重置表单
	transferFormRef.value?.resetFields();
	// 获取所有分机列表
	getTelsLists();
	state.showTransferDialog = true;
};
// 确认转接
const clickOnTransfer = () => {
	transferFormRef.value.validate((valid: boolean) => {
		if (valid) {
			// 是否是咨询转接
			if (state.transferForm.isConsult) {
				VoiceInterfaceObject.TeleSwitch(state.transferForm.outerNo); // 咨询转接
        state.showTransferDialog = false
			} else {
				// 盲转
        VoiceInterfaceObject.TeleSwitch(state.transferForm.outerNo);
        state.showTransferDialog = false
			}
		}
	});
};
// 三方会议开始
const onConference = () => {
	// state.loading = true;
  state.showMetingDialog = true;
	// meeting({ telNo: telStatusInfo.value.telsNo })
	// 	.then(() => {
	// 		ElNotification({
	// 			title: '成功',
	// 			message: '三方会议开始',
	// 			type: 'success',
	// 		});
	// 		// 设置三方会议状态
	// 		useTelStatusStore.setMetTing(true);
	// 		// 设置话机状态 取消静音修改为会议状态
	// 		useTelStatusStore.setPhoneControlState(TelStates.onConference);
	// 		state.loading = false;
	// 	})
	// 	.catch(() => {
	// 		state.loading = false;
	// 	});
};
const onMetingSubmit = () => {
  metingFormRef.value.validate((valid: boolean) => {
    if (valid) {
      state.loading = true;
      VoiceInterfaceObject.StartMeeting(state.metingForm.metingId, state.metingForm.phoneNo);
      state.showMetingDialog = false;
      state.loading = false;
    }
  });
}
// 确定要结束三方会议
const onConferenceEnd = () => {
	ElMessageBox.confirm(`确定确定要结束三方会议，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			// // 设置三方会议状态
			// useTelStatusStore.setMetTing(false);
			// // 设置话机状态 取消静音修改为通话状态
			// useTelStatusStore.setPhoneControlState(TelStates.onCall);
			// // 循环挂断
			// for (let item of telStatusInfo.value.onCallArr) {
			// 	hangupApi(item)
			// 		.then(() => {})
			// 		.catch(() => {});
			// }
		})
		.catch(() => {});
};
// 外呼
const onOutbound = () => {
	//  重置表单
	outboundFormRef.value?.resetFields();
	// 获取所有分机列表
	getTelsLists();
	state.showOutboundDialog = true;
};
// 外呼保存
const clickOnOutbound = () => {
	outboundFormRef.value.validate((valid: boolean) => {
		console.log(state.outboundForm, valid);
		if (valid) {
			state.loading = true;
      VoiceInterfaceObject.DialOut(state.outboundForm.outerNo);
      state.showOutboundDialog = false;
      state.loading = false;
		}
	});
};
// 呼叫转移
const onCallForwarding = () => {
	//  重置表单
	callForwardingFormRef.value?.resetFields();
	state.showCallForwardingDialog = true;
};
// 呼叫转移保存
const clickOnCallForwarding = () => {
	callForwardingFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			visitorToOuter(state.callForwardingForm)
				.then(() => {
					ElNotification({
						title: '成功',
						message: '呼叫转移成功',
						type: 'success',
					});
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		}
	});
};
// 评价
const onEvaluate = () => {
	ElMessageBox.confirm(`确定确定要开始评价，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			state.loading = true;
			evaluateCall(telStatusInfo.value.onCallArr[0].id)
				.then(() => {
					ElNotification({
						title: '成功',
						message: '开启评价成功',
						type: 'success',
					});
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		})
		.catch(() => {});
};
// 监听电话状态变化
watch(
	() => telStatusInfo.value.phoneControlState,
	(newVal, oldVal) => {
		console.log(`状态改变了：${oldVal}=====>${newVal}`);
	}
);
onMounted(() => {
  if(telStatusInfo.value.isDutyOn){
    initWebsocket();
  }
});
</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: 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-image: url('/@/assets/images/phoneControls/active.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
</style>
