import { BasicColumn, FormSchema } from '/@/components/Table';
import { getOrganizationList } from '/@/api/system/system';
import { copyTransFun } from '/@/utils/fnUtils';
import type { FormSchema as QFormSchema } from '/@/components/Form/index';

import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
import { h } from 'vue';
import SnHelpMessage from './SnHelpMessage.vue';

export enum CameraPermission {
  PREVIEW = 'api:yt:video:get',
  CREATE = 'api:yt:video:post',
  UPDATE = 'api:yt:video:update',
  DELETE = 'api:yt:video:delete',
}

export enum AccessMode {
  ManuallyEnter = 0,
  Streaming = 1,
}

export enum PlayProtocol {
  HTTP = 0,
  HTTPS = 1,
}

export enum StreamType {
  MASTER = 0,
  CHILD = 1,
  THIRD = 2,
}

export enum PageMode {
  SPLIT_SCREEN_MODE = 'splitScreen',
  LIST_MODE = 'listMode',
  FULL_SCREEN_MODE = 'fullScreenMode',
}

export enum MediaType {
  MP4 = 'mp4',
  M3U8 = 'm3u8',
}

// 表格列数据
export const columns: BasicColumn[] = [
  {
    title: '封面',
    dataIndex: 'avatar',
    width: 80,
    slots: { customRender: 'img' },
  },
  {
    title: '名字',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '摄像头编号/监控点编号',
    dataIndex: 'sn',
    width: 220,
  },
  {
    title: '视频流',
    dataIndex: 'videoUrl',
    width: 120,
  },
  {
    title: '所属组织',
    dataIndex: 'organizationName',
    width: 160,
  },
  {
    title: '获取方式',
    dataIndex: 'accessMode',
    width: 100,
    slots: { customRender: 'accessMode' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 140,
  },
];

// 查询字段
export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '摄像头名字',
    component: 'Input',
    colProps: { span: 8 },
    componentProps: {
      maxLength: 36,
      placeholder: '请输入摄像头名字',
    },
  },
];

// 弹框配置项
export const formSchema: QFormSchema[] = [
  {
    field: 'avatar',
    label: '视频封面',
    slot: 'iconSelect',
    component: 'Input',
  },
  {
    field: 'name',
    label: '视频名字',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入视频名字',
      maxLength: 30,
    },
    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
  },
  {
    field: 'organizationId',
    label: '所属组织',
    required: true,
    component: 'ApiTreeSelect',
    componentProps: {
      api: async () => {
        const data = await getOrganizationList();
        copyTransFun(data as any as any[]);
        return data;
      },
    },
  },
  {
    label: '视频流获取方式',
    field: 'accessMode',
    component: 'RadioGroup',
    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
    defaultValue: AccessMode.ManuallyEnter,
    componentProps({ formActionType }) {
      return {
        defaultValue: AccessMode.ManuallyEnter,
        placeholder: '请选择视频流获取方式',
        options: [
          { label: '手动输入', value: AccessMode.ManuallyEnter },
          { label: '流媒体获取', value: AccessMode.Streaming },
        ],
        onChange() {
          formActionType.setFieldsValue({
            brand: null,
            sn: null,
            videoUrl: null,
            videoPlatformId: null,
          });
        },
      };
    },
  },
  {
    field: 'brand',
    label: '视频厂家',
    component: 'Input',
    ifShow({ values }) {
      return values.accessMode === AccessMode.ManuallyEnter;
    },
    componentProps: {
      maxLength: 36,
      placeholder: '请输入视频厂家',
    },
  },
  {
    field: 'sn',
    label: '摄像头编号',
    required: true,
    component: 'Input',
    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
    ifShow({ values }) {
      return values.accessMode === AccessMode.ManuallyEnter;
    },
    componentProps: {
      maxLength: 36,
      placeholder: '请输入摄像头编号',
    },
  },
  {
    field: 'videoUrl',
    label: '视频流',
    component: 'Input',
    required: true,
    ifShow({ values }) {
      return values.accessMode === AccessMode.ManuallyEnter;
    },
    componentProps: {
      placeholder: '请输入视频流',
      maxLength: 255,
    },
    rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
  },

  {
    field: 'videoPlatformId',
    label: '流媒体配置',
    component: 'Select',
    ifShow({ values }) {
      return values.accessMode === AccessMode.Streaming;
    },
    slot: 'videoPlatformIdSlot',
    componentProps: {
      placeholder: '请选择流媒体配置',
    },
  },
  {
    field: 'streamType',
    label: '码流',
    component: 'RadioGroup',
    defaultValue: StreamType.MASTER,
    ifShow({ values }) {
      return values.accessMode === AccessMode.Streaming;
    },
    componentProps: {
      placeholder: '请选择码流',
      defaultValue: StreamType.MASTER,
      options: [
        { label: '主码流', value: StreamType.MASTER },
        { label: '子码流', value: StreamType.CHILD },
        { label: '第三码流', value: StreamType.THIRD },
      ],
    },
  },
  {
    field: 'playProtocol',
    label: '播放协议',
    component: 'RadioGroup',
    defaultValue: PlayProtocol.HTTP,
    ifShow({ values }) {
      return values.accessMode === AccessMode.Streaming;
    },
    helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
    componentProps: {
      placeholder: '请选择播放协议',
      defaultValue: PlayProtocol.HTTP,
      options: [
        { label: 'http', value: PlayProtocol.HTTP },
        { label: 'https', value: PlayProtocol.HTTPS },
      ],
    },
  },
  {
    field: 'sn',
    label: h(SnHelpMessage) as any,
    component: 'Input',
    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
    ifShow({ values }) {
      return values.accessMode === AccessMode.Streaming;
    },
    componentProps: {
      placeholder: '请输入监控点编号',
    },
  },
];
