<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts" name="replace-mgr">
import type { MjGridProps } from '#/components/mj/mj-table'

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

import { potentialUserService } from '#/api/service/potential-user'
import MjTable, {
  mj_form_input,
  mj_form_money,
  mj_form_phone,
  mj_form_radio_group,
  mj_form_select,
} from '#/components/mj/mj-table'
import { pattern_phone } from '#/components/mj/mj-table/fmt'
import obj from '#/utils/obj'

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

const gridRef = ref()
const { userInfo } = storeToRefs(useUserStore())
const schoolRender = useSearchSchool({
  prepare: {
    gridRef,
  },
})

const type_parent = 0
const type_school = 1

// 编辑表单
const editForm = {
  modal: {
    width: 720,
  },
  form: {
    titleWidth: 110,
    items: [
      {
        required: true,
        field: 'phone',
        title: '家长手机',
        pattern: pattern_phone,
        span: 24,
        itemRender: {
          name: mj_form_phone,
        },
      },
      {
        field: 'name',
        title: '学员姓名',
        span: 24,
        itemRender: {
          name: mj_form_input,
        },
      },
      {
        field: 'sex',
        title: '学员性别',
        span: 24,
        itemRender: {
          name: mj_form_radio_group,
          options: sex_options,
        },
      },
      {
        required: true,
        field: 'existingVip',
        title: '老会员',
        span: 24,
        itemRender: {
          name: mj_form_radio_group,
          options: is_options,
        },
      },
      {
        field: 'price',
        title: '激活价',
        span: 24,
        itemRender: {
          name: mj_form_money,
        },
      },
      userInfo.value.isOnlyStaff || {
        required: true,
        field: 'schoolId',
        title: '学校',
        span: 24,
        itemRender: schoolRender,
      },
    ],
  },
  updateFields: [
    'id',
    'phone',
    'name',
    'schoolId',
    'sex',
    'type',
    'price',
    'existingVip',
  ],
  beforeEditFormShow(data: any, edit: boolean) {
    if (edit) {
      gridRef.value.hideEditFormItems('schoolId')
    } else {
      gridRef.value.showEditFormItems('schoolId')
      data = {
        existingVip: is_yes,
      }
    }
    return data
  },
  beforeSaveOrUpdate(data: any) {
    // 必须是学校类型
    data.type = type_school
    return data
  },
} as any

// 搜索表单
const searchForm = {
  items: obj.joinObjs<any>(
    userInfo.value.isOnlyStaff || {
      field: 'type',
      title: '邀请人',
      span: 6,
      itemRender: {
        name: mj_form_select,
        props: {
          clearable: true,
        },
        options: [
          {
            label: '家长',
            value: type_parent,
          },
          {
            label: '学校',
            value: type_school,
          },
        ],
        events: {
          change() {
            gridRef.value.reload()
          },
        },
      },
    },
    userInfo.value.isOnlyStaff || {
      field: 'tenantId',
      title: '平台',
      span: 6,
      itemRender: {
        name: mj_form_select,
        props: {
          clearable: true,
        },
        options: platform_options,
        events: {
          change() {
            gridRef.value.reload()
          },
        },
      },
    },
  ),
} as any

// 表格
const grid = {
  columns: obj.joinObjs<any>(
    { type: 'seq' },
    userInfo.value.isOnlyStaff || {
      field: 'tenantId',
      title: '平台',
      formatter({ cellValue }: any) {
        return platform_map[cellValue]
      },
    },
    {
      field: 'name',
      title: '姓名',
    },
    {
      field: 'phone',
      title: '手机',
      formatter: 'redactionPhone',
    },
    {
      field: 'sex',
      title: '性别',
      formatter({ cellValue }: any) {
        return sex_map[cellValue]
      },
    },
    userInfo.value.isOnlyStaff || {
      field: 'price',
      title: '激活价格',
    },
    {
      title: '老会员',
      slots: {
        default: 'existingVip',
      },
    },
    userInfo.value.isOnlyStaff || {
      title: '邀请人',
      formatter({ row }: any) {
        // return row.inviterName
        return row.parentName || row.schoolName
      },
    },
    {
      field: 'code',
      title: '邀请码',
    },
    {
      field: 'createTime',
      title: '创建时间',
    },
    {
      field: 'registerTime',
      title: '注册时间',
    },
    {
      field: 'activeTime',
      title: '激活时间',
    },
  ),
  beforeLoadData(params) {
    if (userInfo.value.isOnlyStaff) {
      // 如果不是超级管理员，需要传递学校的id
      params.schoolId = userInfo.value.schoolId
      // 只能查询学校类型
      params.type = type_school
    }
    return params
  },
  disableEdit(row: any) {
    // 只要注册过的，就不允许再编辑
    return row.registerTime
  },
} as MjGridProps

watch(
  () => gridRef.value?.getEditFormData()?.existingVip,
  (val: any) => {
    if (val === is_yes) {
      gridRef.value.hideEditFormItems('price')
    } else {
      gridRef.value.showEditFormItems('price')
    }
  },
)
</script>

<template>
  <div class="potential-user g-container">
    <MjTable
      ref="gridRef"
      :edit-form="editForm"
      :search-form="searchForm"
      :grid="grid"
      :service="potentialUserService"
    >
      <template #existingVip="{ row }">
        <div class="flex justify-center">
          <OpenEmojiRight v-if="row.existingVip === 1" width="36" />
          <OpenEmojiWrong v-else width="36" />
        </div>
      </template>
    </MjTable>
  </div>
</template>

<style lang="scss" scoped>
.potential-user {
  height: 100% !important;
}
</style>
