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 { getStreamingMediaList } from '/@/api/camera/cameraManager';
import { h } from 'vue';
import SnHelpMessage from './SnHelpMessage.vue';
export enum AccessMode {
  ManuallyEnter = 0,
  Streaming = 1,
}

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

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

// 表格列数据
export const columns: BasicColumn[] = [
  {
    title: '封面',
    dataIndex: 'avatar',
    width: 80,
    slots: { customRender: 'img' },
  },
  {
    title: '名字',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '摄像头编号',
    dataIndex: 'sn',
    width: 120,
  },
  {
    title: '视频流',
    dataIndex: 'videoUrl',
    width: 120,
  },
  {
    title: '所属组织',
    dataIndex: 'organizationName',
    width: 160,
  },
  {
    title: '添加时间',
    dataIndex: 'createTime',
    width: 180,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 180,
  },
];

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

/**
 * @description 手动输入
 */
export const manuallyEnter: FormSchema[] = [
  {
    field: 'brand',
    label: '视频厂家',
    component: 'Input',
    componentProps: {
      placeholder: '请输入视频厂家',
    },
  },
  {
    field: 'sn',
    label: '摄像头编号',
    required: true,
    component: 'Input',
    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
    componentProps: {
      placeholder: '请输入摄像头编号',
    },
  },
  {
    field: 'videoUrl',
    label: '视频流',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入视频流',
      maxLength: 255,
    },
    rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }],
  },
];

/**
 * @description 流媒体获取
 */
export const streamingMediaAcquire: FormSchema[] = [
  {
    field: 'videoPlatformId',
    label: '流媒体配置',
    component: 'ApiSelect',
    componentProps: {
      placeholder: '请选择流媒体配置',
      api: getStreamingMediaList,
      labelField: 'host',
      valueField: 'id',
    },
  },
  {
    field: 'streamType',
    label: '码流',
    component: 'RadioGroup',
    defaultValue: StreamType.MASTER,
    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,
    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: '摄像头编号是必填项' }],
    componentProps: {
      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(event: { target: { value: number } }) {
          formActionType.removeSchemaByFiled([
            'videoPlatformId',
            'streamType',
            'playProtocol',
            'sn',
            'brand',
            'videoUrl',
          ]);
          const {
            target: { value },
          } = event;
          if (value === AccessMode.ManuallyEnter) {
            manuallyEnter.forEach((schema) =>
              formActionType.appendSchemaByField(schema, undefined)
            );
          } else {
            streamingMediaAcquire.forEach((schema) =>
              formActionType.appendSchemaByField(schema, undefined)
            );

            formActionType.setFieldsValue({
              streamType: StreamType.MASTER,
              playProtocol: PlayProtocol.HTTP,
            });
          }
        },
      };
    },
  },
  ...manuallyEnter,
];