<template>
  <div class="page_longDialysis">
    <div class="box">
      <div class="info">
        <div class="photo">
          <img src="../../assets/images/one.jpg" alt />
        </div>
        <div class="infoRight">
          <div class="rightTop">
            <span class="name">{{patientform.name}}</span>
            <span>{{patientform.sex}}</span>&ensp;|
            <span>{{patientform.age}}岁</span>
          </div>
          <div class="rightBottom">
            <p class="num">
              [透析号：
              <span>{{patientform.dialysis_no}}</span>]
            </p>
            <div class="imgList">
              <img src="../../assets/images/b1.png" alt />
              <img src="../../assets/images/b2.png" alt />
              <img src="../../assets/images/b3.png" alt />
              <img src="../../assets/images/b4.png" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <el-input
        placeholder="输入医嘱内容"
        prefix-icon="el-icon-search"
        v-model="searchVal"
      ></el-input>
    </div>
    <div class="time">
      <van-cell @click="showPopup(1)">
        {{ startTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          @cancel="show1 = false"
          @confirm="chooseStartTime"
        />
      </van-popup>
      <div class="line">-</div>
      <van-cell @click="showPopup(2)">
        {{ endTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          @cancel="show2 = false"
          @confirm="chooseEndTime"
        />
      </van-popup>
    </div>

    <div class="statOrder">
      <div class="statOrderOne" v-for="item in this.longDialysis" :key="item.id">
        <van-swipe-cell>
          <van-cell :border="false">
              <template>
               <div class="custom-title">{{RecordTime(item.record_date)}}</div>
            </template>
            <van-icon
              slot="right-icon"
              name="ellipsis"
              style="line-height: inherit;"
              @click="onClick(2)"
            />
          </van-cell>
          <template slot="right">
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>

        <van-action-sheet
          v-model="show3"
          :actions="actions"
          cancel-text="取消"
        ></van-action-sheet>
        <!-- <div class="title">
          <i class="header-icon el-icon-arrow-down"></i>
          <p class="year">2019.10.17</p>
          <p class="edit">编辑</p>
        </div>-->
        <div class="msg">
          <ul class="msglist">
            <li>透析模式: <span>{{item.mode_id}}</span></li>
            <li>透析时长(h): <span>{{item.dialysis_duration_hour}}:{{item.dialysis_duration_minute}}</span></li>
            <li>血流量(ml/min): <span>{{item.blood_flow_volume}}</span></li>
            <li>目标超滤量(ml): <span>{{item.target_ultrafiltration}}</span></li>
            <li>透析液配方: <span>{{item.dialysate_formulation}}</span></li>
            <li>抗凝剂: <span>{{item.anticoagulant}}</span></li>
            <li>首剂(mg): <span>{{item.anticoagulant_shouji}}</span></li>
            <li>维持(mg/h): <span>{{item.anticoagulant_weichi}}</span></li>
            <li>总量(mg): <span>{{item.anticoagulant_zongliang}}</span></li>
            <li>置换量(L): <span>{{item.replacement_total}}</span></li>
            <li>钾(mmol/L): <span>{{item.kalium}}</span></li>
            <li>钠(mmol/L): <span>{{item.sodium}}</span></li>
            <li>钙(mmol/L): <span>{{item.anticoagulant_gaimingcheng}}</span></li>
            <li>碳酸氢根(mmol/L): <span>{{item.bicarbonate}}</span></li>
            <li>葡萄糖(mmol/L): <span>{{item.glucose}}</span></li>
            <li>透析液流量(ml/min): <span>{{item.dialysate_flow}}</span></li>
            <li>透析液温度(℃): <span>{{item.dialysate_temperature}}</span></li>
            <li>电导率(mS/cm): <span>{{item.conductivity}}</span></li>
          </ul>
        </div>
      </div>

    </div>

    <div class="add">
      <img src="../../assets/images/add4.png" alt />
    </div>
  </div>
</template>

<script>
const moment = require('moment')
import { getlongDialysis } from '@/api/patient/patient'
import { uParseTime } from '@/utils/tools'
export default {
  data() {
    return {
      searchVal: '',
      startTime: moment(new Date()).format('YYYY-MM-DD'),
      endTime: moment(new Date()).format('YYYY-MM-DD'),
      show1: false,
      show2: false,
      currentDate1: new Date(),
      currentDate2: new Date(),
      show3: false,
      actions: [
        { name: '编辑' },
        { name: '删除' },
        { name: '选项', subname: '描述信息' }
      ],
      longDialysis: [],
      patientform: {
        name: '',
        sex: '',
        age: '',
        dialysis_no: '',
        avatar: ''
      }
    }
  },
  methods: {
    showPopup(index) {
      if (index == 1) {
        this.show1 = true
      } else if (index == 2) {
        this.show2 = true
      }
    },
    chooseStartTime(value) {
      this.startTime = moment(value).format('YYYY-MM-DD')
      this.show1 = false
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.getlongDialysis(patientid, orgid, this.startTime)
    },
    chooseEndTime(value) {
      this.endTime = moment(value).format('YYYY-MM-DD')
      this.show2 = false
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.getlongDialysis(patientid, orgid, this.end)
    },
    onClick(index) {
      if (index === 1) {
        this.show3 = true
      } else if (index === 2) {
        this.show3 = true
      }
    },
    getlongDialysis(patientid, orgid, startTime, endTime) {
      getlongDialysis(patientid, orgid, this.startTime, this.endTime).then(response => {
        if (response.data.state === 1) {
          var dialysis = response.data.data.dialysis
          for (let index = 0; index < dialysis.length; index++) {
            console.log('hhh', dialysis[index].mode_id)
            if (dialysis[index].mode_id === 1) {
              dialysis[index].mode_id = 'HD'
            }
            if (dialysis[index].mode_id === 2) {
              dialysis[index].mode_id = 'HDF'
            }
            if (dialysis[index].mode_id === 3) {
              dialysis[index].mode_id = 'HD+HP'
            }
            if (dialysis[index].mode_id === 4) {
              dialysis[index].mode_id = 'HP'
            }
            if (dialysis[index].mode_id === 5) {
              dialysis[index].mode_id = 'HF'
            }
            if (dialysis[index].mode_id === 6) {
              dialysis[index].mode_id = 'SCUF'
            }
            if (dialysis[index].mode_id === 7) {
              dialysis[index].mode_id = 'IUF'
            }
            if (dialysis[index].mode_id === 8) {
              dialysis[index].mode_id = 'HFHD'
            }
            if (dialysis[index].mode_id === 9) {
              dialysis[index].mode_id = 'HFHD+HP'
            }
            if (dialysis[index].mode_id === 10) {
              dialysis[index].mode_id = 'PHF'
            }
            if (dialysis[index].mode_id === 11) {
              dialysis[index].mode_id = 'HFR'
            }
            if (dialysis[index].mode_id === 12) {
              dialysis[index].mode_id = 'HDF+HP'
            }
            if (dialysis[index].mode_id === 13) {
              dialysis[index].mode_id = 'CRRT'
            }
            if (dialysis[index].mode_id === 14) {
              dialysis[index].mode_id = '腹水回输'
            }
            if (dialysis[index].mode_id === 15) {
              dialysis[index].mode_id = 'HD前置换'
            }
            if (dialysis[index].mode_id === 16) {
              dialysis[index].mode_id = 'HD后置换'
            }
            if (dialysis[index].mode_id === 16) {
              dialysis[index].mode_id = 'HDF前置换'
            }
            if (dialysis[index].mode_id === 16) {
              dialysis[index].mode_id = 'HDF后置换'
            }

            if (dialysis[index].dialysate_formulation === 1) {
              dialysis[index].dialysate_formulation = '常规'
            }
            if (dialysis[index].dialysate_formulation === 2) {
              dialysis[index].dialysate_formulation = '低钙'
            }
            if (dialysis[index].dialysate_formulation === 1) {
              dialysis[index].dialysate_formulation = '高钙'
            }
            if (dialysis[index].dialysate_formulation === 1) {
              dialysis[index].dialysate_formulation = '低钠'
            }
            if (dialysis[index].dialysate_formulation === 1) {
              dialysis[index].dialysate_formulation = '高钠'
            }

            if (dialysis[index].anticoagulant === 1) {
              dialysis[index].anticoagulant = '无肝素'
            }
            if (dialysis[index].anticoagulant === 2) {
              dialysis[index].anticoagulant = '普通肝素'
            }
            if (dialysis[index].anticoagulant === 3) {
              dialysis[index].anticoagulant = '低分子肝素'
            }
            if (dialysis[index].anticoagulant === 4) {
              dialysis[index].anticoagulant = '阿加曲班'
            }
            if (dialysis[index].anticoagulant === 5) {
              dialysis[index].anticoagulant = '枸橼酸钠'
            }
          }
          var patients = response.data.data.patients
          if (patients.gender === 1) {
            this.patientform.sex = '男'
          }
          if (patients.gender === 2) {
            this.patientform.sex = '女'
          }
          this.patientform = patients
          console.log('patients', patients)
          console.log('dialysis', dialysis)
          this.longDialysis = dialysis
        }
      })
    },
    RecordTime(time) {
      // return uParseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      return uParseTime(time, '{y}-{m}-{d}')
    }
  },
  created() {
    var patientid = this.$route.query.patientid
    console.log('patientid', patientid)
    var orgid = this.$route.query.orgid
    console.log('orgid', orgid)
    this.getlongDialysis(patientid, orgid)
  }
}
</script>

<style lang="scss">
.page_longDialysis {
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  .box {
    width: 100%;
    height: 9.1875rem;
    background: #fcfcfc;
    padding-top: 1.25rem;
    box-sizing: border-box;
  }
  .info {
    width: 21.375rem;
    height: 6.1875rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: 0px 2px 12px 0px #f5f5f5;
    .photo {
      float: left;
      width: 3.75rem;
      height: 3.75rem;
      margin: 1.125rem 1rem 0 1.125rem;
      img {
        width: 100%;
      }
    }
    .infoRight {
      float: left;
      padding-top: 1.625rem;
      box-sizing: border-box;
      .rightTop {
        margin-bottom: 0.75rem;
      }
      .name {
        font-size: 1.0625rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-right: 1rem;
      }
      span {
        font-size: 0.875rem;
        color: rgba(60, 60, 60, 1);
      }
      .rightBottom {
        height: 1.4375rem;
        line-height: 1.4375rem;
        .num {
          float: left;
          font-size: 0.875rem;
          color: rgba(60, 60, 60, 1);
        }
        .imgList {
          float: left;
          margin-left: 0.875rem;
          img {
            width: 1.4375rem;
            height: 1.4375rem;
            margin: 0 0.125rem;
          }
        }
      }
    }
  }
  .search {
    width: 21.375rem;
    height: 2.125rem;
    background: rgba(244, 244, 244, 1);
    border-radius: 17px;
    margin: 0 auto;
    .el-input__inner {
      height: 2.125rem;
      line-height: 2.125rem;
      border: none;
      background: rgba(244, 244, 244, 1);
      border-radius: 17px;
      padding-left: 2.5rem;
      color: rgba(155, 155, 155, 1);
      font-size: 0.9375rem;
    }
    .el-input__prefix {
      margin-top: 0.0625rem;
      font-size: 1.25rem;
    }
    .el-input__icon {
      line-height: 2.125rem;
    }
  }
  .time {
    color: #9b9b9b;
    margin-left: 1rem;
    margin-top: 0.75rem;
    width: 342px;
    // height:2.125rem;
    overflow: hidden;
    .van-cell {
      width: 8.5rem;
      height: 2.125rem;
      line-height: 2.125rem;
      background: #f4f4f4;
      border-radius: 17px;
      margin-bottom: 0.75rem;
      padding: 0 1rem;
      font-size: 0.875rem;
      float: left;
      .van-icon-arrow-down {
        float: right;
        line-height: 2.125rem;
      }
    }
    .line {
      float: left;
      line-height: 2.125rem;
    }
  }
  .statOrder {
    width: 21.5625rem;
    margin: 0 auto;
    .statOrderOne {
      // margin-bottom: 1.25rem;
      border-top: 1px dashed #e6e6e6;
      border-bottom: 1px dashed #e6e6e6;
    }
    .van-cell {
      padding: 0.625rem 0.375rem;
    }
    .van-cell__value {
      span {
        float: right;
        width: 4.5625rem;
        height: 1.875rem;
        background: rgba(81, 119, 238, 0.2);
        border-radius: 15px;
        color: #5177ee;
        text-align: center;
        line-height: 1.875rem;
        margin-left: 8.75rem;
      }
    }
    // .edit {
    //   float: right;
    //   width: 4.5625rem;
    //   height: 1.875rem;
    //   background: rgba(81, 119, 238, 0.2);
    //   border-radius: 15px;
    //   color: #5177ee;
    //   text-align: center;
    //   line-height: 1.875rem;
    //   margin-left: 8.75rem;
    // }
    // .title {
    //   border-top: 1px solid #e6e6e6;
    //   display: flex;
    //   height: 3.125rem;
    //   align-items: center;
    // }
    // .el-icon-arrow-down {
    //   margin-left: 0.5rem;
    // }
    // .year {
    //   margin-left: 0.625rem;
    //   font-size: 0.9375rem;
    //   font-weight: 600;
    //   color: rgba(0, 0, 0, 1);
    // }
    .msg {
      font-size: 0.75rem;
      color: rgba(60, 60, 60, 1);
      font-weight: 600;
      // padding-top: 0.75rem;
      padding-bottom: 1rem;
      // border-top: 1px dashed #e6e6e6;
      .msglist {
        overflow: hidden;
        li {
          width: 50%;
          float: left;
          line-height: 16px;
        }
      }
    }

    .el-collapse-item__content {
      padding-bottom: 1rem;
    }
    .el-collapse {
      border-top: none;
    }
    .none {
      padding-bottom: 0;
    }
  }
  .add {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
    border-radius: 50%;
    position: fixed;
    right: 1.125rem;
    bottom: 4.25rem;
    img {
      width: 100%;
    }
  }
}
</style>
