<template>
  <div class="popup-content">
    <h2 class="title">
      <span class="line"></span>
      <p>{{ title }}</p>
      <span class="line"></span>
    </h2>
    <div class="content">
      <div class="cell">
        <label>透析模式</label>
        <select
          name=""
          v-model="dialysisPrescription.mode_id"
          @change="addPlanModeChange"
        >
          <option
            :selected="dialysisPrescription.mode_id == item.id ? true : false"
            v-for="(item, index) in modeOptions"
            :value="item.id"
            :label="item.name"
            :key="index"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <div class="cell">
        <label>透析时长(h)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.dialysis_duration"
        />
      </div>
      <div class="cell">
        <label>透析器</label>
        <select name="" v-model="dialysisPrescription.dialyzer">
          <option
            v-for="(item, index) in dialyserList"
            :value="item.id"
            :label="item.name"
            :key="index"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <div class="cell">
        <label>灌流器</label>
        <select name="" v-model="dialysisPrescription.perfusion_apparatus">
          <option
            v-for="(item, index) in perfusion_apparatus"
            :value="item.id"
            :label="item.name"
            :key="index"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <div class="cell">
        <label>血流量(ml/min)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.blood_flow_volume"
        />
      </div>
      <div class="cell">
        <label>脱水量(L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.dewater_amount"
        />
      </div>

      <div class="cell">
        <label>置换液(L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.displace_liqui"
        />
      </div>
      <div class="cell">
        <label>置换方式</label>
        <select name="" v-model="dialysisPrescription.replacement_way">
          <option
            v-for="(item, index) in replacementWays"
            :value="item.id"
            :label="item.name"
            :key="index"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <div class="cell">
        <label>抗疑剂</label>
        <select
          name=""
          v-model="dialysisPrescription.anticoagulant"
          @change="changeThisAnticoagulant"
        >
          <option
            v-for="(item, index) in anticoagulantsConfit"
            :value="item.id"
            :label="item.name"
            :key="index"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <div class="cell" v-if="anticoagulant.shouji != -1">
        <label>首剂({{ anticoagulant.shouji_unit }})</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.anticoagulant_shouji"
          :disabled="anticoagulant.shouji == 1 ? false : true"
        />
      </div>
      <div class="cell" v-if="anticoagulant.weichi != -1">
        <label>维持({{ anticoagulant.weichi_unit }})</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.anticoagulant_weichi"
          :disabled="anticoagulant.weichi == 1 ? false : true"
        />
      </div>
      <div class="cell" v-if="anticoagulant.zongliang != -1">
        <label>总量({{ anticoagulant.zongliang_unit }})</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.anticoagulant_zongliang"
          :disabled="anticoagulant.zongliang == 1 ? false : true"
        />
      </div>
      <div class="cell" v-if="anticoagulant.gaimingcheng != -1">
        <label>钙({{ anticoagulant.gaimingcheng_unit }})</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.anticoagulant_gaimingcheng"
          :disabled="anticoagulant.gaimingcheng == 1 ? false : true"
        />
      </div>
      <div class="cell" v-if="anticoagulant.gaijiliang != -1">
        <label>钙剂量</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.anticoagulant_gaijiliang"
          :disabled="anticoagulant.gaijiliang == 1 ? false : true"
        />
      </div>

      <div class="cell">
        <label>钾(mmol/L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.kalium"
        />
      </div>
      <div class="cell">
        <label>钠(mmol/L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.sodium"
        />
      </div>
      <div class="cell">
        <label>钙(mmol/L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.calcium"
        />
      </div>

      <div class="cell">
        <label>碳酸氢盐(mmol/L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.bicarbonate"
        />
      </div>
      <div class="cell">
        <label>葡萄糖(mmol/L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.glucose"
        />
      </div>
      <div class="cell">
        <label>干体重(kg)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.dry_weight"
        />
      </div>

      <div class="cell">
        <label>透析液流量(ml/min)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.dialysate_flow"
        />
      </div>
      <div class="cell">
        <label>透析液温度(℃)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.dialysate_temperature"
        />
      </div>
      <div class="cell">
        <label>电导率(mS/cm)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisPrescription.conductivity"
        />
      </div>
      <div class="cell width">
        <label>备注</label>
        <textarea
          type="text"
          class="textarea"
          v-model="dialysisPrescription.remark"
        >
        </textarea>
      </div>
      <div class="cell width center">
        <button @click="submitInfo">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { commitDialysisPrescription } from '@/api/dialysis'
import { Toast } from 'vant'

export default {
  name: 'LongDialog',

  data () {
    return {
      title: ' ',
      doctor: '',
      modeOptions: [],
      perfusion_apparatus: {},
      anticoagulantsConfit: {},
      replacementWays: [],
      dialyserList: [],
      dialysisPrescription: {
        mode_id: '',
        dialysis_duration: '',
        mode_name: '',
        dialyzer: '',
        perfusion_apparatus: '',
        blood_flow_volume: '',
        dewater_amount: '',
        displace_liqui: 0,
        replacement_way: '',
        anticoagulant: '',
        anticoagulant_shouji: '',
        anticoagulant_weichi: '',
        anticoagulant_zongliang: '',
        anticoagulant_gaimingcheng: '',
        anticoagulant_gaijiliang: '',
        kalium: '',
        sodium: '',
        calcium: '',
        bicarbonate: '',
        glucose: '',
        dry_weight: '',
        dialysate_flow: '',
        dialysate_temperature: '',
        conductivity: '',
        doctor: '',
        remark: ''
      },
      record_date: '',
      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: ''
      },
      patient: {
        id: 0
      }
    }
  },
  props: {
    patient_prop: {
      type: Object
    },
    solution_prop: {
      type: Object
    },
    machines_prop: {
      type: Array,
      default: function () {
        return new Array()
      }
    }
  },
  methods: {
    addPlanModeChange () {
      var thismode = parseInt(this.dialysisPrescription.mode)
      if (isNaN(thismode) || thismode <= 0) {
        return false
      }
      if (
        typeof this.modeOptions[thismode] === 'undefined' ||
        this.modeOptions[thismode] == null
      ) {
        return false
      }
      this.dialysisPrescription.mode_name = this.modeOptions[thismode].name
    },
    submitInfo: function () {
      let ParamsQuery = this.dialysisPrescription
      ParamsQuery['patient'] = this.patient.id
      ParamsQuery['record_date'] = this.record_date

      commitDialysisPrescription(ParamsQuery).then(response => {
        if (response.data.state == 0) {
          // this.$toast({message: response.data.msg});
          Toast.fail(response.data.msg)
          return false
        } else {
          // this.$toast({message: "创建成功"});
          Toast.success('提交成功')
          this.$emit('prescription', response.data.data.prescription)
          for (const key in response.data.data.prescription) {
            this.solution_prop[key] = response.data.data.prescription[key]
          }
        }
      })
    },
    changeThisAnticoagulant () {
      var thismode = parseInt(this.dialysisPrescription.anticoagulant)
      if (isNaN(thismode) || thismode <= 0) {
        return false
      }
      if (
        typeof this.anticoagulantsConfit[thismode] === 'undefined' ||
        this.anticoagulantsConfit[thismode] == null
      ) {
        return false
      }
      this.anticoagulant = this.anticoagulantsConfit[thismode]
    }
  },
  created () {
    this.modeOptions = this.$store.getters.treatment_mode
    this.perfusion_apparatus = this.$store.getters.perfusion_apparatus
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit
    this.replacementWays = this.$store.getters.replacement_ways

    this.patient = this.patient_prop
    // this.dialysisPrescription = this.solution_prop;
    if (this.solution_prop != null && typeof this.solution_prop.id !== '') {
      for (const key in this.solution_prop) {
        this.dialysisPrescription[key] = this.solution_prop[key]
      }
    }
    this.dialyserList = this.machines_prop
    this.doctor = this.$store.getters.user.user.user_name

    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)
    this.patient.id = this.patient_prop.id
  }
}
</script>

<style style="stylesheet/scss" lang="scss" scoped>
</style>
