import type { Ref } from 'vue'

import {
  ElButton,
  ElImage,
  ElOption,
  ElPopconfirm,
  ElSelect,
} from 'element-plus'

import { updateWordForm } from '#/api'
import dictManagementApi from '#/api/modules/setting/dictManagement'
import { levelService } from '#/api/service/english/level'
import Switch from '#/components/Switch'
import hud from '#/utils/hud'

export const event_edit = 1 // 编辑
export const event_add = 2 // 新增
export const event_delete_meaning = 7 // 删除释义
export const event_delete_sentence = 3 // 删除句子

const tenseList = ref([]) // 变形标签列表
// 通过词典查询获取变形标签列表
dictManagementApi.getListSysDictData('word_form_label').then((res) => {
  tenseList.value = res
})

function unbind(row: any) {
  hud.confirmLoad(`[${row.znDesc}]确定要解绑关卡吗？`, {
    task: async () => {
      await levelService.removeLevelWord(row.levelInfo.id)
    },
    option: '解绑',
    hideSuccess: false,
  })
}

const createColumns = (
  event: { [key: string]: any },
  meaningId: Ref<string>,
): TableColumn[] => [
  {
    label: '中文描述',
    prop: 'znDesc',
    'show-overflow-tooltip': true,
    render: (h, scope) => {
      return (
        <span
          style={
            scope.row.id === meaningId.value
              ? 'color: var(--el-color-primary)'
              : ''
          }
        >
          {scope.row.znDesc}
        </span>
      )
    },
  },
  {
    label: '英文描述',
    prop: 'enDesc',
    'show-overflow-tooltip': true,
  },
  {
    label: '词性',
    width: 100,
    prop: 'typeAbbr',
  },
  {
    label: '关卡数',
    width: 100,
    prop: 'levelInfo.levelNum',
    render: (h, scope) => {
      if (scope.row.levelInfo) {
        // 增加点击事件
        return (
          <div
            onClick={() => unbind(scope.row)}
          >{`${scope.row.levelInfo.stageName}第${scope.row.levelInfo.levelNum}关`}</div>
        )
      }
    },
  },
  // {
  //   label: '待验收按钮',
  //   prop: 'acceptType',
  //   render: (h, scope) => {
  //     if (scope.row.acceptType === 2) {
  //       return <ElButton onClick={() => event.handleClick(5, scope.row)}>已验收</ElButton>
  //     } else if (scope.row.acceptType === 3) {
  //       return (
  //         <ElButton type='primary' onClick={() => event.handleClick(5, scope.row)}>
  //           待验收
  //         </ElButton>
  //       )
  //     }
  //   },
  // },
  {
    label: '标签',
    prop: 'meaningWordFormLabel',
    render: (h, scope) => {
      if (!scope.row.meaningId) return
      if (!scope.row.canChangeMeaningWordFormLabel) return
      return (
        <ElSelect
          onChange={(value) =>
            updateWordForm({
              meaningId: scope.row.meaningId,
              sentenceId: scope.row.id,
              meaningWordFormLabel: value,
            }).then(() => {
              event.handleClick(6, scope.row)
            })
          }
          placeholder="请选择"
          v-model={scope.row.meaningWordFormLabel}
        >
          {tenseList.value.map((item: any) => (
            <ElOption
              label={item.remark}
              value={Number.parseInt(item.value, 10)}
            ></ElOption>
          ))}
        </ElSelect>
      )
    },
  },
  {
    label: '是否有音频',
    prop: 'audiofile',
    align: 'center',
    width: 100,
    render: (h, scope) => {
      return (
        <div
          v-show={
            // eslint-disable-next-line no-prototype-builtins
            !scope.row.hasOwnProperty('children') &&
            (scope.row.brFile || scope.row.usFile)
          }
        >
          ✔
        </div>
      )
    },
  },
  // {
  //   label: '审查标志',
  //   width: 100,
  //   render: (h, scope) => {
  //     return (
  //       <Switch
  //         v-model={scope.row.checkFlag}
  //         inactive-value={0}
  //         active-value={1}
  //         active-text='是'
  //         inactive-text='否'
  //         loading={scope.row.loading}
  //         disabled={true}
  //         before-change={() => event.updateState(scope.row)}
  //       />
  //     )
  //   },
  // },
  {
    label: '放入关卡',
    width: 100,
    render: (h, scope) => {
      return (
        <Switch
          active-text="是"
          active-value={1}
          before-change={() => event.updateLevelFlag(scope.row)}
          inactive-text="否"
          inactive-value={0}
          v-model={scope.row.levelFlag}
          // eslint-disable-next-line no-prototype-builtins
          v-show={!scope.row.hasOwnProperty('children')}
        />
      )
    },
  },
  {
    label: '图片',
    prop: 'image',
    width: 100,
    render: (h, scope) => (
      <div>
        {scope.row.image.length > 0 ? (
          <ElImage
            hide-on-click-modal
            onSwitch={(index: number) =>
              event.clickImage(index, scope.row.image)
            }
            preview-teleported
            previewSrcList={scope.row.image.map((item: string) => {
              return item.includes('mp4')
                ? new URL(`/src/assets/image/video.png`, import.meta.url).href
                : item
            })}
            src={
              scope.row.image[0].includes('mp4')
                ? new URL(`/src/assets/image/video.png`, import.meta.url).href
                : scope.row.image[0]
            }
            style="height:50px"
          />
        ) : (
          <div></div>
        )}
      </div>
    ),
  },
  // {
  //   label: '修改时间',
  //   prop: 'updateTime',
  // },
  {
    label: '操作',
    render: (h, scope) => {
      return (
        <div>
          <ElButton
            onClick={() => event.handleClick(event_edit, scope.row)}
            type="primary"
          >
            编辑
          </ElButton>
          <ElButton
            onClick={() => event.handleClick(event_add, scope.row)}
            type="primary"
            // eslint-disable-next-line no-prototype-builtins
            v-show={scope.row.hasOwnProperty('children')}
          >
            新增例句
          </ElButton>
          <ElButton
            onClick={() => event.handleClick(event_delete_meaning, scope.row)}
            type="danger"
            // eslint-disable-next-line no-prototype-builtins
            v-show={scope.row.hasOwnProperty('children')}
          >
            删除
          </ElButton>
          <ElPopconfirm
            onConfirm={() =>
              event.handleClick(event_delete_sentence, scope.row)
            }
            title="确定要删除此行?"
            width="160px"
          >
            {{
              reference: () => (
                // eslint-disable-next-line no-prototype-builtins
                <ElButton v-show={!scope.row.hasOwnProperty('children')}>
                  删除
                </ElButton>
              ),
            }}
          </ElPopconfirm>
          {/* <ElButton type='primary' onClick={() => event.handleClick(4, scope.row)}>
            助记
          </ElButton> */}
        </div>
      )
    },
  },
]

export default createColumns
