<script setup>

import {computed, ref} from "vue";

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default() {
      return {
        id: undefined,
        teacherName: undefined,
        username: undefined,
        initialPassword: undefined
      }
    }
  }
})

const func = defineEmits([
  'onClose', 'onOk'
])

const openState = computed(() => props.open)

const teacherInfoRef = computed(() => props.data)

function openOrClose() {
  func('onClose')
}

function action() {
  func('onOk', props.data.id, {
    teacherName: teacherInfoRef.value.teacherName,
    username: teacherInfoRef.value.username,
    initialPassword: teacherInfoRef.value.initialPassword
  })
  openOrClose()
}

</script>

<template>
  <q-dialog persistent no-esc-dismiss no-shake transition-show="fade" transition-hide="fade"
            v-model="openState">
    <q-card class="teacher-dialog">
      <div class="sticky top-0 bg-white z-10">
        <q-card-section>
          <div class="text-h6">查看或者编辑教师信息</div>
        </q-card-section>
        <q-separator/>
      </div>

      <q-card-section class="scroll">
        <div class="flex flex-col gap-4">
          <span class="text-base">查看或者编辑当前的教师信息</span>
          <q-input v-model="teacherInfoRef.teacherName" class="text-base" outlined label="教师名称"></q-input>
          <q-input v-model="teacherInfoRef.username" class="text-base" outlined
                   label="登录用户名"></q-input>
          <q-input v-model="teacherInfoRef.initialPassword" class="text-base" outlined
                   label="初始密码（不需要更改留空即可）"></q-input>
        </div>
      </q-card-section>

      <div class="sticky bottom-0 bg-white z-10">
        <q-separator/>
        <q-card-actions align="right">
          <slot name="actions"></slot>
          <q-btn flat @click="openOrClose" v-close-popup>算了</q-btn>
          <q-btn flat @click="action" v-close-popup>好的</q-btn>
        </q-card-actions>
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="sass">
.teacher-dialog
  min-width: 35vw
//min-height: 45vh
</style>
