import {hiprint as h, defaultElementTypeProvider as p} from '../libs/hiprint.bundle.js';
// 调用浏览器打印js
import '../libs/plugins/jquery.hiwprint.js';
// 默认配置
import '../libs/hiprint.config.js';
// 样式
import '../libs/css/hiprint.css';
import '../libs/css/print-lock.css';
import {ref, computed, watch, reactive, nextTick} from 'vue';
import useHiprintStore from '../store/useHiprintStore.js';

// 定义类型
interface PaperType {
  label: string;
  value: string;
}

interface PaperDimensions {
  width: number;
  height: number;
}

interface DataSourceItem {
  columns?: string;
  code: string;
  name: string;
  type: string;
}

interface DataSourceOption {
  label: string;
  value: string;
}

interface AxiosInstance {
  request: (config: any) => Promise<any>;
}

interface Response {
  data: {
    data?: {
      sourceCodes?: string;
    };
    list: DataSourceItem[];
  };
}

export const hiprint = h;
export const defaultElementTypeProvider = p;

export function print(
  provider: any = defaultElementTypeProvider,
  template: any,
  ...args: any[]
): any {
  hiprint.init({
    providers: [new provider()],
  });
  const hiprintTemplate = new hiprint.PrintTemplate({
    template: template,
  });
  hiprintTemplate.print(...args);
  return hiprintTemplate;
}

export function print2(
  provider: any = defaultElementTypeProvider,
  template: any,
  ...args: any[]
): any {
  hiprint.init({
    providers: [new provider()],
  });
  const hiprintTemplate = new hiprint.PrintTemplate({
    template: template,
  });
  hiprintTemplate.print2(...args);
  return hiprintTemplate;
}

export function usePaper() {
  const hiprintStore = useHiprintStore();
  const paperType = ref<string>('A4');
  const paperTypeName = computed((): string => {
    const paperTypeObj = paperTypesObj.find((item) => item.value === paperType.value);
    if (paperTypeObj) {
      return paperTypeObj.label;
    } else {
      return '自定义';
    }
  });
  const paperWidth = ref<number>(210);
  const paperHeight = ref<number>(296.6);

  const paperTypesObj = reactive<PaperType[]>([
    {label: 'A3', value: 'A3'},
    {label: 'A4', value: 'A4'},
    {label: 'A5', value: 'A5'},
    {label: 'B3', value: 'B3'},
    {label: 'B4', value: 'B4'},
    {label: 'B5', value: 'B5'},
  ]);

  const paperTypes: Record<string, PaperDimensions> = {
    A3: {
      width: 420,
      height: 297,
    },
    A4: {
      width: 210,
      height: 297,
    },
    A5: {
      width: 210,
      height: 148,
    },
    B3: {
      width: 500,
      height: 353,
    },
    B4: {
      width: 250,
      height: 353,
    },
    B5: {
      width: 250,
      height: 176,
    },
  };

  function setPaper(type: string, callback: () => void): void {
    if (type !== 'other') {
      const {width, height} = paperTypes[type];
      paperWidth.value = width;
      paperHeight.value = height;
      hiprintStore.setPaperOption(width, height);
    }
    callback();
  }

  watch([paperWidth, paperHeight], ([width, height], [oldW, oldH]) => {
    nextTick(() => {
      if (width === 420 && height === 297) {
        paperType.value = 'A3';
      } else if (width === 210 && height === 297) {
        paperType.value = 'A4';
      } else if (width === 210 && height === 148) {
        paperType.value = 'A5';
      } else if (width === 500 && height === 353) {
        paperType.value = 'B3';
      } else if (width === 250 && height === 353) {
        paperType.value = 'B4';
      } else if (width === 250 && height === 176) {
        paperType.value = 'B5';
      } else {
        paperType.value = 'other';
      }
    });
  });

  return {
    paperType,
    paperWidth,
    paperHeight,
    paperTypesObj,
    paperTypeName,
    setPaper,
  };
}

export function useScale(callback: () => void) {
  const scaleValue = ref<number>(1);
  const scalePercentage = computed((): string => {
    return `${(scaleValue.value * 100).toFixed(0)}%`;
  });
  const canZoomIn = computed((): boolean => {
    return scaleValue.value > 0.5;
  });
  const canZoomOut = computed((): boolean => {
    return scaleValue.value < 4;
  });
  function zoomIn(): void {
    scaleValue.value = scaleValue.value - 0.1;
    callback();
  }
  function zoomOut(): void {
    scaleValue.value = scaleValue.value + 0.1;
    callback();
  }
  return {
    scaleValue,
    scalePercentage,
    canZoomIn,
    canZoomOut,
    zoomIn,
    zoomOut,
  };
}

export function useDataSource(axios: AxiosInstance) {
  const detailData = ref<any>();
  function getDetail(id: string | number): Promise<any> {
    return axios
      .request({
        url: `/printTemplate/get/${id}`,
        method: 'post',
      })
      .then((res: Response) => {
        if (res.data.data && res.data.data.sourceCodes) {
          const codes = res.data.data.sourceCodes.split(',');
          const formListCode = dataSourceForm.value.map((item) => item.value);
          const filteredCodes = codes.filter((item) => formListCode.includes(item));
          formCode.value = [...new Set(filteredCodes)];
        } else {
          formCode.value = [];
        }
        detailData.value = res.data.data;
        return Promise.resolve(res.data.data);
      });
  }
  const listCode = ref<string>('');
  const dataSourceList = ref<DataSourceOption[]>([]);
  const listColumns = computed((): string[] => {
    if (
      !codeMapDataSource.value[listCode.value] ||
      !Array.isArray(codeMapDataSource.value[listCode.value])
    ) {
      return [];
    }
    return codeMapDataSource.value[listCode.value].map((item) => {
      const index = item.indexOf('[');
      return item.substring(index + 1, item.length - 1);
    });
  });

  const formCode = ref<string[]>([]);
  const formColumns = computed((): string[] => {
    const arr: string[] = [];
    if (formCode.value && formCode.value.length) {
      formCode.value.forEach((item) => {
        if (codeMapDataSource.value[item] && Array.isArray(codeMapDataSource.value[item])) {
          arr.push(...codeMapDataSource.value[item]);
        }
      });
    }
    return arr;
  });
  const dataSourceForm = ref<DataSourceOption[]>([]);
  const codeMapDataSource = ref<Record<string, string[]>>({});
  function getDataSourceList(): Promise<void> {
    return axios
      .request({
        url: '/printTemplate/getDsList',
        method: 'post',
      })
      .then((res: Response) => {
        res.data.list.forEach((item) => {
          if (item.columns) {
            codeMapDataSource.value[item.code] =
              item?.columns?.split(',')?.map((col) => `$${item.code}[${col.toUpperCase()}]`) || [];
          }
          if (item.type === 'LIST') {
            dataSourceList.value.push({
              label: item.name,
              value: item.code,
            });
          }
          dataSourceForm.value.push({
            label: item.name,
            value: item.code,
          });
        });
      });
  }

  const dataSource = ref<any[]>([]);
  return {
    detailData,
    getDetail,
    listCode,
    dataSourceList,
    listColumns,
    formCode,
    formColumns,
    dataSourceForm,
    codeMapDataSource,
    getDataSourceList,
    dataSource,
  };
}

declare global {
  interface Window {
    hiprint: any;
  }
}

window.hiprint = hiprint;