import { BasicColumn, FormSchema } from '/@/components/Table';
import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index';

import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
import { h } from 'vue';
import SnHelpMessage from './SnHelpMessage.vue';
import SnHelpMessage1 from './SnHelpMessage1.vue';
import { OrgTreeSelect } from '../../common/OrgTreeSelect';
import { createImgPreview } from '/@/components/Preview';
import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
import { findDictItemByCode } from '/@/api/system/dict';
import { DictEnum } from '/@/enums/dictEnum';
import { DataSourceField } from '../../visual/packages/config/common.config';
import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
import { useMessage } from '/@/hooks/web/useMessage';
import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const';
import {
  getDeviceChannelList,
  getFlvPlayUrl,
  getStreamingPlayUrl,
} from '/@/api/camera/cameraManager';
import { CameraRecord } from '/@/api/camera/model/cameraModel';
import { isRtspProtocol } from '/@/components/Video/src/utils';
import { useFingerprint } from '/@/utils/useFingerprint';
import { getVideoControlStart } from '/@/api/device/videoChannel';
import { StreamType as PlayerStreamType } from '/@/components/Video/src/types';
import { useGlobSetting } from '/@/hooks/setting';

interface FileItem {
  uid: string;
  name: string;
  status?: string;
  response?: string;
  url?: string;
}

useComponentRegister('OrgTreeSelect', OrgTreeSelect);

export interface StreamInterface {
  label: string;
  value: string;
  type?: string;
}

//设备通道接口
export interface DeviceChannelInterface {
  [x: string]: string | string[];
}

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

// GBT28181设备选择全选或者部分
export enum GBT28181DeviceSelectMethod {
  ALL = 1, //全部
  PARTIAL = 0, //部分
}

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

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 enum FluoriteMideaProtocolEnum {
  HLS = 2,
  FLV = 4,
}

export enum ArticulationEnumType {
  HIGH_DEFINITION = 1,
  SMOOTH = 2,
}

export enum ArticulationEnumNameType {
  HIGH_DEFINITION = '高清',
  SMOOTH = '流畅',
}

//获取方式文字和Tag颜色配置
export const accessModeConfig = [
  {
    key: AccessMode.ManuallyEnter,
    text: '手动输入',
    color: 'cyan',
  },
  {
    key: AccessMode.Streaming,
    text: '流媒体获取',
    color: 'blue',
  },
  {
    key: AccessMode.GBT28181,
    text: 'GBT28181',
    color: 'orange',
  },
];

// 表格列数据
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 enum VideoPlatformEnum {
  // 海康
  ISC = 0,
  // 萤石云
  FLUORITE = 1,
}

// 弹框配置项
export const formSchema: QFormSchema[] = [
  {
    field: 'avatar',
    label: '视频封面',
    component: 'ApiUpload',
    changeEvent: 'update:fileList',
    valueField: 'fileList',
    componentProps: ({ formModel }) => {
      return {
        listType: 'picture-card',
        maxFileLimit: 1,
        accept: '.png,.jpg,.jpeg,.gif',
        api: async (file: File) => {
          try {
            const formData = new FormData();
            formData.set('file', file);
            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
            return {
              uid: fileStaticUri,
              name: fileName,
              url: fileStaticUri,
            } as FileItem;
          } catch (error) {
            return {};
          }
        },
        onPreview: (fileList: FileItem) => {
          createImgPreview({ imageList: [fileList.url!] });
        },
        onDelete(url: string) {
          formModel.deleteUrl = url!;
        },
      };
    },
  },
  {
    field: 'deleteUrl',
    label: '',
    component: 'Input',
    show: false,
  },
  {
    field: 'name',
    label: '视频名字',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入视频名字',
      maxLength: 30,
    },
    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
  },
  {
    field: 'organizationId',
    label: '所属组织',
    required: true,
    component: 'OrgTreeSelect',
    componentProps({ formActionType }) {
      return {
        onChange() {
          formActionType.setFieldsValue({
            deviceId: null,
            channelNo: null,
          });
        },
      };
    },
  },
  {
    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 },
          { label: 'GBT28181', value: AccessMode.GBT28181 },
        ],
        onChange() {
          formActionType.setFieldsValue({
            brand: null,
            sn: null,
            videoUrl: null,
            videoPlatformId: null,
          });
        },
      };
    },
  },
  {
    field: 'deviceName',
    label: '设备名称',
    component: 'Input',
    show: false,
  },
  {
    field: 'deviceId',
    label: '设备',
    required: true,
    component: 'ApiSelect',
    componentProps({ formModel, formActionType }) {
      const { setFieldsValue } = formActionType;
      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
      return {
        api: async () => {
          if (organizationId) {
            try {
              const data = await getMeetTheConditionsDevice({
                organizationId,
                transportType: TransportTypeEnum.GBT28181,
              });
              if (data)
                return data.map((item) => ({
                  ...item,
                  label: item.alias || item.name,
                  value: item.tbDeviceId,
                  deviceType: item.deviceType,
                }));
            } catch (error) {}
          }
          return [];
        },
        placeholder: '请选择设备',
        onChange(_, options) {
          const { name, alias } = options;
          setFieldsValue({
            channelNo: [],
            deviceName: alias || name,
          });
        },
        onFocus() {
          const { createMessage } = useMessage();
          if (!organizationId) return createMessage.error('请先选择组织');
        },
      };
    },
    ifShow({ values }) {
      return values.accessMode === AccessMode.GBT28181;
    },
  },
  {
    field: 'channelNo',
    label: '通道号',
    required: true,
    component: 'ApiSelect',
    ifShow({ values }) {
      return values.accessMode === AccessMode.GBT28181;
    },
    componentProps({ formModel }) {
      const deviceId = formModel[DataSourceField.DEVICE_ID];
      return {
        api: async () => {
          if (deviceId) {
            try {
              const data = await getDeviceChannelList(deviceId);
              if (data)
                return data.map((item) => ({
                  ...item,
                  label: item.name || item.channelId,
                  value: item.channelId,
                }));
            } catch (error) {}
          }
          return [];
        },
        placeholder: '请选择通道号',
      };
    },
  },
  {
    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: 'videoType',
    label: '流媒体平台',
    component: 'ApiRadioGroup',
    required: true,
    defaultValue: VideoPlatformEnum.ISC,
    ifShow: ({ values }) => values.accessMode === AccessMode.Streaming,
    componentProps: ({ formActionType }) => {
      return {
        api: async (params) => {
          const values = await findDictItemByCode(params);
          return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) }));
        },
        params: {
          dictCode: DictEnum.STREAMING_MEDIA_TYPE,
        },
        getPopupContainer: () => document.body,
        placeholder: `请选择平台类型`,
        onChange() {
          const { setFieldsValue } = formActionType;
          setFieldsValue({
            articulation: ArticulationEnumType.HIGH_DEFINITION,
            playProtocol: PlayProtocol.HTTP,
            sn: null,
            channelNo: null,
            videoPlatformId: null,
          });
        },
      };
    },
  },
  {
    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 &&
        values.videoType !== VideoPlatformEnum.FLUORITE
      );
    },
    componentProps: {
      placeholder: '请选择码流',
      defaultValue: StreamType.MASTER,
      options: [
        { label: '主码流', value: StreamType.MASTER },
        { label: '子码流', value: StreamType.CHILD },
        { label: '第三码流', value: StreamType.THIRD },
      ],
    },
  },
  {
    field: 'articulation',
    label: '清晰度',
    component: 'RadioGroup',
    defaultValue: ArticulationEnumType.HIGH_DEFINITION,
    ifShow: ({ model }) =>
      model.accessMode === AccessMode.Streaming && model.videoType === VideoPlatformEnum.FLUORITE,
    componentProps: () => {
      return {
        options: [
          {
            label: ArticulationEnumNameType.HIGH_DEFINITION,
            value: ArticulationEnumType.HIGH_DEFINITION,
          },
          {
            label: ArticulationEnumNameType.SMOOTH,
            value: ArticulationEnumType.SMOOTH,
          },
        ],
      };
    },
  },
  {
    field: 'videoFormat',
    label: '视频格式',
    component: 'Select',
    ifShow: ({ model }) =>
      model.accessMode === AccessMode.Streaming && model.videoType === VideoPlatformEnum.FLUORITE,
    defaultValue: FluoriteMideaProtocolEnum.FLV,
    required: true,
    componentProps: {
      options: [
        { label: 'FLV', value: FluoriteMideaProtocolEnum.FLV },
        { label: 'HLS', value: FluoriteMideaProtocolEnum.HLS },
      ],
      allowClear: false,
    },
  },
  {
    field: 'playProtocol',
    label: '播放协议',
    component: 'RadioGroup',
    defaultValue: PlayProtocol.HTTP,
    ifShow({ values }) {
      return (
        values.accessMode === AccessMode.Streaming &&
        values.videoType !== VideoPlatformEnum.FLUORITE
      );
    },
    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 &&
        values.videoType !== VideoPlatformEnum.FLUORITE
      );
    },
    componentProps: {
      placeholder: '请输入监控点编号',
    },
  },
  {
    field: 'sn',
    label: h(SnHelpMessage1) as any,
    component: 'Input',
    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
    ifShow({ values }) {
      return (
        values.accessMode === AccessMode.Streaming &&
        values.videoType === VideoPlatformEnum.FLUORITE
      );
    },
    componentProps: {
      placeholder: '请输入监控点编号',
    },
  },
  {
    field: 'channelNo',
    label: '通道号',
    component: 'InputNumber',
    ifShow({ values }) {
      return (
        values.accessMode === AccessMode.Streaming &&
        values.videoType === VideoPlatformEnum.FLUORITE
      );
    },
    componentProps: {
      min: 1,
      max: 10000,
      step: 1,
      placeholder: '请输入通道号',
      precision: 0,
    },
  },
];

// GBT28181表单配置项
export const formGBTSchema: QFormSchema[] = [
  {
    label: '视频流获取方式',
    field: 'accessMode',
    component: 'RadioGroup',
    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
    defaultValue: AccessMode.GBT28181,
    componentProps({ formActionType }) {
      return {
        defaultValue: AccessMode.ManuallyEnter,
        placeholder: '请选择视频流获取方式',
        options: [{ label: 'GBT28181', value: AccessMode.GBT28181 }],
        onChange() {
          formActionType.setFieldsValue({
            brand: null,
            sn: null,
            videoUrl: null,
            videoPlatformId: null,
          });
        },
      };
    },
  },
  {
    field: 'organizationId',
    label: '所属组织',
    required: true,
    component: 'OrgTreeSelect',
    ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181,
  },
  {
    label: '设备选择方式',
    field: 'allDevice',
    component: 'RadioGroup',
    rules: [{ required: true, message: '设备选择方式为必选项', type: 'number' }],
    defaultValue: GBT28181DeviceSelectMethod.ALL,
    componentProps() {
      return {
        defaultValue: GBT28181DeviceSelectMethod.ALL,
        placeholder: '请选择设备选择方式',
        options: [
          { label: '全部', value: GBT28181DeviceSelectMethod.ALL },
          { label: '部分', value: GBT28181DeviceSelectMethod.PARTIAL },
        ],
      };
    },
    ifShow: ({ values }) => !!values.organizationId,
  },
  {
    field: 'deviceChannels',
    label: '设备和通道号',
    component: 'Input',
    slot: 'deviceChannelsSlot',
    ifShow: ({ values }) =>
      values.accessMode === AccessMode.GBT28181 &&
      values.allDevice === GBT28181DeviceSelectMethod.PARTIAL,
  },
];

export async function getPlayUrl(
  params: CameraRecord
): Promise<{ url: string; type: PlayerStreamType }> {
  const { accessMode } = params;
  if (accessMode === AccessMode.ManuallyEnter) {
    const { videoUrl } = params;
    if (params.videoUrl) {
      const isRTSPPlay = isRtspProtocol(videoUrl);

      if (isRTSPPlay) {
        const { getResult } = useFingerprint();
        const fingerprint = await getResult();
        return { url: getFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' };
      } else {
        return { url: videoUrl, type: 'auto' };
      }
    }
  } else if (accessMode === AccessMode.GBT28181) {
    const { deviceId, channelNo } = params?.params || {};
    const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
    const { streamMediaContentSecurityProtocol } = useGlobSetting();
    return {
      url: !!streamMediaContentSecurityProtocol ? result.data.https_flv : result.data.flv,
      type: 'flv',
    };
  } else {
    const { id, playProtocol } = params;
    const result = await getStreamingPlayUrl(id);
    const type: PlayerStreamType =
      playProtocol === FluoriteMideaProtocolEnum.FLV
        ? 'flv'
        : playProtocol === FluoriteMideaProtocolEnum.HLS
        ? 'hls'
        : 'auto';
    return { url: result.data.url, type };
  }
}