<!-- 跌倒评估 -->
<template>
    <div class="patient-container">
      <patient-sidebar :id="patient_id" defaultActive="5-1"></patient-sidebar>
      <div>
        <div class="patient-app-container advice-container app-container">
          <div class='content_top' style="width: 95%;margin-bottom: 20px;">
            <div style="font-size: 20px">跌倒评估评分</div>
            <div>
              <el-button>历史评分</el-button>
              <el-button @click="dialogVisible = true">告知书</el-button>
            </div>
          </div>
         
          <div class='content_top' style="width: 95%;">
            <div style="width: 49%; ">
              <div style="margin-bottom: 50px;">
                <div class="biaotou content_top">
                <div>危险评估</div>
                <div style="color: black;">总分：{{ tumble_Totalpoints }}</div>
                </div>
                <table class="table" border style="width: 100%;">
                  <thead>
                    <tr>
                      <th style="width: 20%;">项目</th>
                      <th>分值</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="bg_color">
                      <td class="start">年龄</td>
                      <td>
                        <div class="jiange">
                          <span v-for="item in nianlin" class="rightjiange" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                          
                      </td>
                    </tr>
                    <tr>
                      <td class="start">既往史</td>
                      <td>
                        <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                          <span  v-for="item in jiwnag" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr class="bg_color">
                      <td class="start">意识状态</td>
                      <td>
                        <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                          <span v-for="item in yishizt" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="start">感官</td>
                      <td>
                        <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                          <span v-for="item in ganguan" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr class="bg_color">
                      <td class="start">身体状况</td>
                      <td>
                        <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                          <span v-for="item in shentizk" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="start">使用药物</td>
                      <td>
                        <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                          <span v-for="item in syyaowu" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr class="bg_color">
                      <td class="start">排泄</td>
                      <td>
                        <div class="jiange">
                          <span v-for="item in paixie" class="rightjiange" @change="handleCheckedCitiesChange">
                            <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                        
                      </td>
                    </tr>
                    <tr>
                      <td class="start">自理能力</td>
                      <td>
                        <div class="jiange">
                          <span v-for="item in zilinl" class="rightjiange">
                            <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                        
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div style="">
                <div class="biaotou">
                  <span>预防效果</span> 
                </div>
                <table class="table" border style="width: 100%;">
                  <thead>
                    <tr>
                      <th style="width: 20%;">标题</th>
                      <th>事件</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="start">预防效果</td>
                      <td>
                        <div class="jiange">
                          <span v-for="item in xiaoguo" class="rightjiange">
                            <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;{{ item }}</label>
                          </span>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="content_top" style="margin-top: 10px;">
                <div>
                  <span>评估日期：</span>
                  <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                    :clearable="false"
                    style="width: 150px;">
                  </el-date-picker>
                </div>
                <div>
                  <span>护士：</span>
                  <el-select v-model="value" placeholder="请选择" >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      style="width:150px;">
                    </el-option>
                  </el-select>
                </div>
                <el-button type="primary" >确认</el-button>
              </div>
            </div>
            <div style="width: 49%;">
              <div style="margin-bottom: 50px;">
                <div class="biaotou">
                  <span>预防措施</span> 
                </div>
                <table class="table" border style="width: 100%;">
                  <thead>
                    <tr>
                      <th style="width: 50%;">健康宣教</th>
                      <th style="width: 50%;">护理措施</th>
                    </tr>
                  </thead>
                  <tr>
                    <td colspan="2" style="height: 40px;">
                      <div style="width: 100%;height: 343px; overflow: auto;border: none;">
                        <table class="table table2" border style="width: 100%;">
                          <tr>
                            <td>
                              <div class="xiaojige">
                                  <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;告知病人及家属病人有跌倒的危险</label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                  <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;在病人床头悬挂"防跌倒"、"防坠床"警示牌</label>
                              </div>
                            </td>
                          </tr>
                          <tr class="bg_color">
                            <td>
                              <div class="xiaojige">
                                  <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                    告知家属24小时陪伴，尤其在患者活动锻炼时，应有人陪伴，若离开请与值班护士联系</label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                  <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;呼叫器及用物放置病人易取处，教会使用呼叫器</label>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <div class="xiaojige">
                                <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                  告知病人及家属病人关于药物作用的注意事项
                                </label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                <label><input type="checkbox" name="ball" value="volleyball" />
                                  &nbsp;及时给予便器，床上（边）大小便
                                </label>
                              </div>
                            </td>
                          </tr>
                          <tr class="bg_color">
                            <td>
                              <div class="xiaojige">
                                  <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                    穿合适的裤子，以免绊倒；穿防滑鞋</label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;使用床档 </label>
                                <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;使用约束带 </label>
                                <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;使用助行器 </label>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <div class="xiaojige">
                                <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                  告知患者改变体位欲活动时应遵循“三步曲”，即平卧30秒→双腿下垂30秒→行走，避免突然改变体位，
                                  引起体位性低血压，特别是夜间
                                </label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;需要时协助病人上、下床  
                                </label>
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;协助病人如厕
                                </label>
                              </div>
                            </td>
                          </tr>
                          <tr class="bg_color">
                            <td>
                              <div class="xiaojige">
                                <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                  如出现双眼发黑、下肢无力、行走不稳和不能移动时，立即原地坐/蹲下或靠墙，呼叫他人帮助
                                </label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;避免地面积水、湿滑  
                                </label>
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;消除床旁及通道障碍
                                </label>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <div class="xiaojige">
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;指导病人使用病房及卫生间扶手
                                </label><br>
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;其他有关告知
                                </label>
                              </div>
                            </td>
                            <td>
                              <div class="xiaojige">
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;病床调至合适高度
                                </label>
                                <label>
                                  <input type="checkbox" name="ball" value="volleyball" />&nbsp;及时锁上病床及轮椅的轮轴
                                </label>
                              </div>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td> 
                  </tr>        
                  <tr>
                    <td style="">
                      <div class="jian">
                        <el-button type="text" @click="add">+添加</el-button>
                      </div>
                      
                    </td>
                    <td style="">
                      <div class="jian">
                        <el-button type="text" @click="add">+添加</el-button>
                      </div>
                    </td>
                  </tr>       
                </table>
              </div>

              <div style="">
                <div class="biaotou">
                  <span>透析间期跌倒事件</span> 
                </div>
                <table class="table" border style="width: 100%;">
                  <thead>
                    <tr>
                      <th style="width: 20%;">标题</th>
                      <th>事件</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="start">透析间期跌倒事件</td>
                      <td>
                        <div style="display: inline-block;margin-right: 10px;">
                          <span>日期：</span>
                          <el-input v-model="input" style="width: 120px;"></el-input>
                        </div>
                        <div class="jiange" style="display: inline-block;">
                          
                          <span v-for="item in touxidiedao" class="rightjiange">
                            <label><input type="checkbox" name="ball" value="volleyball" />&nbsp{{ item }}</label>
                          </span>
                       
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <hr style="margin-top: 20px; background-color: #DCDFE6; height: 1px; border: none;"/>
          <div class="shuoming">
            <p>说明：</p> 
            <p>1. 新患者转入由当班透析责任护士评估。</p>
            <p>2. 总分≥4分为高危跌倒，需有标识牌，签署《预防跌倒/坠床告知书》。</p>
            <p>3. 评分完成即在采用相应的护理措施栏里“√”表示执行。</p>
            <p>4. 病情改变（如意识、肢体活动等改变）由责任护士即刻重新评估。</p>
            <p>5. ≥4分的每天评估，<span><</span>4分的每周评估。</p>
          </div>

        </div>
      </div> 
      <!-- 添加弹窗页面 -->
      <el-dialog
        title="添加"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6}"
            placeholder="请输入需要添加的内容.."
            v-model="textarea2">
          </el-input>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 告知书 -->
      <el-dialog
          title="内容详情"
          :visible.sync="dialogVisible"
          width="50%"
          
          class="status_change">
          <div>
              <Falloutbedprint></Falloutbedprint>
          </div>
          
      </el-dialog>
    </div>
  </template>

<script>
  import PatientSidebar from '../components/PatientSidebar'
  import Falloutbedprint from './Falloutbedprint.vue'
  export default {
  //   name: 'CourseOfDisease',
    components: {
      PatientSidebar,
      Falloutbedprint
    },
    data() {
      return {
        patient_id:0,
        value1:'',
        value:'',
        input:'',
        tumble_Totalpoints:0,
        options:[],
        checkList:[],
        nianlin:['≥65岁（1分）','<65（1分）'],
        jiwnag:['有跌倒史（2分）','有坠床史（2分）','晕厥（2分）','低血压（2分）'],
        yishizt:['烦躁（4分）','谵妄（3分）','嗜睡（2分）','模糊（2分）','痴呆（2分）','昏迷（1分）'],
        ganguan:['头晕（4分）','视觉障碍（2分）','听力障碍（2分）'],
        shentizk:['借助器械（3分）','肢体残缺（3分）','偏瘫（3分）','肌肉震颤麻痹（2分）','截瘫（3分）','乏力（1分）','关节僵硬、变形、疼痛（3分）','失眠（1分）'],
        syyaowu:['镇静安眠药（2分）','降压药（1分）','降糖药（1分）','其他高危药物（1分）'],
        paixie:['便秘（2分）','腹泻（1分）','尿频（1分）'],
        zilinl:['无（4分）','部分（3分）'],
        xiaoguo:['未发生跌倒','发生跌倒','发生坠床'],
        touxidiedao:['发生跌倒','发生坠床'],

        centerDialogVisible:false,
        dialogVisible:false,
        textarea2:'',
      }
      
    },
    created() {
    
    },
    methods: {
      add(){
        this.centerDialogVisible =true
      },
      handleCheckedCitiesChange(e){
        var ball = e.target.value     
        var jiequ =(ball.split('（')[1].split('分')[0]) * 1
        if(e.target.checked==true){
          this.tumble_Totalpoints=this.tumble_Totalpoints + jiequ
          return this.tumble_Totalpoints
        }else{
          this.tumble_Totalpoints=this.tumble_Totalpoints-jiequ
          return this.tumble_Totalpoints
        }
      }
    }
  }
</script>

  <style rel="stylesheet/css" lang="scss" scoped>
    .content_top{
      display: flex;
      justify-content: space-between;
      
    }
    .table{
        border: 1px solid #DCDFE6;
        border-collapse:collapse;
        border-spacing: 0;
        thead th{
            background: #0077ff9f;
            color: white;
            text-align: center;
            height: 40px;
        }
        tbody td{
           height: 40px;
           padding: 5px;
        }
        .start{
            text-align: center;
        }
        .bing{
            width: 150px;
            text-align: center;
        }
        .bg_color{
            background: rgb(243, 240, 240);
        }
        .jiange{
            margin-left: 20px;
            // color: black;
        }
        .xiaojige{
          margin-left: 10px;
        }
        .rightjiange{
          margin-right: 40px;
          font-size: 15px;
        }
        .ttbwzz-type-a {
          min-width: 80px;
          margin-right: 30px;
          padding: 5px 0px;
          font-size: 15px;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }
    .shuoming p{
      margin-top: 5px;
      color: rgb(167, 165, 165);
    }
    .biaotou{
      font-size: 18px;
      margin-bottom: 10px;
      color: #0077ff9f;
      // background-color: '#409eff';
    }
    ::-webkit-scrollbar {
        width: 5px;
    }
    ::-webkit-scrollbar-track {
        /*background black*/
        border-radius: 5px;
        background-color: white;
    }
    .table2 tr td{
      width: 50%;
      height: 40px;
      padding: 5px;
    }

  </style>
  <style lang="scss">
  .status_change{
      
      .el-dialog__header{
          background-color:#eff2f5;
          .el-dialog__title,.el-dialog__headerbtn i{
          color: #666666;
          }
      }
  }
  .el-dialog {
      left: 50% !important;
      position: fixed !important;
      top: 40% !important;
      transform: translate(-50%, -50%) !important;
      margin-top: 0 !important;

  }
</style>
  