import { ProjectInfo } from "#/project";
export const buildJs = (project: ProjectInfo) => {
  return `
    function controller(base, form, program) {
      let scale = 1;

      form.pageWapperStyle = ref({
        position: 'absolute',
        left: '50%',
        top: '50%',
        width: '${project.width}px',
        height: '${project.height}px',
        overflow: "hidden",
        // border: "1px solid #f0f0f0",
        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
        transform: \`scale(\${scale}) translate(-50%, -50%)\`,
        transformOrigin: "0 0",
        ...pageBackground,
      });


      // 计算页面样式
      const getWapperStyle = () => {
        const { background } = ${JSON.stringify(project.pages[0].background)};
        const pageBackground =
          background.type === "color"
            ? { background: background.color }
            : {
                background: \`url(\${background.image}) no-repeat center center\`,
                backgroundSize: background.fillType,
              };
        const { width, height } = ${JSON.stringify({width: project.width, height: project.height})}};
        const { clientWidth, clientHeight } = document.documentElement;

        let scale: string | number = 1;
        switch (projectInfo.fillType) {
          case 1:
            scale = clientHeight / height;
            break;
          case 2:
            scale = clientWidth / width;
            break;
          case 3:
            const scaleX = clientWidth / width;
            const scaleY = clientHeight / height;
            scale = \`\${scaleX},\${scaleY}\`;
            break;
          default:
            scale = Math.min(clientWidth / width, clientHeight / height);
        }

        bodyStyle.value = {
          background: '#000',
        } as unknown as StyleValue;
        pageWapperStyle.value = {
          position: 'absolute',
          left: '50%',
          top: '50%',
          width: \`\${width}px\`,
          height: \`\${height}px\`,
          overflow: "hidden",
          // border: "1px solid #f0f0f0",
          boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
          transform: \`scale(\$\{scale}) translate(-50%, -50%)\`,
          transformOrigin: "0 0",
          ...pageBackground,
        };
      };

      // 窗口变化重新计算页面样式
      window.addEventListener("resize", getWapperStyle);
    }
  `
};