import { Tag } from '@arco-design/web-vue'
import { h } from 'vue'
import { useUserStore } from '@/store/user'
import { ListFormOption } from '@/types'

const userStore = useUserStore()
const option: ListFormOption = {
  api: '/sys/role',
  permissionPrefix: 'sys_role_',
  permissions: userStore.permissions,
  viewBtn: {
    display: false
  },
  delBtn: {
    display: (record: any) => !record.isSystem
  },
  tabsProps: {
    columns: [
      {
        title: '权限管理',
        slotName: 'permission',
        permission: 'sys_role_permission'
      }
    ]
  },
  columns: [
    {
      name: '角色名',
      prop: 'name',
      rules: [
        { required: true, message: '名称不能为空' },
        { minLength: 2, message: '名称不少于2个字符' },
        { maxLength: 20, message: '不能超过20个字符' }
      ]
    },
    {
      name: '角色描述',
      prop: 'description',
      type: 'textarea',
      rules: [{ maxLength: 200, message: '不能超过200个字符' }]
    },
    {
      name: '系统内置',
      prop: 'isSystem',
      width: 150,
      value: false,
      type: 'switch',
      addDisplay: false,
      editDisplay: false,
      formatValue: (record: any) => {
        return h(
          Tag,
          { color: record.isSystem ? 'orangered' : '' },
          { default: () => [h('span', record.isSystem ? '是' : '否')] }
        )
      }
    }
  ]
}
export default option
