<template>
  <div class="follow-record-wrappe">
    <!--左边随访列表-->
    <div class="follow-list-wrapper">
      <sp-title style="margin: 20px" text="随访列表" />
      <el-scrollbar class="follow-list-scroll" tag="div">
        <div class="follow-list">
          <sp-title style="margin-bottom:12px" round :size="14" text="当前随访" />
          <el-empty style="padding-top:0" v-if="curFollowList.length == 0" :image="require('@/assets/images/empty.png')" description="暂无数据~"></el-empty>
          <div class="cur-follow">
            <div
              v-for="(ele, i) in curFollowList"
              :key="ele.id"
              class="cur-follow-list-box"
              @click="changeRecord('cur',i,ele)"
              :class="curFollow.indexId == ele.id ? 'active' : ''"
            >
              <i class="status-icon">
                <span class="status-icon-font"><img :src="icon[ele.status.status]"/></span>
              </i>
              <div class="cur-follow-list-content">
                <div>{{ele.subject && ele.subject.length > 20 ? (ele.subject.substring(0,20) + '...') : ele.subject}}</div>
                <p>
                  <span>随访时间</span>
                  <span>{{ ele.date }}</span>
                </p>
                <p v-if="ele.userName">
                  <span>随访人员</span>
                  <span><i class="iconfont icona-yonghuming1"></i>{{ ele.userName }}</span>
                </p>
                <!-- <p>
                  <span>随访手机号:</span>
                  <span>{{ ele.phone }}</span>
                </p>
                <p>
                  <span>随访形式:</span>
                  <span>{{ ele.contactType }}</span>
                </p> -->
              </div>
            </div>
          </div>
          <sp-title style="margin-bottom:12px" round :size="14" text="往期随访" />
          <el-empty style="padding-top:0" v-if="pastFollowList.length == 0" :image="require('@/assets/images/empty.png')" description="暂无数据~"></el-empty>    
          <div class="past-follow" v-show="pastFollowList.length">
            <div
              class="past-follow-list-box"
              v-for="(ele, i) in pastFollowList"
              :key="ele.id"
              @click="changeRecord('past', i,ele)"
              :class="curFollow.indexId == ele.id ? 'active' : ''"
            >
              <i class="status-icon">
                <span class="status-icon-font"><img :src="icon[ele.status.status]"/></span>
              </i>
              <div class="cur-follow-list-content">
                <div>{{ele.subject && ele.subject.length > 20 ? (ele.subject.substring(0,20) + '...') : ele.subject}}</div>
                <p>
                  <span>随访时间</span>
                  <span>{{ ele.date }}</span>
                </p>
                <p v-if="ele.userName">
                  <span>随访人员</span>
                  <span><i class="iconfont icona-yonghuming1"></i>{{ ele.userName }}</span>
                </p>
                <!-- <p>
                  <span>随访手机号:</span>
                  <span>{{ ele.phone }}</span>
                </p>
                <p>
                  <span>随访形式:</span>
                  <span>{{ ele.contactType }}</span>
                </p> -->
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <!--右边随访记录-->
    <div class="manage-follow-wrapper">
      <el-empty style="margin-top:15%" v-if="!pastFollowList.length && !curFollowList.length" :image="require('@/assets/images/empty.png')" description="暂无数据~"></el-empty>
      <template v-else>
        <el-scrollbar tag="div" class="add-container" :style="{height: canEdit ? 'calc(100% - 51px)' : 'calc(100% - 21px)'}">
          <div style="display:flex;justify-content:center;width:100%;padding-bottom:20px">
            <!-- <div style="padding:0;min-width:760px;width: calc(100% - 410px)"> -->
            <div style="padding:0;width:100%">
              <!--患者信息-->
              <sp-title class="margin-20" text="患者信息">
                <el-dropdown @command="viewFile" v-show="route == '/caseManage/myPatient' && isTimeline">
                  <span class="el-dropdown-link">
                    <i class="iconfont iconfujian"></i>
                    <span class="show-text">住院文件</span>
                    <span class="brage-blue">1</span>
                  </span>
                  <el-dropdown-menu class="aegle-dropdown-menu" slot="dropdown">
                    <el-dropdown-item command="病案首页">病案首页</el-dropdown-item>
                    <!-- <el-dropdown-item command="出院记录">出院记录</el-dropdown-item> -->
                  </el-dropdown-menu>
                </el-dropdown>
              </sp-title>
              <div class="list-box flex">
                <div>
                  <p class="second-title">分期</p>
                  <p class="ellipsis">{{baseInfo.emrTumour}}</p>
                </div>
                <div>
                  <p class="second-title">主要诊断</p>
                  <p class="ellipsis"><ellipsis :num="18" :text="baseInfo.outpatientDiag"/></p>
                </div>
                <div>
                  <p class="second-title">当前治疗状态</p>
                  <p class="ellipsis"><span class="therapeutic" :class="setSelectColor(baseInfo.currentStatus)" v-if="baseInfo.currentStatus">{{baseInfo.currentStatus}}</span></p>
                </div>
                <div>
                  <p class="second-title">联系电话<sup>*</sup></p>
                  <p class="ellipsis">{{baseInfo.phone}}</p>
                </div>
                <div style="width:100%;margin-bottom:32px">
                  <p class="second-title">治疗方案<sup>*</sup></p>
                  <el-input v-if="canEdit" rows="4" resize="none" v-model="base.protocols" maxlength="500" show-word-limit type="textarea" placeholder="请输入"/>
                  <p v-else class="readonly-text"><pre>{{base.protocols}}</pre></p>
                </div>
              </div>
              <!--随访内容-->
              <sp-title class="margin-20" text="随访内容"/>
              <div class="list-box flex">
                <div style="width:100%">
                  <p class="second-title">随访标题<sup style="line-height:14px">*</sup></p>
                  <el-input v-if="canEdit && type == 2" v-model="base.subject" size="small" maxlength="50" placeholder="请输入随访标题"></el-input>
                  <p v-else class="readonly-text"><pre>{{base.subject}}</pre></p>
                </div>
                <template  v-if="type == 1">
                  <div style="width:200px;padding-right:20px">
                    <p class="second-title">本次随访日期<sup>*</sup></p>
                    <p class="readonly-text"><pre>{{base.followDate}}</pre></p>
                  </div>
                  <!-- <div style="width:50%;padding-right:20px" v-if="followNextDate && followIndexStatus !=2 && followIndexStatus !=3 && followIndexStatus != 1"> -->
                  <div style="width:50%;padding-right:20px" v-if="followNextDate && followIndexStatus !=2 && followIndexStatus !=3 && followIndexStatus != 1 && canEdit">
                    <p class="second-title">下次随访日期<sup>*</sup></p>
                    <el-date-picker
                      :clearable="false"
                      v-if="canEdit"
                      v-model="followNextDate"
                      style="width:170px"
                      size="small"
                      range-separator="→"
                      type="date"
                      value-format="yyyy-MM-dd"
                      :picker-options="expireTimeOption"
                      placeholder="选择开始时间">
                    </el-date-picker>
                    <p v-else class="readonly-text"><pre>{{base.followDate}}</pre></p>
                  </div>
                  <div :style="{width:'100%',marginBottom: '32px'}">
                  <p class="second-title">随访形式<sup>*</sup></p>
                  <div style="display:flex;align-items:center">
                    <el-radio-group @change="base.contactContent = ''" :disabled="!canEdit" class="aegle-radio" v-model="base.contactType" :style="{height: type == 1 ? '' : '32px'}">
                      <el-radio :label="1">电话</el-radio>
                      <el-radio :label="2">微信</el-radio>
                      <el-radio :label="3">其他</el-radio>
                    </el-radio-group>
                    <el-divider v-if="base.contactType == 3" direction="vertical" style="margin:0 8px;background:rgba(0,0,0,.2)"></el-divider>
                    <el-input v-if="canEdit" size="small" show-word-limit maxlength="50" v-show="base.contactType == 3" v-model="base.contactContent" placeholder="请输入其他"/>
                    <p v-else class="readonly-text"><pre>{{base.contactContent}}</pre></p>
                  </div>
                </div>
                </template>
                <!--临时随访-->
                <template  v-if="type == 2">
                  <div style="width:200px;padding-right:20px">
                    <p class="second-title">随访开始时间<sup>*</sup></p>
                    <el-date-picker
                      :clearable="false"
                      v-if="canEdit"
                      v-model="base.followDate"
                      style="width:100%"
                      size="small"
                      range-separator="→"
                      type="date"
                      value-format="yyyy-MM-dd"
                      :picker-options="expireTimeOption01"
                      placeholder="选择开始时间">
                    </el-date-picker>
                    <p v-else class="readonly-text"><pre>{{base.followDate}}</pre></p>
                  </div>
                  <div :style="{flex: 1}">
                  <p class="second-title">随访形式<sup>*</sup></p>
                  <div style="display:flex;margin-bottom:12px;align-items:center">
                    <el-radio-group @change="base.contactContent = ''" :disabled="!canEdit" class="aegle-radio" v-model="base.contactType" :style="{height: type == 1 ? '' : '32px'}">
                      <el-radio :label="1">电话</el-radio>
                      <el-radio :label="2">微信</el-radio>
                      <el-radio :label="3">其他</el-radio>
                    </el-radio-group>
                    <el-divider v-if="base.contactType == 3" direction="vertical" style="margin:0 8px;background:rgba(0,0,0,.2)"></el-divider>
                    <el-input v-if="canEdit" size="small" show-word-limit maxlength="50" v-show="base.contactType == 3" v-model="base.contactContent" placeholder="请输入其他"/>
                    <p v-else class="readonly-text"><pre>{{base.contactContent}}</pre></p>
                  </div>
                </div>
                </template>
                <!--随访形式-->
              </div>
              <div class="dashed-line"></div>
              <!--不适症状-->
              <sp-title :class="base.discomfort == 1 ? 'margin-8' : 'margin-20'" isNeed text="不适症状" round :size="14">
                <el-radio-group @change="clearItem('discomfort',base.discomfort)" :disabled="!canEdit" class="aegle-radio" v-model="base.discomfort">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="2">无</el-radio>
                </el-radio-group>
              </sp-title>
              <div v-if="base.discomfort == 1 && !canEdit" style="margin-bottom:20px">
                <discomfort-temp :item="discomfort"></discomfort-temp>
              </div>
              <div class="list-box symptom" id="symptom" v-show="base.discomfort == 1 && canEdit">
                <div class="symptom-item">
                  <sp-drop-sel v-if="!(!canEdit && !noComform.tired)" :disabled="!canEdit" v-model="noComform.tired" label="疲倦"/>
                  <sp-drop-sel @change="clearItem('decreasedAppetite',noComform.decreasedAppetite)" v-if="!(!canEdit && !noComform.decreasedAppetite)" :disabled="!canEdit" v-model="noComform.decreasedAppetite" isSel label="食欲降低" key="食欲降低">
                    <p class="symptom-title" style="margin-top: 0"><span>进食量是否减少？<sup>*</sup></span><span></span></p>
                    <el-radio-group :disabled="!canEdit" class="aegle-radio" v-model="decreasedAppetiteDTO.foodIntakeChange" style="margin-top:5px">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                    <template v-if="decreasedAppetiteDTO.foodIntakeChange == 1">
                      <p style="margin:12px 0 0;border-bottom:1px dashed #eee"></p>
                      <p class="symptom-title"><span>较前减少？<sup>*</sup></span><span></span></p>
                      <el-select style="width:100%" :popper-append-to-body="false" v-if="canEdit" :disabled="!canEdit" placeholder="请选择" v-model="decreasedAppetiteDTO.foodIntakeChangeNum" size="mini" >
                        <el-option v-for="i in intakeLevel" :label="i.label" :value="i.value" :key="'b_' + i.value"></el-option>
                      </el-select>
                      <p v-else class="readonly-text"><pre>{{getSelectLabel(decreasedAppetiteDTO.foodIntakeChangeNum,intakeLevel)}}</pre></p>
                    </template>
                    <p style="margin:12px 0 0;border-bottom:1px solid #eee"></p>
                    <p class="symptom-title"><span>近期1-3个月体重是否持续下降？<sup>*</sup></span><span></span></p>
                    <el-radio-group :disabled="!canEdit" class="aegle-radio" v-model="decreasedAppetiteDTO.bodyWeightChange" style="margin-top:5px">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                    <template v-if="decreasedAppetiteDTO.bodyWeightChange == 1">
                      <p style="margin:12px 0 0;border-bottom:1px dashed #eee"></p>
                      <p class="symptom-title"><span>体重下降<sup>*</sup></span><span></span></p>
                      <div class="num-box" v-if="canEdit"><el-input @input="e => getFloat(e,'bodyWeightChangeNum')" v-model="decreasedAppetiteDTO.bodyWeightChangeNum" placeholder="" size="mini"></el-input>kg</div>
                      <p v-else class="readonly-text">{{decreasedAppetiteDTO.bodyWeightChangeNum}}kg</p>
                    </template>
                  </sp-drop-sel>
                  <sp-drop-sel @change="clearItem('constipation',noComform.constipation)" v-if="!(!canEdit && !noComform.constipation)" :disabled="!canEdit" v-model="noComform.constipation" isSel label="便秘">
                    <p class="symptom-title" style="margin-top: 0"><span>次数？<sup>*</sup></span><span></span></p>
                    <div class="num-box" v-if="canEdit">
                      <el-input @input="e => constipationDTO.constipationNum = e.replace(/[^\d]/g,'').replace(/^0{2,}/g,'0')" maxlength="3" size="mini" v-model="constipationDTO.constipationNum" placeholder=""></el-input>次/ 
                      <el-input @input="e => constipationDTO.constipationDay = e.replace(/[^\d]+/g,'').replace(/^0{1,}/g,'')" maxlength="3" size="mini" v-model="constipationDTO.constipationDay" style="margin-left:5px" placeholder=""></el-input>天</div>
                    <!-- <p style="margin:10px 0 0;border-bottom:1px solid #eee"></p> -->
                    <p v-if="!canEdit" class="readonly-text"><pre>{{constipationDTO.constipationNum}}次/{{constipationDTO.constipationDay}}天</pre></p>
                    <p style="margin:12px 0 0;border-bottom:1px solid #eee"></p>
                    <p class="symptom-title"><span>处置？<sup>*</sup></span><span></span></p>
                    <el-select @change="constipationDTO.constipationTakeMedicine=''" style="width:100%" :popper-append-to-body="false" v-if="canEdit" :disabled="!canEdit" placeholder="请选择" v-model="constipationDTO.method" size="mini">
                      <el-option v-for="i in constipationHandleArr" :label="i.label" :value="i.value" :key="'c_' + i.value"></el-option>
                    </el-select>
                    <p v-if="!canEdit" class="readonly-text"><pre>{{getSelectLabel(constipationDTO.method,constipationHandleArr)}}</pre></p>
                    <template v-if="constipationDTO.method == '2'">
                      <p style="margin:12px 0 0;border-bottom:1px dashed #eee"></p>
                      <p class="symptom-title"><span>服用药物<sup>*</sup></span><span></span></p>
                      <el-input
                       @input="changeD"
                      v-show="canEdit"
                      v-model="constipationDTO.constipationTakeMedicine"
                      type="textarea" rows="4" placeholder=""
                      maxlength="100" show-word-limit></el-input>
                      <p v-if="!canEdit" class="readonly-text"><pre>{{constipationDTO.constipationTakeMedicine}}</pre></p>
                    </template>
                  </sp-drop-sel>
                  <sp-drop-sel v-if="!(!canEdit && !noComform.numbness)" :disabled="!canEdit" v-model="noComform.numbness" label="手足麻木"/>
                  <sp-drop-sel @change="clearItem('discomfortOther',noComform.discomfortOther)" v-if="!(!canEdit && !noComform.discomfortOther)" :disabled="!canEdit" v-model="noComform.discomfortOther" label="其他" isSel>
                    <el-input v-if="canEdit" type="textarea" v-model="discomfortOtherDTO.discomfortOtherContent" rows="4" maxlength="500" show-word-limit resize="none" placeholder=""></el-input>
                    <p v-else class="readonly-text"><pre>{{discomfortOtherDTO.discomfortOtherContent}}</pre></p>
                  </sp-drop-sel>
                </div>
                <div class="symptom-item">
                  <sp-drop-sel @change="clearItem('mouthUlcer',noComform.mouthUlcer)" v-if="!(!canEdit && !noComform.mouthUlcer)" :disabled="!canEdit" v-model="noComform.mouthUlcer" isSel label="口腔溃疡" key="口腔溃疡">
                    <p class="symptom-title" style="margin-top: 0"><span>等级0-4<sup>*</sup></span><span></span></p>
                    <el-select style="width:100%" v-if="canEdit" placeholder="请选择" v-model="mouthUlcerDTO.mouthUlcerLevel" size="mini">
                      <el-option v-for="i in mouthUlcerArr" :label="i.label" :value="i.value" :key="'a_' + i.value"></el-option>
                    </el-select>
                    <p v-else class="readonly-text"><pre>{{getSelectLabel(mouthUlcerDTO.mouthUlcerLevel,mouthUlcerArr)}}</pre></p>
                  </sp-drop-sel>
                  <sp-drop-sel v-if="!(!canEdit && !noComform.nausea)" :disabled="!canEdit" v-model="noComform.nausea" label="恶心"/>
                  <sp-drop-sel @change="clearItem('diarrhea',noComform.diarrhea)" v-if="!(!canEdit && !noComform.diarrhea)" :disabled="!canEdit" v-model="noComform.diarrhea" isSel label="腹泻">
                    <p class="symptom-title" style="margin-top: 0"><span>次数？<sup>*</sup></span><span></span></p>
                    <div class="num-box" v-if="canEdit">
                    <el-input @input="e => diarrheaDTO.diarrheaNum = e.replace(/[^\d]/g,'').replace(/^0{2,}/g,'0')" maxlength="3" size="mini" v-model="diarrheaDTO.diarrheaNum" placeholder=""></el-input>次/ 
                    <el-input @input="e => diarrheaDTO.diarrheaDay = e.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" maxlength="3" size="mini" v-model="diarrheaDTO.diarrheaDay" style="margin-left:5px" placeholder=""></el-input>天</div>
                    <p v-if="!canEdit" class="readonly-text"><pre>{{diarrheaDTO.diarrheaNum}}次/{{diarrheaDTO.diarrheaDay}}天</pre></p>
                    <p style="margin:12px 0 0;border-bottom:1px solid #eee"></p>
                    <div class="flex">
                      <div style="margin-right:12px;flex:1">
                        <p class="symptom-title"><span>形状？<sup>*</sup></span><span></span></p>
                        <el-select :popper-append-to-body="false" v-if="canEdit" :disabled="!canEdit" placeholder="请选择" style="width:100%" v-model="diarrheaDTO.shape" size="mini">
                          <el-option v-for="i in shapeArr" :label="i.label" :value="i.value" :key="'d_' + i.value"></el-option>
                        </el-select>
                        <p v-if="!canEdit" class="readonly-text"><pre>{{getSelectLabel(diarrheaDTO.shape,shapeArr)}}</pre></p>
                      </div>
                      <div style="flex:1">
                        <p class="symptom-title"><span>处置？<sup>*</sup></span><span></span></p>
                        <el-select @change="diarrheaDTO.diarrheaTakeMedicine = ''" :popper-append-to-body="false" :disabled="!canEdit" placeholder="请选择" style="width:100%" v-model="diarrheaDTO.processing" size="mini">
                          <el-option v-for="i in diarrheaDict" :label="i.label" :value="i.value" :key="'e_' + i.value"></el-option>
                        </el-select>
                        <p v-if="!canEdit" class="readonly-text"><pre>{{getSelectLabel(diarrheaDTO.processing,diarrheaDict)}}</pre></p>
                      </div>
                    </div>
                    <template v-if="diarrheaDTO.processing == '2'">
                      <p v-show="diarrheaDTO.processing == '2'" style="margin:10px 0 0;border-bottom:1px dashed #eee"></p>
                      <p class="symptom-title" v-show="diarrheaDTO.processing == '2'"><span>服用药物<sup>*</sup></span><span></span></p>
                      <el-input @input="changeD" type="textarea" rows="4"
                      v-show="diarrheaDTO.processing == '2'"
                      v-model="diarrheaDTO.diarrheaTakeMedicine"
                      placeholder="" maxlength="100"
                      show-word-limit></el-input>
                      <p v-if="!canEdit" class="readonly-text"><pre>{{diarrheaDTO.diarrheaTakeMedicine}}</pre></p>
                    </template>
                  </sp-drop-sel>
                  <sp-drop-sel @change="clearItem('rash',noComform.rash)" v-if="!(!canEdit && !noComform.rash)" :disabled="!canEdit" v-model="noComform.rash" isSel label="皮疹">
                    <el-input v-if="canEdit" v-model="rashDTO.rashContent" type="textarea" rows="4" maxlength="500" show-word-limit resize="none" placeholder=""></el-input>
                    <p v-else class="readonly-text"><pre>{{rashDTO.rashContent}}</pre></p>
                  </sp-drop-sel>
                </div>
                <div class="symptom-item">
                  <sp-drop-sel v-if="!(!canEdit && !noComform.weak)" :disabled="!canEdit" v-model="noComform.weak" label="乏力"/>
                  <sp-drop-sel v-if="!(!canEdit && !noComform.vomit)" :disabled="!canEdit" v-model="noComform.vomit" label="呕吐"/>
                  <sp-drop-sel v-if="!(!canEdit && !noComform.hemorrhage)" :disabled="!canEdit" v-model="noComform.hemorrhage" label="出血"/>
                  <sp-drop-sel @change="clearItem('pain',noComform.pain)" v-if="!(!canEdit && !noComform.pain)" :disabled="!canEdit" v-model="noComform.pain" class="pain-drop-select" isSel label="疼痛">
                    <!-- <i class="pain-icon el-icon-plus" v-show="painDTO.length < 5 && canEdit" @click="addPainItem"></i> -->
                    <i class="pain-icon iconfont iconadd" v-show="painDTO.length < 5 && canEdit" @click="addPainItem"></i>
                    <el-tabs @tab-remove="tabsRemove" class="pain-tabs" :class="{'pain-tabs-center': !canEdit}" v-model="painPanel">
                      <el-tab-pane v-for="(s,z) in painDTO" :label="numType[z]" :name="String(z)" :key="z" :closable="!!z">
                        <pain :readonly="!canEdit" @change="changePainData(z,$event)" :item="s"/>
                      </el-tab-pane>
                    </el-tabs>
                  </sp-drop-sel>
                </div>
                  <!-- <div class="cl h10" id="h10" style="clear:both"></div> -->
                </div>
              <!--服药情况-->
              <template v-if="canEdit || (!canEdit && base.takeMedicineSituation)">
                <sp-title class="margin-8" text="服药情况" round :size="14"/>
                <div class="list-box" style="margin-bottom:20px">
                  <el-input v-if="canEdit" v-model="base.takeMedicineSituation" rows="4" resize="none" maxlength="500" show-word-limit type="textarea" placeholder="请输入"/>
                  <p v-else class="readonly-text" style="margin-bottom:20px"><pre>{{base.takeMedicineSituation}}</pre></p>
                </div>
              </template>
              <!--不良生活习惯-->
              <template v-if="canEdit || (!canEdit && base.badLivingHabits)">
                <sp-title class="margin-8" text="不良生活习惯" round :size="14"/>
                <div class="list-box" style="margin-bottom:20px">
                  <el-input v-if="canEdit" v-model="base.badLivingHabits" rows="4" resize="none" maxlength="500" show-word-limit type="textarea" placeholder="请输入"/>
                  <p v-else class="readonly-text"><pre>{{base.badLivingHabits}}</pre></p>
                </div>
              </template>
              <!--患者状态-->
              <sp-title :class="base.status == 5 ? 'margin-8' : 'margin-20'" isNeed text="患者状态" round :size="14">
                <el-radio-group @change="base.otherStatusContent = ''" :disabled="!canEdit" class="aegle-radio" v-model="base.status">
                  <el-radio :label="1">正常</el-radio>
                  <el-radio :label="2">失访</el-radio>
                  <el-radio :label="3">死亡</el-radio>
                  <el-radio :label="5">其他</el-radio>
                </el-radio-group>
              </sp-title>
              <div class="list-box" style="margin-bottom:20px" v-if="base.status == 5">
                <el-input v-if="canEdit" v-model="base.otherStatusContent" maxlength="100" show-word-limit :rows="4" resize="none" placeholder="请输入"></el-input>
                <p v-else class="readonly-text"><pre>{{base.otherStatusContent}}</pre></p>
              </div>
              <!--其他补充-->
              <template v-if="canEdit || (!canEdit && base.otherSupplements)">
                <sp-title class="margin-8" text="其他补充" round :size="14"/>
                <div class="list-box" style="margin-bottom:20px">
                  <el-input v-if="canEdit" v-model="base.otherSupplements" rows="4" resize="none" maxlength="500" show-word-limit type="textarea" placeholder="请输入"/>
                  <p v-else class="readonly-text"><pre>{{base.otherSupplements}}</pre></p>
                </div>
              </template>
              <!--常规提醒-->
              <sp-title :class="base.reminder == 1 ? 'margin-8' : 'margin-20'" isNeed text="常规提醒" round :size="14">
                <el-radio-group @change="clearItem('reminder',base.reminder)" :disabled="!canEdit" class="aegle-radio" v-model="base.reminder">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="2">无</el-radio>
                </el-radio-group>
              </sp-title>
              <cancerDialog @set="setCancer" :a="diseases" :b="diseaseTimes" :arr="diseaseArrCopy" :canEdit="canEdit" :reminder="base.reminder" v-show="base.reminder == 1"/>
              <!--关联CM上传外院资料-->
              <template v-if="type == 1 && tableData.length">
                <!--咨询医生后补充提醒-->
                <!-- <sp-title class="margin-8" text="咨询医生后补充提醒" round :size="14"/>
                <div class="list-box" style="margin-bottom:20px" v-show="!(!canEdit&&!base.supplementaryReminder)">
                  <el-input v-if="canEdit" v-model="base.supplementaryReminder" rows="4" resize="none" maxlength="500" show-word-limit type="textarea" placeholder="请输入"/>
                  <p v-else class="readonly-text"><pre>{{base.supplementaryReminder}}</pre></p>
                </div> -->
                <!--关联CM上传外院资料-->
                <sp-title class="margin-8" text="CM上传的外院资料" round :size="14"/>
                <div class="list-box" style="margin-bottom:20px">
                  <el-table
                  default-expand-all
                  class="source-follow-table"
                  :data="tableData"
                  :header-cell-style="headerCellStyle"
                  style="width: 100%">
                  <template slot="empty">
                    <img src="@/assets/images/empty.png" alt="">
                    <div style="margin-top:-50px">
                    <span>暂无数据</span>
                    </div>
                  </template>
                    <el-table-column type="expand">
                      <template slot-scope="scope">
                        <div class="expand-box" v-if="scope.row.content">
                          <h4>附件内容</h4>
                          <p>{{scope.row.content}}</p>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="caseDate" label="日期"/>
                    <el-table-column prop="typeName" label="二级目录"/>
                    <el-table-column prop="title" label="文书/指标名称"/>
                    <el-table-column label="上传附件">
                      <template slot-scope="scope">
                        <div class="source-link-box">
                          <!-- <el-popover
                          popper-class="source-popper"
                            v-if="scope.row.imgUrl.length"
                            placement="top"
                            width="350"
                            trigger="hover"
                            >
                            <p class="source-link" slot="reference"><i class="el-icon-picture-outline"></i>图片<span class="brage-blue">{{scope.row.imgUrl.length}}</span></p>
                            <div class="hover-box">
                              <p><a v-for="(s,k) in scope.row.imgUrl" :key="k" @click.prevent="gotoOther(s)" style="display:block;width:100%" target="blank" :href="s">{{s}}</a></p>
                            </div>
                          </el-popover> -->
                          <!-- <p class="source-link" style="cursor:pointer" v-if="scope.row.imgUrl.length" @click="showImg(scope.row.imgUrl)"><i class="el-icon-picture-outline"></i>附件<span class="brage-blue">{{scope.row.imgUrl.length}}</span></p> -->
                          <p class="source-link" style="cursor:pointer" v-if="scope.row.imgUrl.length" @click="showImg(scope.row.imgUrl)"><img width="15" style="margin-right:6px;margin-top:1px" :src="require('@/assets/images/photo.png')"/>附件<span class="brage-blue">{{scope.row.imgUrl.length}}</span></p>
                          <el-divider direction="vertical" v-if="scope.row.imgUrl.length && scope.row.dcmUrl.length"></el-divider>
                          <el-popover
                            visible-arrow
                            popper-class="source-popper"
                            v-if="scope.row.dcmUrl.length"
                            placement="top"
                            width="350"
                            trigger="hover"
                            >
                            <p class="source-link" slot="reference"><i class="iconfont iconfujian"></i>Dicom<span class="brage-blue">{{scope.row.dcmUrl.length}}</span></p>
                            <div class="hover-box">
                              <p v-for="(s,k) in scope.row.dcmUrl" :key="k" @click.prevent="gotoOther(s)">{{s}}</p>
                            </div>
                          </el-popover>
                          <el-divider direction="vertical" v-if="scope.row.imgUrl.length && scope.row.externalUrl.length && !scope.row.dcmUrl.length"></el-divider>
                          <el-divider direction="vertical" v-if="scope.row.externalUrl.length && scope.row.dcmUrl.length"></el-divider>
                          <el-popover
                            popper-class="source-popper"
                            v-if="scope.row.externalUrl.length"
                            placement="top"
                            width="350"
                            trigger="hover"
                            >
                            <p class="source-link" slot="reference"><i class="iconfont iconfujian"></i>链接<span class="brage-blue">{{scope.row.externalUrl.length}}</span></p>
                            <div class="hover-box">
                              <p v-for="(s,k) in scope.row.externalUrl" :key="k" @click.prevent="gotoOther(s)">{{s}}</p>
                            </div>
                          </el-popover> 
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </div>
          </div>
        </el-scrollbar>
        <div class="add-footer">
          <template v-if="canEdit">
            <p :class="{'btn-disabled': !canEdit}" class="btn-cancle" @click="btnClick(2)">取消</p>
            <p :class="{'btn-disabled': !canEdit}" class="btn-temporary" v-if="type == 2" @click.stop="btnClick(3)">暂存</p>
            <p :class="{'btn-disabled': !canEdit}" class="btn-temporary" v-if="type == 1" @click.stop="btnClick(4)">待补充</p>
            <p :class="{'btn-disabled': !canEdit}" class="btn-save" @click="btnClick(1)">完成</p>
          </template>
        </div>
      </template>
    </div>
    <!-- <spImgView title="图片" :visible.sync="visible" :list="currentImgUrl"/> -->
    <SpPreview title="附件" :visible.sync="visible" :list="currentImgUrl"/>
  </div>
</template>
<script>
import SpPreview from '../AeglePreview';
import manageRecord from './main.js'
export default manageRecord
</script>
<style lang="less">
.el-popover.source-popper {
  // width: unset!important;
  width: 350px;
  max-width: 350px;
  padding: 10px!important;
  .hover-box {
      max-width: 350px;
      p {
        max-width: 350px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: rgba(0,0,0,0.70);
        line-height: 34px;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #1890FF;
        cursor: pointer;
        a {
          color: #1890FF;
        }
      }
    }
}
.follow-list-wrapper .follow-list-scroll {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.manage-follow-wrapper .add-container {
  >.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-input__inner,
  .el-textarea__inner {
    border-radius: 2px;
    border-color: rgba(0,0,0,0.15);
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
  }
  .el-date-editor .el-range-separator {
    color: rgba(0,0,0,0.25);
  }
}
.pain-tabs {
  >.el-tabs__header {
    height: 34px;
    line-height: 34px;
    border-color: #eee;
    margin-bottom: 0;
    .el-tabs__item {
      height: 34px;
      line-height: 34px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: rgba(0,0,0,0.40);
      padding:0 8px!important;
      &.is-active {
        color: rgba(0,0,0,0.80);
        &:after {
          left: 37%;
        }
      }
      &:nth-child(2) {
      padding: 0 16px 0 0!important;
      &.is-active {
        &:after {
          left: 35%;
        }
      }
    }
    }
    
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .is-active:after {
      top: 31px;
      width: 12px;
    }
  }
  &.pain-tabs-center {
    .el-tabs__nav {
      width: 100%;
      text-align: center;
      .el-tabs__item:first-child {
        padding: 0 6px!important;
      }
    }
  }

  .el-tabs__active-bar {
    opacity: 0;
  }
}
.source-follow-table {
  .el-table__expanded-cell {
    background: rgba(243,244,248,0.30);
    padding: 0;
    border-bottom: none;
  }
  .source-link-box {
    display: flex;
    align-items: center;
    cursor: default;
    .el-divider--vertical {
      margin: 0 10px;
      background-color: rgba(0,0,0,0.20);
    }
  }
}
</style>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.follow-record-wrappe {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  .follow-list-wrapper {
    width: 405px;
    background-color: #fff;
    margin-right: 12px;
  }
  .manage-follow-wrapper {
    flex: 1;
    padding: 20px 20px 0;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    background-color: #fff;
    .pain-icon {
      position:absolute;
      right:12px;
      top: 7px;
      cursor: pointer;
      font-size: 22px;
      color: #B0B8CF;
      z-index: 2;
    }
    .add-container {
      height: calc(100% - 51px);
      // height: 100%;
      .el-dropdown-link {
          display: flex;
          align-items: center;
          color: #1890FF;
          font-size: 13px;
          font-family: PingFangSC, PingFangSC-Regular;
          letter-spacing: 0.2px;
          cursor: default;
          i {
            font-size: 14px;
          }
          .show-text {
            margin: 0 3px;
          }
          .brage-blue {
            display: block;
            width: 13px;
            height: 13px;
            line-height: 13px;
            text-align: center;
            font-size: 12px;
            border-radius: 50%;
            background-color: #1890ff;
            color: #fff;
            margin-top: 2px;
          }
        }
      .list-box {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        &.flex {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          >div {
            width: 25%;
            box-sizing: border-box;
            margin-bottom: 20px;
          }
          .therapeutic {
            height: 22px;
            line-height: 20px;
            // background: rgba(255,149,3,0.10);
            // border: 1px solid rgba(255,149,3,0.20);
            background: #fff;
            border: 1px solid #C0C4CC;
            border-radius: 12px;
            padding: 0 8px;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.8);
            // color: #ff9503;
            &.radiotherapy,
            &.radiotherapy1 {
              border-color: rgba(255, 173, 210, 1);
              background-color: rgba(255, 240, 246, 1);
              color: #eb2f96;
            }
            &.chemotherapy,
            &.chemotherapy1 {
              border-color: rgba(145, 213, 255, 1);
              background-color: rgba(230, 247, 255, 1);
              color: #1890ff;
            }
            &.postoperative {
              border-color: rgba(255, 187, 150, 1);
              background-color: rgba(255, 242, 232, 1);
              color: #fa541c;
            }
            &.preoperative {
              border-color: rgba(254, 218, 98, 1);
              background-color: rgba(255, 251, 230, 1);
              color: #faad14;
            }
            &.radioGreen {
              border-color: #52c41a;
              background-color: #f6ffed;
              color: #52c41a;
            }
          }
        }
        p {
          margin: 0;
          color: rgba(0,0,0,0.80);
          // line-height: 20px;
          letter-spacing: 0.21px;
          sup {
            color: #E92626;
          }
        }
        p.second-title {
          color: rgba(0,0,0,0.60);
          margin-bottom: 8px;
          display: flex;
        }
        &.symptom {
          // height: 0;
          display: flex;
          flex-wrap: wrap;
          box-sizing: border-box;
          margin-bottom: 10px;
          // position: relative;
          .symptom-item {
            width: calc((100% - 20px) / 3);
            margin-right: 10px;
            // margin-bottom: 10px;
            &:nth-child(3n){
              margin-right: 0;
            }
            >div {
              margin-bottom: 10px;
            }
          }
          .num-box {
            display: flex;
            align-items: center;
            .el-input {
              flex: 1;
              margin-right: 5px;
            }
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: rgba(0,0,0,0.60);
          }
        }
        .repeat-select {
          display: flex;
          align-items: center;
          position: relative;
          &::before {
            content: '';
            display: block;
            width: 0;
            height: 20px;
            border-right: 1px solid  rgba(0,0,0,0.20);
            margin: 0 10px;
          }
        }
        .symptom-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: rgba(0,0,0,0.60);
          margin: 12px 0 4px;
          sup {
            color: #E92626;
          }
          span:first-child {
            display: flex;
          }
          span:last-child {
            color: rgba(0,0,0,0.40);
          }
        }
      }
      .readonly-text {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0,0,0,0.80);
        letter-spacing: 0.21px;
        pre {
          margin: 0;
          font-family: PingFangSC, PingFangSC-Regular;
          white-space: pre-wrap;
          line-height: 20px;
        }
      }
      .repeat-box {
        display: flex;
        align-items: center;
        height: 32px;
      }
      .margin-20 {
        margin-bottom: 20px;
      }
      .margin-8 {
        margin-bottom: 8px;
      }
      .dashed-line {
        width: 100%;
        height: 0;
        border-bottom: 1px dashed #d9d9d9;
        margin-bottom: 32px;
      }
    }
    .add-footer {
      display: flex;
      justify-content: flex-end;
      p {
        margin: 0;
        width: 61px;
        height: 32px;
        line-height: 30px;
        background: #ffffff;
        border: 1px solid #e92626;
        border-radius: 2px;
        text-align: center;
        color: #e92626;
        cursor: pointer;
        &:hover,
        &:active {
          opacity: 0.8;
        }
      }
      p.btn-temporary {
        background: rgba(24,144,255,0.10);
        border: 1px solid #1890ff;
        color: #1890FF;
      }
      p.btn-save {
        background: #1890ff;
        color: #fff;
        border-color: #1890FF;
      }
      p + p {
        margin-left: 8px;
      }
      .btn-disabled {
        cursor: not-allowed;
      }
    }
    .expand-box {
      padding: 12px 10px;
      // padding: 0 12px;
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      border-bottom: 1px solid #EBEEF5;
      h4 {
        text-align: left;
        color: rgba(0,0,0,0.60);
        line-height: 18px;
        margin: 0;
        padding-bottom: 8px;
      }
      p {
        text-align: left;
        color: rgba(0,0,0,0.80);
        padding-bottom: 16px;
      }
      >div {
        a {
          color: #1890ff;
          padding-bottom: 8px;
        }
        &:last-child {
          padding-bottom: 0;
        }
      }
      
    }
    .source-link {
      display: flex;
      align-items: center;
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #1890ff!important;
      i {
        color: #1890ff;
        margin-right: 6px;
        font-size: 15px;
      }
      .brage-blue {
        display: block;
        width: 13px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 50%;
        background-color: #1890ff;
        color: #fff;
        margin-top: 2px;
        margin-left: 6px;
      }
    }
  }
}
.follow-list-wrapper {
  > p {
    margin-top: 0px;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
  }
  .follow-list-scroll {
    height: calc(100% - 61px);
  }
  .follow-list {
    width: 405px;
    padding: 0 20px 20px 20px;
    .cur-follow,
    .past-follow {
      width: 100%;
    }
  }
}

.cur-follow-list-box,
.past-follow-list-box {
  cursor: pointer;
  margin-bottom: 12px;
  width: 100%;
  border: 1px solid #e2ebfd;
  position: relative;
  background-color: #f6f9ff;
  display: flex;
  justify-content: center;
  .status {
    position: absolute;
    left: -10px;
    font-size: 12px;
  }
  .cur-follow-list-content {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: rgba(0,0,0,0.60);
    width: 365px;
    padding: 0 16px 16px;
    overflow: hidden;
    >div {
      display: flex;
      align-items: center;
      margin: 0;
      width: 365px;
      height: 44px;
      line-height: 43px;
      border-bottom: 1px dashed #E2EBFD;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: rgba(0,0,0,0.80);
      text-indent: 44px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  p {
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    width: 100%;
    margin: 8px 0 0;
    span:nth-of-type(2) {
      color: rgba(0,0,0,0.80);
      margin-left: 8px;
    }
    i {
      color: #B0B8CF;
      font-size: 14px;
      margin-right: 3px;
    }
  }
  .status-icon {
    display: inline-block;
    font-size: 12px;
    // width: 52px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -6px;
    top: 11px;
    z-index: 999;
    .status-icon-font {
      color: #fff;
      margin-left: 2px;
      margin-top: 1px;
      font-weight: 400;
      img {
        width: 52px;
        height: 25px;
      }
    }
  }
  // .follow-success {
  //   background-image: url("~@images/cm/bg_finish.png");
  // }
  // .un-start {
  //   background-image: url("~@images/cm/bg_unStart.png");
  // }
  // .follow-last {
  //   background-image: url("~@images/cm/bg_dead.png");
  // }
  // .follow-dead {
  //   background-image: url("~@images/cm/bg_dead.png");
  // }
  // .out-time-un-finish {
  //   width: 65px;
  //   background-image: url("~@images/cm/bg_outTImeUnFinish.png");
  // }
  // .out-time-finish {
  //   width: 50px;
  //   background-image: url("~@images/cm/bg_outTimeFinish.png");
  // }
}
.active {
  border-right: 3px solid #407df3 !important;
}
</style>