<template>
  <div>
    <div class="menuTab clearfix">
      <ul>
        <li
          v-for="(item, i) in menuList"
          :class="index == i ? 'active' : ''"
          @click="handleClick(i)"
          :key="i"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div>
      <!-- <long-dialog title="长期处方"></long-dialog> -->
      <van-popup
        title="长期处方"
        v-model="menuList[0].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(0)"
      >
        <long-dialog
          :patient_prop="patient"
          :solution_prop="solution"
          :machines_prop="devices"
          ref="long_dialog"
        ></long-dialog>
      </van-popup>
      <van-popup
        title="透析处方"
        v-model="menuList[1].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(1)"
      >
        <dialysis-dialog
          :patient_prop="patient"
          :solution_prop="prescription"
          :machines_prop="devices"
          ref="dialysis_dialog"
        ></dialysis-dialog>
      </van-popup>
      <van-popup
        title="接诊评估"
        v-model="menuList[2].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(2)"
      >
        <accepts-assessment
          :accepts="receiver_treatment_access"
          :patient_prop="patient"
          ref="accepts_assessment"
        ></accepts-assessment>
      </van-popup>
      <van-popup
        title="透前评估"
        v-model="menuList[3].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(3)"
      >
        <pre-dialysis
          :predialysis="predialysis_evaluation"
          ref="pre_dialysis"
          :patient_prop="patient"
          @evaluation="editPreDialysis"
        ></pre-dialysis>
      </van-popup>
      <van-popup
        title="临时医嘱"
        v-model="menuList[4].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(4)"
      >
        <medical-order
          :patient_prop="patient"
          :advice_list_prop="doctor_advices"
          :admin_users_prop="admin_users"
          @new_create="createMedicalOrder"
          @delete="delMedicalOrder"
          @execution="executionMedicalOrder"
        ></medical-order>
        <!-- <add-orders title="新增医嘱"></add-orders> -->
      </van-popup>
      <van-popup
        title="双人核对"
        v-model="menuList[5].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(5)"
      >
        <double-check
          :record="double_check"
          :patient_prop="patient"
          ref="double_check"
        ></double-check>
      </van-popup>
      <van-popup
        title="透析监测"
        v-model="menuList[6].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(6)"
      >
        <monitor-supervise
          :records="monitor_records"
          :patient="patient"
          :order="dialysis_order"
          @did_add_monitor="didAddMonitor"
        ></monitor-supervise>
      </van-popup>
      <van-popup
        title="透析下机"
        v-model="menuList[7].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(7)"
      >
        <dialysis-plane
          :patient_prop="patient"
          :record="dialysis_order"
        ></dialysis-plane>
      </van-popup>
      <van-popup
        title="透后评估"
        v-model="menuList[8].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(8)"
      >
        <after-thoroughly
          :record="assessment_after_dislysis"
          :patient_prop="patient"
        ></after-thoroughly>
      </van-popup>
      <van-popup
        title="治疗小结"
        v-model="menuList[9].showPopup"
        :overlay="true"
        @click-overlay="popupDidHide(9)"
      >
        <treatment-of
          ref="treatment_of"
          :record="treatment_summary"
          :patient_prop="patient"
        ></treatment-of>
      </van-popup>
    </div>
  </div>
</template>

<script>
import LongDialog from "./dialog/longDialog";
import DialysisDialog from "./dialog/dialysisDialog";
import PreDialysis from "./dialog/preDialysis";
import DialysisPlane from "./dialog/dialysisPlane";
import AfterThoroughly from "./dialog/afterThoroughly";
import TreatmentOf from "./dialog/treatmentOf";
import AcceptsAssessment from "./dialog/acceptsAssessment";
import MedicalOrder from "./dialog/medicalOrder";
import DoubleCheck from "./dialog/doubleCheck";
import MonitorSupervise from "./dialog/monitorSupervise";
import AddMonitor from "./dialog/addMonitor";
export default {
  name: "DetailsHead",
  components: {
    LongDialog,
    DialysisDialog,
    PreDialysis,
    DialysisPlane,
    AfterThoroughly,
    TreatmentOf,
    AcceptsAssessment,
    MedicalOrder,
    DoubleCheck,
    MonitorSupervise,
    AddMonitor
  },
  data() {
    return {
      // show: false,
      index: -1,
      menuList: [
        { value: "1", label: "长期处方", showPopup: false },
        { value: "2", label: " 透析处方", showPopup: false },
        { value: "3", label: " 接诊评估", showPopup: false },
        { value: "4", label: " 透前评估", showPopup: false },
        { value: "5", label: " 临时医嘱", showPopup: false },
        { value: "6", label: " 双人核对", showPopup: false },
        { value: "7", label: " 透析监测", showPopup: false },
        { value: "8", label: " 透析下机", showPopup: false },
        { value: "9", label: " 透后评估", showPopup: false },
        { value: "10", label: " 治疗小结", showPopup: false }
      ]
    };
  },
  props: {
    patient: {
      // 患者信息
      type: Object
    },
    schedual: {
      // 患者排班信息
      type: Object
    },
    prescription: {
      // 透析处方
      type: Object
    },
    solution: {
      // 透析方案
      type: Object
    },
    receiver_treatment_access: {
      // 接诊评估
      type: Object
    },
    predialysis_evaluation: {
      // 透前评估
      type: Object
    },
    doctor_advices: {
      // 临时医嘱
      type: Array
    },
    double_check: {
      // 双人核对
      type: Object
    },
    assessment_after_dislysis: {
      // 透后评估
      type: Object
    },
    treatment_summary: {
      // 治疗小结
      type: Object
    },
    monitor_records: {
      // 透析监测
      type: Array
    },
    dialysis_order: {
      // 透析记录
      type: Object
    },
    admin_users: {
      //系统用户列表
      type: Array
    },
    devices: {
      //设备
      type: Array
    }
  },
  methods: {
    handleClick: function(popupIndex) {
      this.index = popupIndex;
      if (popupIndex >= 0) {
        this.menuList[popupIndex].showPopup = true;
      }
    },
    popupDidHide: function(popupIndex) {
      this.index = -1;
    },

    editPreDialysis(row) {
      this.$emit("edit_pre_dialysis", row);
    },
    createMedicalOrder(row) {
      this.$emit("create_medical_order", row);
    },
    delMedicalOrder(row) {
      this.$emit("delete_medical_order", row);
    },
    executionMedicalOrder(row) {
      this.$emit("execution_medical_order", row);
    },
    didAddMonitor: function(monitor) {
      this.$emit("did_add_monitor", monitor);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menuTab {
  background: $text-color;
  padding: 0.28rem 0 0 0;
  color: $text-color;
  font-size: 0.3rem;
  @include box-sizing;
  ul {
    @include text-align;
    margin: 0 1.1rem;
    li {
      border-radius: 50px;
      padding: 0.16rem 0;
      width: 1.96rem;
      margin: 0 0.32rem 0.29rem 0.32rem;
      border: 1px #7b8a97 solid;
      color: #7b8a97;
      font-size: 0.28rem;
      float: left;
      &.active {
        background: $main-color;
        color: $text-color;
        border: 1px $main-color solid;
      }
    }
  }
}
</style>
