<template>
  <el-dialog v-model="state.dialogVisible" class="order-detail-dialog" draggable ref="dialogRef" width="80%" append-to-body destroy-on-close>
    <template #header>
      <el-tabs v-model="state.activeName" @tab-change="handleClick">
        <el-tab-pane :name="item.value" v-for="item in state.tabPaneList" :key="item.value" :label="item.label"></el-tab-pane>
      </el-tabs>
    </template>

    <el-collapse v-model="state.collapseArr" v-if="state.activeName === '0'" class="collapse-box" v-loading="state.loading">
      <el-collapse-item name="1">
        <template #title>
          <p class="pl20">
            <b class="font14">来电人信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <el-form label-width="100px" ref="ruleFormRef">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.transferPhone">
                <el-form-item label="转接来源"> {{ state.ruleForm.transferPhone }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromPhone">
                <el-form-item label="来电号码">
                  {{ state.ruleForm.fromPhone }}
                  <el-button plain title="录音文件" size="small" type="primary" class="ml8" @click="recordFile(state.ruleForm.callId)"
                             v-if="state.ruleForm.callId" >录音文件</el-button>
                  <!-- <el-popover :width="480" trigger="hover">
                        <template #reference>
                          <el-button link type="primary" class="ml5" title="播放录音"><SvgIcon name="ele-Headset" size="16px" /></el-button>
                        </template>
                        <AudioPlayer ref="AudioPlayerRef" :url="state.ruleForm.url" />
                      </el-popover> -->
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.callAddress">
                <el-form-item label="号码归属地">
                  {{ state.ruleForm.callAddress }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="来电人姓名">
                  {{ state.ruleForm.fromName }} <span class="ml5"> {{ state.ruleForm.fromGenderText }}</span>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="来电人性别">
                  {{ state.ruleForm.fromGenderText }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.contact">
                <el-form-item label="联系电话">
                  <span v-if="showMaskNumber"> {{ state.ruleForm.contactMask }}</span>
                  <span v-else>{{ state.ruleForm.contact }}</span>
                  <el-button plain title="外呼" size="small" type="primary" class="ml8" @click="callPhone(state.ruleForm.contact)">外呼</el-button>
                  <el-button plain title="查看号码" size="small" type="primary" class="ml8" @click="showMaskNumber = !showMaskNumber">{{
                      showMaskNumber ? '查看号码' : '隐藏号码'
                    }}</el-button>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="来电人身份"> {{ state.ruleForm.identityTypeText }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="受理短信"> {{ state.ruleForm.smsSendedText }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="事发地址"> {{ state.ruleForm.address }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.company">
                <el-form-item label="工作单位"> {{ state.ruleForm.company }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <p class="pl20">
            <b class="font14">工单信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <el-form label-width="100px" ref="ruleFormRef">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="来源方式"> {{ state.ruleForm.sourceChannel }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="受理类型"> {{ state.ruleForm.acceptType }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromProvinceNo">
                <el-form-item label="省工单编码"> {{ state.ruleForm.fromProvinceNo }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="工单类型">
                  {{ state.ruleForm.orderTypeText }}
                  <!-- 投诉或者建议并且是12315工单才有扩展信息 -->
                  <el-button
                      link
                      type="primary"
                      v-if="state.ruleForm.orderType === 1 && (state.ruleForm.acceptType === '30' || state.ruleForm.acceptType === '35')"
                      class="ml10"
                      @click="showExpandInfo"
                  ><SvgIcon name="ele-Document" class="mr2" /> 拓展信息</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="是否重复">
                  {{ state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0 ? '是(' + state.ruleForm.duplicateIds.length + '次)' : '否' }}
                  <el-button
                      plain
                      title="查看重复工单"
                      size="small"
                      type="primary"
                      class="ml8"
                      @click="showRepeatInfo"
                      v-if="state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0"
                  >查看重复工单</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="紧急程度"> {{ state.ruleForm.emergencyLevelText }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="受理人">
                  <span>{{ state.ruleForm?.acceptorName}} <span v-if="state.ruleForm?.acceptorStaffNo">[{{state.ruleForm?.acceptorStaffNo}}]</span></span>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.incidentTime">
                <el-form-item label="受理时间"> {{ formatDate(state.ruleForm.incidentTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.pushType">
                <el-form-item label="推送分类"> {{ state.ruleForm.pushType }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="工单标题">
                  {{ state.ruleForm.title }} <el-tag class="ml10">{{ state.ruleForm.statusText }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="受理内容">
                  {{ state.ruleForm.content }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-auth="'file:list'">
                <el-form-item label="附件">
                  <annex-list name="查看附件" readonly :businessId="state.ruleForm.id"  classify="查看附件" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template #title>
          <p class="pl20">
            <b class="font14">结果信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <el-form label-width="100px" ref="ruleFormRef">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
                <el-form-item label="交办部门"> 热线中心 </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="交办时间"> {{ formatDate(state.ruleForm.centerToOrgTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="办理部门"> {{ state.ruleForm.actualHandleOrgName  }}</el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="办理时间"> {{ formatDate(state.ruleForm.actualHandleTime , 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="工单办理期限"> {{ state.ruleForm.timeLimit }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="工单期满时间"> {{ formatDate(state.ruleForm.expiredTime , 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="办理结果"> {{ state.ruleForm.actualOpinion  }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4" v-if="state.supplements && state.supplements.length">
        <template #title>
          <p class="pl20">
            <b class="font14">补充信息</b>
          </p>
        </template>
        <div class="collapse-container">
          <div v-for="i in state.supplements" :key="i" class="plug-container">
            <el-form label-width="100px" ref="ruleFormRef" class="pt10 pb10">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="补充部门">
                    {{ i.creator.organization }}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="补充时间"> {{ formatDate(i.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="补充人">
                    {{ i.creator.name }} <span v-if="i.creator.staffNo">[{{ i.creator.staffNo }} ]</span></el-form-item
                  >
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="补充详情">
                    {{ i.opinion }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="5" v-if="state.workflow.assignOrgs">
        <template #title>
          <p class="pl20">
            <b class="font14">回访信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <el-form label-width="100px" ref="ruleFormRef">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item name="6" v-if="state.workflow.assignOrgs">
        <template #title>
          <p class="pl20">
            <b class="font14">重办信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <el-form label-width="100px" ref="ruleFormRef">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="被重办部门"> {{ state.workflow.assignOrgs }}</el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="重办时间"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="重办理由"> {{ state.workflow.timeLimit }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="重办原因"> {{ state.workflow.opinion }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>

    <div v-if="state.activeName === '1'" v-loading="state.loading">
      <process-time-line :data="state.traces" defaultExpandAll />
    </div>

    <div v-if="state.activeName === '2'" v-loading="state.loading">
      <p class="pl20">
        <b class="font14">回访信息</b>
      </p>
      <div class="collapse-container pb1">
        <el-form label-width="100px" ref="ruleFormRef">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div v-if="state.activeName === '3'" v-loading="state.loading">
      <p class="pl20">
        <b class="font14">发布信息</b>
      </p>
      <div class="collapse-container pb1">
        <el-form label-width="100px" ref="ruleFormRef">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <template #footer>
			<span class="dialog-footer">

			</span>
    </template>
  </el-dialog>
  <!-- 扩展信息 -->
  <order-expand-detail ref="orderExpandDetailRef" />
  <!-- 重复工单 -->
  <order-repeat ref="orderRepeatRef" />
</template>

<script setup lang="ts" name="orderDetail">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { throttle } from '/@/utils/tools';
import { commonEnum } from '/@/utils/constants';
import { orderDetail } from '/@/api/business/order';
import { formatDate } from '/@/utils/formatTime';
import { ElMessage } from 'element-plus';
import { VoiceInterfaceObject } from '/@/utils/PhoneScript';
import {workflowTraces} from "/@/api/system/workflow";

// 引入组件
const OrderExpandDetail = defineAsyncComponent(() => import('/@/views/business/order/components/Order-expand-detail.vue')); // 扩展信息
const OrderRepeat = defineAsyncComponent(() => import('/@/views/business/order/components/Order-repeat.vue')); // 重复工单
const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue')); // 附件列表

// 引入组件
const ProcessTimeLine = defineAsyncComponent(() => import('/@/components/ProcessTimeLine/index.vue'));
// const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'handle']);
// 定义变量内容
const state = reactive<any>({
  dialogVisible: false, // 弹窗显示隐藏
  ruleForm: {
    // 表单数据
    url: '',
    fromGenderText: '',
    channelText: '',
    identityTypeText: '',
    licenceNo: '',
    contactMask: '',
    company: '',
    emergencyLevelText: '',
    incidentTime: '',
  } as any,
  activeName: '0', // tab切换
  tabPaneList: [
    // tab列表
    {
      label: '工单详情',
      value: '0',
    },
    {
      label: '流程明细',
      value: '1',
    },
    {
      label: '回访详情',
      value: '2',
    },
    {
      label: '发布详情',
      value: '3',
    }
  ],
  collapseArr: ['1', '2','3'], //展开列表
  loading: false,
  supplements: [], // 补充内容
  workflow: {}, // 工单流程内容
  orderId: '', //工单id
  traces: [],
});
const showMaskNumber = ref<boolean>(true); // 是否展示号码
const ruleFormRef = ref<RefType>(); // 表单ref
const router = useRouter(); // 路由
// 查看工单详情
const getOrderDetail = async (id: string) => {
  state.loading = true;
  try {
    const res: any = await orderDetail(id);
    state.ruleForm = res.result;
    state.workflow = state.ruleForm?.workflow ?? {};
    state.supplements = res.result?.workflow?.supplements ?? [];
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};
const formatTraces = (val: any) => {
  if (!val || !val.length) return [];
  val.forEach((item: any) => {
    switch (item.expiredStatus) {
      case 0:
        item.type = 'success';
        break;
      case 1:
        item.type = 'primary';
        break;
      case 2:
        item.type = 'danger';
        break;

      default:
        break;
    }
    if (item.traces?.length) {
      formatTraces(item.traces);
    }
  });
  return val;
};
// 查看流程明细
const getWorkflowTraces = async (id: string) => {
  state.loading = true;
  try {
    // 查询审核记录
    const res = await workflowTraces(id);
    state.traces = res.result?.traces ?? [];
    state.traces = formatTraces(state.traces);
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};
// 回访详情
const getVisitDetail = async (id: string) => {
  state.loading = true;
  try {

    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};
// 发布详情
const getPublishDetail = async (id: string) => {
  state.loading = true;
  try {

    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};
// 打开弹窗
const openDialog = (val: any) => {
  if (!val || !val.id) {
    ElMessage.error('工单id不能为空');
    return;
  }
  state.orderId = val.id;
  if(val.activeName) {
    state.activeName = val.activeName;//传入查询tab
    handleClick(val.activeName)
  }else{
    getOrderDetail(state.orderId);
  }
  state.dialogVisible = true;
};
// 切换tab 查询列表
const handleClick = (val: string) => {
  switch (val) {
    case '0': //工单详情
      getOrderDetail(state.orderId);
      break;
    case '1': // 流程明细
      getWorkflowTraces(state.workflow.id)
      break;
    case '2':// 回访详情
      getVisitDetail(state.orderId)
      break;
    case '3': // 发布详情
      getPublishDetail(state.orderId)
      break;
    default:
      getOrderDetail(state.orderId);
      break;
  }
};
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
// 查看录音文件
const recordFile = (callId:string)=>{
  console.log(callId)
}
// 电话外呼
const callPhone = (number: number | string) => {
  VoiceInterfaceObject.DialOut(number); // 呼叫
};
const orderRepeatRef = ref<RefType>();
// 展示重复工单列表
const showRepeatInfo = () => {
  orderRepeatRef.value.openDialog(state.ruleForm);
};
// 展示扩展表单
const orderExpandDetailRef = ref<RefType>(); // 扩展信息
const showExpandInfo = () => {
  let form: any = {};
  if (state.ruleForm.acceptType === '30') {
    // 举报
    form = state.ruleForm.orderReport;
    form.orderTypeText = '12315市场监管局受理单';
    form.acceptTypeText = '举报';
  } else if (state.ruleForm.acceptType === '35') {
    //投诉
    form = state.ruleForm.orderComplain;
    form.orderTypeText = '12315市场监管局受理单';
    form.acceptTypeText = '投诉';
  }
  orderExpandDetailRef.value.openDialog(form);
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>
<style lang="scss" scoped>
.collapse-box {
  :deep(.el-collapse-item__header) {
    background-color: var(--hotline-bg-main-color);
    height: 40px;
    border-radius: var(--el-border-radius-base);
  }
  :deep(.el-collapse-item__content) {
    padding-bottom: 10px !important;
    .el-form-item {
      margin-bottom: 5px;
      .el-form-item__content {
        line-height: 24px;
      }
    }
  }
  .collapse-container {
    padding: 10px;
    .plug-container {
      border: var(--el-border);
      border-radius: var(--el-border-radius-base);
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
:deep(.el-tabs__item) {
  font-size: var(--el-font-size-base);
}
</style>
<style lang="scss">
.order-detail-dialog {
}
</style>
