<template>
 <div>

    <div class="Dialog" v-show="!selecting">
        <div class="DialogTit">
            <span @click="close()" class="iconfont">&#xe6e9;</span>
            <h1 class="name">透析上机</h1>
            <span class="success"></span>
        </div>

        <div class="DialogContent ">
          <div class="item" @click="select_bed">
            <h2 class="name">上机床位</h2>
            <div class="content">
              <span class="text" style="width: 100px">{{ device_number_map[bed_id].number }}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>
          <div class="item" @click="select_nurse">
            <h2 class="name">上机护士</h2>
            <div class="content">
              <span class="text" style="width: 100px">{{ admin_map[nurse_id].name }}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>


          <div class="item">
            <h2 class="name">上机时间</h2>
            <div class="content">
              <span class="text" style="width: 100px"  @click="selectStartTimeAction">{{ start_time_str }}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>


          <div class="perform">
              <!-- <p class="crew">上机人员 : <span>黄海燕 护士</span></p> -->
              <!-- <button>执行上机</button> -->
              <button @click="commitInfo" v-if="(record == null || record.id == '')">执行上机</button>
            <button :disabled="true" style="background-color:lightgray;" v-else>已上机</button>
          </div>
        </div>
    </div>

    <two-menu ref="selector"></two-menu>
   <mt-datetime-picker
     ref="start_time_picker"
     type="datetime"
     @confirm="didSelectStartTime"
     v-model="start_time"
   ></mt-datetime-picker>
  </div>
</template>

<script>
import { startDialysis } from "@/api/dialysis";
import { Toast } from 'vant';
import { parseTime } from "@/utils";

import TwoMenu from './TwoMenu'

export default {
  name: "ComputerDialog",
  components: {
    TwoMenu
  },
  data() {
    return {
      start_time: new Date(),
      selecting: false,
      start_time_str: "",
      bed_id: 0,
      nurse_id: 0,
      zone_beds: [], // 该排班的区里的床位
    }
  },
  props:{
    schedule: {
      type: Object,
    },
    patient_prop: {
      type: Object,
    },
    record: {
      type: Object,
    },
    admins: {
      type: Array,
    },
    device_numbers: {
      type: Array,
    },
    admin_map: {
      type: Object,
    },
    device_number_map: {
      type: Object,
    },
  }, mounted() {

    if(this.record.id == 0){
      this.start_time_str = parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
    }else{
      if(this.record.start_time == 0){
        this.start_time_str = parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";

      }else{
        this.start_time_str = parseTime(this.record.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
      }
    }
  },
  created(){
    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.bed_id = (this.record == null || this.record.id == '') ? this.schedule.bed_id : this.record.bed_id
    this.nurse_id = (this.record == null || this.record.id == '') ? this.$store.getters.user.user.id : this.record.start_nurse

    var beds = []
    for (let index = 0; index < this.device_numbers.length; index++) {
      const device_number = this.device_numbers[index];
      if (device_number.zone_id == this.schedule.partition_id) {
        beds.push(device_number)
      }
    }
    this.zone_beds = beds
  },
  methods: {
    didSelectStartTime: function(time) {
      this.start_time_str = parseTime(time, "{y}-{m}-{d} {h}:{i}") + ":00";
    },
    selectStartTimeAction: function() {
      if (this.record.id != 0) {
        return
      }
      this.$refs.start_time_picker.open();
    },
    commitInfo: function () {
      Toast.loading({forbidClick: true, duration: 0})
      let ParamsQuery = {}
      ParamsQuery['patient_id'] = this.patient_prop.id
      ParamsQuery['record_date'] = this.record_date
      ParamsQuery["nurse"] = this.nurse_id
      ParamsQuery["bed"] = this.bed_id
      ParamsQuery["start_time"] = this.start_time_str


      startDialysis(ParamsQuery).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("上机成功");
          this.$emit('did_start', response.data.data.dialysis_order);
          var record = this.record
          for (const key in response.data.data.dialysis_order) {
            this.$set(record, key, response.data.data.dialysis_order[key])
            // this.record[key] = response.data.data.dialysis_order[key]
          }
        }
      });
    },
    close: function() {
      this.$emit('close')
    },
    select_bed: function() {
      if (this.record.id != 0) {
        return
      }
      this.selecting = true
      var t = this
      this.$refs.selector.showSingleSelect(this.zone_beds, this.bed_id, "选择床位号", "number", "id", function(select_id) {
        t.bed_id = select_id
      }, function() {
        t.selecting = false
      })
    },
    select_nurse: function() {
      if (this.record.id != 0) {
        return
      }
      this.selecting = true
      var t = this
      this.$refs.selector.showSingleSelect(this.admins, this.nurse_id, "选择上机护士", "name", "id", function(select_id) {
        console.log("nurse id: ", select_id)
        t.nurse_id = select_id
      }, function() {
        t.selecting = false
      })
    },
    open:function(){
      this.selecting = false;
      this.$refs.selector.hide();
    }
  }

};
</script>

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

.perform{
  text-align: center;
  font-size: 0.3rem;
  padding-top: 2rem;
  .crew{
    color: $pgh-color;
  }
  button{
    background:$main-color;
    color: #fff;
    font-size: 0.3rem;
    text-align:center;
    width: 3rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius:4px;
    margin-top:10px;
  }
}
</style>

