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

import { IcomoonCoin } from '@vben/icons'
import { useAccessStore, useUserStore } from '@vben/stores'

import { teacherService } from '#/api/service/org/teacher'
import { mj_form_text } from '#/components/mj/mj-table'
import obj from '#/utils/obj'

import CoinAccounts from '../common/coin-accounts.vue'
import {
  useSearchClass,
  useSearchSchoolClass,
  useSearchUser,
} from '../hooks/search'

const { userInfo } = storeToRefs(useUserStore())
const { accessCodes } = storeToRefs(useAccessStore())
const hasNewAssociationPermission = computed(() => {
  return accessCodes.value.includes('newAssociation')
})
const hasRemoveAssociationPermission = computed(() => {
  return accessCodes.value.includes('removeAssociation')
})
const gridRef = ref()

// 表单
const userRender = useSearchUser({
  getData: () => gridRef.value.getEditFormData(),
  props: {
    cmpProps: { schoolPersonType: 1, fixedSchoolPersonType: true },
    multiSelectable: true,
  },
})

const schoolClassRender = useSearchSchoolClass({
  prepare: { gridRef },
})
const schoolRender = schoolClassRender.schoolRender
let classRender = schoolClassRender.classRender
if (userInfo.value.isOnlyStaff) {
  classRender = useSearchClass({
    prepare: { gridRef },
  })
}

const editForm = {
  modal: {
    width: 720,
  },
  form: {
    items: obj.joinObjs<any>(
      userInfo.value.isOnlyStaff || {
        required: true,
        field: 'schoolName',
        title: '学校',
        span: 24,
        itemRender: {
          name: mj_form_text,
          props: {
            linkedRender: schoolRender,
          },
        },
      },
      {
        required: true,
        field: 'className',
        title: '班级',
        span: 12,
        itemRender: {
          name: mj_form_text,
          props: {
            linkedRender: classRender,
          },
        },
      },
      {
        required: true,
        title: '教师',
        field: 'userId',
        span: 12,
        itemRender: userRender,
      },
    ),
    data: {},
  },
  addFields: ['userId', 'classId'],
  beforeSaveOrUpdate(data) {
    if (userInfo.value.isOnlyStaff) {
      data.schoolId = userInfo.value.schoolId
    }
    return data
  },
  beforeEditFormShow(data) {
    if (userInfo.value.isOnlyStaff) {
      // 传递schoolId给userRender
      userRender.props.cmpProps.schoolId = userInfo.value.schoolId
    }
    return data
  },
} as MjEditFormProps

// 搜索表单
const searchForm = {
  items: obj.joinObjs(
    userInfo.value.isOnlyStaff || {
      title: '学校',
      field: 'schoolId',
      span: 6,
      itemRender: schoolRender,
    },
    {
      title: '班级',
      field: 'classId',
      span: 6,
      itemRender: classRender,
    },
  ),
} as MjFormProps

// 表格
const grid = {
  columns: obj.joinObjs<any>(
    { type: 'seq' },
    {
      field: 'userName',
      title: '老师姓名',
    },
    {
      field: 'userAccount',
      title: '老师账号',
    },
    userInfo.value.isOnlyStaff || { field: 'schoolName', title: '学校' },
    { field: 'className', title: '班级' },
    {
      fixed: 'right',
      title: '操作',
      slots: {
        default: 'operation',
      },
    },
  ),
  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

// 查看乐贝
const selectUser = ref({} as any)
const showCoinAccount = ref(false)
function checkCoin(row: any) {
  selectUser.value = row
  showCoinAccount.value = true
}
</script>

<template>
  <div class="class-staff g-container">
    <mj-table
      ref="gridRef"
      add-button-text="新增关联"
      delete-button-text="移除关联"
      :search-form="searchForm"
      :edit-form="editForm"
      :grid="grid"
      :service="teacherService"
      :hide-add="!hasNewAssociationPermission"
      :hide-remove="!hasRemoveAssociationPermission"
      hide-edit
      v-bind="$attrs"
    >
      <template #operation="{ row }">
        <el-button type="success" :icon="IcomoonCoin" @click="checkCoin(row)">
          乐贝账户
        </el-button>
      </template>
    </mj-table>

    <CoinAccounts
      v-model="showCoinAccount"
      :user-id="selectUser.userId"
      :user-name="selectUser.userName"
    />
  </div>
</template>

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