<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="bg-gray-50" style="height: calc(100vh - 100px);">
    <div class="mx-auto px-6 py-8" style="height: 100%;" >
      <div class="flex gap-8" style="height: 100%;">
        <!-- 左侧信息区 -->
        <div class="w-2/3 bg-white rounded-lg shadow-sm relative" style="position: relative; overflow-y: auto;">
          <!-- 工单信息 -->
          <div class="p-6 border-b bg-white">
            <h2 class="text-lg font-medium mb-4" style="font-weight: bold;">工单信息</h2>
            <div class="grid grid-cols-3 gap-4">
              <div class="space-y-2">
                <p class="text-sm text-gray-600">工单编号</p>
                <p class="">{{rowData.workordercode}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">来电姓名</p>
                <p class="">{{rowData.caller}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">联系电话</p>
                <p class="">{{rowData.callnum}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">年龄</p>
                <p class="">{{rowData.age}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">年龄分段</p>
                <p class="">{{rowData.ageGroup}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">性别</p>
                <p class="">{{rowData.sex===1?'男':rowData.sex===3?'女':'未知'}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">所在地区</p>
                <p class="">{{rowData.areaName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">详细地址</p>
                <p class="">{{rowData.address}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">工单类型</p>
                <p class="">{{rowData.workordercatename}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">问题描述</p>
                <p class="">{{rowData.content}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">干预建议</p>
                <p class="">{{rowData.suggest}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">处理措施</p>
                <p class="">{{rowData.handlingMeasuresName}}</p>
              </div>

              <div class="space-y-2" v-if="rowData.handlingMeasures === 'jiuyuan'">
                <p class="text-sm text-gray-600">干预项</p>
                <p class="">{{rowData.crisisInterfereName}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.handlingMeasures === 'jiuyuan'">
                <p class="text-sm text-gray-600">联动时间</p>
                <p class="">{{rowData.handling.hmLinkageTime}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.handlingMeasures === 'jiuyuan'">
                <p class="text-sm text-gray-600">联动单位</p>
                <p class="">{{rowData.handling.hmLinkageDept}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.handlingMeasures === 'jiuyuan'">
                <p class="text-sm text-gray-600">联动电话</p>
                <p class="">{{rowData.handling.hmLinkageTel}}</p>
              </div>

              <div class="space-y-2" v-if="rowData.handling && rowData.handling.crisisInterfere === 'lianxi'">
                <p class="text-sm text-gray-600">联系他人</p>
                <p class="">{{rowData.handling.agreeLink}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.handling && rowData.handling.agreeLink === '同意'">
                <p class="text-sm text-gray-600">联系电话</p>
                <p class="">{{rowData.handling.aboutLinkTel}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.handling && rowData.handling.agreeLink === '同意'">
                <p class="text-sm text-gray-600">与来电者关系</p>
                <p class="">{{rowData.handling.relation}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.isNeedVisit === '同意'">
                <p class="text-sm text-gray-600">是否回访</p>
                <p class="">{{rowData.handling.isNeedVisit ? '是' :'否'}}</p>
              </div>

              <!-- <div class="space-y-2" v-if="rowData.tag">
                <p class="text-sm text-gray-600">标记</p>
                <p class="">{{rowData.tag}}</p>
              </div> -->
              <!-- <div class="space-y-2">
                <p class="text-sm text-gray-600">处理方式</p>
                <p class="">{{rowData.isend ? '立即完结' :'代交办'}}</p>
              </div> -->
            </div>
          </div>
          <!-- 个人信息 -->
          <div class="p-6 border-b bg-white"> 
            <h2 class="text-lg font-medium mb-4" style="font-weight: bold;">个人信息</h2>
            <div class="grid grid-cols-3 gap-4">
              
              <div class="space-y-2">
                <p class="text-sm text-gray-600">来电类型</p>
                <p class="">{{rowData.callType==1 ? '本人咨询' : rowData.callType==2 ? '替他人咨询' : '未知'}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">教育状况</p>
                <p class="">{{rowData.gradeName }}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">婚姻状况</p>
                <p class="">{{rowData.maritalStatusName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">居住状态</p>
                <p class="">{{rowData.livingStatusName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">从业状况</p>
                <p class="mt-2">{{rowData.careerName}}</p>
              </div>
            </div>
            
          </div>
          <!-- 业务信息 -->
          <div class="p-6 border-b bg-white"> 
            <h2 class="text-lg font-medium mb-4" style="font-weight: bold;">业务信息</h2>
            <div class="grid grid-cols-3 gap-4">
              
              <div class="space-y-2">
                <p class="text-sm text-gray-600">主导情绪</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.emotionName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">主要应对方式</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.replyMethodName }}</p>
              </div> 
              <div class="space-y-2" v-if="rowData.replyMethodOther">
                <p class="text-sm text-gray-600">其他主要应对方式</p>
                <p class="">{{rowData.assessment.replyMethodOther}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">近期心境</p>
                <p class="">{{ rowData.assessmentView && rowData.assessmentView.recentMoodName}}</p>
              </div>

              <div class="space-y-2" v-if="rowData.assessment && rowData.replyMethodOther">
                <p class="text-sm text-gray-600">其他近期心境</p>
                <p class="">{{rowData.assessment.replyMethodOther}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">持续时间</p>
                <p class="">{{ rowData.assessment && rowData.assessment.recentMoodDuration }}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">主要应对方式</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.copingStyleName}}</p>
              </div>
              <div class="space-y-2" v-if="rowData.assessment && rowData.assessment.copingStyleOther">
                <p class="text-sm text-gray-600">其他应对方式</p>
                <p class="">{{rowData.assessment && rowData.assessment.copingStyleOther}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">社会支持情况</p>
                <p class="">{{rowData.assessment && rowData.assessment.socialSupport}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">易感因素</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.riskFactorName }}</p>
              </div>
              <div class="space-y-2" v-if="rowData.assessment && rowData.assessment.riskFactorOther" >
                <p class="text-sm text-gray-600">其他易感因素</p>
                <p class="">{{rowData.assessment && rowData.assessment.riskFactorOther}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">求助情况</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.pastHelpName}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">求助情况</p>
                <p class="">{{rowData.assessment && rowData.assessment.treatNowName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">门诊治疗</p>
                <p class="">{{rowData.assessment && rowData.assessment.outpatientName }}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">服用情况</p>
                <p class="">{{rowData.assessment && rowData.assessment.medicationStatusName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">是否青少年</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.teenagerFlag}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">自杀风险评估</p>
                <p class="">{{rowData.assessment && rowData.assessment.suicideRiskName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">是否出现自杀</p>
                <p class="">{{rowData.assessment && rowData.assessment.suicide_occurrence }}</p>
              </div>
              <div class="space-y-2" v-if="rowData.assessment && rowData.assessment.suicide_occurrence ==='是'">
                <p class="text-sm text-gray-600">次数</p>
                <p class="">{{rowData.assessment && rowData.assessment.suicideCount}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">是否出现自伤</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.selfInjuryName}}</p>
              </div>

              <div class="space-y-2" v-if="rowData.assessment && rowData.assessment.selfInjuryOther">
                <p class="text-sm text-gray-600">形式</p>
                <p class="">{{rowData.assessment && rowData.assessment.selfInjuryOther}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">危害他人风险</p>
                <p class="">{{rowData.assessment && rowData.assessmentView.harmOthersName }}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">是否出现过</p>
                <p class="">{{rowData.assessment && rowData.assessment.existHarmOthers}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">危害公共安全</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.endangerPublicSafeName}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">形式</p>
                <p class="">{{rowData.assessment && rowData.assessment.existEndangerPublicSafe}}</p>
              </div>
              
            </div>
            <!-- <div class="mt-4">
              <p class="text-sm text-gray-600">从业状况</p>
              <p class="mt-2">{{form.careerName}}</p>
            </div> -->
          </div>
          <!-- 来电处理 -->
          <div class="p-6 bg-white">
            <h2 class="text-lg font-medium mb-4" style="font-weight: bold;">来电处理</h2>
            <div class="grid grid-cols-3 gap-4">
              <div class="space-y-2">
                <p class="text-sm text-gray-600">主要问题</p>
                <p class="">{{rowData.handlingView && rowData.handlingView.mainProblemName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">随访预约</p>
                <p class="">{{rowData.handlingView && rowData.handlingView.appointmentName }}</p>
              </div> 
              <div class="space-y-2" v-if="rowData.handling">
                <p class="text-sm text-gray-600">随访联系人</p>
                <p class="">{{rowData.handling.sfLinkman}}</p>
              </div>

              <div class="space-y-2" v-if="rowData.handling && rowData.handling.sfLinkmanTel">
                <p class="text-sm text-gray-600">联系电话</p>
                <p class="">{{ rowData.handling.sfLinkmanTel}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">预约时间</p>
                <p class="">{{rowData.handling && rowData.handling.sfPlanTime }}</p>
              </div> 
              

              <div class="space-y-2">
                <p class="text-sm text-gray-600">自杀风险评估</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.callEndSuicideRiskName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">危害他人评估</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.callEndHarmOthersName }}</p>
              </div> 
              <div class="space-y-2">
                <p class="text-sm text-gray-600">危害公共评估</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.callEndEndangerPublicSafeName}}</p>
              </div>

              <div class="space-y-2">
                <p class="text-sm text-gray-600">情绪舒缓评估</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.callEndMoodRelaxName}}</p>
              </div>
              <div class="space-y-2">
                <p class="text-sm text-gray-600">信息咨询评估</p>
                <p class="">{{rowData.assessmentView && rowData.assessmentView.callEndInfoConsultName }}</p>
              </div> 
             
            </div>
           
          </div>
          
          <div class="sticky bottom-0 left-0 w-full z-50 bg-white py-4 px-6 shadow-lg rounded-t-lg" style="position: fixed; bottom: 0px;">
            <div class="flex justify-end gap-4">

              <button  v-if="type === 'djb' && workorderstatename === '待交办'"   class="!rounded-button px-6 py-2 bg-blue-500 text-white hover:bg-blue-600 transition-colors"
                @click="showBottomSheet = true">
                完结
              </button>
              <button v-if="type === 'wddcl'" class="!rounded-button px-6 py-2 bg-blue-500 text-white hover:bg-blue-600 transition-colors"
                @click="showBottomSheet = true">
                处理工单
              </button>
              <button v-if="type === 'ybdhf'" class="!rounded-button px-6 py-2 bg-green-500 text-white hover:bg-green-600 transition-colors"
              @click="huiFangDis = true">
                回访
              </button>

            </div>
          </div>

          

        </div>
        <!-- 右侧记录区 -->
        <div class="w-1/3 bg-white rounded-lg shadow-sm">
          <div class="rounded-t-lg">
            <div class="flex border-b"> 
              <button v-for="(tab, index) in tabs" :key="index"
                class="flex-1 py-3 text-center font-medium transition-colors"
                :class="{ 'text-blue-500 border-b-2 border-blue-500': activeTab === index, 'text-gray-500 hover:text-gray-700': activeTab !== index }"
                @click="activeTab = index">
                {{ tab }}
              </button>
            </div>
          </div>
          <!-- 相关问卷 -->
          <div v-show="activeTab === 2" class="bg-white p-6 border-t" style="height: calc(100vh - 200px);; overflow-y: auto;">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-lg font-medium">相关问卷</h2>
              <div class="flex gap-2">
                <button class="p-2 rounded-full hover:bg-gray-100" @click="scrollLeft">
                  <el-icon>
                    <ArrowLeft />
                  </el-icon>
                </button>
                <button class="p-2 rounded-full hover:bg-gray-100" @click="scrollRight">
                  <el-icon>
                    <ArrowRight />
                  </el-icon>
                </button>
              </div>
            </div>
            <div class="overflow-hidden" ref="scrollContainer">
              <div class="flex gap-4 transition-transform duration-300"
                :style="{ transform: `translateX(-${scrollPosition}px)` }">  
                <div v-for="(item, index) in surveys" :key="index"
                  class="flex-shrink-0 w-64 p-4 border rounded-lg cursor-pointer transition-all"
                  :class="{ 'border-blue-500 bg-blue-50': currentQuestionnaire === index }"
                  @click="selectSurvey(item,index)">
                  <h3 class="font-medium mb-2">{{ item.title }}</h3>
                  <p class="text-sm text-gray-500">完成时间：{{ item.createtime }}</p>
                </div>
              </div>
            </div>
            <div class="mt-6 space-y-4">

              <template v-if="currentSurvey?.surveyid">
                <div class="space-y-6">
                  <fillOut :surveyId="currentSurvey.surveyid" :sheetId="currentSurvey.answersheetId" />
                </div>
              </template>
              <div v-else class="h-full flex items-center justify-center text-gray-500">
                请选择左侧问卷查看详情
              </div>
              <!-- <template v-for="(question, index) in questionnaireContent" :key="index">
                <div class="p-4 border rounded-lg">
                  <h4 class="font-medium mb-2">{{ question.title }}</h4>
                  <p class="text-gray-600">{{ question.answer }}</p>
                </div>
              </template> -->
            </div>
          </div>
          <!-- 处理记录 -->
          <div v-show="activeTab === 0" class="bg-white p-6 border-t space-y-4"  style="height: calc(100vh - 200px);; overflow-y: auto;">
            <div class="border-b pb-4" v-for="(item, index) in czRizDatas" :key="index">
              <h3 class="font-medium mb-2">{{item.operationtype}} </h3>
              <p class="text-sm text-gray-500 mb-1">{{item.operationtime}}</p>
              <p v-if="item.operatorname" class="text-gray-600" style="margin-bottom: 8px;"> 操作人：{{ item.operatorname }} - {{ item.operator }}</p>
              <p class="text-gray-600"> {{item.logcontent}}</p>
              <div class="uploadList" v-if="item.fileurl" style="display: flex;">
                <div  v-for="(v, i ) in item.fileurl" :key="i"> 
                  <el-image :title="v.split('/').at(-1) || v" v-if="/.(png|jpg|jpeg)$/.test(v)"
                    style="width:40px;height:40px" :src="`${baseUrl}${v}`" :preview-src-list="[`${baseUrl}${v}`]"
                    fit="cover" />

                  <a v-else :href="`${baseUrl}${v}`" :title="v.split('/').at(-1) || v">
                    <el-icon style="width:40px;height:40px">
                      <Document style="width:30px;height:30px" />
                    </el-icon>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- 回访记录 -->
          <div v-show="activeTab === 1" class="bg-white p-6 border-t space-y-4"  style="height: calc(100vh - 200px);; overflow-y: auto;">
            <div class="border-b pb-4" v-for="(item, index) in hfjlDatas" :key="index">
              <h3 class="font-medium mb-2">{{item.operationtype}} </h3>
              <p class="text-sm text-gray-500 mb-1">{{item.createtime}}</p>
              <p v-if="item.operatorname" class="text-gray-600" style="margin-bottom: 8px;"> 操作人：{{ item.operatorname }} - {{ item.operator }}</p>
              <p v-if="item.contemydnament" class="text-gray-600" style="margin-bottom: 8px;"> 满意度：{{ item.mydname }}</p>
              <p v-if="item.content" class="text-gray-600" style="margin-bottom: 8px;"> 回访内容：{{ item.content }}</p>
              <p v-if="item.content" class="text-gray-600"> 回访结果：{{ item.result }}</p>
              
            </div>
            <el-empty v-if="!hfjlDatas.length" description="description" />
            <!-- <div class="border-b pb-4">
              <h3 class="font-medium mb-2">首次回访</h3>
              <p class="text-sm text-gray-500 mb-1">2024-02-16 10:00</p>
              <p class="text-gray-600">来访者反馈睡眠质量有所改善，焦虑症状减轻</p>
            </div> -->
            
          </div>
        </div>
      </div>
    </div>
    <!-- 底部弹框 -->
    <el-drawer v-model="showBottomSheet" :title=" type === 'wddcl' ? '工单处理' : '工单完结' " direction="btt" size="50%" :with-header="false">
      <div class="p-6">
        <h2 class="text-lg font-medium mb-6">{{type === 'wddcl' ? '工单处理' : '工单完结'}}</h2>
        <div class="grid grid-cols-1 gap-6">
          <div class="space-y-4">
            <div>
              <el-input :disabled="!showInputUpload()" v-model="clInputData" resize="none" :rows="5" type="textarea"
              :placeholder="placeholder" maxlength="500"></el-input>
            </div>
            <div class="upload" :style="{ flexDirection: showInputUpload() ? 'row' : 'row-reverse' }">
              <el-upload v-if="showInputUpload()" :on-success="clUploadSucc" :headers="uploadHeadData" ref="uploadRef"
                class="upload-demo" :action="`${baseUrl}system/accessories/upload`" :show-file-list="false">
                <template #trigger>
                  <el-button :icon="Link" text type="primary">添加附件（最多上传5个附件，单个文件最大20M）</el-button>
                </template>
              </el-upload>
            </div>
            <div class="uploadList" style="display: flex;">
              <div v-for="(v, i ) in clUploadIds" :key="i" @mouseover="v['showIcon'] = true"
                @mouseout="v['showIcon'] = false">
                <el-image :title="v.url.split('/').at(-1) || v.url" v-if="/.(png|jpg|jpeg)$/.test(v.url)"
                  style="width:40px;height:40px" :src="`${baseUrl}${v.url}`" :preview-src-list="[`${baseUrl}${v.url}`]"
                  fit="cover" />

                <a v-else :href="`${baseUrl}${v.url}`" :title="v.url.split('/').at(-1) || v.url">
                  <el-icon style="width:40px;height:40px">
                    <Document style="width:30px;height:30px" />
                  </el-icon>
                </a>

                <el-icon v-if="showInputUpload()" class="closeIcon" v-show="v['showIcon']" @click="deleteImg(v.id)">
                  <CircleCloseFilled />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-end gap-4 mt-6">
          <button class="!rounded-button px-6 py-2 border hover:bg-gray-50 transition-colors"
            @click="showBottomSheet = false">
            取消
          </button>
          <button class="!rounded-button px-6 py-2 bg-blue-500 text-white hover:bg-blue-600 transition-colors"
            @click="sureHandle">
            确认
          </button>
        </div>
      </div>
    </el-drawer>
    <!-- 回访 -->
    <returnVisitModal v-model:dialogVisible="huiFangDis" @submit="huiFangFn" :callnum="rowData.callnum">
    </returnVisitModal>
    
  </div>
</template>

<script setup>
import { ref,getCurrentInstance } from 'vue';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { getPageListData,editPageData } from '@/api/main/system/system';
import useTagsViewStore from '@/store/modules/tagsView'
import useSystemStore from '@/store/main/system/system';

import { useRouter } from 'vue-router';

import returnVisitModal from '@/components/workOrder/returnVisitModal';
import fillOut from '@/views/main/survey/fill.vue';
import { getToken } from '@/utils/auth';

const { proxy } = getCurrentInstance();
const { back, push } = useRouter();
const userRouter = useRouter();

const rowData = ref({});
let workordercode, type;
if (sessionStorage.getItem('workQuery')) {
  workordercode = JSON.parse(sessionStorage.getItem('workQuery')).workordercode;
  type = JSON.parse(sessionStorage.getItem('workQuery')).type;

} else {
  proxy.$modal.msgError('未查找到工单编号，即将返回至综合查询...');

  push({ path: '/workOrderManagement/workOrderList' });
}

const baseUrl = import.meta.env.VITE_APP_BASE_API;

const huiFangDis = ref(false);
const tabs = ['处理记录', '回访记录', '相关问卷'];
const activeTab = ref(0);
const showBottomSheet = ref(false);
const scrollPosition = ref(0);
const scrollContainer = ref < HTMLElement | null > (null);
const currentQuestionnaire = ref(0);
// 本地上传返回的文件, 编辑情况下保存的文件列表
const clUploadIds = ref([]);
const uploadHeadData = ref({ Authorization: `Bearer ${getToken()}` });

// 动态切换输入框上传功能
function showInputUpload () {
 
  if (type === 'wddcl') {
    if (rowData.value.workorderstatename === '待处理') {
      return true;
    }
    return false;
  }

  if (type === 'djb') {
    if (rowData.value.workorderstatename === '待交办') {
      return true;
    }

    return false;
  }

  return false;
}

// 回显接口内的附件
// function fileHx () {
//   for (let key in rowData.value.fileurl) {
//     clUploadIds.value.push({
//       id: key,
//       url: rowData.value.fileurl[key],
//     });
//   }
// }
// 上传事件
function clUploadSucc ({ state, data }) {
  if (state === 'success') {
    clUploadIds.value.push({
      id: data.Id,
      url: data.url,
    });
    proxy.$modal.msgSuccess('附件上传成功！');
  }
}
// 图片删除事件
function deleteImg (data) {
  for (let i = 0; i < clUploadIds.value.length; i++) {
    let val = clUploadIds.value[i];
    if (val.id === data) {
      clUploadIds.value.splice(i, 1);
      break;
    }
  }
}
// 处理回复内容
const clInputData = ref('');
// 回复内容提示
const placeholder = ref('请输入，不可超过500字...');

function sureHandle () {
  if(type === 'wddcl') {
    clHandle()
  } else {
    wjHandle()
  }
}
// 处理按钮事件
function clHandle () {
  if (clInputData.value === '') {
    proxy.$modal.msgError('办结结果不能为空，请输入办结结果');
    return;
  }

  let params = {
    file: clUploadIds.value.map((val) => val.id).join(','),
    workordercode: rowData.value.workordercode,
    result: clInputData.value,
  };
  editPageData('/order/workorder/deal', params).then(({ state }) => {
    if (state === 'success') {
      proxy.$modal.msgSuccess('处理成功！');
      showBottomSheet.value = false;
      if (JSON.parse(sessionStorage.getItem('workQuery')).type === '消息') {
        push({ path: '/workOrderManagement/workOrderList' })
      } else {
        // 关闭当前页面
        useSystemStore().setPageFlag(true)
        useTagsViewStore().delView(userRouter.currentRoute.value);
        // 返回上一页面
        push({
          path: '/workOrderManagement/toBeProcessed',
          query: { listType: 1 },
        })

      }
    }
  });
}

// 完结按钮事件
function wjHandle () {
  if (clInputData.value === '') {
    proxy.$modal.msgError('办结结果不能为空，请输入办结结果');
    return;
  }

  let params = {
    code: rowData.value.workordercode,
    reason: clInputData.value,
    file: clUploadIds.value.map((val) => val.id).join(','),
  };

  editPageData(`/order/workorder/end`, params).then(({ state }) => {
    if (state === 'success') {
      proxy.$modal.msgSuccess('完结成功！');
      showBottomSheet.value = false;
      if (JSON.parse(sessionStorage.getItem('workQuery')).type === '消息') {
        push({ path: '/workOrderManagement/workOrderList' })
      } else {
        // 关闭当前页面
        useSystemStore().setPageFlag(true)
        useTagsViewStore().delView(userRouter.currentRoute.value);
        // 返回上一页面
        push({
          path: '/workOrderManagement/workOrderList',
          query: { listType: 0 },
        })
      }
    }
  });
}
// 回访弹出框事件，电话回访
function huiFangFn (data) {

  let params = {
    code: rowData.value.workordercode,
    isover: rowData.value.isend,
    ...data,
  };
  editPageData(`/order/workorder/visit`, params).then((data) => {
    proxy.$modal.msgSuccess(data.message);

    if (JSON.parse(sessionStorage.getItem('workQuery')).type === '消息') {
      // push({path : '/workOrderManagement/workOrderList'})
      // 关闭当前页面
      useSystemStore().setPageFlag(true)
      // 关闭当前页面
      useTagsViewStore().delView(userRouter.currentRoute.value);
      // 返回上一页面
      push({
        path: '/workOrderManagement/waitForReturnVisit',
        query: { listType: 4 },
      })
    } else {
      // 关闭当前页面
      useSystemStore().setPageFlag(true)
      // 关闭当前页面
      useTagsViewStore().delView(userRouter.currentRoute.value);
      // 返回上一页面
      push({
        path: '/workOrderManagement/waitForReturnVisit',
        query: { listType: 4 },
      })

    }
  });
}



// 操作日志数据
const czRizDatas = ref([]);
// 获取操作日志
function getCzriz (data) {
  let params = {
    workordercode: data,
  };

  getPageListData(`/order/workorderoperatelog`, params).then(({ data }) => {
    czRizDatas.value = data;
    console.log('czRizDatas.value', czRizDatas.value);
  });
}

const selectSurvey = (item,index) => {
  currentSurvey.value = item
  currentQuestionnaire.value = index
}

// 回访记录数据
const hfjlDatas = ref([]);
// 获取回访记录
function getHfrz (data) {
  let params = {
    workordercode: data,
  };

  getPageListData(`/order/workordervisitlog`, params).then(({ data }) => {
    hfjlDatas.value = data;
  });
}

// 相关问卷数据
const surveys = ref([]);
const currentSurvey = ref(null);

const getSurveys = () => {
    // rowData.value.callId = 650
    if (!rowData.value.callId) return;
    const params = {
        callid: rowData.value.callId,
        // phone: rowData.value.callnum,
    };

    getPageListData('/survey/survey/getsurveyinfobycallid', params).then(({ data }) => {
        surveys.value = data;

        if (surveys.value.length > 0) {
          currentSurvey.value = surveys.value[0];
          console.log('currentSurvey.value', currentSurvey.value);
        }
    })
}

const scrollLeft = () => {
  if (scrollPosition.value > 0) {
    scrollPosition.value = Math.max(0, scrollPosition.value - 272);
  }
};
const scrollRight = () => {
  if (scrollContainer.value) {
    const maxScroll = scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
    scrollPosition.value = Math.min(maxScroll, scrollPosition.value + 272);
  }
};
// 初始化
const workorderstatename = ref('')
const init = (() => {
  return (async function fn () {
    await new Promise((ok) => {
      let params = {
        workordercode: workordercode,
        pageNum: 1,
        pageSize: 10,
        listType: 0,
      };
      getPageListData(`/order/workorder`, params).then(({ data }) => {
        rowData.value = data[0];
        console.log('rowData.value', rowData.value);
        ok();
        
      });
    });
    // 查看详情，显示内容数据
    if (rowData.value.workorderstatename !== '待交办' || type !== 'djb') {
      placeholder.value = '';
      clInputData.value = rowData.value.result || '';
    }
    workorderstatename.value = rowData.value.workorderstatename
    // 获取操作日志数据
    getCzriz(rowData.value.workordercode);
    // 获取回访记录数据
    getHfrz(rowData.value.workordercode);
    
    // 获取相关问卷数据
    getSurveys();
    console.log(type, 'type')
    console.log(rowData.value.workorderstatename, 'rowData.value.workorderstatename')
    return fn;
  })();
})();
</script>

<style scoped>
.el-drawer {
  overflow: auto;
}

/* 移除number input的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>