<template>
	<div class="device-ivrlist-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<div class="flex-center-between mb20">
				<p class="table-title">信息列表</p>
				<div>
					<el-button type="primary" @click="onAddIvr" v-waves v-auth="'300401'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
					<el-button type="primary" v-waves @click="onImportTable" :disabled="!state.multipleSelection.length">
						<SvgIcon name="iconfont icon-daochu" class="mr5" />导出
					</el-button>
				</div>
			</div>
			<!-- 表格 -->
			<el-table :data="tableData" v-loading="loading" row-key="id" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" :reserve-selection="true" />
				<el-table-column prop="no" label="ivr编号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="ivr名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="ivrTypeText" label="ivr类型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="repeat" label="语音播放次数" show-overflow-tooltip></el-table-column>
				<el-table-column prop="infoLength" label="按键长度" show-overflow-tooltip></el-table-column>
				<el-table-column prop="exit" label="按键结束符" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="150" fixed="right" align="center">
					<template #default="scope">
						<el-button text type="primary" @click="configure(scope.row)" v-auth="'300402'" title="基础配置">
							<SvgIcon name="ele-Setting" size="var(--hotline-table-icon-font-size)" />
						</el-button>
						<el-button text type="success" @click="ivrConfigure(scope.row)" v-auth="'300403'" title="策略配置">
							<SvgIcon name="ele-EditPen" size="var(--hotline-table-icon-font-size)" />
						</el-button>
						<el-button text type="danger" @click="resetIvrConfigure(scope.row)" v-auth="'300404'" title="重置策略配置">
							<SvgIcon name="ele-Refresh" size="var(--hotline-table-icon-font-size)" />
						</el-button>
					</template>
				</el-table-column>
				<template #empty>
					<Empty />
				</template>
			</el-table>
		</div>

		<!-- 基础配置 新增修改 -->
		<el-dialog v-model="isShowDialog" draggable :title="dialogTitle">
			<el-form :model="ruleForm" label-width="120px" ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="ivr编号" prop="no">
							<el-input v-model="ruleForm.no" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="ivr名称" prop="name" :rules="[{ required: true, message: '请输入ivr名称', trigger: 'blur' }]">
							<el-input v-model="ruleForm.name" placeholder="请输入ivr名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="语音播放次数" prop="repeat" :rules="[{ required: true, message: '请输入语音播放次数', trigger: 'blur' }]">
							<el-input-number v-model="ruleForm.repeat" :min="1" :max="50" :precision="0" placeholder="请输入语音播放次数" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="按键检测长度" prop="infoLength" :rules="[{ required: true, message: '请输入按键检测长度', trigger: 'blur' }]">
							<el-input-number v-model="ruleForm.infoLength" :min="1" :precision="0" placeholder="请输入按键检测长度" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item
							label="按键结束字符"
							prop="exit"
							:rules="[
								{ required: false, message: '请输入按键结束字符', trigger: 'blur' },
								{ pattern: /[a-z]|[A-Z]|[1-9]#|[*]+/, message: '结束符格式错误，请输入1-9，A-D，*,#' },
							]"
						>
							<el-input v-model="ruleForm.exit" placeholder="请输入1-9，A-D，*,#" clearable maxlength="1"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="ivr类型" prop="ivrType" :rules="[{ required: true, message: '请选择ivr类型', trigger: 'change' }]">
							<el-select v-model="ruleForm.ivrType" placeholder="请选择ivr类型" class="w100">
								<el-option v-for="item in ivrTypes" :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="12" :xl="12">
						<el-form-item label="所属分类" prop="ivrCategoryId" :rules="[{ required: true, message: '请选择ivr所属分类', trigger: 'change' }]">
							<el-select v-model="ruleForm.ivrCategoryId" placeholder="请选择ivr所属分类" class="w100">
								<el-option v-for="item in categorieList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="选择语音文件" prop="voiceList" :rules="[{ required: true, message: '选择语音文件', trigger: 'change' }]">
							<el-transfer
								v-model="ruleForm.voiceList"
								:titles="['选择语音文件', '按照选择顺序播放']"
								target-order="push"
								:data="voiceList"
								:filterable="true"
							>
								<template #default="{ option }">
									<span>{{ option.label }}</span>
								</template>
							</el-transfer>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="isShowDialog = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSave" :loading="loading">保 存</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 策略配置 -->
		<el-dialog v-model="ivrKeyCnfig" draggable title="策略配置">
			<el-tabs tab-position="left" class="demo-tabs" v-model="ivrAnswerType">
				<el-tab-pane :label="item.value" v-for="(item, index) in ivrStrategeTypes" :key="index" :name="item.key"></el-tab-pane>
				<!-- 语音播放完成 -->
				<el-form :model="voiceFinishedForm" ref="voiceFinishedFormRef" label-width="100px" v-show="ivrAnswerType === 0">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="响应类型" prop="ivrAnswerType">
								<el-select v-model="voiceFinishedForm.ivrAnswerType" placeholder="请选择响应类型" class="w100">
									<el-option v-for="item in ivrAnswerTypes" :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="12" :xl="12" v-if="voiceFinishedForm.ivrAnswerType === 1">
							<!-- 转语音选择ivr -->
							<el-form-item label="ivr">
								<el-select v-model="voiceFinishedForm.content" placeholder="请选择ivr" class="w100">
									<el-option v-for="item in ivrList" :key="item.id" :label="item.name" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="voiceFinishedForm.ivrAnswerType === 2">
							<!-- 转分机选择分机-->
							<el-form-item label="分机" prop="content">
								<el-select v-model="voiceFinishedForm.content" placeholder="请选择分机" class="w100">
									<el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="voiceFinishedForm.ivrAnswerType === 3">
							<!-- 转分机组 -->
							<el-form-item label="分机组" prop="telsGroup">
								<el-transfer
									v-model="voiceFinishedForm.telsGroup"
									:titles="['选择语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="telsGroup"
									:props="{
										key: 'no',
										label: 'name',
									}"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.name }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="voiceFinishedForm.ivrAnswerType === 4">
							<!-- 转外部电话 -->
							<el-form-item label="外部电话" prop="content">
								<el-input v-model="voiceFinishedForm.content" placeholder="请输入外部电话" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="插播语音" prop="voiceList">
								<el-transfer
									v-model="voiceFinishedForm.voiceList"
									:titles="['语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="voiceList"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.label }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<!-- 普通按键 -->
				<el-form label-width="100px" ref="commonKeysFormRef" v-show="ivrAnswerType === 1">
					<div class="mb20">
						<el-button type="primary" @click="addFruitConfig"> <SvgIcon name="ele-Plus" class="mr5" />新增按键 </el-button>
					</div>
					<!-- <template v-if="keysArray.length"> -->
					<el-row :gutter="35" v-for="(itemForm, indexForm) in keysArray" :key="indexForm">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="按键输入" prop="input" :rules="[{ required: false, message: '请输入按键输入', trigger: 'blur' }]">
								<el-input v-model="itemForm.input" placeholder="请输入按键输入" class="w100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="响应类型" prop="ivrAnswerType">
								<el-select v-model="itemForm.ivrAnswerType" placeholder="请选择响应类型" class="w100">
									<el-option v-for="item in ivrAnswerTypes" :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="12" :xl="12" v-if="itemForm.ivrAnswerType === 1">
							<!-- 转语音选择ivr -->
							<el-form-item label="ivr">
								<el-select v-model="itemForm.content" placeholder="请选择ivr" class="w100">
									<el-option v-for="item in ivrList" :key="item.id" :label="item.name" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="itemForm.ivrAnswerType === 2">
							<!-- 转分机选择分机-->
							<el-form-item label="分机">
								<el-select v-model="itemForm.content" placeholder="请选择分机" class="w100">
									<el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="itemForm.ivrAnswerType === 3">
							<!-- 转分机组 -->
							<el-form-item label="分机组" prop="telsGroup">
								<el-transfer
									v-model="itemForm.telsGroup"
									:titles="['选择语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="telsGroup"
									:props="{
										key: 'no',
										label: 'name',
									}"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.name }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="itemForm.ivrAnswerType === 4">
							<!-- 转外部电话 -->
							<el-form-item label="外部电话">
								<el-input v-model="itemForm.content" placeholder="请输入外部电话" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="插播语音" prop="voiceList">
								<el-transfer
									v-model="itemForm.voiceList"
									:titles="['语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="voiceList"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.label }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-button @click.prevent="removeFruitConfig(itemForm)" type="danger"> <SvgIcon name="ele-Delete" class="mr5" />删除按键 </el-button>
						</el-col>
						<el-divider />
					</el-row>
					<!-- </template>
                    <template v-else>
                        <Empty description="暂无按键" />
                    </template> -->
				</el-form>

				<!-- 异常按键 -->
				<el-form :model="abnormalKeysForm" ref="abnormalKeysFormRef" label-width="100px" v-show="ivrAnswerType === 2">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="响应类型" prop="ivrAnswerType">
								<el-select v-model="abnormalKeysForm.ivrAnswerType" placeholder="请选择响应类型" class="w100">
									<el-option v-for="item in ivrAnswerTypes" :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="12" :xl="12" v-if="abnormalKeysForm.ivrAnswerType === 1">
							<!-- 转语音选择ivr -->
							<el-form-item label="ivr" prop="content">
								<el-select v-model="abnormalKeysForm.content" placeholder="请选择ivr" class="w100">
									<el-option v-for="item in ivrList" :key="item.id" :label="item.name" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="abnormalKeysForm.ivrAnswerType === 2">
							<!-- 转分机选择分机-->
							<el-form-item label="分机" prop="content">
								<el-select v-model="abnormalKeysForm.content" placeholder="请选择分机" class="w100">
									<el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="abnormalKeysForm.ivrAnswerType === 3">
							<!-- 转分机组 -->
							<el-form-item label="分机组" prop="telsGroup">
								<el-transfer
									v-model="abnormalKeysForm.telsGroup"
									:titles="['选择语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="telsGroup"
									:props="{
										key: 'no',
										label: 'name',
									}"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.name }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="abnormalKeysForm.ivrAnswerType === 4">
							<!-- 转外部电话 -->
							<el-form-item label="外部电话" prop="content">
								<el-input v-model="abnormalKeysForm.content" placeholder="请输入外部电话" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="插播语音" prop="voiceList">
								<el-transfer
									v-model="abnormalKeysForm.voiceList"
									:titles="['语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="voiceList"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.label }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<!-- 返回上一级 -->
				<el-form :model="returnPreviousForm" ref="returnPreviousFormRef" label-width="100px" v-show="ivrAnswerType === 3">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="响应类型" prop="ivrAnswerType">
								<el-select v-model="returnPreviousForm.ivrAnswerType" placeholder="请选择响应类型" class="w100">
									<el-option v-for="item in ivrAnswerTypes" :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="12" :xl="12" v-if="returnPreviousForm.ivrAnswerType === 1">
							<!-- 转语音选择ivr -->
							<el-form-item label="ivr" prop="content">
								<el-select v-model="returnPreviousForm.content" placeholder="请选择ivr" class="w100">
									<el-option v-for="item in ivrList" :key="item.id" :label="item.name" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="returnPreviousForm.ivrAnswerType === 2">
							<!-- 转分机选择分机-->
							<el-form-item label="分机" prop="content">
								<el-select v-model="returnPreviousForm.content" placeholder="请选择分机" class="w100">
									<el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="returnPreviousForm.ivrAnswerType === 3">
							<!-- 转分机组 -->
							<el-form-item label="分机组" prop="telsGroup">
								<el-transfer
									v-model="returnPreviousForm.telsGroup"
									:titles="['选择语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="telsGroup"
									:props="{
										key: 'no',
										label: 'name',
									}"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.name }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="returnPreviousForm.ivrAnswerType === 4">
							<!-- 转外部电话 -->
							<el-form-item label="外部电话" prop="content">
								<el-input v-model="returnPreviousForm.content" placeholder="请输入外部电话" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="插播语音" prop="voiceList">
								<el-transfer
									v-model="returnPreviousForm.voiceList"
									:titles="['语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="voiceList"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.label }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<!-- 按键超时 -->
				<el-form :model="keyTimeoutForm" ref="keyTimeoutFormRef" label-width="100px" v-show="ivrAnswerType === 4">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="响应类型" prop="ivrAnswerType">
								<el-select v-model="keyTimeoutForm.ivrAnswerType" placeholder="请选择响应类型" class="w100">
									<el-option v-for="item in ivrAnswerTypes" :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="12" :xl="12" v-if="keyTimeoutForm.ivrAnswerType === 1">
							<!-- 转语音选择ivr -->
							<el-form-item label="ivr" prop="content">
								<el-select v-model="keyTimeoutForm.content" placeholder="请选择ivr" class="w100">
									<el-option v-for="item in ivrList" :key="item.id" :label="item.name" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="keyTimeoutForm.ivrAnswerType === 2">
							<!-- 转分机选择分机-->
							<el-form-item label="分机" prop="content">
								<el-select v-model="keyTimeoutForm.content" placeholder="请选择分机" class="w100">
									<el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="keyTimeoutForm.ivrAnswerType === 3">
							<!-- 转分机组 -->
							<el-form-item label="分机组" prop="telsGroup">
								<el-transfer
									v-model="keyTimeoutForm.telsGroup"
									:titles="['选择语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="telsGroup"
									:props="{
										key: 'no',
										label: 'name',
									}"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.name }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="keyTimeoutForm.ivrAnswerType === 4">
							<!-- 转外部电话 -->
							<el-form-item label="外部电话" prop="content">
								<el-input v-model="keyTimeoutForm.content" placeholder="请输入外部电话" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="插播语音" prop="voiceList">
								<el-transfer
									v-model="keyTimeoutForm.voiceList"
									:titles="['语音文件', '按照选择顺序播放']"
									target-order="push"
									:data="voiceList"
									:filterable="true"
								>
									<template #default="{ option }">
										<span>{{ option.label }}</span>
									</template>
								</el-transfer>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="ivrKeyCnfig = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="saveIvrConfig" :loading="loading">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="ivrList" setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import table2excel from 'js-table2excel';
import { formatDate } from '/@/utils/formatTime';
// 引入api
import { getIvrCategories, baseInfo, addIvr, updateIvr, getIvrById, addEditIvr, getIvrList, voicequerylist, resetConfig } from '/@/api/device/ivr';
import { getTelsGroupList } from '/@/api/device/telsGroup';
import { getTelsList } from '/@/api/device/tels';

// 定义接口来定义对象的类型
interface IvrListState {
	ruleForm: {
		no: string; // ivr编号
		name: string; // ivr名称
		repeat: number; // 语音播放次数
		infoLength: number; // 按键长度
		exit: string; // 按键结束符
		ivrCategoryId: string; // 分类id
		voiceList: Array<any>; //语音列表
		voice: string; //格式化之后的语音列表
		ivrType: string; //vir类型
	};
	multipleSelection: Array<any>; //多选数组
	ivrStrategeTypes: Array<any>; //策略配置的类型数组
	ivrAnswerTypes: Array<any>; //应答类型数组
	ivrList: Array<any>; //vir列表
	telsList: Array<any>; //分机列表
	telsGroup: Array<any>; //分机组列表
	voiceList: Array<any>; //所有语音
	keysArray: Array<any>; //按键列表
	categorieList: Array<any>; //分类列表
	loading: boolean;
	tableData: Array<any>; //列表数据
	isShowDialog: boolean; // 新增编辑弹窗
	ivrKeyCnfig: boolean; // 策略配置弹窗
	ivrAnswerType: number; // 选择的策略配置
	ivrTypes: Array<any>; //ivr类型列表
	voiceFinishedForm: {
		// 语音播放完
		ivr: any;
		ivrStrategeType: any;
		ivrAnswerType: any;
		content: any;
		telsGroup: Array<any>;
		voiceList: Array<any>;
	};
	abnormalKeysForm: {
		// 异常按键
		ivr: any;
		ivrStrategeType: any;
		ivrAnswerType: any;
		content: any;
		telsGroup: Array<any>;
		voiceList: Array<any>;
	};
	returnPreviousForm: {
		// 返回上一级
		ivr: any;
		ivrStrategeType: any;
		ivrAnswerType: any;
		content: any;
		telsGroup: Array<any>;
		voiceList: Array<any>;
	};
	keyTimeoutForm: {
		// 按键超时
		ivr: any;
		ivrStrategeType: any;
		ivrAnswerType: any;
		content: any;
		telsGroup: Array<any>;
		voiceList: Array<any>;
	};
}

// 定义变量内容
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const currentIvr = ref<any>(undefined); //当前ivr
const dialogTitle = ref('新增ivr');
const ruleFormRef = ref();
const state = reactive<IvrListState>({
	ruleForm: {
		no: '', // ivr编号
		name: '', // ivr名称
		repeat: 1,
		infoLength: 1,
		exit: '',
		ivrCategoryId: '',
		voiceList: [],
		voice: '',
		ivrType: '',
	},
	multipleSelection: [],
	ivrStrategeTypes: [],
	ivrAnswerTypes: [],
	ivrAnswerType: 0,
	ivrList: [],
	telsList: [],
	telsGroup: [],
	voiceList: [],
	keysArray: [],
	categorieList: [],
	ivrTypes: [],
	tableData: [],
	isShowDialog: false,
	ivrKeyCnfig: false,
	loading: false,
	voiceFinishedForm: {
		ivr: null,
		ivrStrategeType: null,
		ivrAnswerType: null,
		content: '',
		telsGroup: [],
		voiceList: [],
	},
	abnormalKeysForm: {
		//异常按键
		ivr: null,
		ivrStrategeType: null,
		ivrAnswerType: null,
		content: '',
		telsGroup: [],
		voiceList: [],
	},
	returnPreviousForm: {
		ivr: null,
		ivrStrategeType: null,
		ivrAnswerType: null,
		content: '',
		telsGroup: [],
		voiceList: [],
	},
	keyTimeoutForm: {
		ivr: null,
		ivrStrategeType: null,
		ivrAnswerType: null,
		content: '',
		telsGroup: [],
		voiceList: [],
	},
});
const {
	ruleForm,
	ivrStrategeTypes,
	ivrAnswerTypes,
	ivrAnswerType,
	ivrList,
	telsList,
	telsGroup,
	voiceList,
	keysArray,
	categorieList,
	tableData,
	isShowDialog,
	ivrKeyCnfig,
	loading,
	ivrTypes,
	voiceFinishedForm,
	abnormalKeysForm,
	returnPreviousForm,
	keyTimeoutForm,
} = toRefs(state);
/** 获取ivr列表 */
const getList = () => {
	state.loading = true;
	getIvrList()
		.then((response: any) => {
			state.tableData = response?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 获取所有语音文件列表 */
const getAudioList = () => {
	voicequerylist()
		.then((response: any) => {
			state.voiceList = response.result.map((item: any) => {
				return {
					key: item,
					label: item,
				};
			});
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 新增Ivr
const onAddIvr = () => {
	dialogTitle.value = '新增ivr';
	ruleFormRef.value?.resetFields();
	ruleFormRef.value?.resetFields();
	if (state.tableData.length) {
		state.ruleForm = {
			no: String(Number(state.tableData.length + 1)), // ivr编号
			name: '', // ivr名称
			repeat: 1,
			infoLength: 1,
			exit: '',
			ivrCategoryId: '',
			voiceList: [],
			voice: '',
			ivrType: '',
		};
	} else {
		state.ruleForm.no = '1';
	}
	state.isShowDialog = true;
};
//修改 配置ivr
const configure = (row: any) => {
	dialogTitle.value = '基础配置';
	ruleFormRef.value?.resetFields();
	ruleFormRef.value?.resetFields();
	state.ruleForm = JSON.parse(JSON.stringify(row));
	if (row.voice) {
		//处理成穿梭框需要的数据格式
		state.ruleForm.voiceList = row.voice.split('+');
	}
	state.isShowDialog = true;
};
// 新增修改基础配置保存
const onSave = () => {
	ruleFormRef.value.validate((valid: boolean) => {
		if (valid) {
			if (state.tableData.length && Number(state.tableData[state.tableData.length - 1].no) >= 50) {
				ElMessage.warning('ivr最多配置50条');
				return;
			}
			state.ruleForm.voice = state.ruleForm.voiceList.join('+');
			if (dialogTitle.value == '新增ivr') {
				addIvr(state.ruleForm)
					.then(() => {
						ElMessage.success('新增成功');
						getList();
						state.isShowDialog = false;
					})
					.catch(() => {});
			} else if (dialogTitle.value == '基础配置') {
				updateIvr(state.ruleForm)
					.then(() => {
						ElMessage.success('配置成功');
						getList();
						state.isShowDialog = false;
					})
					.catch(() => {});
			}
		} else {
			return false;
		}
	});
};
// 获取分类列表
const getIvrCategorieList = () => {
	getIvrCategories()
		.then((res: any) => {
			state.categorieList = res?.result ?? [];
		})
		.catch(() => {});
};
// 获取页面基础信息
const getBaseInfo = () => {
	if (userInfos.value.authBtnList?.includes('300407')) {
		// 校验是否有权限 页面基础信息
		getTelsList().then((res: any) => {
			//查询所有的分机
			state.telsList = res?.result ?? [];
		});
		getTelsGroupList().then((res: any) => {
			// 查询所有的分机组
			state.telsGroup = res?.result ?? [];
		});
		baseInfo().then((res: any) => {
			// 获取页面基础信息
			state.ivrTypes = res?.result.ivrTypes ?? [];
			state.ivrAnswerTypes = res?.result.ivrAnswerTypes ?? [];
			state.ivrStrategeTypes = res?.result.ivrStrategeTypes ?? [];
		});
	} else {
		ElMessage.warning('您没有权限获取页面基础信息');
	}
};
// 新增按键ivr
const addFruitConfig = () => {
	state.keysArray.unshift({
		ivr: null,
		ivrStrategeType: null,
		ivrAnswerType: null,
		content: '',
		input: '',
		telsGroup: [],
		voiceList: [],
		ivrId: Math.random(),
	});
};
// 删除按键ivr
const removeFruitConfig = (val: any) => {
	ElMessageBox.confirm(`确定要删除当前按键ivr，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = '删除中';
				setTimeout(() => {
					done();
					setTimeout(() => {
						instance.confirmButtonLoading = false;
					}, 300);
				}, 700);
			} else {
				done();
			}
		},
	})
		.then(() => {
			state.keysArray = state.keysArray.filter((item: any) => item.ivrId != val.ivrId);
		})
		.catch(() => {});
};
const voiceFinishedFormRef = ref();
const commonKeysFormRef = ref();
const abnormalKeysFormRef = ref();
const returnPreviousFormRef = ref();
const keyTimeoutFormRef = ref();
// 配置策略
const ivrConfigure = (row: any) => {
	currentIvr.value = JSON.parse(JSON.stringify(row));
	state.keysArray = [];
	state.ivrAnswerType = 0;
	getIvrById(row.ivrCategoryId).then((res: any) => {
		// 根据分类ID查出分类下所有的ivr  排除根节点
		state.ivrList = res?.result.ivrs.filter((item: any) => item.id != row.ivrCategoryId) ?? [];
	});
	if (voiceFinishedFormRef.value) voiceFinishedFormRef.value.resetFields();
	// if (commonKeysFormRef.value && state.keysArray.length) commonKeysFormRef.value.resetFields();
	if (abnormalKeysFormRef.value) abnormalKeysFormRef.value.resetFields();
	if (returnPreviousFormRef.value) returnPreviousFormRef.value.resetFields();
	if (keyTimeoutFormRef.value) keyTimeoutFormRef.value.resetFields();
	for (let i of row.ivrStrategies) {
		switch (i.ivrStrategeType) {
			case 0: // 语音播放完
				let arr0 = <any>[];
				state.voiceFinishedForm.ivrAnswerType = i.answer.ivrAnswerType;
				state.voiceFinishedForm.content = i.answer.content;
				state.voiceFinishedForm.voiceList = i.answer.preVoice.split('+');
				for (let j of i.groupSorts) {
					arr0.push(j.groupNo);
				}
				state.voiceFinishedForm.telsGroup = arr0;
				break;
			case 1: // 普通按键
				let arr1 = <any>[];
				let obj: any = {};
				obj.ivrAnswerType = i.answer.ivrAnswerType;
				obj.content = i.answer.content;
				obj.input = i.input;
				obj.voiceList = i.answer.preVoice.split('+');
				for (let j of i.groupSorts) {
					arr1.push(j.groupNo);
				}
				obj.telsGroup = arr1;
				obj.ivrId = Math.random();
				state.keysArray.push(obj);
				break;
			case 2: // 异常按键
				let arr2 = <any>[];
				state.abnormalKeysForm.ivrAnswerType = i.answer.ivrAnswerType;
				state.abnormalKeysForm.content = i.answer.content;
				state.abnormalKeysForm.voiceList = i.answer.preVoice.split('+');
				for (let j of i.groupSorts) {
					arr2.push(j.groupNo);
				}
				state.abnormalKeysForm.telsGroup = arr2;
				break;
			case 3: // 返回上一级
				let arr3 = <any>[];
				state.returnPreviousForm.ivrAnswerType = i.answer.ivrAnswerType;
				state.returnPreviousForm.content = i.answer.content;
				state.returnPreviousForm.voiceList = i.answer.preVoice.split('+');
				for (let j of i.groupSorts) {
					arr3.push(j.groupNo);
				}
				state.returnPreviousForm.telsGroup = arr3;
				break;
			case 4: // 按键超时
				let arr4 = <any>[];
				state.keyTimeoutForm.ivrAnswerType = i.answer.ivrAnswerType;
				state.keyTimeoutForm.content = i.answer.content;
				state.keyTimeoutForm.voiceList = i.answer.preVoice.split('+');
				for (let j of i.groupSorts) {
					arr4.push(j.groupNo);
				}
				state.keyTimeoutForm.telsGroup = arr4;
				break;
			default:
				break;
		}
	}
	ivrKeyCnfig.value = true;
};
// 保存ivr配置
const saveIvrConfig = () => {
	let arr1: any = [];
	let arr3: any = [];
	let arr4: any = [];
	let arr5: any = [];
	for (let i in state.voiceFinishedForm.telsGroup) {
		arr1.push({
			sort: Number(i),
			groupNo: state.voiceFinishedForm.telsGroup[i],
		});
	}
	for (let i in state.abnormalKeysForm.telsGroup) {
		arr3.push({
			sort: Number(i),
			groupNo: state.abnormalKeysForm.telsGroup[i],
		});
	}
	for (let i in state.returnPreviousForm.telsGroup) {
		arr4.push({
			sort: Number(i),
			groupNo: state.returnPreviousForm.telsGroup[i],
		});
	}
	for (let i in state.keyTimeoutForm.telsGroup) {
		arr5.push({
			sort: Number(i),
			groupNo: state.keyTimeoutForm.telsGroup[i],
		});
	}
	let request = {
		id: currentIvr.value.id,
		prevIvrNo: '',
		ivrStrategies: <any>[],
	};
	if (state.voiceFinishedForm.ivrAnswerType) {
		// 语音播放完成
		request.ivrStrategies.push({
			ivrStrategeType: 0,
			answer: {
				ivrAnswerType: state.voiceFinishedForm.ivrAnswerType,
				content: state.voiceFinishedForm.content,
				preVoice: state.voiceFinishedForm.voiceList ? state.voiceFinishedForm.voiceList.join('+') : '',
			},
			groupSorts: arr1,
		});
	}
	if (state.abnormalKeysForm.ivrAnswerType) {
		// 异常按键
		request.ivrStrategies.push({
			ivrStrategeType: 2,
			answer: {
				ivrAnswerType: state.abnormalKeysForm.ivrAnswerType,
				content: state.abnormalKeysForm.content,
				preVoice: state.abnormalKeysForm.voiceList ? state.abnormalKeysForm.voiceList.join('+') : '',
			},
			groupSorts: arr3,
		});
	}
	if (state.returnPreviousForm.ivrAnswerType) {
		// 返回上一级
		request.ivrStrategies.push({
			ivrStrategeType: 3,
			answer: {
				ivrAnswerType: state.returnPreviousForm.ivrAnswerType,
				content: state.returnPreviousForm.content,
				preVoice: state.returnPreviousForm.voiceList ? state.returnPreviousForm.voiceList.join('+') : '',
			},
			groupSorts: arr4,
		});
	}
	if (state.keyTimeoutForm.ivrAnswerType) {
		//  按键超时
		request.ivrStrategies.push({
			ivrStrategeType: 4,
			answer: {
				ivrAnswerType: state.keyTimeoutForm.ivrAnswerType,
				content: state.keyTimeoutForm.content,
				preVoice: state.keyTimeoutForm.voiceList ? state.keyTimeoutForm.voiceList.join('+') : '',
			},
			groupSorts: arr5,
		});
	}
	for (let i of state.keysArray) {
		// 拼入普通按键
		let arr2: any = [];
		for (let j in i.telsGroup) {
			arr2.push({
				sort: Number(j),
				groupNo: i.telsGroup[j],
			});
		}
		request.ivrStrategies.push({
			ivrStrategeType: 1,
			input: i.input,
			answer: {
				ivrAnswerType: i.ivrAnswerType,
				content: i.content,
				preVoice: i.voiceList ? i.voiceList.join('+') : '',
			},
			groupSorts: arr2,
		});
	}

	state.loading = true;
	addEditIvr(request)
		.then(() => {
			ElMessage.success('操作成功');
			getList();
			ivrKeyCnfig.value = false;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 重置策略配置
const resetIvrConfigure = (row: any) => {
	ElMessageBox.confirm(`确定要重置：【${row.name}】策略配置，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			resetConfig(row.id).then(() => {
				ElMessage.success('重置成功');
				getList();
			});
		})
		.catch(() => {});
};
// 表格多选
const handleSelectionChange = (val: any) => {
	state.multipleSelection = val;
};
// 导出表格
const onImportTable = () => {
	const tabeHeader = [
		{ key: 'no', colWidth: '', title: 'ivr编号', type: 'text', isCheck: true },
		{ key: 'name', colWidth: '', title: 'ivr名称', type: 'text', isCheck: true },
		{ key: 'ivrTypeText', colWidth: '', title: 'ivr类型', type: 'text', isCheck: true },
		{ key: 'repeat', colWidth: '', title: '语音播放次数', type: 'text', isCheck: true },
		{ key: 'infoLength', colWidth: '', title: '按键长度', type: 'text', isCheck: true },
		{ key: 'exit', colWidth: '', title: '按键结束符', type: 'text', isCheck: true },
	];
	table2excel(tabeHeader, state.multipleSelection, `ivr管理 ${formatDate(new Date(), 'YYYY-mm-dd HH-MM')}`);
};
onMounted(() => {
	getList(); // ivr列表
	getAudioList(); //获取所有语音文件
	getIvrCategorieList(); // 获取分类
	getBaseInfo(); //获取页面基础信息
});
</script>

<style lang="scss" scoped>
.device-ivrlist-container {
	:deep(.el-tabs__nav-wrap::after) {
		height: 100% !important;
	}
	.el-table {
		flex: 1;
	}
}
</style>
