<template>

  <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>
                  <span v-if="item.anticoagulant == 6">低分子肝素钙</span>
                  <span v-if="item.anticoagulant == 7">低分子肝素钠</span>
                  <span v-if="item.anticoagulant == 8">依诺肝素</span>
                  <span v-if="item.anticoagulant == 9">达肝素</span>
                  <span v-if="item.anticoagulant == 10">体外抗凝</span>
                  <span v-if="item.anticoagulant == 11">那屈肝素</span>
                  <span v-if="item.anticoagulant == 12">无抗凝剂</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">mg</span>
                  <span v-if="item.anticoagulant == 5">mg</span>
                  <span v-if="item.anticoagulant == 6">iu</span>
                  <span v-if="item.anticoagulant == 7">iu</span>
                  <span v-if="item.anticoagulant == 8">iu</span>
                  <span v-if="item.anticoagulant == 9">iu</span>
                  <span v-if="item.anticoagulant == 10">mg</span>
                </p>
                <p>
                  维持：
                  <span>{{ item.anticoagulant_weichi }}</span>
                  <span v-if="item.anticoagulant == 1">mg/h</span>
                  <span v-if="item.anticoagulant == 2">mg/h</span>
                  <span v-if="item.anticoagulant == 3">iu/h</span>
                  <span v-if="item.anticoagulant == 4">mg/h</span>
                  <span v-if="item.anticoagulant == 5">ml/h</span>
                  <span v-if="item.anticoagulant == 6">iu/h</span>
                  <span v-if="item.anticoagulant == 7">iu/h</span>
                  <span v-if="item.anticoagulant == 8">iu/h</span>
                  <span v-if="item.anticoagulant == 9">iu/h</span>
                </p>
                <p>
                  总量：
                  <span>{{ item.anticoagulant_zongliang }}</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">mg</span>
                  <span v-if="item.anticoagulant == 5">mg</span>
                  <span v-if="item.anticoagulant == 6">iu</span>
                  <span v-if="item.anticoagulant == 7">iu</span>
                  <span v-if="item.anticoagulant == 8">iu</span>
                  <span v-if="item.anticoagulant == 9">iu</span>
                  <span v-if="item.anticoagulant == 10">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 }}  {{item.dialysis_dialyszers}}/{{item.dialysis_irrigation}}</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" @click="toLongDialysisDetail(item.id)">全部</div>
            </div>
          </div>
        </van-list>
      </div>

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

    </div>

    <div>
      <van-popup
        class='newPopup'
        get-container="#app"
        v-model="typeShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup
        class='newPopup'
        get-container="#app"
        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" class='newPopup' get-container="#app" 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
        class='newPopup'
        get-container="#app"
        v-model="newShow"
        :actions="actions"
        cancel-text="取消"
        @cancel="onCancel"
        @select="toDelete"
      />
    </div>
  </div>
</template>

<script>
import {
  getNewPatientId,
  GetLongDialysisRecord,
  getPatientDetail,
  DeleteLongDialysis
} from '@/api/patient/patient'
import { getDataConfig } from '@/utils/data'
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: '',
      bloodAccessOptions: []
    }
  },
  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) {
      GetLongDialysisRecord(
        id,
        this.limit,
        this.page,
        this.startTime,
        this.endTimes
      ).then(response => {
        if (response.data.state === 1) {
          var dialysis = response.data.data.dialysisrecord
          console.log('dialysis8888888888888888888888888', dialysis)
          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].mode_id === 20) {
              dialysis[index].mode_id = 'UF'
            }
            if (dialysis[index].mode_id === 21) {
              dialysis[index].mode_id = 'HD+'
            }
            if (dialysis[index].mode_id === 22) {
              dialysis[index].mode_id = '血浆胆红素吸附+HDF'
            }
            if (dialysis[index].mode_id === 23) {
              dialysis[index].mode_id = '血浆胆红素吸附'
            }
            if (dialysis[index].mode_id === 24) {
              dialysis[index].mode_id = 'I-HDF'
            }
            if (dialysis[index].mode_id === 25) {
              dialysis[index].mode_id = 'HD高通'
            }
            if (dialysis[index].mode_id === 26) {
              dialysis[index].mode_id = 'CVVH'
            }
            if (dialysis[index].mode_id === 27) {
              dialysis[index].mode_id = 'CVVHD'
            }
            if (dialysis[index].mode_id === 28) {
              dialysis[index].mode_id = 'CVVHDF'
            }
            if (dialysis[index].mode_id === 29) {
              dialysis[index].mode_id = 'PE'
            }
            if (dialysis[index].mode_id === 30) {
              dialysis[index].mode_id = '血浆胆红素吸附+HP'
            }
            if (dialysis[index].mode_id === 31) {
              dialysis[index].mode_id = 'HPD'
            }
            if (dialysis[index].mode_id === 32) {
              dialysis[index].mode_id = 'HDP'
            }
            if (dialysis[index].mode_id === 33) {
              dialysis[index].mode_id = 'HFD'
            }
            if (dialysis[index].mode_id === 34) {
              dialysis[index].mode_id = 'HDF100'
            }
            if (dialysis[index].mode_id === 35) {
              dialysis[index].mode_id = 'HDF600'
            }

            if (dialysis[index].mode_id === 36) {
              dialysis[index].mode_id = 'HDF800'
            }

            if (dialysis[index].mode_id === 37) {
              dialysis[index].mode_id = 'HDF1000'
            }

            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.bloodAccessOptions.length; i++) {
        if ((this.bloodAccessOptions[i].id == id)) {
          return this.bloodAccessOptions[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.bloodAccessOptions = getDataConfig('hemodialysis', 'vascular_access_desc')
    console.log('长期出风口', this.bloodAccessOptions)
    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:2.75rem;
  .toolBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
  }
  .adviceBox {
    padding: 0 1.125rem;
    margin-bottom: 3.125rem;
  }
  .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.625rem;
  }
  .adviceTitle {
    padding-top: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      color: #000000;
      font-weight: bold;
      font-size: 0.9375rem;
    }
    .ellipsis {
      font-size: 1.25rem;
      color: #cccccc;
    }
  }
  .orderContent {
    font-size: 0.875rem;
    color: rgba(49, 50, 52, 1);
    margin-top: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    p {
      line-height: 1.5rem;
      width: 50%;
    }
  }
  .doctorBox {
    font-size: 0.75rem;
    color: rgba(152, 152, 152, 1);
    line-height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.625rem;
  }
  .all {
    font-size: 0.8125rem;
    color: #5b98ff;
    margin-top: 0.625rem;
  }
  .noimgBox {
    margin-top: 40%;
    img {
      width: 9.375rem;
      height: 9.375rem;
      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 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>
