import { ElButton, ElPopconfirm, ElTag } from 'element-plus'

import Switch from '#/components/Switch'
import filterDate from '#/hooks/filterDate'

const TYPE_MAP: anyObj = {
  '0': {
    label: '菜单目录',
    color: '',
  },
  '1': {
    label: '菜单项',
    color: 'success',
  },
  '2': {
    label: '页面按钮',
    color: 'info',
  },
}
export default (event: { [key: string]: any }): TableColumn[] => [
  // { type: 'sort', fixed: 'left' },
  { label: '标题', prop: 'name', width: 150 },
  // { label: '图标', prop: 'questionNum' },
  {
    label: '类型',
    prop: 'type',
    width: 100,
    render: (h, scope) => (
      <ElTag type={TYPE_MAP[scope.row.type]?.color || 'primary'}>
        {TYPE_MAP[scope.row.type]?.label}
      </ElTag>
    ),
  },
  { label: '路由地址', prop: 'path', 'show-overflow-tooltip': true },
  { label: '组件名称', prop: 'componentName', 'show-overflow-tooltip': true },
  { label: '组件地址', prop: 'componentPath', 'show-overflow-tooltip': true },
  {
    label: '缓存',
    prop: 'keepalive',
    width: 120,
    render: (h, scope) => {
      return (
        <Switch
          active-value={1}
          before-change={() => event.updateKeepalive(scope.row)}
          inactive-value={0}
          loading={scope.row.KLoading}
          v-model={scope.row.keepalive}
        />
      )
    },
  },
  {
    label: '状态',
    prop: 'status',
    width: 120,
    render: (h, scope) => {
      return (
        <Switch
          active-value={0}
          before-change={() => event.updateState(scope.row)}
          inactive-value={1}
          loading={scope.row.loading}
          v-model={scope.row.status}
        />
      )
    },
  },
  {
    label: '修改时间',
    prop: 'updateTime',
    'show-overflow-tooltip': true,
    render: (h, { row }) =>
      row.updateTime ? filterDate(row.updateTime) : filterDate(row.createTime),
  },
  {
    label: '操作',
    width: 240,
    render: (h, scope) => {
      return (
        <div>
          <ElButton
            onClick={() => event.handleClick(1, scope.row)}
            type="primary"
          >
            编辑
          </ElButton>
          <ElPopconfirm
            onConfirm={() => event.handleClick(2, scope.row)}
            title="确定要删除此行?"
            width="160px"
          >
            {{
              reference: () => <ElButton>删除</ElButton>,
            }}
          </ElPopconfirm>
        </div>
      )
    },
  },
]
