<template>
    <div class="ivrContent  layout-padding">
        <el-alert type="warning" :closable="false">
            <template #title>
                鼠标右键新增、删除、编辑节点。点击节点查看节点更多信息。
                <el-switch v-model="horizontal" active-text="竖向" inactive-text="横向"></el-switch>&nbsp;
                <el-switch v-model="collapsable" active-text="可收起" inactive-text="不可收起"></el-switch>
            </template>
        </el-alert>
        <vue3-tree-org :data="state.data" :horizontal="horizontal" :collapsable="collapsable" v-loading="loading"
            :style="{ height: `calc(100vh - ${setViewHeight}` }" :label-style="style" :only-one-node="onlyOneNode"
            :default-expand-level="3" :props="{ id: 'id', pid: 'prevIvrNo', label: 'name', children: 'childIvrs' }"
            :clone-node-drag="cloneNodeDrag" :node-draggable="false" @on-contextmenu="onMenus"
            :define-menus="defineMenus" :toolBar="false"
            @node-add="addNode" @node-delete="nodeDelete" ref="vue3TreeOrg">
            <!-- 自定义节点内容 -->
            <template v-slot="{ node }">
                <el-popover placement="top-start" :width="200" trigger="click">
                    <template #reference>
                        <div class="tree-org-node__text node-label">ivr名称：{{ node.label }}</div>
                    </template>
                    <p>ivr名称：{{ node.label }}</p>
                    <p>ivr编号：{{ node.$$data.no }}</p>
                    <p>ivr结束符：{{ node.$$data.exit }}</p>
                    <p>ivr按键长度：{{ node.$$data.infoLength }}</p>
                    <p>ivr重复次数：{{ node.$$data.repeat }}</p>
                    <p>ivr类型：{{ node.$$data.ivrTypeText }}</p>
                    <p>ivr语音：{{ node.$$data.voice }}</p>
                </el-popover>
            </template>
        </vue3-tree-org>
        <!-- 新增 -->
        <el-dialog v-model="drawerAdd" title="新增节点" draggable>
            <div class="form_content">
                <el-form :model="ruleFormAdd" ref="ruleFormRefAdd">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="ivr" prop="ivr" :rules="[{ required: true, message: '请选择ivr', trigger: 'change' }]">
                                <el-select v-model="ruleFormAdd.ivr" placeholder="请选择ivr" value-key="id" class="w100" @change="chooseIvr">
                                    <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="策略类型" prop="ivrStrategeType" :rules="[{ required: true, message: '请选择策略类型', trigger: 'change' }]">
                                <el-select v-model="ruleFormAdd.ivrStrategeType" placeholder="请选择策略类型" class="w100">
                                    <el-option v-for="item in ivrStrategeTypes" :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="ruleFormAdd.ivrStrategeType === 1 || ruleFormAdd.ivrStrategeType === 3">
                            <el-form-item label="按键输入" prop="input" :rules="[{ required: true, message: '请输入按键输入', trigger: 'blur' }]">
                                <el-input v-model="ruleFormAdd.input" maxlength="1" 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"
                                :rules="[{ required: true, message: '请选择响应类型', trigger: 'change' }]">
                                <el-select v-model="ruleFormAdd.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="ruleFormAdd.ivrAnswerType === 1">
                            <!-- 转语音选择ivr -->
                            <el-form-item label="ivr" prop="ivrVoice"
                                :rules="[{ required: true, message: '请选择ivr', trigger: 'change' }]">
                                <el-select v-model="ruleFormAdd.ivrVoice" placeholder="请选择ivr" class="w100">
                                    <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="ruleFormAdd.ivrAnswerType === 2">
                            <!-- 转分机选择分机-->
                            <el-form-item label="分机" prop="tels"
                                :rules="[{ required: true, message: '请选择分机', trigger: 'change' }]">
                                <el-select v-model="ruleFormAdd.tels" 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="ruleFormAdd.ivrAnswerType === 3">
                            <!-- 转分机组 -->
                            <el-form-item label="分机组" prop="telsGroup"
                                :rules="[{ required: true, message: '请选择分机组', trigger: 'change' }]">
                                <el-transfer v-model="ruleFormAdd.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="ruleFormAdd.ivrAnswerType === 4">
                            <!-- 转外部电话 -->
                            <el-form-item label="外部电话" prop="phone"
                                :rules="[{ required: true, message: '请输入外部电话', trigger: 'blur' }]">
                                <el-input v-model="ruleFormAdd.phone" 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" :rules="[{required: false,message: '选择语音文件',trigger: 'change'}]">
                                <el-transfer v-model="ruleFormAdd.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>
            </div>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="drawerAdd = false">取消</el-button>
                    <el-button type="primary" @click="onSubmitAdd">保存</el-button>
				</span>
			</template>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog v-model="drawer" :title="editTitle" draggable>
            <div class="form_content">
                <el-form :model="ruleForm" ref="ruleFormRef">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="策略类型" prop="ivrStrategeType"
                                :rules="[{ required: true, message: '请选择策略类型', trigger: 'change' }]">
                                <el-select v-model="ruleForm.ivrStrategeType" placeholder="请选择策略类型" class="w100">
                                    <el-option v-for="item in ivrStrategeTypes" :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="ruleForm.ivrStrategeType === 1 || ruleForm.ivrStrategeType === 3">
                            <el-form-item label="按键输入" prop="input" :rules="[{ required: true, message: '请输入按键输入', trigger: 'change' }]">
                                <el-input v-model="ruleFormAdd.input" maxlength="1" 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" :rules="[{ required: true, message: '请选择响应类型', trigger: 'change' }]">
                                <el-select v-model="ruleForm.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="ruleForm.ivrAnswerType === 1">
                            <!-- 转语音选择ivr -->
                            <el-form-item label="ivr" prop="ivrVoice" :rules="[{ required: true, message: '请选择ivr', trigger: 'change' }]">
                                <el-select v-model="ruleForm.ivrVoice" placeholder="请选择ivr" class="w100">
                                    <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.ivrAnswerType === 2">
                            <!-- 转分机选择分机-->
                            <el-form-item label="分机" prop="tels" :rules="[{ required: true, message: '请选择分机', trigger: 'change' }]">
                                <el-select v-model="ruleForm.tels" 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="ruleForm.ivrAnswerType === 3">
                            <!-- 转分机组 -->
                            <el-form-item label="分机组" prop="telsGroup" :rules="[{ required: true, message: '请选择分机组', trigger: 'change' }]">
                                <el-transfer v-model="ruleForm.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="ruleForm.ivrAnswerType === 4">
                            <!-- 转外部电话 -->
                            <el-form-item label="外部电话" prop="phone" :rules="[{ required: true, message: '请输入外部电话', trigger: 'blur' }]">
                                <el-input v-model="ruleForm.phone" 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" :rules="[{required: false,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>
            </div>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="drawer = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
				</span>
			</template>
        </el-dialog>
        <!-- 替换节点 -->
        <el-dialog v-model="isShowDialog" width="500px" draggable title="请选择要替换的节点">
			<el-form :model="ruleFormReplace" ref="ruleFormReplaceRef">
                <el-form-item label="需要替换的节点" prop="test" :rules="[{ required: true, message: '请选择需要替换的节点', trigger: 'change' }]">
                    <el-select v-model="ruleFormReplace.test" value-key="id"  placeholder="请选择需要替换的节点" class="w100" @change="replaceRoot">
                        <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item" />
                    </el-select>
                </el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="isShowDialog = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="confrimReplace">保 存</el-button>
				</span>
			</template>
		</el-dialog>
    </div>
</template>
<script lang="ts" setup name="ivrConfig">
import { computed, nextTick, onUnmounted, onMounted, reactive, ref, toRefs, onActivated } from "vue";
import { onBeforeRouteLeave, useRoute } from "vue-router"
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';

// 引入api
import { getIvrTree, baseInfo, getIvrById, voicequerylist , addEditIvr,delIvrTree,replaceRootApi} from "/@/api/device/ivr"
import { getTelsGroupList } from '/@/api/device/telsGroup';
import { getTelsList } from '/@/api/device/tels';

// 定义变量内容
let cloneNodeDrag = ref(false);
let state = reactive<any>({
    data: {},
    ivrAnswerTypes: [],
    ivrStrategeTypes: [],
    telsGroup: [],
    telsList:[],
    ruleFormReplace:{},
    ivrList:[],
    voiceList:[],
    ivrListFilter:[]
})
let ruleForm = reactive({  // 新增表单
    id:0,
    prevIvrNo:"",
    ivr:null,
    ivrStrategeType:null,
    input:"",
    ivrAnswerType:undefined as any,
    ivrVoice:"",
    tels:"",
    telsGroup:[],
    phone:"",
    voiceList:[]
})
let ruleFormAdd = reactive({ // 修改表单
    id:0,
    prevIvrNo:"",
    ivr:null,
    ivrStrategeType:null,
    input:"",
    ivrAnswerType:undefined as any,
    ivrVoice:"",
    tels:"",
    telsGroup:[],
    phone:"",
    voiceList:[]
})
const {  ivrAnswerTypes, ivrStrategeTypes, telsGroup,telsList,ruleFormReplace,voiceList,ivrListFilter } = toRefs(state);
const horizontal = ref(false)
const collapsable = ref(true)
const onlyOneNode = ref(false)
const loading = ref(false)
const storesThemeConfig = useThemeConfig();
const stores = useTagsViewRoutes();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(stores);
const drawer = ref(false)
const drawerAdd = ref(false)
const editTitle = ref('')
const style = reactive({
    background: "#fff",
    color: "#5e6d82",
})
const route = useRoute();
const isShowDialog = ref(false);
const defineMenus = (e:Event, node:any) => { //自定义菜单
    if(node.$$root){
        return [
            { name: '新建节点', command: 'addNode' },
            { name: '编辑节点', command: 'editNode' },
            { name: '替换节点', command: 'nodeReplace' }
        ]
    }else{
        return [
            { name: '新建节点', command: 'addNode' },
            { name: '编辑节点', command: 'editNode' },
            { name: '删除节点', command: 'nodeDelete' }
        ]
    }
}
const onMenus = ({ node, command, data }: any) => {// 点击菜单
    switch (command) {
        case 'editNode':
            editNode(node, data)
            break;
        case 'addNode':
            addNode(node, data)
            break;
        case 'nodeDelete':
            nodeDelete(node)
            break;
        case 'nodeReplace':
            nodeReplace(node,data)
            break;
        default:
            break;
    }
}
const parentNo = ref(null);
const ruleFormRefAdd = ref()
const addNode = (node: any, data: any) => { // 新增节点
    state.ivrListFilter = state.ivrList.filter((item:any)=>item.id != data.id)
    parentNo.value = data.no;
    if (ruleFormRefAdd.value) {
        ruleFormRefAdd.value.resetFields();
    }
    drawerAdd.value = true;
}
const editNode = (node: any, data: any) => { //编辑节点
    editTitle.value = data.name + ' 编辑';
    currentIvr.value = JSON.parse(JSON.stringify(data));
    state.ivrListFilter = state.ivrList.filter((item:any)=>item.id != data.id)
    const form = JSON.parse(JSON.stringify(data));
    ruleForm.ivr = form;
    parentNo.value = data.prevIvrNo;
    if(data.ivrStrategies.length){// 如果有值就赋值
        ruleForm.ivrStrategeType = form.ivrStrategies[0].ivrStrategeType;
        ruleForm.input = form.ivrStrategies[0].input;
        ruleForm.ivrAnswerType = form.ivrStrategies[0].answer.ivrAnswerType;
        ruleForm.voiceList = form.ivrStrategies[0].answer.preVoice.split('+');
        switch (form.ivrStrategies[0].answer.ivrAnswerType) {
            case 1:// 转语音
                ruleForm.ivrVoice = form.ivrStrategies[0].answer.content;
                break;
            case 2: // 专分机
                ruleForm.tels = form.ivrStrategies[0].answer.content;    
                break;
            case 3: // 转分机组
                let arr = <any>[];
                for(let i of form.ivrStrategies[0].groupSorts){
                    arr.push(i.groupNo)
                }
                ruleForm.telsGroup = arr;
                break;
            case 4: // 转外部电话
                ruleForm.phone = form.ivrStrategies[0].answer.content;
                break;
            default:
                break;
        }
    }
    drawer.value = true;
}
const nodeDelete = (node: any) => { //删除节点
    ElMessageBox.confirm(`此操作将删除：【${node.label}节点】，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
		cancelButtonClass:'default-button'
    }).then(() => {
        let nodeItem = node.$$data;
        delIvrTree(nodeItem.id).then(()=>{
            ElMessage.success('删除成功');
            getConfig();
        })
    }).catch(() => { });
}
const ruleFormReplaceRef = ref();
// 点击替换节点
const nodeReplace = (node: any, data: any)=>{
    state.ruleFormReplace = JSON.parse(JSON.stringify(data));
    state.ivrListFilter = state.ivrList.filter((item:any)=>item.id != data.id)
    if (ruleFormReplaceRef.value) {
        ruleFormReplaceRef.value.resetFields();
    }
    isShowDialog.value = true;
}
const currentIvr = ref({
    ivrStrategies:<any>[],
    prevIvrNo:null,
    id:""
});
const chooseIvr = (val:any)=>{// 选择一条ivr
    currentIvr.value = val;
}
const onSubmitAdd = ()=>{// 新增
    ruleFormRefAdd.value.validate((valid: boolean) => {
        if (valid) {
            let request = {};
            switch (ruleFormAdd.ivrAnswerType ) {
                case 1: //转语音
                    request = {
                        input: ruleFormAdd.input || '',
                        ivrStrategeType: ruleFormAdd.ivrStrategeType,
                        answer: {
                            ivrAnswerType:ruleFormAdd.ivrAnswerType,
                            content: ruleFormAdd.ivrVoice, 
                            preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
                        }
                    }
                    break;
                case 2: // 分机
                    request = {
                        input: ruleFormAdd.input || '',
                        ivrStrategeType: ruleFormAdd.ivrStrategeType,
                        answer: {
                            ivrAnswerType:ruleFormAdd.ivrAnswerType,
                            content: ruleFormAdd.tels,
                            preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
                        }
                    }
                    break;
                case 3:// 分机组
                    let arr = <any>[];
                    for(let i in ruleFormAdd.telsGroup){
                        arr.push({
                            sort:Number(i),
                            groupNo:ruleFormAdd.telsGroup[i]
                        })
                    }
                    request = {
                        input: ruleFormAdd.input || '',
                        ivrStrategeType: ruleFormAdd.ivrStrategeType,
                        answer: {
                            ivrAnswerType:ruleFormAdd.ivrAnswerType,
                            content: ruleFormAdd.ivrVoice,
                            preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
                        },
                        groupSorts:arr
                    }
                    break;
                case 4:// 外部电话
                    request = {
                        input: ruleFormAdd.input || '',
                        ivrStrategeType: ruleFormAdd.ivrStrategeType,
                        answer: {
                            ivrAnswerType:ruleFormAdd.ivrAnswerType,
                            content: ruleFormAdd.phone,
                            preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
                        }
                    }
                    break;
                default:
                    break;
            }
            let requestObj = {prevIvrNo:parentNo.value,id:currentIvr.value.id,ivrStrategies:[request]};
            addEditIvr(requestObj).then(()=>{
                ElMessage.success('新增成功');
                getConfig();
                drawerAdd.value = false;
            })
        } else {
            return false;
        }
    });
    
}
const ruleFormRef = ref();
const onSubmit = () => {//编辑保存
    ruleFormRef.value.validate((valid: boolean) => {
        if (valid) {
                let request = {};
                switch (ruleForm.ivrAnswerType ) {
                    case 1: //转语音
                        request = {
                            input: ruleForm.input || '',
                            ivrStrategeType: ruleForm.ivrStrategeType,
                            answer: {
                                ivrAnswerType:ruleForm.ivrAnswerType,
                                content: ruleForm.ivrVoice, 
                                preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
                            }
                        }
                        break;
                    case 2: // 分机
                        request = {
                            input: ruleForm.input || '',
                            ivrStrategeType: ruleForm.ivrStrategeType,
                            answer: {
                                ivrAnswerType:ruleForm.ivrAnswerType,
                                content: ruleForm.tels,
                                preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
                            }
                        }
                        break;
                    case 3:// 分机组
                        let arr = <any>[];
                        for(let i in ruleForm.telsGroup){
                            arr.push({
                                sort:Number(i),
                                groupNo:ruleForm.telsGroup[i]
                            })
                        }
                        request = {
                            input: ruleForm.input || '',
                            ivrStrategeType: ruleForm.ivrStrategeType,
                            answer: {
                                ivrAnswerType:ruleForm.ivrAnswerType,
                                content: ruleForm.ivrVoice,
                                preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
                            },
                            groupSorts:arr
                        }
                        break;
                    case 4:// 外部电话
                        request = {
                            input: ruleForm.input || '',
                            ivrStrategeType: ruleForm.ivrStrategeType,
                            answer: {
                                ivrAnswerType:ruleForm.ivrAnswerType,
                                content: ruleForm.phone,
                                preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
                            }
                        }
                        break;
                    default:
                        break;
                }
                
                let requestObj = {prevIvrNo:parentNo.value,id:currentIvr.value.id,ivrStrategies:[request]};
                addEditIvr(requestObj).then(()=>{
                    ElMessage.success('编辑成功');
                    getConfig();
                    drawer.value = false;
                })
        } else {
            return false;
        }
    });
}
let currentReplace = reactive<any>({});
const replaceRoot = (val:any)=>{// 选择替换的ivr
    currentReplace = val;
}
const confrimReplace = ()=>{ //替换保存
    ruleFormReplaceRef.value.validate((valid: boolean) => {
        if (valid) {
            replaceRootApi(currentReplace.id).then(()=>{
                ElMessage.success('替换成功');
                getConfig();
                isShowDialog.value = false;
            })
        } else {
            return false;
        }
    });
}
const getConfig = () => { //获取树形结构和初始化数据
    loading.value = true;
    getIvrTree(route.params.id).then((res: any) => {
        state.data = res?.content ?? [];
        getCenter();
        setTimeout(() => {
            loading.value = false;
        }, 300);
    }).catch(() => {
        loading.value = false;
    })
}
const init=()=>{// 获取页面上初始数据
    getIvrById(route.params.id).then((res: any) => {// 根据分类ID查出分类下所有的ivr  排除根节点
        state.ivrList = res?.content.ivrs.filter((item:any)=>item.id != state.data.id) ?? [];
    })
    getTelsList().then((res: any) => {//查询所有的分机
        state.telsList = res?.content ?? [];
    })
    getTelsGroupList().then((res: any) => { // 查询所有的分机组
        state.telsGroup = res?.content ?? [];
    })
    baseInfo().then((res: any) => {// 获取页面基础信息
        state.ivrAnswerTypes = res?.content.ivrAnswerTypes ?? [];
        state.ivrStrategeTypes = res?.content.ivrStrategeTypes ?? [];
    })
    voicequerylist().then((response: any) => {/** 获取所有语音文件列表 */
        state.voiceList = response.content.map((item:any)=>{
            return {
                key:item,
                label:item
            }
        })
    }).catch(() => {
        
    });
}
// 设置 view 的高度
const setViewHeight = computed(() => {
    let { isTagsview } = themeConfig.value;
    if (isTagsViewCurrenFull.value) {
        return `80px`;
    } else {
        if (isTagsview) return `164px`;
        else return `130px`;
    }
});
const vue3TreeOrg = ref();
const getCenter = () => {// 设置配置居中
    nextTick(() => {
        let boxW: string | number = document.getElementsByClassName('zoom-container')[0].clientWidth;
        let box1W: string | number = document.getElementsByClassName('zm-draggable')[0].clientWidth;
        vue3TreeOrg.value.onDragStop((boxW - box1W) / 2, 30);
    });
}
onMounted(() => {
    getConfig();
    init();
    window.addEventListener('resize', getCenter);
})
// 缓存重新居中
onActivated(() => {
    getCenter();
    window.addEventListener('resize', getCenter);
})
// 移除事件
onUnmounted(() => {
    window.removeEventListener('resize', getCenter);
})
// 移除事件
onBeforeRouteLeave(() => {
    window.removeEventListener('resize', getCenter);
})
</script>
<style scoped lang="scss">
.tree-org-node__text,
.node-label {
    cursor: pointer;

    div {
        white-space: nowrap
    }
}

.form_content {
    margin: 20px;
}

:deep(.zm-tree-org) {
    box-shadow: var(--el-box-shadow-light);
    background-color: var(--el-color-white);
    background-image: linear-gradient(90deg, rgba(156, 214, 255, .15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(156, 214, 255, .15) 10%, rgba(0, 0, 0, 0) 10%);
    background-size: 10px 10px;
}

:deep(.tree-org-node__inner) {
    background-color: var(--el-color-white) !important;
    color: var(--el-color-primary) !important;
    border: 1px solid var(--el-border-color) !important;
}

:deep(.tree-org-node__expand) {
    background-color: var(--el-color-white) !important;
    border: 1px solid var(--el-border-color) !important;
}

:deep(.draggable) {
    cursor: move;
}
</style>
<style lang="scss">
.zm-tree-contextmenu {
    background-color: var(--el-color-white) !important;
    color: var(--el-text-color-regular) !important;
    border: 1px solid var(--el-border-color) !important;
    box-shadow: var(--el-box-shadow-light);
    border-radius: 4px;
    animation: logoAnimation 0s ease-in-out;

    .zm-tree-menu-item {
        padding: 6px 15px;
    }

    .zm-tree-menu-item:hover {
        background-color: var(--hotline-bg-color) !important;
        color: var(--el-color-primary) !important;
    }
}
</style>
