import { Tag } from '@arco-design/web-vue'
import { computed, h, Ref } from 'vue'
import menuTypeEnum from '@/enums/menu_type'
import { useUserStore } from '@/store/user'
import axios from '@/utils/axios'
import { ListFormOption } from '@/types'

const onlyMenuDisplay = (row: any): boolean => row.menuType === 'menu'
const onlyBtnDisplay = (row: any): boolean => row.menuType === 'button'

const userStore = useUserStore()

export default (platformType: Ref) => {
  const option = computed<ListFormOption>(() => {
    return {
      api: {
        base: '/sys/menu'
      },
      isTree: true,
      addBtn: {
        onBefore: (form: any): any => {
          return {
            parentId: form ? form.id : undefined,
            platformType: platformType.value
          }
        }
      },
      permissionPrefix: 'sys_menu_',
      permissions: userStore.permissions,
      columns: [
        {
          name: '父级id',
          prop: 'parentId',
          type: 'tree',
          viewDisplay: false,
          allowClear: true,
          dicData: () => axios.post('/sys/menu/fetch', { platformType: platformType.value }),
          props: {
            key: 'id',
            title: 'name',
            icon: 'iconRender'
          }
        },
        {
          name: '名称',
          prop: 'name',
          rules: [
            { required: true, message: '名称不能为空' },
            { minLength: 2, message: '名称不少于2个字符' },
            { maxLength: 50, message: '不能超过50个字符' }
          ],
          formatValue: (record: any) => {
            return h(
              'span',
              {},
              {
                default: () => {
                  if (record.type === '1') {
                    return [h(Tag, {}, { default: () => [h('span', record.name)] })]
                  }
                  const arr = [h('span', record.name)]
                  if (record.icon) {
                    arr.splice(0, 0, h('i', { class: record.icon, style: 'margin-right:4px;' }))
                  }
                  return arr
                }
              }
            )
          }
        },
        {
          name: '类型',
          prop: 'menuType',
          type: 'radio',
          value: 'menu',
          dicData: menuTypeEnum,
          rules: [{ required: true, message: '类型不能为空' }]
        },
        {
          name: '图标',
          prop: 'icon',
          display: onlyMenuDisplay
        },
        {
          name: '路径',
          prop: 'path',
          display: onlyMenuDisplay,
          rules: [
            { required: true, message: '路径不能为空' },
            { maxLength: 50, message: '不能超过50个字符' }
          ]
        },
        {
          name: '权限',
          prop: 'permission',
          display: onlyBtnDisplay,
          rules: (record: any) => {
            if (record.menuType === 'button') {
              return [
                { required: true, message: '权限不能为空' },
                { maxLength: 50, message: '不能超过50个字符' }
              ]
            }
            return undefined
          }
        },
        {
          name: '是否缓存',
          prop: 'isKeepAlive',
          value: false,
          type: 'switch',
          display: onlyMenuDisplay,
          rules: [{ required: true, message: '类型不能为空' }],
          formatValue: (record: any) => {
            if (record.type === '1') {
              return h('span', '')
            }
            return h(
              Tag,
              { color: record.isKeepAlive ? 'orangered' : '' },
              { default: () => [h('span', record.isKeepAlive ? '是' : '否')] }
            )
          }
        },
        {
          name: '排序',
          prop: 'sort',
          type: 'number',
          value: 0,
          min: 0,
          width: 80,
          max: 99999999
        }
      ]
    }
  })
  return {
    option
  }
}
