/* eslint-disable no-undef */
import { ElButton, ElAvatar, ElPopconfirm, ElImage } from 'element-plus'
import Switch from '#/components/Switch'
import getDict from '#/hooks/useDict'
import { ArrToObj } from '#/utils/tool'

const tagData = ArrToObj(getDict('mall_tool_tag'))
const remarkData = ArrToObj(getDict('user_personality_config'))
export default (event: { [key: string]: any }): TableColumn[] => [
  {
    label: '序号',
    width: 60,
    align: 'center',
    prop: 'sort',
  },
  {
    label: 'ID',
    align: 'center',
    prop: 'id',
  },
  {
    label: '类别',
    align: 'center',
    width: 80,
    prop: 'remark',
    render: (h, scope) => {
      return <span>{remarkData[scope.row.remark]}</span>
    },
  },
  {
    label: '名称',
    align: 'center',

    prop: 'name',
  },
  {
    label: '预览图标',
    align: 'center',
    prop: 'career',
    render: (h, scope) => (
      <div class="row-page">
        <ElImage
          preview-teleported
          hide-on-click-modal
          class="bookCover"
          src={scope.row.resourceUrl}
          previewSrcList={[scope.row.resourceUrl]}
        />
      </div>
    ),
  },
  {
    label: '价格',
    align: 'center',
    width: 100,

    prop: 'currencyNum',
  },
  {
    label: '标签',
    align: 'center',
    width: 80,
    prop: 'showTag',
    render: (h, scope) => {
      return <span>{tagData[scope.row.showTag]}</span>
    },
  },
  // {
  //     label: '时装分',
  //     prop: 'coreWordCount',
  // },
  {
    label: '用途',
    align: 'center',
    render: (h, scope) => {
      return (
        <span>
          {scope.row.usageFlag === 1
            ? '扭蛋'
            : scope.row.usageFlag === 2
              ? '任务'
              : '其他'}
        </span>
      )
    },
  },
  {
    label: '等级要求',
    align: 'center',

    prop: 'coreWordCount',
    render: (h, scope) => {
      return <span>{scope.row.limitType || '无'}</span>
    },
  },
  {
    label: '状态',
    align: 'center',
    width: 100,
    render: (h, scope) => {
      return (
        <Switch
          v-model={scope.row.status}
          inactive-value={0}
          active-value={1}
          loading={scope.row.loading}
          before-change={() => event.updateState(scope.row)}
        />
      )
    },
  },

  {
    label: '操作',
    align: 'center',
    width: 200,
    fixed: 'right',
    render: (h, scope) => {
      return (
        <div>
          <ElButton
            type="primary"
            onClick={() => event.handleClick(scope.row, 0)}
          >
            编辑
          </ElButton>
          <ElPopconfirm
            title="删除后无法恢复，确定吗？"
            width="220"
            persistent
            onConfirm={() => event.handleClick(scope.row, 1)}
          >
            {{
              reference: () => <ElButton type="danger">删除</ElButton>,
            }}
          </ElPopconfirm>
        </div>
      )
    },
  },
]
