import { h } from 'vue';
import { handeleCopy } from '../profiles/step/topic';
import { DescItem } from '/@/components/Description/src/typing';
import { BasicColumn, FormSchema } from '/@/components/Table';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

//设备接入信息权限标识枚举
export enum DEVICE_ACCESS_PERMISSION_ENUM {
  CREATE = 'api:yt:device_profile:access_information:post',
  UPDATE = 'api:yt:device_profile:access_information:update',
  DELETE = 'api:yt:device_profile:access_information:delete',
  GET = 'api:yt:device_profile:access_information:get',
}

//要删除的表单字段
export const deleteFormField = [
  'serverId',
  'serverDomain',
  'serverPassword',
  'intranetIpAndPort',
  'outerIpAndPort',
];

//表格字段
export const columns: BasicColumn[] = [
  {
    title: t('deviceManagement.deviceAccess.intranetIPText'),
    dataIndex: 'intranetIp',
  },
  {
    title: t('deviceManagement.deviceAccess.intranetPortText'),
    dataIndex: 'intranetPort',
  },
  {
    title: t('deviceManagement.deviceAccess.outernetIPText'),
    dataIndex: 'outerNetIp',
  },
  {
    title: t('deviceManagement.deviceAccess.outernetPortText'),
    dataIndex: 'outerNetPort',
  },
  {
    title: t('deviceManagement.deviceAccess.accessProtocolText'),
    dataIndex: 'deviceAgreement',
  },
];

//表单查询
export const searchFormSchema: FormSchema[] = [
  {
    field: 'intranetIp',
    label: t('deviceManagement.deviceAccess.intranetIPText'),
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      maxLength: 255,
    },
  },
  {
    field: 'outerNetIp',
    label: t('deviceManagement.deviceAccess.outernetIPText'),
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      maxLength: 255,
    },
  },
  {
    field: 'deviceAgreement',
    label: t('deviceManagement.deviceAccess.accessProtocolText'),
    component: 'Select',
    colProps: { span: 6 },
    componentProps() {
      return {
        options: [
          { label: t('common.default'), value: 'DEFAULT' },
          { label: 'MQTT', value: 'MQTT' },
          { label: 'CoAP', value: 'COAP' },
          { label: 'TCP', value: 'TCP' },
          { label: 'GBT28181', value: 'GBT28181' },
        ],
        getPopupContainer: () => document.body,
      };
    },
  },
];

//表单字段
export const schemas: FormSchema[] = [
  {
    field: 'intranetIpAndPort',
    label: t('deviceManagement.deviceAccess.intranetIPWithPortText'),
    component: 'FormInputGroup',
    required: true,
    componentProps: {
      inputPlaceholder: t('deviceManagement.deviceAccess.intranetIPPlaceholderText'),
      inputNumberPlaceholder: t('deviceManagement.deviceAccess.intranetPortPlaceholderText'),
    },
    colProps: { span: 24 },
  },
  {
    field: 'outerIpAndPort',
    label: t('deviceManagement.deviceAccess.outernetIPWithPortText'),
    component: 'FormInputGroup',
    required: true,
    componentProps: {
      inputPlaceholder: t('deviceManagement.deviceAccess.outernetIPPlaceholderText'),
      inputNumberPlaceholder: t('deviceManagement.deviceAccess.outernetPortPlaceholderText'),
    },
    colProps: { span: 24 },
  },
  {
    field: 'deviceAgreement',
    component: 'Select',
    required: true,
    label: t('deviceManagement.deviceAccess.accessProtocolText'),
    componentProps() {
      return {
        options: [
          { label: '默认', value: 'DEFAULT' },
          { label: 'MQTT', value: 'MQTT' },
          { label: 'CoAP', value: 'COAP' },
          { label: 'TCP', value: 'TCP' },
          { label: 'GBT28181', value: 'GBT28181' },
        ],
        getPopupContainer: () => document.body,
      };
    },
    colProps: { span: 19 },
  },
  {
    field: 'serverId',
    label: t('deviceManagement.deviceAccess.serverIDText'),
    required: false,
    colProps: { span: 19 },
    component: 'Input',
    componentProps: {
      maxLength: 255,
    },
    ifShow({ values }) {
      return values.deviceAgreement === 'GBT28181';
    },
  },
  {
    field: 'serverDomain',
    label: t('deviceManagement.deviceAccess.serverDomainText'),
    required: false,
    colProps: { span: 19 },
    component: 'Input',
    componentProps: {
      maxLength: 255,
    },
    ifShow({ values }) {
      return values.deviceAgreement === 'GBT28181';
    },
  },
  {
    field: 'serverPassword',
    label: t('deviceManagement.deviceAccess.passwordText'),
    required: false,
    colProps: { span: 19 },
    component: 'InputPassword',
    componentProps: {
      maxLength: 255,
    },
    ifShow({ values }) {
      return values.deviceAgreement === 'GBT28181';
    },
  },
];

//详情字段
export const detailSchema: DescItem[] = [
  {
    field: 'intranetIp',
    label: t('deviceManagement.deviceAccess.intranetIPText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'intranetPort',
    label: t('deviceManagement.deviceAccess.intranetPortText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'outerNetIp',
    label: t('deviceManagement.deviceAccess.outernetIPText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'outerNetPort',
    label: t('deviceManagement.deviceAccess.outernetPortText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'deviceAgreement',
    label: t('deviceManagement.deviceAccess.accessProtocolText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'serverId',
    label: t('deviceManagement.deviceAccess.serverIDText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'serverDomain',
    label: t('deviceManagement.deviceAccess.serverDomainText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
  {
    field: 'serverPassword',
    label: t('deviceManagement.deviceAccess.passwordText'),
    render: (text) => {
      return h(
        'span',

        {
          style: { cursor: 'pointer' },
          onClick: () => {
            handeleCopy(text);
          },
        },
        text
      );
    },
  },
];