<template>
  <q-dialog ref="dialogRef" persistent @hide="onDialogHide">
    <q-card style="width: 600px;">
      <q-card-section class="bg-purple text-white">
                    <p>Şirket Adı: {{ props.name }}</p>
        <!-- <span class="text-h6 text-weight-bolder">{{props.name}}</span> -->
      </q-card-section>
      <q-card-section>
        <q-input v-model="ld.name" label="Şirket Adı"/>
        <q-input v-model="ld.memberNumber" label="Üye No"/>
        <q-input v-model="ld.userName" label="Kullanıcı Adı"/>
        <q-input v-model="ld.password" label="Parola"/>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn label="İptal"
               icon="cancel"
               no-caps outline
               @click="onDialogCancel"
        />

        <q-btn label="Kaydet" no-caps outline color="positive"
               icon="check"
               @click="onDialogOK(toRaw(ld))"/>
      </q-card-actions>
    </q-card>
    
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar'
import { reactive, toRaw ,defineProps } from 'vue'

defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits,
])

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()

const props = defineProps({
    id: Number,
    name: String,
    memberNumber: Number,
    userName: String,
    password: String 
})
const ld = reactive({
  id : props.id || 0,
  name: props.name || '',
  memberNumber: props.memberNumber || 0,
  userName: props.userName || '',
  password: props.password || '',
})
</script>


<style scoped>

</style>
