<template>
    <div>
        <div class="blueBorder"></div>              
        <div class="tableTit " >   
            <ul>
                <li v-for="(item,index) in ['序号','透析模式','透析时长','医生','更新日期','操作']" :key="index" :value="item.value" >{{item}}</li>
                <!-- <li v-for="(item,index) in ['序号','透析模式','透析时长','医生','更新日期']" :key="index" :value="item.value" >{{item}}</li> -->
            </ul>
        </div>
        <div class="tableDate" >
          <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
          >
          <ul>
                <li v-for="(item,index) in tableDate" :key="index" :value="item.value" >
                <span>{{item.no}}</span>
                <span>{{item.mode_name}}</span>
                <span>{{item.dialysis_duration_hour}}h {{item.dialysis_duration_minute}}min</span>
                <span>{{tranDoctor(item.registrars_id)}}</span>
                <span>{{item.edate}}</span>
                <span @click="openEdit(index, item)"><i class="iconfont">&#xe6f7;</i>修改</span>
                </li>
            </ul>
          </van-list>
          <div class="NoData" v-show="tableDate.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>

        </div>

        <van-popup title="透析处方" v-model="showObj.showPopup" :overlay="true" @click-overlay="popupDidHide()">
          <div v-if="showObj.showForm" class="Dialog">
            <div class="DialogTit" >
              <span @click="popupDidHide()" class="iconfont">&#xe6e9;</span>
              <h1 class="name">透析处方</h1>
              <span @click="commitInfo" class="success">完成</span>
            </div>

            <div class="DialogContent" id="dialogTop">
              <div @click="showSubMenu('mode')" class="item" ref="mode">
                <label class="name" for="txms">透析模式</label>
                <div class="content">
                  <span class="text" id="txms">{{GetModeByModeId(dialysisSolution.mode_id)}}</span>
                  <span class="iconfont">&#xe6f9;</span>
                </div>
              </div>
              <div class="item" @click="openPicker">
                <label class="name" for="txsc">透析时长</label>
                <div class="content">
                  <span class="text" style="width: 100px">{{timeValue}}</span>
                  <span class="iconfont">&#xe6f9;</span>
                </div>
              </div>

              <div class="item">
                <label class="name" for="xll">血流量(ml/min)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="xll" v-model="dialysisSolution.blood_flow_volume"/>
                </div>
              </div>

              <div class="item">
                <label class="name" for="mbcll">目标超滤量(ml)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="mbcll" v-model="dialysisSolution.target_ultrafiltration"/>
                </div>
              </div>
              <div @click="showSubMenu('dialysate_formulation')" class="item" ref="dialysate_formulation">
                <label class="name" for="txypf">透析液配方</label>
                <div class="content">
                  <span class="text" id="txypf">{{GetDialysateFormulationById(dialysisSolution.dialysate_formulation)}}</span>
                  <span class="iconfont">&#xe6f9;</span>
                </div>
              </div>

              <div @click="showSubMenu('anticoagulant')" class="item" ref="anticoagulant">
                <label class="name" for="knj">抗疑剂</label>
                <div class="content">
                  <span class="text" id="knj">{{GetAnticoagulantById(dialysisSolution.anticoagulant)}}</span>
                  <span class="iconfont">&#xe6f9;</span>
                </div>
              </div>

              <div class="item" v-if="anticoagulant.shouji != -1">
                <label class="name" for="sj">首剂({{anticoagulant.shouji_unit}})</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="sj" v-model="dialysisSolution.anticoagulant_shouji"
                        :disabled="anticoagulant.shouji==1?false:true"/>
                </div>
              </div>
              <div class="item" v-if="anticoagulant.weichi != -1">
                <label class="name" for="wz">维持({{anticoagulant.weichi_unit}})</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="wz" class="inputBox" v-model="dialysisSolution.anticoagulant_weichi"
                        :disabled="anticoagulant.weichi==1?false:true">
                </div>
              </div>
              <div class="item" v-if="anticoagulant.zongliang != -1">
                <label class="name" for="zl">总量(mg)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="zl" class="inputBox" v-model="dialysisSolution.anticoagulant_zongliang"
                        :disabled="anticoagulant.zongliang==1?false:true">
                </div>
              </div>

              <div class="item" v-if="anticoagulant.gaimingcheng != -1">
                <label class="name" for="g">钙名称({{anticoagulant.gaimingcheng_unit}})</label>
                <div class="content">
                  <input type="text" id="g" class="inputBox" v-model="dialysisSolution.anticoagulant_gaimingcheng"
                        :disabled="anticoagulant.gaimingcheng==1?false:true">
                </div>
              </div>

              <div class="item" v-if="anticoagulant.gaijiliang != -1">
                <label class="name" for="gjl">钙剂量</label>
                <div class="content">
                  <input type="text" id="gjl" class="inputBox" v-model="dialysisSolution.anticoagulant_gaimingcheng"
                        :disabled="anticoagulant.gaimingcheng==1?false:true">
                </div>
              </div>

              <div class="line"></div>
              <div class="item">
                <label class="name" for="zhy">置换量(L)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="zhy" v-model="dialysisSolution.replacement_total"/>
                </div>
              </div>

              <div class="item">
                <label class="name" for="j">钾(mmol/L)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="j" v-model="dialysisSolution.kalium"/>
                </div>
              </div>
              <div class="item">
                <label class="name" for="n">钠(mmol/L):</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="n" v-model="dialysisSolution.sodium"/>
                </div>
              </div>
              <div class="item">
                <label class="name" for="gg">钙(mmol/L)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="gg" v-model="dialysisSolution.calcium"/>
                </div>
              </div>
              <div class="item">
                <label class="name" for="tsqy">碳酸氢盐(mmol/L)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="tsqy" v-model="dialysisSolution.bicarbonate"/>

                </div>
              </div>
              <div class="item">
                <label class="name" for="ptt">葡萄糖(mmol/L)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="ptt" v-model="dialysisSolution.glucose"/>
                </div>
              </div>

              <div class="line"></div>
              
              <div class="item">
                <label class="name" for="txyll">透析液流量(ml/min)</label>
                <div class="content">
                  <input type="tel" @focus="inputFocus" id="txyll" v-model="dialysisSolution.dialysate_flow"/>
                </div>
              </div>
              <div class="item">
                <label class="name" for="txywd">透析液温度(℃)</label>
                <div class="content">
                  <!--<span class="text">HD</span>-->
                  <!--<span class="iconfont">&#xe6f9;</span>-->
                  <input type="tel" @focus="inputFocus" id="txywd" v-model="dialysisSolution.dialysate_temperature"/>

                </div>
              </div>
              <div class="item">
                <label class="name" for="dtl">电导率(mS/cm)</label>
                <div class="content">
                  <!--<span class="text">HD</span>-->
                  <!--<span class="iconfont">&#xe6f9;</span>-->
                  <input type="tel" @focus="inputFocus" id="dtl" v-model="dialysisSolution.conductivity"/>
                </div>
              </div>

              <div class="line"></div>
              <div>
                <div class="item">
                  <label class="name" for="bz">备注</label>
                  <div class="content">
                    <span class="text"></span>
                  </div>
                </div>
                <textarea class="textarea" id="bz" placeholder="请输入内容" v-model="dialysisSolution.remark" @focus="lastInputFocus" @blur="lastInputBlur"></textarea>
              </div>
              
              <!--<div class="footer">-->
              <!--处方医生：刘小军 医生-->
              <!--</div>-->
              
            </div>
          </div>


          <check-box-sub-menu :visibility="visibility" v-on:menu-cancle="menuCancle" v-on:menu-comfirm="menuComfirm"
                          :propsForm="propForm"></check-box-sub-menu>
                          
          <mt-datetime-picker
            ref="picker"
            type="time"
            hourFormat="{value}小时"
            minuteFormat="{value}分钟"
            @confirm="handleTimeConfirm"
            v-model="time">
          </mt-datetime-picker>
        </van-popup>
    </div>
</template>

<script>

import {GetPatientDialysisSolutionList,EditDialysisSolution} from "@/api/patient";
import {parseTime} from "@/utils";
import {fetchAllAdminUsers} from "@/api/doctor";
import {getDataConfig} from '@/utils/data';
import CheckBoxSubMenu from "../dialog/subMenu/checkBoxSubMenu";
import { Toast } from 'vant';

let allno = 1;

export default {
  name: "LongTable",
  data() {
    return {
      visibility:false,
      loading: false,
      finished: false,
      
      queryParams: {
        page: 0,
        id: 0,
        limit: 10,
      },

      tableDate: [],
      adminUserOptions:{},
      currentIndex: -1,
      showObj:{
        showPopup:false,
        showForm:true,
      },
      dialysisSolution:{
        id: 0,
        mode: "",
        mode_id: "",
        mode_name: "",
        dialysis_duration: "",
        dialysis_duration_hour: "",
        dialysis_duration_minute: "",
        hemodialysis_machine: "",
        perfusion_apparatus: "",
        perfusion_apparatus_name: "",
        blood_flow_volume: "",
        dewater: "",
        displace_liqui: 0,
        replacement_way: "",
        replacement_way_name: "",
        anticoagulant: "",
        anticoagulant_name: "",
        anticoagulant_shouji: "",
        anticoagulant_weichi: "",
        anticoagulant_zongliang: "",
        anticoagulant_gaimingcheng: "",
        anticoagulant_gaijiliang: "",
        target_ultrafiltration:'',
        dialysate_formulation:'',
        replacement_total:'',
        kalium: "",
        sodium: "",
        calcium: "",
        bicarbonate: "",
        glucose: "",
        dry_weight: "",
        dialysate_flow: "",
        dialysate_temperature: "",
        conductivity: "",
        doctor: "",
        remark: ""
      },
      anticoagulant:{
        id: 0,
        name: "",
        type: 1,
        shouji: 1,
        weichi: 1,
        zongliang: 1,
        gaimingcheng: -1,
        gaijiliang: -1,
        shouji_unit: "mg",
        weichi_unit: "mg/h",
        zongliang_unit: "mg",
        gaimingcheng_unit: "",
        gaijiliang_unit: ""
      },
      propForm: {
        title: "",
        list: [],
        optionList: [],
        isMultiple: 2,
        result: [], //选中的值
        type: 1, //用来区分不同子菜单，方便对返回值进行赋值
        selectId: 0
      },
      modeOption: [],
      dialysateFormulationOptions: [],
      anticoagulantsConfit: {},
      timeValue: '',
      time: '03:00',
      record_date:'',
    };
  },
  methods:{
    commitInfo: function () {
      Toast.loading({forbidClick: true, duration: 0})
      this.dialysisSolution.mode = this.dialysisSolution.mode_id;
      EditDialysisSolution(this.dialysisSolution.id, this.dialysisSolution).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("修改成功");
          for (const key in response.data.data.solution) {
            this.tableDate[this.currentIndex][key] = response.data.data.solution[key];
          }
          this.popupDidHide();

        }
      });
    },
    openEdit(index, item){
        this.currentIndex = index;
        for(var key in item) {
          this.dialysisSolution[key] = item[key];
        }
        
      this.timeValue = this.dialysisSolution.dialysis_duration_hour + "小时" + this.dialysisSolution.dialysis_duration_minute + "分钟";

      this.time = (this.dialysisSolution.dialysis_duration_hour>=10?this.dialysisSolution.dialysis_duration_hour:'0'+this.dialysisSolution.dialysis_duration_hour) + ":" + (this.dialysisSolution.dialysis_duration_minute>=10?this.dialysisSolution.dialysis_duration_minute:'0'+this.dialysisSolution.dialysis_duration_minute);

      this.showObj.showPopup = true;

      // document.getElementById('dialogTop').scrollTop = 200;
      var dialogTop = document.querySelector('#dialogTop');
      if (dialogTop != null) {
        this.$nextTick(() => {
            dialogTop.scrollTop = 0;
        });
      }
      
        
    },
    popupDidHide(){
      this.showObj.showPopup = false;
      this.visibility = false;
      this.showObj.showForm = true;
    },
    openPicker: function () {
      this.$refs.picker.open();
    },
    showSubMenu: function (val) {
      switch (val) {
        case "mode":
          this.propForm.type = 1;
          this.showObj.showForm = false;
          this.propForm.title = "透析模式";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.modeOption;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSolution.mode_id;
          this.propForm.click_ref = "mode"

          break;

        case "anticoagulant":
          this.propForm.type = 5;
          this.showObj.showForm = false;
          this.propForm.title = "抗疑剂";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.anticoagulantsConfit;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSolution.anticoagulant;
          this.propForm.click_ref = "anticoagulant"
          break;
        case "dialysate_formulation":
          this.propForm.type = 6;
          this.showObj.showForm = false;
          this.propForm.title = "透析液配方";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.dialysateFormulationOptions;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSolution.dialysate_formulation;
          this.propForm.click_ref = "dialysate_formulation"
          break;
      }
    },
    menuCancle: function () {
      this.visibility = false;
      this.showObj.showForm = true;
      this.$nextTick( () => {
        if (this.$refs[this.propForm.click_ref] != undefined && this.$refs[this.propForm.click_ref] != null) {
          this.$refs[this.propForm.click_ref].scrollIntoView()
        }
      })
    },
    menuComfirm: function (val) {
      this.visibility = false;
      this.showObj.showForm = true;
      this.$nextTick( () => {
        if (this.$refs[this.propForm.click_ref] != undefined && this.$refs[this.propForm.click_ref] != null) {
          this.$refs[this.propForm.click_ref].scrollIntoView()
        }
      })
      switch (val.type) {
        case 1:
          this.dialysisSolution.mode_id = val.selectId;
          this.dialysisSolution.mode_name = this.GetModeByModeId(this.dialysisSolution.mode_id);
          break;
       
        case 5:
          this.dialysisSolution.anticoagulant = val.selectId;

          if (typeof this.anticoagulantsConfit[val.selectId] == "undefined" || this.anticoagulantsConfit[val.selectId] == null) {
            return;
          }
          this.anticoagulant = this.anticoagulantsConfit[val.selectId];

          break;

        case 6:
          this.dialysisSolution.dialysate_formulation = val.selectId;

          break;
      }
    },
    handleTimeConfirm: function (val) {
      val = val.replace("小时")
      val = val.replace("分钟")
      let timeArray = val.split(":")
      if (parseInt(timeArray[0].substring(0, 1)) == 0) {
        this.dialysisSolution.dialysis_duration_hour = timeArray[0].charAt(timeArray[0].length - 1)
      } else {
        this.dialysisSolution.dialysis_duration_hour = timeArray[0]
      }

      if (parseInt(timeArray[1].substring(0, 1)) == 0) {
        this.dialysisSolution.dialysis_duration_minute = timeArray[1].charAt(timeArray[1].length - 1)
      } else {
        this.dialysisSolution.dialysis_duration_minute = timeArray[1]
      }
      this.timeValue = this.dialysisSolution.dialysis_duration_hour + "小时" + this.dialysisSolution.dialysis_duration_minute + "分钟"
      this.dialysisSolution.dialysis_duration = this.dialysisSolution.dialysis_duration_hour + "." + this.dialysisSolution.dialysis_duration_minute

    },
    GetModeByModeId: function (val) {
      let treatment_mode_name = "";
      let treatment_mode = this.modeOption;
      for (let keys in treatment_mode) {
        if (treatment_mode[keys].id == val) {
          treatment_mode_name = treatment_mode[keys].name;
        }
      }

      return treatment_mode_name;
    },
    inputFocus: function(event) {
      var input = event.target
      setTimeout(function () {
        input.scrollIntoView()
      }, 0);

      if (input.setSelectionRange) {
        setTimeout(function () {
          input.setSelectionRange(0, input.value.length);
        }, 0);
      } else if (input.createTextRange) {
          var rng = input.createTextRange();
          rng.move('character', input.value.length);
          rng.select();
      }
    },
    lastInputBlur: function(event) {
      var input = event.target
      setTimeout(function () {
        input.style.marginBottom = ""
      }, 0);
    },
    lastInputFocus: function(event) {
      var input = event.target
      setTimeout(function () {
        input.style.marginBottom = "2rem"
        input.parentNode.scrollIntoView()
      }, 0);
    },
    GetDialysateFormulationById: function (val) {
      let name = "";
      let dfl = this.dialysateFormulationOptions.length;
      for (let index = 0; index < dfl; index++) {
        if(this.dialysateFormulationOptions[index].id == val) {
          name = this.dialysateFormulationOptions[index].name;
          break;
        }
      }
      return name;
    },
    GetAnticoagulantById: function (val) {
      let anticoagulan_name = "";
      let anticoagulant = this.anticoagulantsConfit;
      for (let keys in anticoagulant) {
        if (anticoagulant[keys].id == val) {
          anticoagulan_name = anticoagulant[keys].name;
        }
      }
      return anticoagulan_name;
    },
    tranDoctor(id){
      if (id in this.adminUserOptions) {
        return this.adminUserOptions[id].name;
      }else {
        return '未知';
      }
    },
    fetchAllAdminUsers() {
      fetchAllAdminUsers().then(response => {
        if (response.data.state == 1) {
          var ul = response.data.data.users.length;
          for (let index = 0; index < ul; index++) {
            this.adminUserOptions[response.data.data.users[index].id] = response.data.data.users[index];
          }
        }
      });
    },
    onLoad() {
      // 异步更新数据
      this.queryParams.page ++ ;
        GetPatientDialysisSolutionList(this.queryParams).then(response=>{
          if(response.data.state == 1) {
            var sl = response.data.data.solutions.length;
            if (sl == 0) {
              this.finished = true;
            }else {

              for (let index = 0; index < sl; index++) {
                var solution = response.data.data.solutions[index];
                solution.no = allno;
                solution.edate = parseTime(solution.updated_time, "{y}-{m}-{d} {h}:{i}")
                allno ++;
                this.tableDate.push(solution);
              }
            }
            this.loading = false;
          }
        });
        
    },
  },
  created(){
    allno = 1;
    this.fetchAllAdminUsers();
    this.queryParams.id = this.$route.query.patient_id;
    this.onLoad();
    
    this.modeOption = this.$store.getters.treatment_mode;
    this.dialysateFormulationOptions = getDataConfig('hemodialysis','dialysate_formulation');
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit;

    var date = this.$route.query && this.$route.query.date;
      date *= 1000;
      var newDate = new Date(date);

      var y = newDate.getFullYear();
      var m = newDate.getMonth() + 1;
      var d = newDate.getDate();
      if (isNaN(y) || isNaN(m) || isNaN(d)) {
        newDate = new Date();
        y = newDate.getFullYear();
        m = newDate.getMonth() + 1;
        d = newDate.getDate();
      }
      this.record_date =
        y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
  },
  components: {
    CheckBoxSubMenu
  }
};
</script>

<style style="stylesheet/scss" lang="scss"  scoped>
.textarea {
  width: 100%;
  height: 2.4rem;
  line-height: 0.6rem;
  color: $pgh-color;
  font-size: 0.28rem;
  padding-left: 0.36rem;
  border: none;
  border-bottom: 1px #e5e5e5 solid;
}
.tableTit {
  background: $main-color;
  color: $text-color;
  @include box-sizing;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-center;
    li {
      @include flex;
      border-right: 2px #fff solid;
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.tableDate {
  background: $text-color;
  color: $pgh-color;
  @include box-sizing;
  ul {
    li {
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-center;
      span {
        @include flex;
        border-right: 2px #fff solid;
        border-bottom: 2px #fff solid;
        background: #ecf5ff;
        display: inline-block;
        height: 0.88rem;
        line-height: 0.88rem;
        &:last-child {
          color: $main-color;
        }
        .iconfont {
          color: $main-color;
          font-size: 0.3rem;
          margin-right: 0.1rem;
        }
      }
    }
    &:last-child {
      border-right: none;
    }
  }
}
</style>

