<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="dialysisSolution.mode_id"
          @change="addPlanModeChange"
        >
          <option
            :selected="dialysisSolution.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="dialysisSolution.dialysis_duration"
        />
      </div>
      <div class="cell">
        <label>透析器</label>
        <select name="" v-model="dialysisSolution.hemodialysis_machine">
          <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="dialysisSolution.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="dialysisSolution.blood_flow_volume"
        />
      </div>
      <div class="cell">
        <label>脱水量(L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisSolution.dewater"
        />
      </div>

      <div class="cell">
        <label>置换液(L)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisSolution.displace_liqui"
        />
      </div>
      <div class="cell">
        <label>置换方式</label>
        <select name="" v-model="dialysisSolution.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="dialysisSolution.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="dialysisSolution.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="dialysisSolution.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="dialysisSolution.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="dialysisSolution.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="dialysisSolution.anticoagulant_gaijiliang"
          :disabled="anticoagulant.gaijiliang == 1 ? false : true"
        />
      </div>

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

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

      <div class="cell">
        <label>透析液流量(ml/min)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisSolution.dialysate_flow"
        />
      </div>
      <div class="cell">
        <label>透析液温度(℃)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisSolution.dialysate_temperature"
        />
      </div>
      <div class="cell">
        <label>电导率(mS/cm)</label>
        <input
          type="text"
          class="inputBox"
          v-model="dialysisSolution.conductivity"
        />
      </div>
      <div class="cell width">
        <label>备注</label>
        <textarea
          type="text"
          class="textarea"
          v-model="dialysisSolution.remark"
        >
        </textarea>
      </div>
      <div class="cell width">
        <label>处方医生：</label>
        <span>{{ doctor }}</span>
      </div>
      <div class="cell width center">
        <!-- <button @click="submitSolution" :disabled="$store.getters.user.serve.state==1?false:true">提交</button>                       -->
        <button @click="submitSolution">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { createPatientDialysisSolution } from '@/api/patient'
import { Toast } from 'vant'

export default {
  name: 'LongDialog',
  data () {
    return {
      title: '长期处方',
      doctor: '',
      modeOptions: [],
      perfusion_apparatus: {},
      anticoagulantsConfit: {},
      replacementWays: [],
      dialyserList: [],

      dialysisSolution: {
        id: 0,
        mode: '',
        mode_id: '',
        mode_name: '',
        dialysis_duration: '',
        hemodialysis_machine: '',
        perfusion_apparatus: '',
        blood_flow_volume: '',
        dewater: '',
        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: ''
      },
      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.dialysisSolution.mode_id)
      if (isNaN(thismode) || thismode <= 0) {
        return false
      }
      if (
        typeof this.modeOptions[thismode] === 'undefined' ||
        this.modeOptions[thismode] == null
      ) {
        return false
      }
      // this.current_model = this.modeOptions[thismode];
      this.dialysisSolution.mode_name = this.modeOptions[thismode].name
    },
    submitSolution () {
      this.dialysisSolution.mode = this.dialysisSolution.mode_id
      createPatientDialysisSolution(
        this.patient.id,
        this.dialysisSolution
      ).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg)
          // this.$toast({message: response.data.msg});
          return false
        } else {
          Toast.success('创建成功')
          // this.$toast({message: "创建成功"});
          this.$emit('solution', response.data.data.solution)
          for (const key in response.data.data.solution) {
            this.solution_prop[key] = response.data.data.solution[key]
          }
          // this.solution_prop = response.data.data.solution
        }
      })
    },
    changeThisAnticoagulant () {
      var thismode = parseInt(this.dialysisSolution.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.doctor = this.$store.getters.user.user.user_name
    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.dialysisSolution = this.solution_prop;
    if (this.solution_prop != null && this.solution_prop.id != '') {
      for (const key in this.solution_prop) {
        this.dialysisSolution[key] = this.solution_prop[key]
      }
    }
    this.dialyserList = this.machines_prop
  }
}
</script>

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