<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-5"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
                <div class='content_top' style="width: 100%;margin-bottom: 20px;">
                    <div style="font-size: 20px;"> 住院患者导管脱落危险因素评估记录表</div>
                    <div>
                        <el-button>历史评分</el-button>
                    </div>
                </div>

                <div>
                  <table class="table" border="1" style="width: 100%;">
                    <thead>
                      <tr>
                          <th style="width: 180px;">项目</th>
                          <th style="width: 800px;">分值</th>
                          <th>护理措施</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="start">A.脱管后风险程度</td>
                        <td>
                          <div class="jiange">
                            <el-radio-group v-model="radio" @change="handleCheckedCitiesChange">
                              <el-radio v-for="(item,index ) in tuoguan" :label="item" :key="index" style="">{{ item }}</el-radio>
                            </el-radio-group>
                          </div>
                        </td>
                        <td rowspan="3">
                          <div style="vertical-align: top; color: black; padding: 5px;">
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;1.管道维护，导管脱落严重后果及预防措施的健康教育；</label> <br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;2.床边悬挂警示标识（＞9分悬挂）；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;3.正确妥善固定；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;4.正确卧位及床上活动方式， 病人带管下床活动时， 将引流管固定在病人的衣服或裤子上；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;5.加强巡视，及时发现满足患者需要；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;6.严格交接班，各班重点交接，观察外露长度，必要时记录；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;7.昏迷、暴躁、不合作病人，根据医嘱使用镇静剂和约束带；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;8.进行诊疗护理需要移动患者时，根据医嘱使用镇静剂和约束带；</label><br/>
                            <label><input name="ball" type="checkbox" value="football" />&nbsp;9.对于气管插管清醒患者，进行心理疏导和安全教育。</label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td class="start">B.患者意识程度</td>
                        <td>
                          <div class="jiange">
                              <el-radio-group v-model="radio1"  @change="handleCheckedCitiesChange">
                                  <el-radio v-for="(item,index ) in yishi" :label="item" :key="index">{{ item }}</el-radio>
                              </el-radio-group>
                          </div>
                        </td>                           
                      </tr>
                      <tr>
                        <td class="start">C.患者配合程度</td>
                        <td>
                          <div  class="jiange">
                              <el-radio-group v-model="radio2" @change="handleCheckedCitiesChange">
                                <el-radio v-for="(item,index ) in peihe" :label="item" :key="index">{{ item }}</el-radio>
                              </el-radio-group>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div class="content_top" style="margin: 10px 0px;">
                  <div>
                      <div class="bottoms">
                      <span>总分:</span>
                      <el-input v-model="duct_Totalpoints" style="width: 100px;"></el-input>分
                      </div>

                      <div class="bottoms">
                          <span>评估日期:</span>
                          <el-date-picker
                              v-model="value1"
                              type="date"
                              placeholder="选择日期"
                              :clearable="false"
                              style="width: 150px;">
                          </el-date-picker>
                      </div>

                      <div class="bottoms">
                          <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>
                      
                  </div>
                  <div style="margin:5px 10px;">
                    <el-button type="primary">确认</el-button>
                  </div>
                </div>
                <hr style="border:none;height:1px;background:#DCDFE6;"/><!--水平线-->
                <div style="margin-top: 20px;">
                    <p>患者知情同意书：我对住院期间发生导管脱落的风险及预防措施已知晓，并给予配合。</p>
                    <div class="zhuangui">
                        <p style="display: inline-block; margin-right: 70px;">患者/家属签字: <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span></p>
                        <p style="display: inline-block;">
                            日期：
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期"
                                style="width: 150px;">
                            </el-date-picker>
                        </p>
                    </div>
                    <div class="zhuangui">
                        <span>转归：</span>
                        <el-radio v-model="radio" label="1">脱落</el-radio>
                        <el-radio v-model="radio" label="2">未脱落</el-radio>
                    </div>
                    <div class="zhuangui">
                        <p style="display: inline-block; margin-right: 30px;">
                            评估人签字: 
                            <el-select v-model="value" placeholder="请选择" style="width: 120px;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </p>
                        <p style="display: inline-block;">
                            日期：
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期"
                                style="width: 150px;">
                            </el-date-picker>
                        </p>
                    </div>
                    <div class="zhuangui">
                        <p style="display: inline-block; margin-right: 30px;">
                            护士长签字: 
                            <el-select v-model="value" placeholder="请选择" style="width: 120px;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </p>
                        <p style="display: inline-block;">
                            日期：
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期"
                                style="width: 150px;">
                            </el-date-picker>
                        </p>
                    </div>
                </div>
                <hr style="margin: 10px 0px;border:none;height:1px;background:#DCDFE6;"/><!--水平线-->
                <div class="shuoming">
                    <p>说明：</p>
                    <p>1.＜5分为正常，5~8分为危险，≥9分为高度危险。</p>
                    <p>2.导管脱落危险因素≥5分，需填写该表。</p>
                    <p>3.常规情况下，评分5~8分，至少每天评估一次；评分≥9，至少每班评估一次，紧急与特殊情况，应随时评估。</p>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
  components:{
    PatientSidebar
  },
  data(){
    return{
      patientID:0,
      value1:'',
      radio:'',
      radio1:'',
      radio2:'',
      radio_val:null,
      radio1_val:null,
      radio2_val:null,
      // duct_Totalpoints:0,
      options:[],
      input:'',
      value:'',
      tuoguan:['低危导管 (1分)','中危导管 (2分)','高危导管 (3分)'],
      yishi:['意识清醒 (0分)','中昏迷、深昏迷 (1分)','嗜睡、昏睡 (2分)','浅昏迷 (3分)','意识模糊 (4分)'],
      peihe:['完全配合 (1分)','部分配合 (2分)','不配合 (3分)']
    }
  },
  methods:{
    handleCheckedCitiesChange(e){
      const ball=e
      const jiequ =(ball.split('(')[1].split('分')[0]) * 1
      if(e == this.radio){
        this.radio_val = jiequ
      }
      if(e == this.radio1){
        this.radio1_val = jiequ
      }
      if(e == this.radio2){
        this.radio2_val = jiequ
      }
    },
  },
  computed:{
    duct_Totalpoints(){
      return this.radio_val + this.radio1_val + this.radio2_val
    }
  }
}
</script>
<style 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;
           .el-radio {
              color: #101010;
              cursor: pointer;
              margin-right: 30px;
              font-size: 15px !important;
            }
        }
        .start{
            text-align: center;
        }
        .bing{
            width: 150px;
            text-align: center;
        }
        .bg_color{
            background: rgb(243, 240, 240);
        }
        .jiange{
            // margin-left: 20px;
            padding-left: 10px;
            color: black;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px; 
    }
    .shuoming p{
      margin-top: 5px;
      color: rgb(167, 165, 165);
    }
    .zhuangui{
        margin-top: 10px;
    }
    
</style>