import { h, Fragment } from "vue";
import { ElButton, ElImage, ElUpload } from "element-plus";
import {
  type PlusColumn,
  type FieldValues,
  PlusForm
} from "plus-pro-components";

export const useColumns = () => {
  const { pkg, lastBuildTime } = __APP_INFO__;
  const { version, engines } = pkg;
  const columns: PlusColumn[] = [
    {
      label: "WEB标题",
      width: 120,
      prop: "webTitle",
      valueType: "input",
    },
    {
      label: "LOGO",
      width: 120,
      prop: "logoBase64",
      valueType: 'img',
      renderField(value, onChange) {
        // 自定义上传
        const handleHttpRequest = async ({ file, onError, onSuccess }: any) => {
          try {
            onSuccess(file)
          } catch (error: any) {
            onError(error)
          }
          return file
        }

        return h(Fragment, [
          h(ElImage as any, {
            src: value,
            previewSrcList: [value],
            style: value
              ? {
                width: '60px',
                marginRight: '10px'
              }
              : {}
          }),
          h(
            ElUpload,
            {
              action: '',
              httpRequest: handleHttpRequest,
              onChange: async (data: any) => {
                const value = await fileToDataURL(data.raw)
                // 手动调用 renderField 的onChange 回调把值传给表单
                onChange(value)
              }
            },
            () => h(ElButton, () => '点击上传')
          )
        ])
      }
    },
    {
      label: "运营商",
      width: 200,
      prop: "owner",
      valueType: "input",
    },
    {
      label: "显示版权",
      width: 200,
      prop: "enableCopyright",
      valueType: "input"
    },
    {
      label: "更新周期(ms)",
      width: 200,
      prop: "scheduleInterval",
      valueType: "input"
    },
  ]

  return {
    columns,
  };
}