<script setup lang="ts">
import type { VxeGridProps } from 'vxe-table'

import type { GroupUser } from '#/api/service/org/group'

import { VxeGrid } from 'vxe-table'

import { groupService } from '#/api/service/org/group'
import { mj_form_select } from '#/components/mj/mj-table'
import hud from '#/utils/hud'

defineOptions({ name: 'StudentList' })

const props = defineProps<{
  list: GroupUser[]
  members: any[]
}>()

// 事件
const emit = defineEmits(['refresh'])

const grid = {
  editConfig: {
    trigger: 'click',
    mode: 'cell',
  },
  columns: [
    {
      title: '名称',
      field: 'userName',
    },
    {
      title: '身份',
      field: 'userTypeCode',
      options: props.members,
      editRender: {
        name: mj_form_select,
        options: props.members,
        events: {
          change(cellParams, targetParams) {
            const id = cellParams.row.id
            const userTypeCode = targetParams.value
            groupService.updateUser({
              id,
              userTypeCode,
            } as GroupUser)
            // hud.load({
            //   task: async () => {
            //     await groupService.updateUser({
            //       id,
            //       userTypeCode,
            //     } as GroupUser)
            //   },
            //   option: '更新',
            // })
          },
        },
      },
    },
    {
      title: '操作',
      slots: {
        default: 'operation',
      },
    },
  ],
  data: props.list as any,
} as VxeGridProps

// 移除
function remove(stu: GroupUser) {
  hud.confirmLoad(`确定要移除【${stu.userName}】？`, {
    task: async () => {
      await groupService.removeUser(stu.userId)
      emit('refresh')
    },
    option: '移除',
  })
}
</script>

<template>
  <VxeGrid class="student-list" v-bind="grid">
    <template #operation="{ row }">
      <el-button type="danger" @click.stop="remove(row)">移除</el-button>
    </template>
  </VxeGrid>
  <!-- <table class="student-list">
    <tr class="student" v-for="stu in list">
      <td class="name">{{ stu.userName }}</td>
      <td class="type">{{ stu.userTypeValue }}</td>
    </tr>
  </table> -->
</template>

<style lang="scss" scoped>
.student-list {
  :deep(.vxe-header--column) {
    background-color: #ddd !important;
  }
}
</style>
