import { useRouter } from 'vue-router'

import { Picture, PictureFilled } from '@element-plus/icons-vue'
import {
  ElButton,
  ElCard,
  ElIcon,
  ElImage,
  ElPopconfirm,
  ElPopover,
} from 'element-plus'

function renderWordImg(scope: any, reference: () => any) {
  return scope.row.wordList.length > 0 ? (
    <ElPopover
      effect="dark"
      placement="top-start"
      popper-class="wordImgPopover"
      visible-arrow={false}
      width="auto"
    >
      {{
        default: () => (
          <div class="image-grid">
            {scope.row.wordList.map((item: any) => {
              if (!item.meaningVo) {
                return `-${item.spell}-`
              }
              return (
                <ElCard class="box-card">
                  <div class="img">
                    {item.wordImg ? (
                      <ElImage fit="contain" src={item.wordImg}>
                        {{
                          error: () => (
                            <div class="image-slot">
                              <ElIcon>
                                <PictureFilled />
                              </ElIcon>
                            </div>
                          ),
                        }}
                      </ElImage>
                    ) : (
                      <div class="image-slot">
                        <ElIcon>
                          <Picture />
                        </ElIcon>
                      </div>
                    )}
                  </div>
                  <div class="footer">
                    <div>{item.spell}</div>
                    <div>
                      {item.meaningVo.typeAbbr} {item.meaningVo.simpleDesc}
                    </div>
                  </div>
                </ElCard>
              )
            })}
          </div>
        ),
        reference,
      }}
    </ElPopover>
  ) : (
    reference()
  )
}

export default (event: { [key: string]: any }): TableColumn[] => [
  {
    label: '阶段',
    prop: 'stageVo.name',
    render: (h, scope) => {
      return scope.row.wordList?.length === 4 ? (
        scope.row.stageVo.name
      ) : (
        <span style="color: red;">{scope.row.stageVo.name}</span>
      )
    },
  },
  {
    label: '关卡数',
    prop: 'levelNum',
  },
  // {
  //   label: '关卡类型',
  //   width: 240,
  //   // width: '200px',
  //   prop: 'levelType',
  //   render: (h, scope) => {
  //     let typeName = ''
  //     switch (scope.row.levelType) {
  //       case 1:
  //         typeName = '普通关卡'
  //         break
  //       case 2:
  //         typeName = '消消乐关卡'
  //         break
  //     }
  //     return typeName
  //   },
  // },
  // {
  //     label: '创建时间',
  //     prop: 'createTime',
  //     'show-overflow-tooltip': true,
  //     render: (h, scope) => dayjs(scope.row.createTime).format('YYYY/MM/DD HH:mm'),
  // },
  {
    label: '操作',
    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>
      )
    },
  },
  {
    label: '已选单词列表',
    prop: 'stageVo.wordList',
    width: 500,
    render: (h, scope) => {
      const router = useRouter()
      return renderWordImg(scope, () => (
        <span>
          {scope.row.wordList.map((item: any, index: number) => {
            if (!item.meaningVo) {
              return `-${item.spell}-`
            }
            return (
              <span
                key={item.wordId}
                onClick={() => {
                  router.push(
                    `/word-mgr/word-detail/${item.wordId}?meaningId=${item.meaningVo.id}`,
                  )
                }}
                style={{
                  cursor: 'pointer',
                  color: scope.row.wordList.length < 4 ? '#4f87f5' : '',
                }}
              >
                <span
                  style={{
                    color:
                      item.meaningVo.levelSentenceCount === 0 ? '#dd4051' : '',
                    textDecoration: item.wordImg ? 'none' : 'underline',
                  }}
                >
                  {item.spell}
                  {item.meaningVo.levelSentenceCount > 0
                    ? `[${item.meaningVo.levelSentenceCount}]`
                    : ''}
                  {index === scope.row.wordList.length - 1 ? '' : ','}
                </span>
              </span>
            )
          })}
        </span>
      ))
    },
  },
]
