import { h } from 'vue';
import { ElTag } from 'element-plus';
import type { BasicColumn } from '@/components/Table';
import connectedIcon from '@/assets/images/table/camera-netConnect.png';
import unConnectedIcon from '@/assets/images/table/camera-netUnconnect.png';

// 是否启用 平台显示电子围栏
export enum FenceDisplayStatus {
  // 启用
  enabled = 1,
  // 禁用
  disabled = 0,
}

export enum IsPtz {
  disabled = 0,
  enbaled = 1,
}

export enum AddType {
  ip = 'IP',
  nvr = 'NVR',
  srs = 'RTSP',
}

export enum VideoServiceType {
  UDP = 'UDP',
  TCP = 'TCP',
  AUTO = 'AUTO',
}

export enum VideoStandardType {
  H264 = 'H264',
  H265 = 'H265',
}

export const queryTypeSelect = [
  {
    value: 'cameraIp',
    label: 'IP地址',
  },
  {
    value: 'name',
    label: '设备ID',
  },
];

export const protocalTypeSelect = [
  {
    value: 'haikang',
    label: '海康',
  },
  {
    value: 'dahua',
    label: '大华',
  },
  {
    value: 'anxus',
    label: '安迅士',
  },
  {
    value: 'huawei',
    label: '华为',
  },
];

export const cameraAddType = [
  {
    value: 'ip',
    label: 'IP/域名',
  },
  {
    value: 'nvr',
    label: 'NVR平台添加',
  },
  {
    value: 'srs',
    label: '流媒体地址',
  },
  // {
  //   value: 'ipRange',
  //   label: 'IP段',
  // },
];

export const serviceTypeSelect = [
  {
    value: VideoServiceType.UDP,
    label: 'UDP',
  },
  {
    value: VideoServiceType.TCP,
    label: 'TCP',
  },
  {
    value: VideoServiceType.AUTO,
    label: '自动',
  },
];

export const standardTypeSelect = [
  {
    value: VideoStandardType.H264,
    label: 'H264',
  },
  {
    value: VideoStandardType.H265,
    label: 'H265',
  },
];

// TODO: 拆分新文件

type CameraAddFormItem = {
  label: string;
  prop: string;
  placeholder: string;
  type: 'input' | 'select' | 'tree-select';
  option?: { value: any; label: any }[];
  required: boolean;
  rule?: any[];
  labelWidth?: string;
  disabled?: boolean;
};

export const cameraRangeAddForm: CameraAddFormItem[] = [
  {
    label: '启用IP地址：',
    prop: 'startIp',
    placeholder: '请输入启用IP地址',
    type: 'input',
    labelWidth: '96px',
    required: true,
    rule: [{ required: true, message: '请输入启用IP地址', trigger: 'blur' }],
  },
  {
    label: '协议类型：',
    prop: 'cameraType',
    placeholder: '请输入协议类型',
    type: 'select',
    required: true,
    option: protocalTypeSelect,
    rule: [{ required: true, message: '请输入协议类型', trigger: 'blur' }],
  },
  {
    label: '用户名：',
    prop: 'user',
    placeholder: '请输入用户名',
    type: 'input',
    labelWidth: '60px',
    required: false,
    rule: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  },
  {
    label: '结束IP地址：',
    prop: 'endIp',
    placeholder: '请输入结束IP地址',
    type: 'input',
    labelWidth: '96px',
    required: true,
    rule: [{ required: true, message: '请输入结束IP地址', trigger: 'blur' }],
  },
  {
    label: '端口：',
    prop: 'port',
    placeholder: '请输入端口号',
    type: 'input',
    required: false,
    rule: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
  },
  {
    label: '密码：',
    prop: 'password',
    placeholder: '请输入用户名密码',
    type: 'input',
    labelWidth: '60px',
    required: false,
    rule: [{ required: true, message: '请输入用户名密码', trigger: 'blur' }],
  },
];

type CameraShareFormItem = {
  label?: string;
  prop: string;
  placeholder?: string;
  type?: 'input' | 'select' | 'tree-select' | 'radio';
  option?: { value: any; label: any }[];
  required?: boolean;
  rule?: any[];
  labelWidth?: string;
};

export const authorityTypeSelect = [
  {
    value: '0',
    label: '仅可查看',
  },
  {
    value: '1',
    label: '可远程控制',
  },
];

export const timeTypeSelect = [
  {
    value: 'Indefinite',
    label: '无限期',
  },
  {
    value: 'definite',
    label: '有限期',
  },
];

export const cameraShareForm: CameraShareFormItem[] = [
  {
    label: '企业账号：',
    prop: 'account',
    placeholder: '请输入企业账号',
    type: 'input',
    required: true,
    rule: [{ required: true, message: '请输入企业账号', trigger: 'blur' }],
  },
  {
    label: '权限设置：',
    prop: 'authority',
    //placeholder: '请输入IP地址',
    type: 'radio',
    required: true,
    option: authorityTypeSelect,
    rule: [{ required: true, message: '', trigger: 'blur' }],
  },
  {
    label: '企业名称：',
    prop: 'name',
    placeholder: '请输入企业名称',
    type: 'input',
    required: true,
    rule: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  },
  {
    label: '分享时间：',
    prop: 'time',
    //placeholder: '请输入协议类型',
    type: 'select',
    required: true,
    option: timeTypeSelect,
    rule: [{ required: true, message: '', trigger: 'blur' }],
  },
  {
    label: '备注：',
    prop: 'notes',
    placeholder: '请输入备注',
    type: 'input',
    required: false,
    rule: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  },
  {
    label: '分享企业：',
    prop: 'shareList',
    // placeholder: '请输入场景名称',
    // type: 'tree-select',
    required: true,
    rule: [{ required: true, message: '', trigger: 'blur' }],
  },
];

export const rules = {
  tenantCode: [{ required: true, message: '请输入企业账号', trigger: 'blur' }],
  permission: [{ required: true, message: '', trigger: 'change' }],
  tenantName: [{ required: true, message: '', trigger: 'change' }],
  time: [{ required: true, message: '', trigger: 'change' }],
  shareList: [{ required: true, message: '', trigger: 'blur' }],
};

export const columns: BasicColumn[] = [
  {
    label: '联网状态',
    prop: 'networkingState',
    render(record) {
      return h(
        'img',
        {
          src: record.row.networkingState === 0 ? unConnectedIcon : connectedIcon,
          style:
            'width: 20px; height: 20px; object-fit: fill; display: inline-block; line-height: 20px; vertical-align: middle;',
        },
        {},
      );
    },
    minWidth: 120,
    align: 'center',
    sortable: 'custom',
  },
  {
    label: '名称',
    prop: 'name',
    minWidth: 200,
  },
  {
    label: '账号',
    prop: 'account',
    minWidth: 200,
  },
  {
    label: '联网状态',
    prop: 'networkingState',
    render(record) {
      const updateNetworkingState = (row) => {
        if (row.networkingState === 0) {
          row.networkingState = 1;
        } else {
          row.networkingState = 0;
        }
      };
      return h(
        ElTag,
        { onClick: () => updateNetworkingState(record.row), style: 'cursor: pointer;' },
        {
          default: () => {
            return record.row.networkingState === 0 ? '分享' : '断开分享';
          },
        },
      );
    },
    minWidth: 120,
  },
];

//改造成需要传入方法
export const getColumns = (edit: Function): BasicColumn[] => {
  return [
    {
      label: '联网状态',
      prop: 'connected',
      render(record) {
        return h(
          'img',
          {
            src: record.row.connected ? connectedIcon : unConnectedIcon,
            style:
              'width: 20px; height: 20px; object-fit: fill; display: inline-block; line-height: 20px; vertical-align: middle;',
          },
          {},
        );
      },
      minWidth: 120,
      align: 'center',
      sortable: 'custom',
    },
    {
      label: '名称',
      prop: 'tenantName',
      minWidth: 200,
    },
    {
      label: '账号',
      prop: 'tenantCode',
      minWidth: 200,
    },
    {
      label: '联网状态',
      prop: 'connected',
      render(record) {
        // const updateNetworkingState = (row) => {
        //   if (row.networkingState === 0) {
        //     row.networkingState = 1;
        //   } else {
        //     row.networkingState = 0;
        //   }
        // };
        return h(
          ElTag,
          {
            onClick: () => edit(record.row),
          },
          {
            default: () => {
              return record.row.connected ? '断开分享' : '分享';
            },
          },
        );
      },
      minWidth: 120,
    },
  ];
};

export const sharedCaremaType = [
  {
    value: 'incomplete',
    label: '待添加',
  },
  {
    value: 'complete',
    label: '已添加',
  },
];

export const cameraSharedForm: CameraAddFormItem[] = [
  {
    label: '名称：',
    prop: 'cameraName',
    placeholder: '请输入名称',
    type: 'input',
    required: true,
    disabled: false,
    rule: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  },
  {
    label: 'IP地址：',
    prop: 'cameraIp',
    placeholder: '请输入IP地址',
    type: 'input',
    required: true,
    disabled: true,
    rule: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
  },
  {
    label: '端口：',
    prop: 'cameraPort',
    placeholder: '请输入端口号',
    type: 'input',
    required: true,
    disabled: true,
    rule: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
  },
  {
    label: '协议类型：',
    prop: 'cameraType',
    placeholder: '请输入协议类型',
    type: 'input',
    required: true,
    disabled: true,
    rule: [{ required: true, message: '请输入协议类型', trigger: 'blur' }],
  },
  {
    label: '用户名：',
    prop: 'username',
    placeholder: '请输入用户名',
    type: 'input',
    required: true,
    disabled: true,
    rule: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  },
  {
    label: '场景：',
    prop: 'cameraWorkspaceName',
    placeholder: '请输入场景名称',
    type: 'tree-select',
    required: true,
    disabled: false,
    rule: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
  },
  {
    label: '密码：',
    prop: 'password',
    placeholder: '请输入用户名密码',
    type: 'input',
    required: true,
    disabled: true,
    rule: [{ required: true, message: '请输入用户名密码', trigger: 'blur' }],
  },
  {
    label: '企业账号：',
    prop: 'tenantCode',
    placeholder: '请输入企业账号',
    type: 'input',
    disabled: true,
    required: false,
  },
  {
    label: '设备ID号：',
    prop: 'code',
    placeholder: '自定义ID，不能重复',
    type: 'input',
    required: true,
    disabled: true,
    rule: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
  },
  {
    label: '企业名称：',
    prop: 'tenantName',
    placeholder: '请输入企业名称',
    type: 'input',
    disabled: true,
    required: false,
  },
];

export interface CameraSharedItem {
  cameraIp: string; //ip地址
  cameraType: string; //协议类型
  cameraPort: string; //端口地址
  companyAccount: number; //企业账号
  companyName: string; //企业名称
  code: string; //设备ID
  workshopName: string; //车间场景
  workspaceName: string; //工位场景
  shareState: string; //是否添加
  password?: string; //密码
  username?: string; //用户名
  workspaceCode?: string; //相机工位code
  workspaceId?: string; //工位场景Id
}
