<script setup lang="ts">
import type { MjFormProps, MjGridProps } from '#/components/mj/mj-table'

import { userService } from '#/api/service/user/user'
import MjTable, { mj_form_select } from '#/components/mj/mj-table'
import obj from '#/utils/obj'

defineOptions({ name: 'SelectUser' })

const props = defineProps<{
  fixedSchoolPersonType?: any
  schoolPersonType?: any
  schoolId?: any
}>()

const type_map = {
  0: '学生',
  1: '教师',
} as any
const type_options = obj.map2options(type_map)

// 搜索表单
const searchForm = {
  items: [
    {
      title: '类型',
      field: 'schoolPersonType',
      span: 6,
      itemRender: {
        name: mj_form_select,
        options: type_options,
        props: {
          disabled: props.fixedSchoolPersonType,
        },
      },
    },
  ],
  data: {
    schoolPersonType: props.schoolPersonType,
  },
} as MjFormProps

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq', width: 100 },
    {
      field: 'name',
      title: '名称',
      formatter: 'redaction',
    },
    { field: 'nickName', title: '昵称', formatter: 'redaction' },
    { field: 'account', title: '账号', formatter: 'redaction' },
    {
      field: 'schoolPersonType',
      title: '类型',
      formatter({ cellValue }) {
        return type_map[cellValue]
      },
    },
  ],
  beforeLoadData(params) {
    if (props.fixedSchoolPersonType) {
      params.schoolPersonType = props.schoolPersonType
    }
    if (props.schoolId) {
      params.schoolId = props.schoolId
    }
    return params
  },
} as MjGridProps
</script>

<template>
  <div class="select-user g-container">
    <MjTable
      ref="gridRef"
      :search-form="searchForm"
      :grid="grid"
      :service="userService"
      v-bind="$attrs"
      hide-remove
    />
  </div>
</template>

<style lang="scss" scoped></style>
