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

import dayjs from '#/plugins/dayjs'

export default (event: { [key: string]: any }): TableColumn[] => [
  {
    label: '序号',
    render: (h, scope) => scope.$index + 1,
  },
  {
    label: '创建时间',
    prop: 'createTime',
    'show-overflow-tooltip': true,
    render: (h, scope) =>
      dayjs(scope.row.createTime).format('YYYY/MM/DD HH:mm'),
  },
  {
    label: '已有单词列表',
    prop: 'stageVo.wordList',
    render: (h, scope) => {
      return (
        <span>
          {scope.row.wordVoList.map((item: any, index: number) => {
            return (
              <span
                key={item.wordId}
                style={{
                  color: scope.row.wordVoList.length < 4 ? '#4f87f5' : '',
                }}
              >
                <span>
                  {item.spell}
                  {index === scope.row.wordVoList.length - 1 ? '' : ','}
                </span>
              </span>
            )
          })}
        </span>
      )
    },
  },
  {
    label: '操作',
    width: 240,
    fixed: 'right',
    render: (h, scope) => {
      return (
        <div>
          <ElButton
            onClick={() => event.handleClick(scope.row, 0)}
            type="primary"
          >
            编辑
          </ElButton>
          <ElPopconfirm
            onConfirm={() => event.handleClick(scope.row, 1)}
            persistent
            title="删除后无法恢复，确定吗？"
            width="220"
          >
            {{
              reference: () => <ElButton type="danger">删除</ElButton>,
            }}
          </ElPopconfirm>
        </div>
      )
    },
  },
]
