Pad_New/src/pages/main/dialysis/LongTable.vue

<template>
  <!-- <div>
    <div class="blueBorder"></div>
    <div class="scrollBox">
      <div class="scrollTable">
        <div class="tableTit">
          <ul>
            <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>
      </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">
              <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">
              <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>
      </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> -->
  <div class="newLongDialysis">
    <div>
      <div class="toolBox">
        <div class="toolOne" @click="startShow = true">
          <div style="display: flex;align-items: center;">
            {{ startTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="endShow = true">
          <div style="display: flex;align-items: center;">
            {{ endTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>

      <div class="adviceBox" v-if="dialysisrecord.length > 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="adviceMain">
            <div
              class="adviceOne"
              v-for="(item, index) in dialysisrecord"
              :key="index"
            >
              <div class="adviceTitle">
                <p>{{ getTime(item.created_time) }}</p>
                <van-icon
                  class="ellipsis"
                  name="ellipsis"
                  @click="toLongDialysis(item.id, index)"
                />
              </div>
              <div class="orderContent" @click="toLongDialysisDetail(item.id)">
                <p>透析模式：{{ item.mode_id }}</p>
                <p>
                  透析时长：{{ item.dialysis_duration_hour }}h{{
                    item.dialysis_duration_minute
                  }}min
                </p>
                <p>血流量(ml/min)：{{ item.blood_flow_volume }}</p>
                <p>目标超滤量(ml)：{{ item.target_ultrafiltration }}</p>
                <p>透析液配方(mmol/L)：{{ item.dialysate_formulation }}</p>
                <p>
                  抗凝剂：
                  <span v-if="item.anticoagulant == 1">无肝素</span>
                  <span v-if="item.anticoagulant == 2">普通肝素</span>
                  <span v-if="item.anticoagulant == 3">低分子肝素</span>
                  <span v-if="item.anticoagulant == 4">阿加曲班</span>
                  <span v-if="item.anticoagulant == 5">枸橼酸钠</span>
                </p>
                <p>
                  首剂：
                  <span>{{ item.anticoagulant_shouji }}</span>
                  <span v-if="item.anticoagulant == 1">mg</span>
                  <span v-if="item.anticoagulant == 2">mg</span>
                  <span v-if="item.anticoagulant == 3">iu</span>
                  <span v-if="item.anticoagulant == 4">iu</span>
                  <span v-if="item.anticoagulant == 5">mg</span>
                </p>
                <p>
                  维持：
                  <span>{{ item.anticoagulant_weichi }}</span>
                  <span v-if="item.anticoagulant == 1">ml</span>
                  <span v-if="item.anticoagulant == 2">iu</span>
                  <span v-if="item.anticoagulant == 3">iu</span>
                  <span v-if="item.anticoagulant == 4">mg</span>
                  <span v-if="item.anticoagulant == 5">ml</span>
                </p>
                <p>
                  总量：
                  <span>{{ item.anticoagulant_zongliang }}</span>
                  <span v-if="item.anticoagulant == 1">mg</span>
                  <span v-if="item.anticoagulant == 2">iu</span>
                  <span v-if="item.anticoagulant == 3">iu</span>
                  <span v-if="item.anticoagulant == 4">mg</span>
                  <span v-if="item.anticoagulant == 5">mg</span>
                </p>
                <p>置换量(L)：{{ item.replacement_total }}</p>
                <p>钾(mmol/L)：{{ item.kalium }}</p>
                <p>钠(mmol/L)：{{ item.sodium }}</p>
                <p>钙(mmol/L)：{{ item.calcium }}</p>
                <p>透析器/灌流器：{{ item.dialyzer_perfusion_apparatus }}</p>
                <p>碳酸氢盐(mmol/L)：{{ item.bicarbonate }}</p>
                <p>葡萄糖(mmol/L)：{{ item.glucose }}</p>
                <p>透析液流量(ml/min)：{{ item.dialysate_flow }}</p>
                <p>透析液温度(℃)：{{ item.dialysate_temperature }}</p>
                <p>
                  体液过多症状：
                  <span v-if="item.body_fluid == 1">无</span>
                  <span v-if="item.body_fluid == 2">下肢水肿+</span>
                  <span v-if="item.body_fluid == 3">下肢水肿++</span>
                  <span v-if="item.body_fluid == 4">下肢水肿+++</span>
                </p>
                <p>体液过多其他症状：{{ item.body_fluid_other }}</p>
                <p>
                  透析前使用特殊药物：{{
                    getSpecialMedicine(item.special_medicine)
                  }}
                </p>
                <p>使用其他特殊药物：{{ item.special_medicine_other }}</p>
                <p>置换液：{{ item.displace_liqui_part }}</p>
                <p>置换液总量(L)：{{ item.displace_liqui_value }}</p>
                <p>血管通路：{{ getBloodAccessOption(item.blood_access) }}</p>
                <p>实际超滤量(L)：{{ item.ultrafiltration }}</p>
                <div>备注：{{ item.remark }}</div>
              </div>
              <div class="all">全部</div>
            </div>
          </div>
        </van-list>
      </div>

      <div class="noimgBox" v-else>
        <img src="../../../assets/images/none.png" alt />
      </div>


    </div>
    <!-- <div class="add">
      <div style="display: flex;align-items: center;">
        <van-icon class="addIcon" name="add" />新增
      </div>
    </div>-->

    <!-- 弹出层 -->
    <div>
      <van-popup
        v-model="typeShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup
        v-model="startShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
      <van-action-sheet
        v-model="newShow"
        :actions="actions"
        cancel-text="取消"
        @cancel="onCancel"
        @select="toDelete"
      />
    </div>
  </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>

<script>
import {
  getNewPatientId,
  GetLongDialysisRecord,
  getPatientDetail,
  DeleteLongDialysis
} from "@/api/patient/patient";
import { uParseTime } from "@/utils/tools";
import Vue from "vue";
import { Dialog } from "vant";
const moment = require("moment");
export default {
  props: {
    active: Number
  },
  data() {
    return {
      newShow: false,
      typeShow: false,
      startShow: false,
      endShow: false,
      type: "请选择",
      columns: [
        "杭州",
        "宁波",
        "温州",
        "嘉兴",
        "湖州",
        "杭州",
        "宁波",
        "温州",
        "嘉兴",
        "湖州"
      ],
      startTime: "请选择",
      endTime: "请选择",
      endTimes: "",
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      actions: [{ name: "查看全部" }, { name: "全部删除" }],
      loading: false,
      finished: false,
      limit: 10,
      page: 1,
      total: 0,
      anticoagulantsSet: {
        type: 1
      },
      replacementWays: null,
      anticoagulantsConfit: null,
      dialysate_formulation: [],
      body_fluid_option: [],
      special_medicine_option: [],
      displace_liqui_part_option: [],
      blood_access_option: [],
      dialysisrecord: [],
      list: [],
      patient_id: "",
      showOne: true,
      showTwo: false,
      id: 0,
      index: 0,
      newpatientid:0,
      date:0,
      patient_name:"",
    };
  },
  methods: {
    onCancel() {
      this.typeShow = false;
    },
    onConfirm(value) {
      this.type = value;
      this.typeShow = false;
    },
    getstartTime(value) {
      this.page = 1;
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let day = value.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }

      this.startTime = `${year}-${month}-${day}`;
      this.dialysisrecord = [];
      this.GetLongDialysisRecord(
        this.newpatientid,
        this.limit,
        this.page,
        this.startTime,
        this.endTime
      );
      this.startShow = false;
    },
    getstartTime2(value) {
      this.page = 1;
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let day = value.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }

      this.endTime = `${year}-${month}-${day}`;
      this.dialysisrecord = [];
      this.GetLongDialysisRecord(
        this.newpatientid,
        this.limit,
        this.page,
        this.startTime,
        this.endTime
      );
      this.endShow = false;
    },
    GetLongDialysisRecord(id, limit, page, startime, endtime) {
      GetLongDialysisRecord(
        id,
        this.limit,
        this.page,
        this.startTime,
        this.endTimes
      ).then(response => {
        if (response.data.state === 1) {
          var dialysis = response.data.data.dialysisrecord;
          for (let index = 0; index < dialysis.length; index++) {
            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 === 17) {
              dialysis[index].mode_id = "HDF前置换";
            }
            if (dialysis[index].mode_id === 18) {
              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].displace_liqui_part === 0) {
              dialysis[index].displace_liqui_part = "";
            }
            if (dialysis[index].displace_liqui_part === 1) {
              dialysis[index].displace_liqui_part = "前稀释";
            }
            if (dialysis[index].displace_liqui_part === 2) {
              dialysis[index].displace_liqui_part = "后稀释";
            }
          }
          let arr = this.dialysisrecord;
          arr.push(...dialysis);
          this.dialysisrecord = arr;
           console.log("长期透析处方", dialysis);
          var total = response.data.data.total;
          // console.log("total", total);
          this.loading = false;
        }
      });
    },
    onLoad() {
      setTimeout(() => {
        this.page++;
        if (this.page <= Math.ceil(this.total / 10)) {
          this.GetLongDialysisRecord(
            this.newpatientid,
            this.limit,
            this.page,
            this.startTime,
            this.endTimes
          );
        } else {
          this.loading = false;
          this.finished = true;
        }
      }, 1000);
    },
    getTime(time) {
      // return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
      return uParseTime(time, "{y}-{m}-{d}");
    },
    getBloodAccessOption(id) {
      for (let i = 0; i < this.blood_access_option.length; i++) {
        if ((this.blood_access_option[i].id = id)) {
          return this.blood_access_option[i].name;
        }
      }
    },
    getSpecialMedicine(id) {
      for (let i = 0; i < this.special_medicine_option.length; i++) {
        if ((this.special_medicine_option[i].id = id)) {
          return this.special_medicine_option[i].name;
        }
      }
    },
    getPatientDetail() {
      getPatientDetail(this.newpatientid).then(response => {
        if (response.data.state === 1) {
          var patientDetail = response.data.data.patientDetail;
          if (patientDetail.blood_patients == 0) {
            this.dialysisrecord = [];
            this.showOne = false;
            this.showTwo = true;
          }
          if (patientDetail.blood_patients == 1) {
            this.showOne = true;
            this.showTwo = false;
          }
          this.patientName = patientDetail.name;
        }
      });
    },
    toLongDialysisDetail(id) {
      var patientid = this.$route.query.patient_id
      this.$router.push(
        "/longDialysis?id=" +
          id +
          "&patientid=" +
          patientid+"&date="+this.date+"&patient_name="+this.patient_name
      );
    },
    toLongDialysis(id, index) {
      this.id = id;
      this.index = index;
      this.newShow = true;
    },
    toDelete(value) {
      if (value.name == "查看全部") {
         var patientid = this.$route.query.patient_id
        this.$router.push(
          "/longDialysis?id=" +
            this.id +
            "&patientid=" +
             patientid+"&date="+this.date+"&patient_name="+this.patient_name
        );
      }
      if (value.name == "全部删除") {
        this.DeleteLongDialysis(this.id, this.index);
      }
    },
    DeleteLongDialysis(id, index) {
      Dialog.confirm({
        title: "删除提示!",
        message: "确认删除该条信息吗?,删除后将无法恢复!"
      }).then(() => {
        DeleteLongDialysis(id).then(response => {
          if (response.data.state === 1) {
            var msg = response.data.data.msg;
            this.dialysisrecord.splice(index, 1);
            this.newShow = false;
          }
        });
      });
    },
    getNewPatientId(id){
      getNewPatientId(id).then(response=>{
         if(response.data.state == 1){
          var patient =  response.data.data.patient
          this.newpatientid = patient.id
           this.GetLongDialysisRecord(this.newpatientid);
           this.onLoad()
           this.getPatientDetail(this.newpatientid);
         }
      })
    },

  },
  created() {
    var patient_id = this.$route.query.patient_id
    this.getNewPatientId(patient_id)
    this.date = this.$route.query.date
    this.patient_name = this.$route.query.patient_name
    this.blood_access_option = this.$store.getters.blood_access;
    this.anticoagulantsSet = this.$store.getters.anticoagulants_set;
    this.replacementWays = this.$store.getters.replacement_ways;
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit;
    this.blood_filters = this.$store.getters.blood_filters;
    this.dialysate_formulation = this.$store.getters.dialysate_formulation;
    this.body_fluid_option = this.$store.getters.body_fluid;
    this.special_medicine_option = this.$store.getters.special_medicine;
    this.displace_liqui_part_option = this.$store.getters.displace_liqui;
  }
};
</script>

<style lang="scss" scoped>
.newLongDialysis {
  height: 100%;
  overflow-y: auto;
  background: #fff;
  padding-top:1.46rem;
  .toolBox {
    display: flex;
    height: 1.6rem;
    align-items: center;
    .toolOne {
      width: 3.4rem;
      height: 1rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.42rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.42rem;
    }
  }
  .adviceBox {
    padding: 0 0.66rem;
    margin-bottom: 1.6rem;
  }
  .adviceMain {
    > div:last-child {
      border: none;
    }
  }
  .adviceOne {
    // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.34rem;
  }
  .adviceTitle {
    padding-top: 0.34rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      color: #000000;
      font-weight: bold;
      font-size: 0.5rem;
    }
    .ellipsis {
      font-size: 0.66rem;
      color: #cccccc;
    }
  }
  .orderContent {
    font-size: 0.46rem;
    color: rgba(49, 50, 52, 1);
    margin-top: 0.34rem;
    display: flex;
    flex-wrap: wrap;
    p {
      line-height: 0.8rem;
      width: 50%;
    }
  }
  .doctorBox {
    font-size: 0.4rem;
    color: rgba(152, 152, 152, 1);
    line-height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.34rem;
  }
  .all {
    font-size: 0.43rem;
    color: #5b98ff;
    margin-top: 0.34rem;
  }
  .noimgBox {
    margin-top: 40%;
    img {
      width: 5rem;
      height: 5rem;
      margin: 0 auto;
      display: block;
    }
  }
  // .add {
  //   position: fixed;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 2.75rem;
  //   background: rgba(255, 255, 255, 1);
  //   box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-around;
  //   font-size: 0.9375rem;
  //   color: #979798;
  //   .addIcon {
  //     color: #5b98ff;
  //     font-size: 1.25rem;
  //     margin-right: 0.25rem;
  //   }
  // }
  .van-popup {
    border-radius: 0;
    transform: translate3d(0, 0, 0);
    top: initial;
  }

}
::-webkit-scrollbar {
  width: 0;
}
</style>
<style lang="scss">
.newLongDialysis{
  .van-picker__toolbar{
    height: 1.46rem;
    line-height: 1.46rem;
  }
  .van-picker__cancel, .van-picker__confirm{
    padding: 0 0.53rem;
    font-size: 0.46rem;
  }
  .van-picker-column{
    font-size: 0.53rem;
  }
  .van-picker-column__item{
    padding: 0 0.14rem;
  }
  .van-action-sheet__item{
    height: 1.6rem;
  }
  .van-action-sheet__cancel, .van-action-sheet__item{
    height: 1.6rem;
    font-size: 0.53rem;
    line-height: 1.6rem;
  }
  .van-action-sheet__gap{
    height: 0.26rem;
  }
  .van-action-sheet__cancel::before{
    height: 0.26rem;
  }
}
</style>

// <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.45rem;
//       height: 1.2rem;
//       line-height: 1.2rem;
//     }
//     &:last-child {
//       border-right: none;
//     }
//   }
// }
// .tableDate {
//   background: $text-color;
//   color: $pgh-color;
//   @include box-sizing;
//   ul {
//     li {
//       font-size: 0.45rem;
//       height: 1.2rem;
//       line-height: 1.2rem;
//       @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: 1.2rem;
//         line-height: 1.2rem;
//         &:last-child {
//           color: $main-color;
//         }
//         .iconfont {
//           color: $main-color;
//           font-size: 0.45rem;
//           margin-right: 0.1rem;
//         }
//       }
//     }
//     &:last-child {
//       border-right: none;
//     }
//   }
// }
// .scrollBox {
//   width: 100%;
//   overflow: auto;
//   .scrollTable {
//     width: 768px;
//   }
// }
// </style>
// <style lang="scss">
// .newTable {
//   .el-table td {
//     padding: 0;
//   }
//   .el-table th {
//     padding: 6px 0;
//   }
// }
// </style>