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

import { removeWordLinkApi } from '#/api'
import Switch from '#/components/Switch'
import hud from '#/utils/hud'

function clickLinkSpell(word: any) {
  hud.confirmLoad(`确定要删除【${word.spell}】的引用吗？`, {
    task: async () => {
      await removeWordLinkApi(word.id)
    },
    option: '删除',
  })
}

export default (event: { [key: string]: any }): TableColumn[] => [
  // { type: 'selection', fixed: 'left' },
  {
    label: '拼写',
    prop: 'spell',
    // width: 120,
    render(h, scope) {
      return (
        <span
          style={{
            color:
              scope.row.inLevel && !scope.row.finishBinding
                ? 'rgb(216, 63, 63)'
                : 'black',
          }}
        >
          {scope.row.spell}
        </span>
      )
    },
  },
  {
    label: '引用单词',
    prop: 'linkSpell',
    render(h, scope) {
      return scope.row.linkSpell ? (
        <span onClick={() => clickLinkSpell(scope.row)} style="cursor: pointer">
          {scope.row.linkSpell}
        </span>
      ) : (
        ''
      )
    },
    // width: 120,
  },
  {
    label: '是否被关卡选中',
    // width: 180,
    render: (h, scope) => {
      return (
        <Switch
          active-text="是"
          active-value={1}
          disabled={true}
          inactive-text="否"
          inactive-value={0}
          loading={scope.row.loading}
          v-model={scope.row.inLevel}
        />
      )
    },
  },
  {
    label: '审查进度',
    prop: 'checkprogress',
    render: (h, scope) => {
      return <span v-text={`${scope.row.completed}/${scope.row.total}`}></span>
    },
  },
  // {
  //     label: '审查标志',
  //     prop: 'checkFlag',
  //     render: (h, scope) => {
  //         return (
  //             <Switch
  //                 v-model={scope.row.checkFlag}
  //                 inactive-value={0}
  //                 active-value={1}
  //                 loading={scope.row.loading}
  //                 before-change={() => event.updateState(scope.row)}
  //             />
  //         );
  //     },
  // },
  // {
  //     label: '标签',
  //     prop: 'labels',
  //     // width: 120,
  //     'show-overflow-tooltip': true,
  // },
  // {
  //     label: '是否是连接单词',
  //     prop: 'linkId',
  // },
  // {
  //     label: '是否是短语',
  //     prop: 'phraseFlag',
  //     width: 120
  // },
  // {
  //     label: '英音',
  //     prop: 'brAccents',
  // },
  // {
  //     label: '美音',
  //     prop: 'usAccents',
  // },
  // {
  //     label: '词源',
  //     prop: 'wordOrigin',
  //     // width: 120,
  // },
  // {
  //     label: '英文描述',
  //     prop: 'enDesc',
  //     // width: 120,
  //     'show-overflow-tooltip': true,
  // },
  {
    label: '中文描述',
    prop: 'znDesc',
    // width: 120,
    'show-overflow-tooltip': true,
  },
  {
    label: '修改时间',
    prop: 'updateTime',
    // width: 120,
  },
  // {
  //     label: '使用管理',
  //     width: 180,
  //     render: (h, scope) => {
  //         return (
  //             <Switch
  //                 v-model={scope.row.status}
  //                 inactive-value={1}
  //                 active-value={0}
  //                 loading={scope.row.loading}
  //                 before-change={() => event.updateState(scope.row)}
  //             />
  //         );
  //     },
  // },

  // {
  //     label: '创建时间',
  //     prop: 'createTime',
  //     'show-overflow-tooltip': true,
  //     render: (h, scope) => {
  //         return dayjs(scope.row.createTime).format('YYYY/MM/DD HH:mm');
  //     },
  // },

  {
    label: '操作',
    width: 280,
    fixed: 'right',
    render: (h, scope) => {
      return (
        <div>
          <ElButton
            onClick={() => event.handleClick(scope.row, 0)}
            type="primary"
          >
            详情
          </ElButton>
          <ElButton
            onClick={() => event.joinLevel(scope.row, 0)}
            type="primary"
          >
            加入关卡
          </ElButton>
          <ElPopconfirm
            onConfirm={() => event.handleDelete(scope.row, 0)}
            persistent
            title="删除后无法恢复，确定吗？"
            width="220"
          >
            {{
              reference: () => (
                <ElButton type="danger" v-show={scope.row.source === 2}>
                  删除
                </ElButton>
              ),
            }}
          </ElPopconfirm>
        </div>
      )
    },
  },
]
