<template>
  <div>
    <v-btn color="rgb(94, 181, 177,.85)" class="white--text ma-3" @click="registerDialog=true">
      <strong>{{$t("WorkList.Register")}}</strong>
    </v-btn>

    <v-dialog v-model="registerDialog" max-width="900px">
      <v-card>
        <v-progress-linear
          :active="registerLoading"
          :indeterminate="registerLoading"
          absolute
          top
          color="cyan lighten-2"
        ></v-progress-linear>
        <v-card-title>
          <v-icon @click="closeRegisterPatient" class="mr-1">close</v-icon>
          <span>{{$t("WorkList.RegisterPatient")}}</span>
        </v-card-title>

        <v-card-text class="ma-0 pa-0" v-if="$vuetify.breakpoint.mdAndUp">
          <v-container class="cyan lighten-2" style="border-radius: 5px;">
            <v-card class="pa-3 pr-6 ma-4">
              <v-row dense>
                <v-col md="4">
                  <v-text-field
                    label="FarsiFirstName"
                    v-model="registerPatient.FarsiFirstName"
                    type="text"
                  ></v-text-field>
                </v-col>
                <v-col md="4">
                  <v-text-field
                    label="FarsiLastName"
                    v-model="registerPatient.FarsiLastName"
                    type="text"
                  ></v-text-field>
                </v-col>
                <v-col md="4">
                  <v-text-field label="HISID" v-model="registerPatient.HISID" type="text"></v-text-field>
                </v-col>
                <v-col md="4">
                  <v-text-field label="Modality" v-model="registerPatient.Modality" type="text"></v-text-field>
                </v-col>
                <v-col md="4">
                  <v-text-field label="PatientAge" v-model="registerPatient.PatientAge" type="text"></v-text-field>
                </v-col>
                <v-col md="4">
                  <v-autocomplete
                    :items="itemsOfDeviceMap"
                    label="CodeInHIS"
                    v-model="selectedDeviceMap"
                    item-text="GroupName"
                    item-value="CodeInHIS"
                    return-object
                  ></v-autocomplete>
                </v-col>
              </v-row>
            </v-card>
          </v-container>
        </v-card-text>
        <v-card-text class="ma-0 pa-0" v-else>
          <v-container class="cyan lighten-2" style="border-radius: 5px;">
            <v-card class="pa-3 pr-6 ma-4">
              <v-row dense>
                <v-col cols="6">
                  <v-text-field
                    label="FarsiFirstName"
                    type="text"
                    v-model="registerPatient.FarsiFirstName"
                  ></v-text-field>
                </v-col>
                <v-col cols="6">
                  <v-text-field
                    label="FarsiLastName"
                    type="text"
                    v-model="registerPatient.FarsiLastName"
                  ></v-text-field>
                </v-col>
                <v-col cols="6">
                  <v-text-field label="HISID" type="text" v-model="registerPatient.HISID"></v-text-field>
                </v-col>
                <v-col cols="6">
                  <v-text-field label="Modality" type="text" v-model="registerPatient.Modality"></v-text-field>
                </v-col>
                <v-col cols="6">
                  <v-text-field label="PatientAge" type="text" v-model="registerPatient.PatientAge"></v-text-field>
                </v-col>
                <v-col cols="6">
                  <v-autocomplete
                    :items="itemsOfDeviceMap"
                    label="CodeInHIS"
                    v-model="selectedDeviceMap"
                    item-text="GroupName"
                    item-value="CodeInHIS"
                    return-object
                  ></v-autocomplete>
                </v-col>
              </v-row>
            </v-card>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            class="white--text"
            @click="registerPatientMethod"
          >{{$t("WorkList.CreatePatient")}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
import Devicemap from "../../imports/api/collections/devicemap.js";
export default {
  data() {
    return {
      registerPatient: {
        FarsiFirstName: "",
        FarsiLastName: "",
        HISID: "",
        Modality: "",
        PatientAge: ""
      },
      registerLoading: false,
      registerDialog: false,
      selectedDeviceMap: null
    };
  },
  computed: {
    itemsOfDeviceMap() {
      if (this.devicemaps && this.devicemaps.length > 0) {
        return this.devicemaps;
      }
      return [];
    }
  },
  methods: {
    closeRegisterPatient() {
      this.registerDialog = false;
    },
    registerPatientMethod(item) {
      let me = this;
      this.registerLoading = true;
      let registerPatient = {
        ...this.registerPatient
      };

      if (this.selectedDeviceMap) {
        registerPatient.CodeInHis = this.selectedDeviceMap.CodeInHIS;
        
      }

      Meteor.call("Register", registerPatient, function(err, result) {
        me.registerLoading = false;
        me.registerPatient = {
          FarsiFirstName: "",
          FarsiLastName: "",
          HISID: "",
          Modality: "",
          PatientAge: ""
        };
        me.closeRegisterPatient();
      });
    }
  },
  meteor: {
    $subscribe: {
      devicemaps: []
    },
    devicemaps() {
      return Devicemap.find({}).fetch();
    }
  }
};
</script>
<style scoped>
</style>