<script setup>

import {computed, ref} from "vue";

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'add'
  },
  teacherInfoPropRef: {
    type: Object,
    default() {
      return {
        teacherName: undefined,
        username: undefined,
        initialPassword: undefined
      }
    }
  }
})

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

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

// eslint-disable-next-line vue/no-setup-props-destructure
const teacherInfoRef = ref(props.teacherInfoPropRef)

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

function action() {
  func('onOk', {
    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 v-if="type === 'add'" class="text-h6">添加教师信息</div>
        </q-card-section>
        <q-separator/>
      </div>

      <q-card-section class="scroll">
        <div class="flex flex-col gap-4">
          <span v-if="type === 'add'"
                class="text-base">添加教师信息，若未设定，则初始的登录用户名和密码均为其分配到的id</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="登录用户名（如未设定，则默认为其id）"></q-input>
          <q-input v-model="teacherInfoRef.initialPassword" class="text-base" outlined
                   label="初始密码（如未设定，则默认为其id）"></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>
