<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_nurse">
            <h2 class="name">下机护士</h2>
            <div class="content">
              <span class="text" style="width: 100px">{{ nurse_id == 0 ? '' : 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">{{ end_time_str }}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>

          <div class="perform">
            <button @click="commitInfo" v-show="(record != null && record.id != '' && record.stage == 1)">执行下机</button>
            <button :disabled="true" style="background-color:lightgray;" v-show="(record != null && record.id != '' && record.stage == 2)">已下机</button>
            <button :disabled="true" style="background-color:lightgray;" v-show="record == null || record.id == ''">未上机</button>
          </div>
        </div>
    </div>
    <two-menu ref="selector"></two-menu>
   <mt-datetime-picker
     ref="start_time_picker"
     type="datetime"
     @confirm="didSelectStartTime"
     v-model="end_time"
   ></mt-datetime-picker>
  </div>
</template>

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

  export default {
  name: "PlaneDialog",
  components: {
    TwoMenu
  },
  data() {
    return {
      selecting: false,
      end_time_str: "",
      end_time:new Date(),
      nurse_id: 0,
    }
  },
  props:{
    patient_prop: {
      type: Object,
    },
    record: {
      type: Object,
    },
    admins: {
      type: Array,
    },
    admin_map: {
      type: Object,
    },
  },mounted() {
      if(this.record.id == 0){
        this.end_time_str = parseTime(this.end_time, "{y}-{m}-{d} {h}:{i}") + ":00";
      }else{
        if(this.record.end_time == 0){
          this.end_time_str = parseTime(this.end_time, "{y}-{m}-{d} {h}:{i}") + ":00";
        }else{
          this.end_time_str = parseTime(this.record.end_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);

    if (this.record == null || this.record.id == '') {
      this.nurse_id = 0
    } else if (this.record.stage == 1) {
      this.nurse_id = this.$store.getters.user.user.id
    } else {
      this.nurse_id = this.record.finish_nurse
    }
  },
  methods: {
    didSelectStartTime: function(time) {
      this.end_time_str = parseTime(time, "{y}-{m}-{d} {h}:{i}") + ":00";
    },
    selectStartTimeAction: function() {
      if (this.record.id != 0) {
        if(this.record.end_time > 0){
          return
        }else{
          this.$refs.start_time_picker.open();
        }
      }else{
        this.$refs.start_time_picker.open();
      }

    },
    commitInfo: function () {
      Toast.loading({forbidClick: true, duration: 0})
      let ParamsQuery = {}
      ParamsQuery['patient'] = this.patient_prop.id
      ParamsQuery['record_date'] = this.record_date
      ParamsQuery["nurse"] = this.nurse_id
      ParamsQuery["end_time"] = this.end_time_str

      finish(ParamsQuery).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("下机成功");
          this.$emit('did_off', response.data.data.dialysisOrder);
          var record = this.record
          for (const key in response.data.data.dialysisOrder) {
            this.$set(record, key, response.data.data.dialysisOrder[key])
            // record[key] = response.data.data.dialysisOrder[key]
          }
          // console.log(this.record)
        }
      });
    },
    close: function() {
      this.$emit('close')
    },
    select_nurse: function() {
      if (this.record != null && this.record.id != '' && this.record.stage == 1) {
        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>

