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

import { OpenEmojiRight, OpenEmojiWrong } from '@vben/icons'
import { useUserStore } from '@vben/stores'

import { selectStudentService } from '#/api/service/org/select-student'
import obj from '#/utils/obj'

import { useSearchSchool } from '../../hooks/search'

defineOptions({ name: 'SelectStudent' })
const { userInfo } = storeToRefs(useUserStore())
const schoolRender = useSearchSchool({
  change: () => gridRef.value.reload(),
})
// 搜索表单
const searchForm = {
  items: obj.joinObjs(
    userInfo.value.isOnlyStaff || {
      title: '学校',
      field: 'schoolId',
      span: 6,
      itemRender: schoolRender,
    },
  ),
} as MjFormProps

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq', width: 100 },
    {
      field: 'name',
      title: '名称',
    },
    { field: 'nickName', title: '昵称' },
    { field: 'account', title: '账号' },
    { field: 'schoolName', title: '来源' },
    {
      title: '共享学员',
      slots: {
        default: 'share',
      },
    },
  ],
  beforeLoadData(params) {
    if (userInfo.value.isSpStaff) {
      // 如果是服务商人员
      params.providerId = userInfo.value.providerId
    } else if (userInfo.value.isStaff) {
      // 如果是学校人员
      params.schoolId = userInfo.value.schoolId
    }
    return params
  },
} as MjGridProps
</script>

<template>
  <div class="select-student g-container">
    <MjTable
      ref="gridRef"
      :search-form="searchForm"
      :grid="grid"
      :service="selectStudentService"
      v-bind="$attrs"
      hide-remove
    >
      <template #share="{ row }">
        <div class="flex justify-center">
          <OpenEmojiRight v-if="row.dstSchoolName" width="36" />
          <OpenEmojiWrong v-else width="36" />
        </div>
      </template>
    </MjTable>
  </div>
</template>

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