<template>
    <div class="app-container" ref="layout">
      <!-- <el-tabs
        v-model="queryParams.nodeExecuteStatus"
        @tab-click="handleClick"
        style="flex: 1"
      >
        <el-tab-pane label="未执行" name="UNEXECUTED"></el-tab-pane>
        <el-tab-pane label="已执行" name="EXECUTED"></el-tab-pane>
      </el-tabs> -->
      <div ref="topform" class="form">
        <SearchFilter
          labelWidth="90px"
          :labelWidths="310"
          size="small"
          @search="handleQuery"
          @reset="resetQuery"
          @minShowCtrol="getMaxTableHeight"
          @fold="fold"
        >
          <el-form-item label="执行时间" prop="startDate">
            <el-date-picker
              v-model="intentionalTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              style="width: 220px"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
              @change="chooseTime"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="姓名" prop="patientName">
            <el-input
              style="width: 220px"
              v-model="queryParams.patientName"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="电话" prop="patientPhone">
            <el-input
              style="width: 220px"
              v-model="queryParams.patientPhone"
              placeholder="请输入电话"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="医院" prop="hospitalAgencyId">
            <el-select
              v-model="queryParams.hospitalAgencyId"
              filterable
              placeholder="请选择医院"
              style="width: 220px"
              clearable
              @clear="clearhospitalAgency"
              @change="changehospitalAgency"
            >
              <el-option
                v-for="item in hospitalAgencylist"
                :key="item.id"
                :label="item.agencyName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="就诊方式" prop="visitMethod">
            <el-select
              style="width: 220px"
              v-model="queryParams.visitMethod"
              placeholder="请选择就诊方式"
              clearable
            >
              <el-option
                v-for="dict in dict.type.visit_method"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="就诊类型" prop="suitRange">
            <el-select v-model="queryParams.suitRange" placeholder="请选择就诊类型" clearable @change="change">
              <el-option v-for="item in visitoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="就诊流水号" prop="visitSerialNumber">
            <el-input
              style="width: 220px"
              v-model="queryParams.visitSerialNumber"
              placeholder="请输入就诊流水号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item label="门诊/出院时间" prop="intentionalTimeStart">
            <el-date-picker @change="mzchange" v-model="mzTime" type="daterange" range-separator="至"
              start-placeholder="开始日期" style="width: 300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item> -->
          <!-- <el-form-item label="入院时间" prop="intentionalTimeStart">
            <el-date-picker v-model="ryTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              style="width: 300px" value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="rychange">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="诊断" prop="mainDiagnosis">
            <el-input
              style="width: 220px"
              v-model="queryParams.mainDiagnosis"
              placeholder="请输入诊断"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="院区" prop="campusAgencyId">
            <el-select
              v-model="queryParams.campusAgencyId"
              filterable
              placeholder="请选择院区"
              style="width: 220px"
              clearable
              @clear="clearcampusAgency"
              @change="changecampusAgency"
            >
              <el-option
                v-for="item in campusAgencylist"
                :key="item.id"
                :label="item.agencyName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科室" prop="departmentId">
            <el-select
              v-model="queryParams.departmentId"
              filterable
              placeholder="请选择科室"
              style="width: 220px"
              clearable
              @clear="cleardepartment"
              @change="changedepartment"
            >
              <el-option
                v-for="item in departmentlist"
                :key="item.id"
                :label="item.departmentName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="病区" prop="wardId">
            <el-select
              v-model="queryParams.wardId"
              filterable
              placeholder="请选择病区"
              style="width: 220px"
              clearable
            >
              <el-option
                v-for="item in wardlist"
                :key="item.id"
                :label="item.departmentName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主治医生" prop="attendingPhysicianId">
            <el-select
              v-model="queryParams.attendingPhysicianId"
              style="width: 220px"
              filterable
              placeholder="请选择主治医生"
              clearable
            >
              <el-option
                v-for="item in attendingPhysicianlist"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务名称" prop="manageRouteName">
            <el-input
              v-model="queryParams.manageRouteName"
              placeholder="请输入任务名称"
              clearable
              style="width: 220px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="任务状态" prop="nodeExecuteStatus">
            <el-select
              style="width: 220px"
              v-model="queryParams.nodeExecuteStatus"
              placeholder="请选择任务状态"
              clearable
              @change="handleClick"
            >
              <el-option
                v-for="item in nodeExecuteStatusdata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="任务类型" prop="taskNodeType">
            <el-select
              style="width: 220px"
              v-model="queryParams.taskNodeType"
              placeholder="请选择任务状态"
              clearable
              @change="changetaskNodeType"
            >
              <el-option
                v-for="item in taskNodeTypeDATA"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="随访方式" prop="phoneDialMethod" v-if="
                queryParams.taskNodeType == 'PHONE_OUTBOUND' || queryParams.taskNodeType == 'QUESTIONNAIRE_SCALE'
              ">
            <el-select
              style="width: 220px"
              v-model="queryParams.phoneDialMethod"
              placeholder="请选择随访方式"
              clearable
            >
              <el-option
                v-for="item in phoneDialMethodDATA"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="">
            <span
              style=""
              v-if="
               showUNEXECUTED && foldshow == true
              "
            >
              <el-switch
                class="switchStyle"
                v-model="timeSignshow"
                active-color="#1890ff"
                inactive-color="#5AC1A1"
                active-text="全部"
                inactive-text="待办"
                @change="changeswitch"
              />
            </span>
            <!-- <span style="margin-left: 13px">
              <el-switch
                class="switchStyle"
                v-model="phoneDialMethodshow"
                active-color="#1890ff"
                inactive-color="#5AC1A1"
                active-text="智能外呼"
                inactive-text="人工电话"
                @change="changeswitchtwo"
              />
            </span> -->
          </el-form-item>
          <!-- <el-form-item  label=""     prop="manageRouteName"       v-if="queryParams.nodeExecuteStatus == 'UNEXECUTED' &&foldshow==true">
            <el-switch   style="width: 220px"   class="switchStyle"  v-model="timeSignshow"   active-color="#1890ff"   inactive-color="#5AC1A1"  active-text="全部"   inactive-text="待办"  @change="changeswitch"/>
          </el-form-item> -->
        </SearchFilter>
      </div>
      <div ref="table">
        <el-table
          :max-height="maxTableHeight"
          v-loading="loading"
          :data="taskExecuteRecordList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="35"  align="center" v-if="showUNEXECUTED"/>
          <el-table-column label="序号" type="index" width="48" align="center" key="xh"/>
          <el-table-column
            label="姓名"
            align="center"
            prop="patientName"
            width="100"
            key="patientName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="电话"
            align="center"
            prop="patientPhone"
            width="110"
            key="patientPhone"

          />
          <el-table-column
            label="性别"
            align="center"
            prop="visitSerialNumber"
            width="48"
            key="visitSerialNumber"

          >
            <template slot-scope="scope">
              {{ scope.row.sex == "MALE" ? "男" : "" }}
              {{ scope.row.sex == "FEMALE" ? "女" : "" }}
            </template>
          </el-table-column>
          <!-- prop="hospitalAgencyName" -->
          <el-table-column label="医院/院区" align="center" width="105"  key="hospitalAgencyName">
            <template slot-scope="scope">
              {{ scope.row.hospitalAgencyName }}
              {{ scope.row.campusAgencyName }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="院区" align="center" prop="campusAgencyName" /> -->
          <el-table-column
            label="科室/病区"
            align="center"
            prop="departmentName"
            :show-overflow-tooltip="true"
            key="departmentName"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.departmentName }}
              {{ scope.row.wardName }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="病区名称" align="center" prop="wardName" /> -->
          <el-table-column
            :render-header="renderHeader"
            label="门诊|住院号/就诊流水号"
            align="center"
            width="120"
            key="inHospitalNumber"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.inHospitalNumber }}<br />
              {{ scope.row.visitSerialNumber }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="就诊流水号"
            align="center"
            prop="visitSerialNumber"
            width="120"
            :show-overflow-tooltip="true"
          /> -->
          <el-table-column
            label="诊断"
            align="center"
            prop="mainDiagnosis"
            width="120"
            :show-overflow-tooltip="true"
            key="mainDiagnosis"
          />
          <el-table-column label="手术名称" align="center" prop="surgicalName" width="100"  key="surgicalName"/>
          <el-table-column
            label="主治医生"
            align="center"
            prop="attendingPhysicianName"
            width="80"
            key="attendingPhysicianName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="就诊方式" align="center" prop="visitMethod" key="visitMethod">
            <template slot-scope="scope">
              <span>
                {{ scope.row.visitMethod == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
                {{ scope.row.visitMethod == "BE_IN_HOSPITAL" ? "住院" : "" }}
              </span>
            </template></el-table-column
          >
          <!-- <el-table-column label="就诊类型" align="center" prop="suitRange" width="80">
            <template slot-scope="scope">
              <span>
                {{ scope.row.suitRange == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
                {{ scope.row.suitRange == "IN_THE_HOSPITAL" ? "在院" : "" }}
                {{ scope.row.suitRange == "DISCHARGE" ? "出院" : "" }}
              </span>
            </template></el-table-column> -->
          <el-table-column
            label="入院时间"
            align="center"
            prop="admissionTime"
            width="100"
            key="admissionTime"
          >
            <template slot-scope="scope">
              {{
                scope.row.visitMethod == "BE_IN_HOSPITAL"
                  ? parseTime(scope.row.admissionTime, "{y}-{m}-{d}")
                  : ""
              }}
              <!-- <span>{{  parseTime(scope.row.admissionTime, "{y}-{m}-{d}") }}</span> -->
            </template>
          </el-table-column>
          <el-table-column
            label="门诊/出院时间"
            align="center"
            prop="visitTime"
            width="105"
            key="visitTime"
          >
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.visitMethod == "OUTPATIENT_SERVICE"
                    ? parseTime(scope.row.visitTime, "{y}-{m}-{d}")
                    : ""
                }}
                {{
                  scope.row.visitMethod == "BE_IN_HOSPITAL"
                    ? parseTime(scope.row.dischargeTime, "{y}-{m}-{d}")
                    : ""
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="路径名称"
            align="center"
            prop="manageRouteName"
            width="110"
            key="manageRouteName"
          >
          </el-table-column>
          <el-table-column
            label="任务节点"
            align="center"
            prop="routeNodeName"
            width="110"
            key="routeNodeName"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.routeNodeName == 'AFTER_DISCHARGE'">
                出院后
                <span v-if="scope.row.routeNodeDay">
                  第{{ scope.row.routeNodeDay }}天</span
                >
              </span>
              <span v-if="scope.row.routeNodeName == 'AFTER_ADMISSION'">
                入院后
                <span v-if="scope.row.routeNodeDay">
                  第{{ scope.row.routeNodeDay }}天</span
                >
              </span>
              <span v-if="scope.row.routeNodeName == 'AFTER_CONSULTATION'">
                就诊后
                <span v-if="scope.row.routeNodeDay">
                  第{{ scope.row.routeNodeDay }}天</span
                >
              </span>
              <span v-if="scope.row.routeNodeName == 'AFTER_VISIT_DISCHARGE'">
                就诊/出院后
                <span v-if="scope.row.routeNodeDay"
                  >第{{ scope.row.routeNodeDay }}天</span
                >
              </span>
              <span v-if="scope.row.routeNodeName == 'PREOPERATIVE'">
                术前
                <span v-if="scope.row.routeNodeDay">
                  第{{ scope.row.routeNodeDay }}天</span
                >
              </span>
              <span v-if="scope.row.routeNodeName == 'POSTOPERATIVE'">
                术后
                <span v-if="scope.row.routeNodeDay">
                  第{{ scope.row.routeNodeDay }}天</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="任务内容"
            align="center"
            prop="taskNodeType"
            :show-overflow-tooltip="true"
            key="taskNodeType"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.taskNodeType == "PHONE_OUTBOUND" ? "电话外呼" : "" }}
                {{
                  scope.row.taskNodeType == "QUESTIONNAIRE_SCALE"
                    ? "问卷量表"
                    : ""
                }}
                {{
                  scope.row.taskNodeType == "PROPAGANDA_ARTICLE" ? "宣教文章" : ""
                }}
                {{ scope.row.taskNodeType == "TEXT_REMIND" ? "文字提醒" : "" }}
                <!-- {{ scope.row.taskType == "ARTIFICIAL_FOLLOW_UP" ? "人工随访" : "" }} -->
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showUNEXECUTED"
            label="计划时间"
            align="center"
            prop="planTime"
            width="95"
            key="planTime"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.planTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="EXECUTEDshow"
            label="执行时间"
            align="center"
            prop="executeTime"
            width="95"
            key="executeTime"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.executeTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="随访模板" align="center" prop="templateName" width="110">
          </el-table-column> -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-if="showUNEXECUTED"
                size="mini"
                type="text"
                icon="el-icon-bank-card"
                @click="handleUpdate(scope.row)"
                >处理</el-button
              >
              <el-button
                v-if="whshow"
                size="mini"
                type="text"
                icon="el-icon-phone"
                @click="Outbound(scope.row)"
                >外呼</el-button
              >
              <!-- && scope.row.taskNodeType == 'PHONE_OUTBOUND' -->
              <el-button
                v-if="(AItrue || COMMONtrue) && scope.row.phoneNodeExecuteResultStatus=='SUCCESS'"
                size="mini"
                type="text"
                @click="playback(scope.row)"
                icon="el-icon-headset"
                >回放</el-button
              >
              <div v-else-if="(AItrue || COMMONtrue) &&scope.row.phoneNodeExecuteResultStatus=='FAILURE'">
                未接通
              </div>
              <div v-else-if="(AItrue || COMMONtrue) && scope.row.phoneNodeExecuteResultStatus=='EXPIRED'">
                超期
              </div>
              <div v-else-if="(AItrue || COMMONtrue)">{{scope.row.phoneNodeExecuteResultStatus}}</div>
   
              <el-button
                v-if="
                  AItrue &&
                  !scope.row.taskNodeType == 'PHONE_OUTBOUND' &&
                  !scope.row.taskNodeType == 'QUESTIONNAIRE_SCALE'
                "
                size="mini"
                type="text"
                icon="el-icon-view"
                >查看</el-button
              >
              <el-button
                v-if="
                 EXECUTEDshow &&
                  scope.row.taskNodeType == 'QUESTIONNAIRE_SCALE'
                "
                size="mini"
                type="text"
                icon="el-icon-notebook-2"
                @click="questionlook(scope.row)"
                >问卷查看</el-button
              >
              <el-button
                v-if="COMMONtrue"
                size="mini"
                type="text"
                icon="el-icon-document"
                @click="handleadtail(scope.row)"
                >详情</el-button
              >
              <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-if="showUNEXECUTED"
              >删除</el-button
            >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
      <myPagination
        v-show="total > 0"
        :total="total"
        :pageSize="queryParams.pageSize"
        :indexFromWrap="queryParams.pageNum"
        @updateCPage="updateCPage"
      ></myPagination>
      <el-dialog
        title="回放"
        :visible.sync="audioshow"
        width="800px"
        :before-close="audiohandleClose"
      >
        <div class="audio">
          <div style="display: flex">
            <span class="name">姓名:{{ patientName }}</span>
            <audio ref="audioPlayer" :src="audiourl" controls></audio>
          </div>
          <div v-for="(item, index) in formlist" :key="index">
            <div class="imagelist" v-if="item.role == 'speech'">
              <img src="@/assets/manage/chat.png" alt="" />
              <div class="question">
                <span class="questionname">问题：</span>
                <span class="content">{{ item.contextText }}</span>
              </div>
            </div>
  
            <div class="imagelistright" v-if="item.role == 'voice'">
              <div class="question">
                <span class="questionname">{{ item.contextText }}</span>
              </div>
              <img src="@/assets/manage/solution.png" alt="" />
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="问卷查看" :visible.sync="questionshow" width="40%">
        <div class="bottomheader">
          <div class="right">
            <div class="title" v-if="questiondata.totalScore || questiondata.totalScore ==0">总分：{{ questiondata.totalScore }}分</div>
            <div
              class="words"
              v-for="(item, index) in questiondata.subjectResultList"
              :key="index"
            >
              {{ index + 1 }}.{{ item.questionName }}
              <span v-if="item.questionType == 'MULTIPLE_CHOICE'"
                >（单选题）</span
              >
              <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
                >（多选题）</span
              >
              <span v-if="item.questionType == 'SCORING_QUESTIONS'"
                >（打分题）</span
              >
              <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
                >（组合单选题）</span
              >
              <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
                >（组合多选题）</span
              >
              <span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'"
                >（组合填空题）</span
              >
              <span v-if="item.questionType == 'FILL_IN_THE_BLANKS'"
                >（填空题）</span
              >
              <span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'"
                >（组合打分题）</span
              >
              <span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
                >（日期填空题）</span
              >
              <span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
                >（时间填空题）</span
              >
              <span v-if="item.questionType == 'FEEDBACK_BLANKS_SUBJECT'"
                >（反馈填空题）</span
              >
              <el-radio-group
                v-if="
                  item.questionType == 'MULTIPLE_CHOICE' ||
                  item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
                  item.questionType == 'SCORING_QUESTIONS' ||
                  item.questionType == 'COMBINATION_SCORING_SUBJECT'
                "
                v-model="item.checked"
                class="custom-radio-group"
                @change="radioGroupChange($event, item)"
              >
                <el-radio
                  disabled
                  class="custom"
                  v-for="(aitem, aindex) in item.optionResults"
                  :key="aindex"
                  :label="aitem.id"
                  @change="radioChange($event, aitem, index)"
                >
                  {{ aitem.optionName }}
                </el-radio>
              </el-radio-group>
              <el-checkbox-group
                v-model="checkeddata"
                @change="radioGroupChange($event, item, 'checkbox')"
                v-if="
                  item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
                  item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
                "
              >
                <el-checkbox
                  disabled
                  v-for="(aitem, aindex) in item.optionResults"
                  :key="aindex"
                  :label="aitem.id"
                  @change="radioChangecheck($event, aitem, index, aindex)"
                >
                  {{ aitem.optionName }}
                </el-checkbox>
              </el-checkbox-group>
              <div
                v-if="
                  item.questionType == 'FILL_IN_THE_BLANKS' ||
                  item.questionType == 'COMBINATION_BLANKS_SUBJECT' ||
                  item.questionType == 'FEEDBACK_BLANKS_SUBJECT'
                "
                class="tk"
              >
                <el-input
                  disabled
                  v-model="item.fillBlanksAnswer"
                  placeholder="请输入答案"
                  type="textarea"
                />
              </div>
              <div
                v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
                style="margin: 20px 0 10px 30px"
              >
                <el-date-picker
                  disabled
                  @change="timepicker($event, index)"
                  clearable
                  v-model="item.fillBlanksAnswer"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
              <div
                style="margin: 20px 0 10px 30px"
                v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
              >
                <el-time-select
                  disabled
                  @change="timepickerselect($event, index)"
                  clearable
                  v-model="item.fillBlanksAnswer"
                  :picker-options="{
                    start: '08:30',
                    step: '00:30',
                    end: '23:30',
                  }"
                  placeholder="选择时间"
                >
                </el-time-select>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import {
    manualFollowUpList,
    createActualTimeTask,
    getPhoneDialVideo,
  } from "@/api/system/followup";
  import { usergetList } from "@/api/unitconfig/patientConfiguration";
  import { getAge } from "@/utils/age";
  import { selectAgencyList, getAgencyList } from "@/api/manage/selectAgencyList";
  import SearchFilter from "../../components/SearchForm.vue";
  import { selectPatientQuestionSubmit } from "@/api/system/taskExecuteRecord";
  export default {
    name: "Followup22",
    dicts: ["visit_method"],
    components: { SearchFilter },
  
    data() {
      return {
        //播放回放
        audiourl: undefined,
        audioshow: false,
        whshow: null,
        AItrue: null,
        COMMONtrue: null,
        foldshow: null,
        maxTableHeight: undefined,
        // 随访时间
        intentionalTime: [],
        // 门诊
        mzTime: [],
        // 入院
        ryTime: [],
        //医院list
        hospitalAgencylist: [],
        // 院区list
        campusAgencylist: [],
        //科室list
        departmentlist: [],
        //病区list
        wardlist: [],
        // 主治医生
        attendingPhysicianlist: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 患者管理任务执行记录表格数据
        taskExecuteRecordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        timeSignshow: false,
        phoneDialMethodshow: false,
        showUNEXECUTED:true,//未执行
        EXECUTEDshow:false,//已执行

        queryParams: {
          pageNum: 1,
          pageSize: 10,
          timeSign: "TODAY",
          nodeExecuteStatus: "UNEXECUTED",
          patientPhone: null,
          followStartTime: null,
          followEndTime: null,
          clinicalStartTime: null,
          clinicalEndTime: null,
          admissionEndTime: null,
          admissionStartTime: null,
          mainDiagnosis: null,
          visitSerialNumber: null,
          attendingPhysicianId: null,
          patientId: null,
          suitRange: null,
          manageRouteId: null,
          manageRouteNodeId: null,
          patientName: null,
          startDate: null,
          endDate: null,
          phoneDialMethod: null,
          manageRouteName: null,
          manageRouteNodeName: null,
          taskContent: null,
          executeTime: null,
          executePerson: null,
          executeType: null,
          executeRemark: null,
          hospitalAgencyId: null,
          campusAgencyId: null,
          departmentId: null,
          wardId: null,
        },
        patientName:null,
        // 表单参数
        form: {},
        visitoptions: [
          {
            value: "IN_THE_HOSPITAL",
            label: "在院",
          },
          {
            value: "OUTPATIENT_SERVICE",
            label: "门诊",
          },
          {
            value: "DISCHARGE",
            label: "出院",
          },
        ],
        // 执行状态
        nodeExecuteStatusdata:[
        {
            value: "UNEXECUTED",
            label: "未执行",
          },
          {
            value: "EXECUTED",
            label: "已执行",
          },

        ],
        // 任务类型
        taskNodeTypeDATA:[
        {
            value: "PHONE_OUTBOUND",
            label: "电话外呼",
          },
          {
            value: "QUESTIONNAIRE_SCALE",
            label: "问卷量表",
          },
          {
            value: "PROPAGANDA_ARTICLE",
            label: "宣教文章",
          },
          {
            value: "TEXT_REMIND",
            label: "文字提醒",
          },
        ],
        // 随访方式
        phoneDialMethodDATA:[
        {
            value: "ALL",
            label: "全部",
          },
          {
            value: "AI",
            label: "自动外呼",
          },
          {
            value: "COMMON",
            label: "人工随访电话",
          },

        ],
        // 表单校验
        // rules: {
        //   patientId: [
        //     { required: true, message: "患者表id不能为空", trigger: "blur" },
        //   ],
        // },
        // totalScoredata:0,
        questionshow: false,
        checkeddata: [],
        formlist: [],
        questiondata: {
          totalScore: 0, //总分
          routeHandlePerson: null,
          routeHandleId: null,
        },
      };
    },
    created() {
      if (localStorage.getItem("followupquery")) {
        this.queryParams = JSON.parse(localStorage.getItem("followupquery"));
        this.queryParams.hospitalAgencyId = undefined;
        this.queryParams.campusAgencyId = undefined;
        this.queryParams.departmentId = undefined;
      }
      this.getList();
      this.selectAgencyinfo();
    },
    mounted() {
      this.getMaxTableHeight();
      this.screenChange();
    },
    methods: {
      async questionlook(row) {
        // this.totalScoredata=0,
        await selectPatientQuestionSubmit(row.taskExecuteRecordId).then((res) => {
          if(res.data){
            this.questiondata = res.data;
          this.questiondata?.subjectResultList.forEach((e) => {
            // if(e.whetherScore==1){
            //   e.optionResults.forEach((el) => {
            //     if(el.optionChooseSign=="0"){
            //       this.totalScoredata += el.optionScore
            //     }
            //   })
            // }
            e.optionResults.forEach((el) => {
              if (
                (el.optionChooseSign == "0" &&
                  e.questionType == "MULTIPLE_CHOICE") ||
                e.questionType == "COMBINATION_RADIO_SUBJECT"
              ) {
                e.checked = el.id;
              } else if (
                el.optionChooseSign == "0" &&
                e.questionType == "MULTIPLE_CHOICE_QUESTIONS"
              ) {
                this.checkeddata.push(el.id);
              } else if (
                el.optionChooseSign == "0" &&
                e.questionType == "SCORING_QUESTIONS"
              ) {
                e.checked = el.id;
              } else if (
                e.questionType == "COMBINATION_MULTIPLE_SUBJECT" &&
                el.optionChooseSign == "0"
              ) {
                this.checkeddata.push(el.id);
              }
            });
          });
          this.questionshow = true;
  
          }else{
            this.$message.error("未查到问卷提交信息");
  
          }
  
        });
      },
    //   任务类型
      changetaskNodeType(e){
        console.log(e,'e')
        if(e=='PHONE_OUTBOUND'){
            this.queryParams.phoneDialMethod="ALL"
        }else if(e=='QUESTIONNAIRE_SCALE'){
            this.queryParams.phoneDialMethod="ALL"
        }

      },
      audiohandleClose() {
        this.$refs.audioPlayer.pause();
        this.audioshow = false;
        this.audiourl = null;
      },
      async playback(row) {
        console.log(row,'row')
        this.patientName=row.patientName
        // await this.$confirm("是否确认回放?", "提示", {
        //   confirmButtonText: "确认",
        //   cancelButtonText: "取消",
        //   type: "warning",
        // }).then(() => {
          getPhoneDialVideo(row.manageRouteNodeId).then((res) => {
            console.log(res, "res");
    
            if(res.data.record){
              this.audioshow = true;
            this.audiourl = process.env.VUE_APP_BASE_API + res.data.phoneDialRecordVideo;
              this.formlist = res.data.record;
            setTimeout(() => {
              this.$refs.audioPlayer.load(); // 重新加载音频，以确保每次播放都是新的音频文件
              // this.$refs.audioPlayer.play();
            // }, 1000);
          });
  
            }else{
            this.$message.error("未查到回放信息");
  
  
            }
  
        });
      },
      Outbound(row) {
        this.$confirm("是否确认进行外呼?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          createActualTimeTask({
            manageRouteId: row.manageRouteId,
            scriptInfoId: row.scriptInfoId,
            signPatientManageRouteNodeId: row.manageRouteNodeId,
          }).then((res) => {
            this.$modal.msgSuccess("外呼成功");
          });
        });
      },
      changeswitchtwo(e) {
        if (e == true) {
          this.queryParams.phoneDialMethod = "AI";
          this.getList();
        } else {
          this.queryParams.phoneDialMethod = "COMMON";
          this.getList();
        }
      },
      changeswitch(e) {
        if (e == true) {
          this.queryParams.timeSign = "WHOLE";
          this.getList();
        } else {
          this.queryParams.timeSign = "TODAY";
          this.getList();
        }
      },
      updateCPage(index, size) {
        this.queryParams.pageNum = index;
        this.queryParams.pageSize = size;
        this.getList();
      },
    //   任务状态
      handleClick(e) {
        // if(e=='UNEXECUTED'){
        //     this.show=true
        // }else{
        //     this.show=true
        // }
        // console.log(tab, event);
        // this.intentionalTime = [];
        // this.mzTime = [];
        // this.ryTime = [];
        // this.queryParams.dischargeStartTime = null;
        // this.queryParams.dischargeEndTime = null;
        // this.queryParams.clinicalStartTime = null;
        // this.queryParams.clinicalEndTime = null;
        // this.queryParams.followStartTime = null;
        // this.queryParams.followEndTime = null;
        // this.queryParams.admissionEndTime = null;
        // this.queryParams.admissionStartTime = null;
        // this.queryParams.mainDiagnosis = null;
        // this.queryParams.visitSerialNumber = null;
        // this.queryParams.attendingPhysicianId = null;
        // this.queryParams.suitRange = null;
        // this.queryParams.patientName = null;
        // this.queryParams.hospitalAgencyId = null;
        // this.queryParams.campusAgencyId = null;
        // this.queryParams.departmentId = null;
        // this.queryParams.wardId = null;
        // this.queryParams.patientPhone = null;
        // 已执行
        if (this.queryParams.nodeExecuteStatus == "EXECUTED") {
          this.queryParams.timeSign = null;
        } else {
          this.queryParams.timeSign = "TODAY";
          this.timeSignshow = false;
          this.phoneDialMethodshow = false;
        //   this.queryParams.phoneDialMethod = "COMMON";
        }
      },
      change(e) {
        if (e == "DISCHARGE") {
          this.queryParams.clinicalStartTime = null;
          this.queryParams.clinicalEndTime = null;
        } else if (e == "OUTPATIENT_SERVICE") {
          this.queryParams.dischargeStartTime = null;
          this.queryParams.dischargeEndTime = null;
        } else {
          this.queryParams.dischargeStartTime = null;
          this.queryParams.dischargeEndTime = null;
          this.queryParams.clinicalStartTime = null;
          this.queryParams.clinicalEndTime = null;
        }
      },
      //主治医生
      usergetListinfo() {
        usergetList({
          hospitalAgencyId: this.queryParams.hospitalAgencyId,
          postName: "DOCTOR",
        }).then((res) => {
          this.attendingPhysicianlist = res.data;
        });
      },
      //获取下级单位
      getAgencyListinfo(nodeType, id) {
        let query = {
          nodeType: nodeType,
        };
        if (nodeType == "HOSPITAL") {
          query.hospitalId = id;
        } else if (nodeType == "CAMPUS") {
          query.campusId = id;
        } else if (nodeType == "DEPARTMENT") {
          query.departmentId = id;
        }
        getAgencyList(query).then((res) => {
          if (nodeType == "HOSPITAL") {
            this.campusAgencylist = res.data.campusList;
            this.departmentlist = res.data.departmentList;
          } else if (nodeType == "CAMPUS") {
            this.departmentlist = res.data.departmentList;
          }
          this.wardlist = res.data.wardList;
        });
      },
      //选中医院获取院区
      changehospitalAgency(id) {
        this.getAgencyListinfo("HOSPITAL", id);
        this.queryParams.campusAgencyId = null;
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        this.queryParams.attendingPhysicianId = null;
        // })
        //医生
        this.usergetListinfo();
        this.getMaxTableHeight();
      },
      //选中院区获取科室
      changecampusAgency(id) {
        this.getAgencyListinfo("CAMPUS", id);
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        // })
      },
      //选中科室获取病区
      changedepartment(id) {
        this.getAgencyListinfo("DEPARTMENT", id);
        // let query = {
        //   nodeType: 'WARD',
        //   parentDepartmentId: id,
        // }
        // getDepartmentList(query).then(res => {
        //   this.wardlist = res.data
        this.queryParams.wardId = null;
        // })
      },
      //清空医院
      clearhospitalAgency() {
        this.queryParams.campusAgencyId = null;
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        this.queryParams.attendingPhysicianId = null;
      },
      //清空院区
      clearcampusAgency() {
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        this.getAgencyListinfo("HOSPITAL", this.queryParams.hospitalAgencyId);
      },
      //清空科室
      cleardepartment() {
        this.queryParams.wardId = null;
        if (this.queryParams.departmentId) {
          this.getAgencyListinfo("DEPARTMENT", this.queryParams.departmentId);
        } else if (this.queryParams.campusAgencyId) {
          this.getAgencyListinfo("CAMPUS", this.queryParams.campusAgencyId);
        } else if (this.queryParams.hospitalAgencyId) {
          this.getAgencyListinfo("HOSPITAL", this.queryParams.hospitalAgencyId);
        }
      },
      //获取医院list
      selectAgencyinfo() {
        let query = {
          agencyStatus: "ON",
          nodeType: "HOSPITAL",
        };
        selectAgencyList(query).then((res) => {
          this.hospitalAgencylist = res.data;
        });
      },
      /** 查询患者管理任务执行记录列表 */
      getList() {
        this.loading = true;
        manualFollowUpList(this.queryParams).then((response) => {
          if (
            this.queryParams.phoneDialMethod == "AI" &&
            this.queryParams.nodeExecuteStatus == "UNEXECUTED"
          ) {
            this.whshow = true;
          } else {
            this.whshow = false;
          }
          if (
            this.queryParams.phoneDialMethod == "AI" &&
            this.queryParams.nodeExecuteStatus == "EXECUTED"
          ) {
            this.AItrue = true;
          } else {
            this.AItrue = false;
          }
          if (
            this.queryParams.phoneDialMethod == "COMMON" &&
            this.queryParams.nodeExecuteStatus == "EXECUTED"
          ) {
            this.COMMONtrue = true;
          } else {
            this.COMMONtrue = false;
          }
          localStorage.setItem("followupquery", JSON.stringify(this.queryParams));
          this.taskExecuteRecordList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          nodeExecuteStatus: "",
          id: null,
          patientId: null,
          manageRouteId: null,
          manageRouteNodeId: null,
          patientName: null,
          manageRouteName: null,
          manageRouteNodeName: null,
          taskContent: null,
          executeTime: null,
          executePerson: null,
          executeType: null,
          executeRemark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
        };
        this.resetForm("form");
      },
      // 随访时间
      chooseTime() {
        if (this.intentionalTime == null) {
          this.intentionalTime = [];
          this.queryParams.followStartTime = null;
          this.queryParams.followEndTime = null;
        } else {
          this.queryParams.followStartTime = this.intentionalTime[0];
          this.queryParams.followEndTime = this.intentionalTime[1];
        }
      },
      // 门诊
      mzchange() {
        if (this.mzTime == null) {
          this.mzTime = [];
          this.queryParams.clinicalStartTime = null;
          this.queryParams.clinicalEndTime = null;
        } else {
          if (
            !this.queryParams.suitRange ||
            this.queryParams.suitRange == "IN_THE_HOSPITAL"
          ) {
            this.queryParams.clinicalStartTime = this.mzTime[0];
            this.queryParams.clinicalEndTime = this.mzTime[1];
            this.queryParams.dischargeStartTime =
              this.queryParams.clinicalStartTime;
            this.queryParams.dischargeEndTime = this.queryParams.clinicalEndTime;
          } else if (this.queryParams.suitRange == "DISCHARGE") {
            this.queryParams.dischargeStartTime = this.mzTime[0];
            this.queryParams.dischargeEndTime = this.mzTime[1];
            this.queryParams.clinicalStartTime = null;
            this.queryParams.clinicalEndTime = null;
          } else if (this.queryParams.suitRange == "OUTPATIENT_SERVICE") {
            this.queryParams.dischargeStartTime = null;
            this.queryParams.dischargeEndTime = null;
            this.queryParams.clinicalStartTime = this.mzTime[0];
            this.queryParams.clinicalEndTime = this.mzTime[1];
          }
        }
      },
      // 入院
      rychange() {
        if (this.ryTime == null) {
          this.ryTime = [];
          this.queryParams.admissionStartTime = null;
          this.queryParams.admissionEndTime = null;
        } else {
          this.queryParams.admissionStartTime = this.ryTime[0];
          this.queryParams.admissionEndTime = this.ryTime[1];
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if(this.queryParams.nodeExecuteStatus=='UNEXECUTED'){
            this.showUNEXECUTED=true
            this.EXECUTEDshow=false
        }else{
            this.EXECUTEDshow=true
            this.showUNEXECUTED=false
        }
        this.queryParams.pageNum = 1;
        if(this.queryParams.taskNodeType=='PROPAGANDA_ARTICLE' || this.queryParams.taskNodeType=='TEXT_REMIND' ){
            this.queryParams.phoneDialMethod=""
        }
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        // 未执行
        // if (this.queryParams.nodeExecuteStatus == "UNEXECUTED") {
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            nodeExecuteStatus: "UNEXECUTED",
            timeSign: "today",
            followStartTime: null,
            followEndTime: null,
            clinicalStartTime: null,
            clinicalEndTime: null,
            admissionEndTime: null,
            admissionStartTime: null,
            mainDiagnosis: null,
            visitSerialNumber: null,
            attendingPhysicianId: null,
            patientId: null,
            suitRange: null,
            manageRouteId: null,
            manageRouteNodeId: null,
            patientName: null,
            startDate: null,
            endDate: null,
            manageRouteName: null,
            phoneDialMethod: null,
            manageRouteNodeName: null,
            taskContent: null,
            executeTime: null,
            executePerson: null,
            executeType: null,
            executeRemark: null,
            hospitalAgencyId: null,
            campusAgencyId: null,
            departmentId: null,
            wardId: null,
          };
          this.timeSignshow = false;
          this.phoneDialMethodshow = false;
          this.showUNEXECUTED=true;
        // }
        
        // else {
        //   this.queryParams = {
        //     pageNum: 1,
        //     pageSize: 10,
        //     nodeExecuteStatus: "EXECUTED",
        //     followStartTime: null,
        //     followEndTime: null,
        //     clinicalStartTime: null,
        //     clinicalEndTime: null,
        //     admissionEndTime: null,
        //     admissionStartTime: null,
        //     mainDiagnosis: null,
        //     visitSerialNumber: null,
        //     attendingPhysicianId: null,
        //     patientId: null,
        //     suitRange: null,
        //     manageRouteId: null,
        //     manageRouteNodeId: null,
        //     patientName: null,
        //     startDate: null,
        //     endDate: null,
        //     phoneDialMethod: null,
        //     manageRouteName: null,
        //     manageRouteNodeName: null,
        //     taskContent: null,
        //     executeTime: null,
        //     executePerson: null,
        //     executeType: null,
        //     executeRemark: null,
        //     hospitalAgencyId: null,
        //     campusAgencyId: null,
        //     departmentId: null,
        //     wardId: null,
        //   };
        // }
        this.handleQuery();
        this.intentionalTime = [];
        this.mzTime = [];
        this.ryTime = [];
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加患者管理任务执行记录";
      },
      /** 处理按钮操作 */
      handleUpdate(row) {
        this.$router.push({
          path: "/task/followupsee",
          query: {
            path: "/task/followup",
            patientId: row.patientId,
            taskNodeType: row.taskNodeType,
            templateId: row.templateId,
            cardNo: row.cardNo,
            patientName: row.patientName,
            manageRouteName: row.manageRouteName,
            manageRouteNodeName: row.routeNodeName,
            patientPhone: row.patientPhone,
            sex: row.sex,
            birthDate: row.birthDate,
            familyMemberPhone: row.familyMemberPhone,
            address: row.address,
            patientSource: row.patientSource,
            createTime: row.createTime,
            age: row.birthDate ? getAge(row.birthDate) :row.age,
            manageRouteId: row.manageRouteId,
            manageRouteNodeId: row.manageRouteNodeId,
            visitRecordId: row.visitRecordId,
            departmentId: row.departmentId,
            departmentName: row.departmentName,
            diseaseTypeId: row.diseaseTypeId ? row.diseaseTypeId : null,
            diseaseTypeName: row.diseaseTypeName ? row.diseaseTypeName : null,
            followTemplateId: row.followTemplateId ? row.followTemplateId : null,
            phoneId: row.phoneId ? row.phoneId : null,
          },
        });
      },
      // 详情
      handleadtail(row) {
        this.$router.push({
          path: "/task/followupdetails",
          query: {
            path: "/task/followup",
            patientId: row.patientId,
            taskNodeType: row.taskNodeType,
            templateId: row.templateId,
            manageRouteId: row.manageRouteId,
            manageRouteNodeId: row.manageRouteNodeId,
            visitRecordId: row.visitRecordId,
            taskExecuteRecordId: row.taskExecuteRecordId,
            routeHandleRemark: row.routeHandleRemark
              ? row.routeHandleRemark
              : null,
          },
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateTaskExecuteRecord(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addTaskExecuteRecord(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal
          .confirm(
            '是否确认删除？'
          )
          .then(function () {
            return delTaskExecuteRecord(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "system/taskExecuteRecord/export",
          {
            ...this.queryParams,
          },
          `taskExecuteRecord_${new Date().getTime()}.xlsx`
        );
      },
      // 获取表格最高高度
      getMaxTableHeight() {
        const windowInnerHeight = window.innerHeight; // 屏幕可视高度
        const layoutDiv = this.$refs.layout;
        const formDiv = this.$refs.topform;
        this.maxTableHeight =
          windowInnerHeight -
          134 -
          54 -
          this.getBoxPadding(layoutDiv) -
          this.getBoxHeight(formDiv);
      },
      fold(e) {
        this.foldshow = e;
      },
      // 屏幕resize监听
      screenChange() {
        // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
        window.addEventListener("resize", this.getMaxTableHeight, true);
        // 将屏幕监听事件移除
        // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
        // 或者将这里的方法直接写在beforeDestroy函数中也可以
        this.$once("hook:beforeDestroy", () => {
          window.removeEventListener("resize", this.getMaxTableHeight, true);
        });
      },
  
      renderHeader(h, { column }) {
        return h("span", {}, [
          h("span", {}, column.label.split("/")[0]),
          h("br"),
          h("span", {}, column.label.split("/")[1]),
        ]);
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    color: black !important;
  }
  
  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff !important;
    color: black !important;
  }
  
  ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    border: 1px solid #dcdfe6 !important;
    border-color: #1890ff !important;
  }
  
  ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: black !important;
  }
  
  ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #1890ff !important;
  }
  
  ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: #fff !important;
  }
  
  ::v-deep .el-radio__input.is-disabled .el-radio__inner {
    border: 1px solid #dcdfe6 !important;
    background-color: #fff !important;
  }
  
  ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #1890ff !important;
  }
  
  ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    color: #1890ff !important;
    background-color: #1890ff !important;
  }
  
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
    color: black !important;
  }
  
  .tk {
    ::v-deep .el-textarea__inner {
      margin: 20px 0 10px 30px;
    }
  }
  
  ::v-deep .el-radio {
    padding: 10px;
  }
  
  ::v-deep .el-checkbox-group {
    display: flex;
    flex-direction: column;
    padding: 10px 0px 10px 24px;
  }
  
  ::v-deep .el-checkbox {
    padding: 10px 0 10px 0px;
    // padding: 10px;
  }
  
  .custom-radio-group {
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 10px;
  
    .custom {
      padding: 10px 0 10px 10px;
    }
  }
  
  .custom-radio-group {
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 10px;
  
    .custom {
      padding: 10px 0 10px 10px;
    }
  }
  
  .right {
    width: 100%;
    // background: yellow;
  }
  
  .bottomheader {
    width: 99%;
    background-color: #fff;
    margin: 0 auto;
  
    .title {
      line-height: 40px;
      font-size: 20px;
      margin: 0 10px;
    }
  
    .words {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }
  }
  
  .audio {
    margin: 10px 0px 10px 0;
    .name {
      display: inline-block;
      margin: 20px
    }
  
    .imagelist {
      padding-top: 10px;
      display: flex;
      img {
        width: 40px;
        height: 40px;
      }
      .question {
        // width: 1000px;
        // height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        background: #fafbff;
        box-shadow: 5px 5px 10px #dbe5f4;
        border-radius: 5px;
        line-height: 30px;
        margin-top: 5px;
        margin-left: 5px;
      }
      .questionname {
        color: #559ca6;
        padding-left: 10px;
        font-weight: 600;
      }
      .content {
        color: #939394;
      }
    }
    .imagelistright {
      padding-top: 10px;
      display: flex;
      // float: right;
      justify-content: flex-end;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
        margin-left: 5px;
      }
      .question {
        // width: 200px;
        // height: 30px;
        padding-left: 10px;
        padding-right: 10px;
  
        background: #51b9ff;
        box-shadow: 5px 5px 10px #dbe5f4;
        border-radius: 5px;
        line-height: 30px;
        margin-top: 5px;
        margin-left: 5px;
        color: #fff;
        text-align: center;
      }
      // .questionname {
      //   color: #5da0aa;
      //   padding-left: 10px;
      // }
      .content {
        color: #dcdfe6;
      }
    }
  }
  
  audio {
    width: 350px;
  }
  
  ::v-deep .el-table {
    overflow: auto;
  }
  
  .app-container {
    // padding-top: 0 !important;
  }
  
  ::v-deep.el-table {
    .el-table-column--selection .cell {
      text-overflow: clip !important;
      padding-left: 6px !important;
      padding-right: 3px !important;
    }
  }
  
  // :deep(.el-switch) {
  //   position: relative;
  //   user-select: none;
  
  //   .el-switch__core {
  //     width: 45px !important;
  //   }
  
  //   &.is-checked .el-switch__label {
  //     position: absolute;
  //     top: 0px;
  //     left: -3px;
  //     color: #fff;
  //   }
  
  //   .el-switch__label {
  //     position: absolute;
  //     top: 0px;
  //     left: 10px;
  //     color: #fff;
  //   }
  // }
  
  ::v-deep .el-switch {
    .el-switch__label {
      position: absolute !important;
      display: none;
      color: #fff;
    }
  
    .el-switch__label--left {
      z-index: 9 !important;
      left: 20px !important;
    }
  
    .el-switch__label--right {
      z-index: 9;
      left: -3px;
    }
  
    .el-switch__label.is-active {
      display: block !important;
      color: #fff;
    }
  
    .el-switch__core {
      width: 85px !important;
    }
  
    .el-switch__label {
      width: 60px !important;
      text-align: center;
    }
  }
  
  ::v-deep .el-table__fixed-right::before {
    height: 0px !important;
  }
  </style>
  