visualization-design/src/views/components/Header.vue

<template>
  <div class="app-header">
    <a class="logo" :href="enterprise.home" target="_blank">
      <img src="/favicon.ico" />
      <span> {{ enterprise.name }}</span>
    </a>
    <t-dropdown
      :minColumnWidth="200"
      :maxHeight="560"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
      trigger1="click"
    >
      <a> 文件 </a>
      <t-dropdown-menu>
        <t-dropdown-item @click="newFile">
          <a>新建文件</a>
        </t-dropdown-item>
        <t-dropdown-item @click="load(true)">
          <a>打开文件</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true" @click="load">
          <a>导入文件</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="save()">保存</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="save(SaveType.SaveAs, '', undefined, 1)">另保存</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="downloadJson">下载JSON文件</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="downloadZip">
            <div class="flex">
              导出为ZIP文件 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="downloadHtml">
            <div class="flex">
              下载离线部署包 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="downloadVue3">
            <div class="flex">
              下载Vue3组件包 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="downloadVue2">
            <div class="flex">
              下载Vue2组件包 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="downloadReact">
            <div class="flex">
              下载React组件包 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="downloadPng">下载为PNG</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="downloadSvg">下载为SVG</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="switchTheme('light')">明亮主题</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="switchTheme('dark')">暗黑主题</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <t-dropdown
      :minColumnWidth="180"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
    >
      <a> 编辑 </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <a @click="onUndo">
            <div class="flex">
              撤销 <span class="flex-grow"></span> Ctrl + Z
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="onRedo">
            <div class="flex">
              恢复 <span class="flex-grow"></span> Ctrl + Y
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onCut">
            <div class="flex">
              剪切 <span class="flex-grow"></span> Ctrl + X
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onCopy">
            <div class="flex">
              复制 <span class="flex-grow"></span> Ctrl + C
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="onPaste">
            <div class="flex">
              粘贴 <span class="flex-grow"></span> Ctrl + V
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onAll">
            <div class="flex">
              全选 <span class="flex-grow"></span> Ctrl + A
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onDelete">
            <div class="flex">删除 <span class="flex-grow"></span> DELETE</div>
          </a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <t-dropdown
      :minColumnWidth="180"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
    >
      <a> 工具 </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <a @click="onScaleWindow">窗口大小</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onScaleUp">放大</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onScaleDown">缩小</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="onScaleFull">100%视图</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="showMap">
            <div class="flex middle">
              鹰眼地图 <span class="flex-grow"></span>
              <!-- <t-icon v-show="map" name="check" /> -->
              <check-icon v-show="map" />
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="showMagnifier">
            <div class="flex middle">
              放大镜 <span class="flex-grow"></span>
              <!-- <t-icon v-show="magnifier" name="check" /> -->
              <check-icon v-show="magnifier" />
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onAutoAnchor">
            <div class="flex middle">
              自动锚点 <span class="flex-grow"></span>
              <!-- <t-icon v-show="autoAnchor" name="check" /> -->
              <check-icon v-show="autoAnchor" />
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a @click="onDisableAnchor">
            <div class="flex middle">
              显示锚点 <span class="flex-grow"></span>
              <!-- <t-icon v-show="showAnchor" name="check" /> -->
              <check-icon v-show="showAnchor" />
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="onToggleAnchor">
            <div
              class="flex"
              :style="{
                color: showAnchor ? '' : '#4f5b75',
              }"
            >
              添加/删除锚点 <span class="flex-grow"></span> A
            </div>
          </a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <t-dropdown
      :minColumnWidth="180"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
    >
      <a> 帮助 </a>
      <t-dropdown-menu>
        <t-dropdown-item
          v-for="item in enterprise.helps"
          :divider="item.divider"
        >
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>

    <div style="width: 148px; flex-shrink: 0"></div>
    <input v-model="data.name" @input="onInputName" />

    <a :href="enterprise.account" target="_blank">
      <!-- <t-icon name="home" /> -->
      <home-icon />
      账户中心
    </a>
    <a :href="enterprise['v']" target="_blank" class="active">
      <!-- <t-icon name="desktop" /> -->
      <desktop-icon />
      大屏可视化
    </a>
    <a :href="enterprise['3d']" target="_blank">
      <!-- <t-icon name="control-platform" /> -->
      <control-platform-icon />
      3D可视化
    </a>
    <a :href="enterprise['2d']" target="_blank">
      <!-- <t-icon name="app" /> -->
      <app-icon />
      2D可视化
    </a>
    <t-dropdown
      v-if="user.id"
      :minColumnWidth="200"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="custom-dropdown header"
    >
      <a style="margin-left: 32px; margin-right: 12px">
        <t-avatar
          size="small"
          :image="user.avatarUrl ? user.avatarUrl : baseUrl + 'img/avatar.png'"
        />
      </a>
      <t-dropdown-menu>
        <t-dropdown-item divider="true">
          <a :href="enterprise.account">
            {{ user.username }}
            <label
              class="ml-16 vip-label"
              :style="{
                color: user.limit > 1 ? '#ff4000' : '#D5C781',
                background: user.limit > 1 ? '#ff400030' : '#D5C78133',
              }"
              >VIP</label
            >
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a :href="`${enterprise.account}/v`" target="_blank"> 我的大屏 </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a :href="`${enterprise.account}/account/teams`" target="_blank">
            我的团队
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a :href="`${enterprise.account}/account/info`" target="_blank">
            账号信息
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a :href="`${enterprise.account}/account/security`" target="_blank">
            安全设置
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="logout">退出</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <div class="flex middle" v-else>
      <a class="button primary solid" style="width: 80px" :href="login()">
        登录
      </a>
    </div>
  </div>
  <t-dialog
    v-if="payListDialog.show"
    v-model:visible="payListDialog.show"
    class="pay-dialog"
    header="图纸用到的企业图形库"
    :close-on-overlay-click="false"
    :top="95"
    :width="700"
    cancel-btn="跳过"
    confirm-btn="结算(不支持退款)"
    @cancel="skipPay"
    @close="payListDialog.show = false"
    @confirm="prePay"
  >
    <div class="pay-line">
      <div></div>
      <div>已购买</div>
      <div>价格</div>
    </div>
    <div class="pay-body">
      <t-collapse defaultExpandAll>
        <t-collapse-panel
          v-if="[...prePayList.pngs].length"
          value="0"
          :header="data.goods[0].type"
        >
          <template #headerRightContent>
            <t-space size="small">
              <t-checkbox v-model="data.goods[0].checked"></t-checkbox>
            </t-space>
          </template>
          <div v-for="pngPen in prePayList.pngs" class="pay-line">
            <div>
              <t-image :src="pngPen" :lazy="true" fit="contain" />
              {{
                pngPen.slice(
                  pngPen.lastIndexOf('/') + 1,
                  pngPen.lastIndexOf('.')
                )
              }}
            </div>
            <div>
              <check-icon
                v-show="data.purchasedList.some((item) => item.name === pngPen)"
                style="color: #4480f9ff"
              />
            </div>
            <div>
              {{
                data.purchasedList.some((item) => item.name === pngPen)
                  ? 0
                  : data.goods[0].unitPrice
              }}
            </div>
          </div>
          <div class="pay-tip">
            <p v-if="data.goods[0].checked">
              已选择{{ data.goods[0].unPurchased }}个图元 小计:￥{{
                data.goods[0].unPurchased * data.goods[0].unitPrice
              }}
            </p>
            <p v-else>已选择0个图元 小计:￥0</p>
          </div>
        </t-collapse-panel>
        <t-collapse-panel
          v-if="[...prePayList.iotPens].length"
          value="1"
          :header="data.goods[1].type"
        >
          <template #headerRightContent>
            <t-space size="small">
              <t-checkbox v-model="data.goods[1].checked"></t-checkbox>
            </t-space>
          </template>
          <div v-for="iotPen in prePayList.iotPens" class="pay-line">
            <div>
              <svg class="l-icon" aria-hidden="true">
                <use :xlink:href="'#' + iotPensMap[iotPen]?.icon"></use>
              </svg>
              {{ iotPensMap[iotPen]?.name || iotPen }}
            </div>
            <div>
              <check-icon
                v-show="data.purchasedList.some((item) => item.name === iotPen)"
                style="color: #4480f9ff"
              />
            </div>
            <div>
              {{
                data.purchasedList.some((item) => item.name === iotPen)
                  ? 0
                  : data.goods[1].unitPrice
              }}
            </div>
          </div>
          <div class="pay-tip">
            <p v-if="data.goods[1].checked">
              已选择{{ data.goods[1].unPurchased }}个图元 小计:￥{{
                data.goods[1].unPurchased * data.goods[1].unitPrice
              }}
            </p>
            <p v-else>已选择0个图元 小计:￥0</p>
          </div>
        </t-collapse-panel>
        <t-collapse-panel
          v-if="[...prePayList.svgPens].length"
          value="2"
          :header="data.goods[2].type"
        >
          <template #headerRightContent>
            <t-space size="small">
              <t-checkbox v-model="data.goods[2].checked"></t-checkbox>
            </t-space>
          </template>
          <template v-if="data.goods[2].count === data.goods[2].total">
            <div>
              1套（{{
                data.goods[2].count
              }}个）。【说明】检查到当前项目为老版本格式，需要购买整套SVG线性图元。
            </div>
            <div>
              <check-icon
                v-show="data.goods[2].unPurchased === 0"
                style="color: #4480f9ff"
              />
            </div>
          </template>
          <template v-else>
            <div v-for="svgPen in prePayList.svgPens" class="pay-line">
              <div>
                <t-image
                  class="pay-svg"
                  :src="svgPen"
                  :lazy="true"
                  fit="contain"
                />
                {{
                  svgPen.slice(
                    svgPen.lastIndexOf('/') + 1,
                    svgPen.lastIndexOf('.')
                  )
                }}
              </div>
              <div>
                <check-icon
                  v-show="
                    data.purchasedList.some((item) => item.name === svgPen)
                  "
                  style="color: #4480f9ff"
                />
              </div>
              <div>
                {{
                  data.purchasedList.some((item) => item.name === svgPen)
                    ? 0
                    : data.goods[2].unitPrice
                }}
              </div>
            </div>
          </template>
          <div class="pay-tip">
            <p v-if="data.goods[2].checked">
              已选择{{ data.goods[2].unPurchased }}个图元 小计:￥{{
                data.goods[2].unPurchased * data.goods[2].unitPrice
              }}
            </p>
            <p v-else>已选择0个图元 小计:￥0</p>
          </div>
        </t-collapse-panel>
        <t-collapse-panel
          v-if="[...prePayList.jsPens].length"
          value="3"
          :header="data.goods[3].type"
        >
          <template #headerRightContent>
            <t-space size="small">
              <t-checkbox v-model="data.goods[3].checked"></t-checkbox>
            </t-space>
          </template>
          <div v-for="jsPen in prePayList.jsPens" class="pay-line">
            <div style="margin-left: 16px">{{ jsPen }}</div>
            <div>
              <check-icon
                v-show="data.purchasedList.some((item) => item.name === jsPen)"
                style="color: #4480f9ff"
              />
            </div>
            <div>
              {{
                data.purchasedList.some((item) => item.name === jsPen)
                  ? 0
                  : data.goods[3].unitPrice
              }}
            </div>
          </div>
          <div class="pay-tip">
            <p v-if="data.goods[3].checked">
              已选择{{ data.goods[3].unPurchased }}个图元 小计:￥{{
                data.goods[3].unPurchased * data.goods[3].unitPrice
              }}
            </p>
            <p v-else>已选择0个图元 小计:￥0</p>
          </div>
        </t-collapse-panel>
      </t-collapse>
    </div>
    <div class="flex pay-footer">
      <p>企业图形库购买一次，永久使用</p>
      <div class="flex pay-price">
        共{{ finalPrice.total }}个图元，合计
        <p>￥</p>
        <p>{{ finalPrice.price }}</p>
      </div>
    </div>
  </t-dialog>
  <t-dialog
    v-if="wechatPayDialog.show"
    v-model:visible="wechatPayDialog.show"
    class="pay-dialog"
    header="乐吾乐收银台"
    :close-on-overlay-click="false"
    :top="95"
    :width="700"
    confirm-btn="支付完成"
    :cancel-btn="null"
    @close="finishPay"
    @confirm="finishPay"
  >
    <WechatPay
      :order="data.order"
      :code-url="data.order.codeUrl"
      @success="onSuccess"
    />
  </t-dialog>
</template>

<script lang="ts" setup>
import {
  reactive,
  ref,
  onBeforeMount,
  onUnmounted,
  nextTick,
  computed,
} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUser } from '@/services/user';
import { MessagePlugin } from 'tdesign-vue-next';
import {
  Meta2dBackData,
  dealwithFormatbeforeOpen,
  gotoAccount,
  checkData,
} from '@/services/utils';
import { readFile } from '@/services/file';
import { compareVersion, baseVer, upgrade } from '@/services/upgrade';
import { parseSvg } from '@meta2d/svg';
import { Pen, getGlobalColor, isShowChild } from '@meta2d/core';
import { cdn, upCdn } from '@/services/api';
import JSZip from 'jszip';
import axios from 'axios';
import { switchTheme } from '@/services/theme';
import { noLoginTip } from '@/services/utils';
import {
  save,
  blank,
  newFile,
  SaveType,
  onScaleFull,
  onScaleWindow,
  showMagnifier,
  showMap,
  drawPen,
  map,
  magnifier,
  useDot,
  delAttrs,
  useAssets,
} from '@/services/common';
import { useEnterprise } from '@/services/enterprise';
import {
  CheckIcon,
  HomeIcon,
  DesktopIcon,
  ControlPlatformIcon,
  AppIcon,
} from 'tdesign-icons-vue-next';
import {
  getDownloadList,
  getPayList,
  getComponentPurchased,
  get2dComponentJs,
  getTemPngs,
  getGoods,
} from '@/services/download';
import { formComponents } from '@/services/defaults';
import WechatPay from './WechatPay.vue';

const { enterprise } = useEnterprise();
const router = useRouter();
const route = useRoute();

const baseUrl = import.meta.env.BASE_URL || '/';

// const { assets, getAssets } = useAssets();

const { user, signout } = useUser();
const { setDot } = useDot();
const data = reactive({
  name: '空白文件',
  order: {
    codeUrl: '',
    id: '', //订单id
  },
  goods: [], //所有商品类型
  purchasedList: [], //已经购买的列表
});

onBeforeMount(async () => {
  // getAssets();
});

const logout = () => {
  signout();
  meta2d.emit('logout');
};
const onInputName = () => {
  (meta2d.store.data as Meta2dBackData).name = data.name;
  setDot();
};

const initMeta2dName = () => {
  data.name = (meta2d.store.data as Meta2dBackData).name || '';
};

let downloadList = new Set<any>();
let iframeNum = 0;
let compareNum = 0;
const prePayList = reactive({
  pngs: new Set<string>(),
  jsPens: new Set<string>(),
  iotPens: new Set<string>(),
  svgPens: new Set<string>(),
});
let payListNum = 0;
let comparePayListNum = 0;
// let purchasedList = []; //已购买列表
const iotPensMap = {};
// const payPrice = ref(0);

const getIotPensMap = () => {
  formComponents.forEach((item) => {
    item.list.forEach((_item) => {
      iotPensMap[_item.data.name] = { name: _item.name, icon: _item.icon };
    });
  });
};
nextTick(() => {
  meta2d.on('opened', initMeta2dName);
  window.addEventListener('message', dealWithMessage);
  getIotPensMap();
});

const dealWithMessage = async (e) => {
  if (
    typeof e.data !== 'string' ||
    !e.data ||
    e.data.startsWith('setImmediate')
  ) {
    return;
  }
  try {
    let data = JSON.parse(e.data);
    if (typeof data === 'object') {
      if (data.type) {
        if (data.name === 'download') {
          downloadList = new Set([...downloadList, ...data.data]);
          compareNum += 1;
          if (compareNum >= iframeNum) {
            saveDownload();
          }
        } else if (data.name === 'payList') {
          prePayList.pngs = new Set([...prePayList.pngs, ...data.data.pngs]);
          prePayList.jsPens = new Set([
            ...prePayList.jsPens,
            ...data.data.jsPens,
          ]);
          prePayList.iotPens = new Set([
            ...prePayList.iotPens,
            ...data.data.iotPens,
          ]);
          prePayList.svgPens = new Set([
            ...prePayList.svgPens,
            ...data.data.svgPens,
          ]);

          comparePayListNum += 1;
          if (comparePayListNum >= payListNum) {
            if (
              ![...prePayList.pngs].length &&
              ![...prePayList.jsPens].length &&
              ![...prePayList.iotPens].length &&
              ![...prePayList.svgPens].length
            ) {
              //直接下载
              preDownload(meta2d.data());
            } else {
              await showPayListDialog();
            }
          }
        }
      } else {
        meta2d.emit(data.name);
      }
    } else {
      meta2d.emit(data);
    }
  } catch (e) {
    console.info(e);
  }
};

onUnmounted(() => {
  meta2d.off('opened', initMeta2dName);
  window.removeEventListener('message', dealWithMessage);
});

const login = () => {
  return `${enterprise['account']}?cb=${encodeURIComponent(location.href)}`;
};

function load(isNew = false) {
  const input = document.createElement('input');
  input.type = 'file';
  input.onchange = (event) => {
    const elem = event.target as HTMLInputElement;
    if (elem.files && elem.files[0]) {
      // 路由跳转 可能在 openFile 后执行
      if (elem.files[0].name.endsWith('.json')) {
        blank();
        openJson(elem.files[0]);
        if (isNew) {
          router.push({
            path: '/',
            query: {
              r: Date.now() + '',
            },
          });
        }
      } else if (elem.files[0].name.endsWith('.svg')) {
        MessagePlugin.info(
          '可二次编辑但转换存在损失，若作为图片使用，请使用右侧属性面板的上传图片功能'
        );
        openSvg(elem.files[0]);
      } else if (elem.files[0].name.endsWith('.zip')) {
        blank();
        router.push({
          path: '/',
          query: {
            r: Date.now() + '',
          },
        });
        setTimeout(() => {
          openZip(elem.files[0]);
        }, 500);
      } else {
        MessagePlugin.info('打开文件只支持 json，svg，zip 格式');
      }
    }
  };
  input.click();
}

const openJson = async (file: File) => {
  const text = await readFile(file);
  try {
    let data: Meta2dBackData = JSON.parse(text);
    if (!data.name) {
      data.name = file.name.replace('.json', '');
    }
    if (!data.version || compareVersion(data.version, baseVer) === -1) {
      // 如果版本号不存在或者版本号 version < 1.0.0
      data = upgrade(data, baseVer);
    }
    dealwithFormatbeforeOpen(data);
    for (const k of delAttrs) {
      delete (data as any)[k];
    }
    meta2d.open(data);
  } catch (e) {
    console.error(e);
  }
};

const openSvg = async (file: File) => {
  const text = await readFile(file);
  const pens: Pen[] = parseSvg(text);
  meta2d.canvas.addCaches = pens;
  MessagePlugin.info('svg转换成功，请点击画布决定放置位置');
};

const openZip = async (file: File) => {
  if (!(user && user.id)) {
    MessagePlugin.warning(noLoginTip);
    return;
  }

  // if (!user.isVip) {
  //   gotoAccount();
  //   return;
  // }
  if (!user.vip) {
    MessagePlugin.info('需要开通普通会员~');
    gotoAccount();
    return;
  }
  const { default: JSZip } = await import('jszip');
  const zip = new JSZip();
  await zip.loadAsync(file);

  let dataStr = '';
  for (const key in zip.files) {
    if (zip.files[key].dir) {
      continue;
    }
    if (key.endsWith('.json')) {
      // 认为只有一个 json 文件
      // dataStr = await zip.file(key).async('string');
      break;
    }
  }

  if (!dataStr) {
    return false;
  }

  for (const key in zip.files) {
    if (zip.files[key].dir) {
      continue;
    }
    // let _png = key.indexOf('/png');
    // let _img = key.indexOf('/img');
    // let _image = key.indexOf('/image');
    // let _file = key.indexOf('/file');
    let _keyLower = key.toLowerCase();
    // if (!key.endsWith('.json') && (_png !== -1 || _img !== -1 || _image !== -1 || _file !== -1)) {
    if (
      _keyLower.endsWith('.png') ||
      _keyLower.endsWith('.svg') ||
      _keyLower.endsWith('.gif') ||
      _keyLower.endsWith('.jpg') ||
      _keyLower.endsWith('.jpeg')
    ) {
      let filename = key.substr(key.lastIndexOf('/') + 1);
      const extPos = filename.lastIndexOf('.');
      let ext = '';
      if (extPos > 0) {
        ext = filename.substr(extPos);
      }
      filename = filename.substring(0, extPos > 8 ? 8 : extPos);

      // 上传文件
      const result: any = {};
      //   await upload(
      //   // await zip.file(key).async('blob'),
      //   true,
      //   filename + ext,
      //   "/2D/默认"
      // );
      let _key = key;
      // if (_png) {
      //   _key = key.substring(_png);
      // } else if (_image) {
      //   _key = key.substring(_png);
      // } else if (_img) {
      //   _key = key.substring(_img);
      // } else if (_file) {
      //   _key = key.substring(_file);
      // }
      if (result) {
        if (dataStr.replaceAll) {
          //'le5le.meta2d'
          dataStr = dataStr.replaceAll(_key.slice(12), result.url);
        } else {
          while (dataStr.includes(_key)) {
            dataStr = dataStr.replace(_key.slice(12), result.url);
            // 正则 gm 在特殊情况下报错，例如如下场景
            /**
                 *    
      const data = '{"image":"/image/materials/IoT-Chemical(化学)/Air stripper 2(汽提塔2).svg"}';
      const key = '/image/materials/IoT-Chemical(化学)/Air stripper 2(汽提塔2).svg';
      data.replace(key, '123');
      data.replaceAll(key, '123')
      data.replace(new RegExp(key, 'gm'), '123');
      data.replace(new RegExp(key, 'g'), '123');
                 */
          }
        }
      }
    }
  }

  try {
    let data: Meta2dBackData = JSON.parse(dataStr);
    if (data) {
      if (!data.name) {
        data.name = file.name.replace('.zip', '');
      }
      if (!data.version || compareVersion(data.version, baseVer) === -1) {
        // 如果版本号不存在或者版本号 version < 1.0.0
        data = upgrade(data, baseVer);
      }
      dealwithFormatbeforeOpen(data);
      const delAttrs = [
        'userId',
        'shared',
        'team',
        'owner',
        'username',
        'editor',
        'editorId',
        'editorName',
        'createdAt',
        'folder',
        'image',
        'id',
        '_id',
        'view',
        'updatedAt',
        'star',
        'recommend',
      ];
      for (const k of delAttrs) {
        delete (data as any)[k];
      }
      meta2d.open(data);
    }
  } catch (e) {
    return false;
  }
};

const downloadJson = () => {
  const data: Meta2dBackData = meta2d.data();
  if (data._id) delete data._id;
  if (data.id) delete data.id;
  checkData(data);
  import('file-saver').then(({ saveAs }) => {
    saveAs(
      new Blob(
        [JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')],
        {
          type: 'text/plain;charset=utf-8',
        }
      ),
      `${data.name || 'le5le.meta2d'}.json`
    );
  });
};

const downloadZip = async () => {
  if (!(user && user.id)) {
    MessagePlugin.warning(noLoginTip);
    return;
  }

  // if (!user.isVip) {
  //   // gotoAccount();
  //   return;
  // }
  if (!user.vip) {
    MessagePlugin.info('需要开通普通会员~');
    gotoAccount();
    return;
  }
  MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
  const [{ default: JSZip }, { saveAs }] = await Promise.all([
    import('jszip'),
    import('file-saver'),
  ]);

  const zip: any = new JSZip();
  const data: Meta2dBackData = meta2d.data();
  let _fileName =
    (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
    'le5le.meta2d';
  const _zip = zip.folder(`${_fileName}`);
  if (data._id) delete data._id;
  if (data.id) delete data.id;
  checkData(data);
  _zip.file(
    `${_fileName}.json`,
    JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
  );
  await zipBkImg(_zip);
  await zipImages(_zip, meta2d.store.data.pens);

  const blob = await zip.generateAsync({ type: 'blob' });
  saveAs(blob, `${_fileName}.zip`);
};

const zip3D = (name: string) => {
  const pen_3d = meta2d.store.data.pens.filter(
    (pen) =>
      pen.name === 'iframe' &&
      (pen.tags.includes('meta3d') || pen.iframe.indexOf('3d') !== -1)
  );
  if (pen_3d && pen_3d.length) {
    //存在3d场景
    pen_3d.forEach((pen) => {
      //发送消息
      let params = queryURLParams(pen.iframe.split('?')[1]);
      (
        pen.calculative.singleton.div.children[0] as HTMLIFrameElement
      ).contentWindow.postMessage(
        JSON.stringify({
          name,
          id: params.id,
        }),
        '*'
      );
    });
  }
};
function queryURLParams(value?: string) {
  let url = value || window.location.href.split('?')[1];
  const urlSearchParams = new URLSearchParams(url);
  const params = Object.fromEntries(urlSearchParams.entries());
  return params;
}

const downloadHtml = async () => {
  if (!(user && user.id)) {
    MessagePlugin.warning(noLoginTip);
    return;
  }

  if (user.vipDesc !== '超级会员' && user.vipDesc !== '旗舰会员') {
    MessagePlugin.info('需要开通超级会员~');
    gotoAccount();
    return;
  }

  //图形库需要购买
  const meta2dData = meta2d.data();
  let list = getPayList(meta2dData);
  prePayList.pngs = new Set(list.pngs);
  prePayList.jsPens = new Set(list.jsPens);
  prePayList.iotPens = new Set(list.iotPens);
  prePayList.svgPens = new Set(list.svgPens);
  //向iframe发送消息
  payListNum = 0;
  comparePayListNum = 0;
  const pen_pay = meta2dData.pens.filter(
    (pen) =>
      pen.name === 'iframe' &&
      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
        pen.iframe.indexOf('/2d/') !== -1 ||
        pen.iframe.indexOf('v.le5le.com') !== -1 ||
        pen.iframe.indexOf('/v/') !== -1 ||
        pen.iframe.indexOf('/preview') !== -1)
  );
  if (pen_pay && pen_pay.length) {
    //存在3d场景
    pen_pay.forEach((pen) => {
      //发送消息
      (
        meta2d.store.pens[pen.id].calculative.singleton.div
          .children[0] as HTMLIFrameElement
      ).contentWindow.postMessage(
        JSON.stringify({
          name: 'prePayList',
          type: 1,
        }),
        '*'
      );
      payListNum += 1;
    });
  }
  if (payListNum === 0) {
    //无嵌入页面
    if (
      !list.pngs.length &&
      !list.jsPens.length &&
      !list.iotPens.length &&
      !list.svgPens.length
    ) {
      preDownload(meta2dData);
    } else {
      await showPayListDialog();
    }
  }
};

const showPayListDialog = async () => {
  data.goods = await getGoods();
  data.purchasedList = await getComponentPurchased(prePayList);
  data.goods.forEach((item, index) => {
    item.checked = true;
    let purchased = data.purchasedList?.filter(
      (_item) => _item.type === item.type
    );
    if (index === 0) {
      item.total = [...prePayList.pngs].length;
      item.unPurchased = item.total - purchased.length;
    } else if (index === 1) {
      item.total = [...prePayList.iotPens].length;
      item.unPurchased = item.total - purchased.length;
    } else if (index === 3) {
      item.total = [...prePayList.jsPens].length;
      item.unPurchased = item.total - purchased.length;
    } else if (index === 2) {
      if (purchased.length === 1 && !purchased[0].name) {
        //说明已经购买全部 //TODO
        item.total = item.count;
        item.unPurchased = 0;
      } else {
        //需要购买全部
        if ([...prePayList.svgPens].includes('*')) {
          item.total = item.count;
          item.unPurchased = item.total;
        } else {
          item.total = [...prePayList.svgPens].length;
          item.unPurchased = item.total - purchased.length;
        }
      }
    }
  });
  let price = 0;
  data.goods.forEach((item, index) => {
    if (item.checked) {
      price += item.unPurchased * item.unitPrice;
    }
  });
  if(price===0){
    skipPay();//如果计算价格为0，直接下载
  }else{
   payListDialog.show = true;
  }
};

const preDownload = (meta2dData: any) => {
  MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
  iframeNum = 0;
  compareNum = 0;

  const pen_3d = meta2dData.pens.filter(
    (pen) =>
      pen.name === 'iframe' &&
      (pen.iframe.indexOf('3d.le5le.com') !== -1 ||
        pen.iframe.indexOf('/3d/') !== -1)
  );
  if (pen_3d && pen_3d.length) {
    //存在3d场景
    if (pen_3d.length === 1) {
      let params = queryURLParams(pen_3d[0].iframe.split('?')[1]);
      meta2d.store.pens[
        pen_3d[0].id
      ].calculative.singleton.div.children[0].contentWindow.postMessage(
        JSON.stringify({
          name: 'deploy',
          // id: params.id,
          type: 1, //用于区分是系统消息
          path: `3d`,
        }),
        '*'
      );
      pen_3d[0].iframe = '/view?data=3d';
    } else {
      pen_3d.forEach((pen) => {
        //发送消息
        let params = queryURLParams(pen.iframe.split('?')[1]);
        (
          meta2d.store.pens[pen.id].calculative.singleton.div
            .children[0] as HTMLIFrameElement
        ).contentWindow.postMessage(
          JSON.stringify({
            name: 'deploy',
            // id: params.id,
            type: 1,
            path: `3d-${params.id}`,
          }),
          '*'
        );
        pen.iframe = `/view?data=3d-${params.id}`;
      });
    }
    iframeNum += pen_3d.length;
  }

  const pen_2d = meta2dData.pens.filter(
    (pen) =>
      pen.name === 'iframe' &&
      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
        pen.iframe.indexOf('/2d/') !== -1)
  );
  if (pen_2d && pen_2d.length) {
    //存在3d场景
    if (pen_2d.length === 1) {
      let params = queryURLParams(pen_2d[0].iframe.split('?')[1]);
      meta2d.store.pens[
        pen_2d[0].id
      ].calculative.singleton.div.children[0].contentWindow.postMessage(
        JSON.stringify({
          name: 'downloadHtml',
          id: params.id,
          type: 1,
          path: `2d`,
        }),
        '*'
      );
      pen_2d[0].iframe = '/view?data=2d';
    } else {
      pen_2d.forEach((pen) => {
        //发送消息
        let params = queryURLParams(pen.iframe.split('?')[1]);
        (
          meta2d.store.pens[pen.id].calculative.singleton.div
            .children[0] as HTMLIFrameElement
        ).contentWindow.postMessage(
          JSON.stringify({
            name: 'downloadHtml',
            // id: params.id,
            type: 1,
            path: `2d-${params.id}`,
          }),
          '*'
        );
        pen.iframe = `/view?data=2d-${params.id}`;
      });
    }
    iframeNum += pen_2d.length;
  }

  const pen_v = meta2dData.pens.filter(
    (pen) =>
      pen.name === 'iframe' &&
      (pen.iframe.indexOf('v.le5le.com') !== -1 ||
        pen.iframe.indexOf('/v/') !== -1)
  );

  if (pen_v && pen_v.length) {
    //存在3d场景
    pen_v.forEach((pen) => {
      //发送消息
      let params = queryURLParams(pen.iframe.split('?')[1]);
      (
        meta2d.store.pens[pen.id].calculative.singleton.div
          .children[0] as HTMLIFrameElement
      ).contentWindow.postMessage(
        JSON.stringify({
          name: 'downloadHtml',
          // id: params.id,
          type: 1,
          path: `v-${params.id}`,
        }),
        '*'
      );
      pen.iframe = `/view?data=v-${params.id}`;
    });
    iframeNum += pen_v.length;
  }

  downloadList = getDownloadList(meta2dData);

  if (iframeNum === 0) {
    //如果没有嵌入场景
    saveDownload();
  } else {
    setTimeout(() => {
      if (compareNum < iframeNum) {
        //message阻塞/报错的情况
        saveDownload();
      }
    }, 10000);
  }
};

const saveDownload = async () => {
  const list = [...downloadList];
  //控件
  const js = await get2dComponentJs([...prePayList.iotPens]);
  list.push({
    data: js,
    path: '/view/js/2d-components.js',
  });

  ///png图形库
  const pngs = await getTemPngs([...prePayList.pngs]);
  list.forEach((item) => {
    if (pngs[item.url]) {
      item.url = pngs[item.url];
    }
  });
  //js线性图元 由对应页面处理

  //SVG线性图元
  if ([...prePayList.svgPens].length) {
    let purchased = data.purchasedList?.filter(
      (_item) => _item.type === 'SVG线性图元'
    );
    if (purchased.length === 1 && !purchased[0].name) {
      //已经购买全部
      list.forEach((item) => {
        if (item.data && item.path.indexOf('/projects/v') !== 1) {
          //清空所有svgpath
          let meta2dData = JSON.parse(item.data);
          for (let key of Object.keys(meta2dData.paths)) {
            let path = meta2dData.paths[key];
            if (
              path.indexOf('-1.18Zm4-1') !== -1 ||
              path.indexOf('-1.19Zm4-1') !== -1 ||
              path.indexOf('2.85ZM') !== -1 ||
              path.indexOf('-1-2.39.3') !== -1
            ) {
              meta2dData.paths[key] = '';
            }
          }
          item.data = JSON.stringify(meta2dData);
        }
      });
    } else {
      list.forEach((item) => {
        if (item.data && item.path.indexOf('/projects/v') !== 1) {
          //2d 图纸数据
          let meta2dData = JSON.parse(item.data);
          meta2dData.pens.forEach((pen) => {
            if (pen.name === 'svgPath' && pen.svgUrl) {
              if ([...prePayList.svgPens].includes(pen.svgUrl)) {
                pen.pathId = null;
              }
            }
          });
          item.data = JSON.stringify(meta2dData);
        }
      });
    }
  }

  //开始下载list
  const [{ default: JSZip }, { saveAs }] = await Promise.all([
    import('jszip'),
    import('file-saver'),
  ]);
  const zip = new JSZip();

  await Promise.all(
    list.map(async (item: any) => {
      if (item.url) {
        //接口请求
        const res: Blob = await axios.get(item.url, {
          responseType: 'blob',
        });
        zip.file(item.path, res, { createFolders: true });
      } else if (item.data) {
        //直接写数据
        zip.file(item.path, item.data, { createFolders: true });
      }
    })
  );
  let _fileName =
    (meta2d.store.data.name &&
      meta2d.store.data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
    'le5le.meta2d';
  const blob = await zip.generateAsync({ type: 'blob' });
  saveAs(blob, `${_fileName}.zip`);
};

const _downloadHtml = async () => {
  if (!(user && user.id)) {
    MessagePlugin.warning(noLoginTip);
    return;
  }

  // if (!user.isVip) {
  //   gotoAccount();
  //   return;
  // }

  if (user.vipDesc !== '超级会员' && user.vipDesc !== '旗舰会员') {
    MessagePlugin.info('需要开通超级会员~');
    gotoAccount();
    return;
  }
  frameFlag = -1;
  MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
  zip3D('deploy');
  const data: Meta2dBackData = meta2d.data();
  if (data._id) delete data._id;
  if (data.id) delete data.id;
  if (data.image) delete data.image;
  checkData(data);
  const [{ default: JSZip }, { saveAs }] = await Promise.all([
    import('jszip'),
    import('file-saver'),
  ]);
  const zip = new JSZip();
  let _fileName =
    (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
    'le5le.meta2d';

  //处理cdn图片地址
  const _zip: any = zip.folder(`${_fileName}`);
  _zip.file(
    'data.json',
    JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
  );
  await Promise.all([
    zipBkImg(_zip),
    zipImages(_zip, meta2d.store.data.pens),
    zipFiles(_zip),
  ]);
  const blob = await zip.generateAsync({ type: 'blob' });
  saveAs(blob, `${_fileName}.zip`);
};

async function zipBkImg(zip: JSZip) {
  let img = meta2d.store.data.bkImage;
  if (img) {
    if (img.startsWith('/') || img.startsWith(cdn) || img.startsWith(upCdn)) {
      await zipImage(zip, img);
    }
  }
}

enum Frame {
  vue2,
  vue3,
  react,
}

const downloadVue3 = async () => {
  downloadAsFrame(Frame.vue3);
};

const downloadVue2 = async () => {
  downloadAsFrame(Frame.vue2);
};

const downloadReact = async () => {
  downloadAsFrame(Frame.react);
};

let frameFlag = -1;

async function downloadAsFrame(type: Frame) {
  if (!(user && user.id)) {
    MessagePlugin.warning(noLoginTip);
    return;
  }

  // if (!user.isVip) {
  //   gotoAccount();
  //   return;
  // }
  if (user.vipDesc !== '旗舰会员') {
    MessagePlugin.info('需要开通旗舰会员~');
    gotoAccount();
    return;
  }
  frameFlag = type;
  MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
  zip3D(
    type === Frame.vue3 ? 'toVue3' : type === Frame.vue2 ? 'toVue2' : 'toReact'
  );
  const data: Meta2dBackData = meta2d.data();
  if (data._id) delete data._id;
  if (data.id) delete data.id;
  if (data.image) delete data.image;
  checkData(data);
  const [{ default: JSZip }, { saveAs }] = await Promise.all([
    import('jszip'),
    import('file-saver'),
  ]);
  const zip = new JSZip();
  let _fileName =
    (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
    'le5le.meta2d';
  const _zip: any = zip.folder(`${_fileName}`);
  _zip.file(
    `${
      type === Frame.vue3
        ? 'meta2d-vue3'
        : type === Frame.vue2
        ? 'meta2d-vue2'
        : 'meta2d-react'
    }/public/json/data.json`,
    JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
  );
  await Promise.all([
    zipJs(_zip),
    zipBkImg(_zip),
    zipImages(_zip, meta2d.store.data.pens),
    type === Frame.vue3
      ? zipVue3Files(_zip)
      : type === Frame.vue2
      ? zipVue2Files(_zip)
      : zipReactFiles(_zip),
  ]);
  const blob = await zip.generateAsync({ type: 'blob' });
  saveAs(blob, `${_fileName}.zip`);
  frameFlag = -1;
}

async function zipJs(zip: JSZip) {
  const files = ['/view/js/marked.min.js', '/view/js/lcjs.iife.js'];
  await Promise.all(
    files.map(async (filePath) => {
      const res: Blob = await axios.get(filePath, {
        responseType: 'blob',
      });
      zip.file(
        `${
          frameFlag === Frame.vue3
            ? 'meta2d-vue3'
            : frameFlag === Frame.vue2
            ? 'meta2d-vue2'
            : 'meta2d-react'
        }/public` + filePath.replace('/view', ''),
        res,
        { createFolders: true }
      );
    })
  );
}

async function _zipVue3Files(zip: JSZip) {
  const files = [
    '/view/js/marked.min.js',
    '/view/js/lcjs.iife.js',
    '/view/vue3/Meta2d.vue',
    '/view/index.html',
    '/view/js/meta2d.js',
    '/view/使用说明.md',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

//新
async function zipVue3Files(zip: JSZip) {
  const files = [
    '/view/meta2d-vue3/src/components/Meta2d.vue',
    '/view/meta2d-vue3/src/App.vue',
    '/view/meta2d-vue3/src/main.js',
    '/view/meta2d-vue3/src/style.css',
    '/view/meta2d-vue3/index.html',
    '/view/meta2d-vue3/package.json',
    '/view/meta2d-vue3/README.md',
    '/view/meta2d-vue3/vite.config.js',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

async function _zipVue2Files(zip: JSZip) {
  const files = [
    '/view/js/marked.min.js',
    '/view/js/lcjs.iife.js',
    '/view/vue2/Meta2d.vue',
    '/view/index.html',
    '/view/js/meta2d.js',
    '/view/使用说明.md',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

async function zipVue2Files(zip: JSZip) {
  const files = [
    '/view/meta2d-vue2/src/components/Meta2d.vue',
    '/view/meta2d-vue2/src/App.vue',
    '/view/meta2d-vue2/src/main.js',
    // '/view/meta2d-vue2/src/style.css',
    '/view/meta2d-vue2/public/index.html',
    '/view/meta2d-vue2/package.json',
    '/view/meta2d-vue2/README.md',
    // '/view/meta2d-vue3/vite.config.js',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

async function _zipReactFiles(zip: JSZip) {
  const files = [
    '/view/js/marked.min.js',
    '/view/js/lcjs.iife.js',
    '/view/react/Meta2d.jsx',
    '/view/react/Meta2d.css',
    '/view/index.html',
    '/view/js/meta2d.js',
    '/view/使用说明.md',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

async function zipReactFiles(zip: JSZip) {
  const files = [
    '/view/meta2d-react/src/index.css',
    '/view/meta2d-react/src/index.js',
    '/view/meta2d-react/src/Meta2d.css',
    '/view/meta2d-react/src/Meta2d.jsx',
    '/view/meta2d-react/package.json',
    '/view/meta2d-react/README.md',
    '/view/meta2d-react/public/index.html',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

async function zipFiles(zip: JSZip) {
  const files = [
    '/view/js/marked.min.js',
    '/view/js/lcjs.iife.js',
    '/view/js/index.js',
    '/view/js/meta2d.js',
    '/view/index.html',
    '/view/index.css',
    '/view/favicon.ico',
    '/view/使用说明.pdf',
  ] as const;
  // 文件同时加载
  await Promise.all(files.map((filePath) => zipFile(zip, filePath)));
}

async function zipFile(zip: JSZip, filePath: string) {
  const res: Blob = await axios.get(
    (cdn ? cdn + '/v' : import.meta.env.BASE_URL.slice(0, -1)) + filePath,
    {
      responseType: 'blob',
    }
  );
  zip.file(filePath.replace('/view', ''), res, { createFolders: true });
}

/**
 * 图片放到 zip 里
 * @param pens 可以是非具有 calculative 的 pen
 */
async function zipImages(zip: JSZip, pens: Pen[]) {
  if (!pens) {
    return;
  }

  // 不止 image 上有图片， strokeImage ，backgroundImage 也有图片
  const imageKeys = [
    {
      string: 'image',
    },
    { string: 'strokeImage' },
    { string: 'backgroundImage' },
  ] as const;
  const images: string[] = [];
  for (const pen of pens) {
    for (const i of imageKeys) {
      const image = pen[i.string];
      if (image) {
        // HTMLImageElement 无法精确控制图片格式
        if (
          image.startsWith('/') ||
          image.startsWith(cdn) ||
          image.startsWith(upCdn)
        ) {
          // 只考虑相对路径下的 image ，绝对路径图片无需下载
          if (!images.includes(image)) {
            images.push(image);
          }
        }
      }
    }
    // 无需递归遍历子节点，现在所有的节点都在外层
  }
  await Promise.all(images.map((image) => zipImage(zip, image)));
}

async function zipImage(zip: JSZip, image: string) {
  const res: Blob = await axios.get(image, {
    responseType: 'blob',
    params: {
      isZip: true,
    },
  });
  zip.file(
    (frameFlag === -1
      ? ''
      : `${
          frameFlag === Frame.vue3
            ? 'meta2d-vue3'
            : frameFlag === Frame.vue2
            ? 'meta2d-vue2'
            : 'meta2d-react'
        }/public`) + (cdn ? image.replace(cdn, '').replace(upCdn, '') : image),
    res,
    {
      createFolders: true,
    }
  );
}

const downloadImageTips =
  '无法下载，宽度不合法，画布可能没有画笔/画布大小超出浏览器最大限制';

const downloadPng = () => {
  if (!meta2d.store.data.pens.length) {
    MessagePlugin.warning(downloadImageTips);
    return;
  }
  try {
    meta2d.downloadPng();
  } catch (e) {
    MessagePlugin.warning(downloadImageTips);
  }
};

async function getIconDefs(url: string) {
  let res: any = await axios.get(url);
  let str = res.match(/@font-face([\s\S]*?)\}/)[1];
  str = `@font-face ${str} }`;
  return str;
}

const downloadSvg = async () => {
  // await import('@/assets/canvas2svg');
  for (const pen of meta2d.store.data.pens) {
    if (pen.calculative.img) {
      //重新生成绘制图片
      pen.onRenderPenRaw?.(pen);
    }
  }
  if (!C2S) {
    MessagePlugin.error('请先加载乐吾乐官网下的canvas2svg.js');
    return;
  }

  const rect: any = meta2d.getRect();
  if (!isFinite(rect.width)) {
    MessagePlugin.error(downloadImageTips);
    return;
  }
  rect.x -= 10;
  rect.y -= 10;
  const ctx = new C2S(rect.width + 20, rect.height + 20);
  ctx.textBaseline = 'middle';
  ctx.strokeStyle = getGlobalColor(meta2d.store);
  for (const pen of meta2d.store.data.pens) {
    // 不使用 calculative.inView 的原因是，如果 pen 在 view 之外，那么它的 calculative.inView 为 false，但是它的绘制还是需要的
    if (!isShowChild(pen, meta2d.store) || pen.visible == false) {
      continue;
    }
    meta2d.renderPenRaw(ctx, pen, rect);
  }

  let mySerializedSVG = ctx.getSerializedSvg();
  let icon_pens = meta2d.store.data.pens.filter(
    (item) => item.iconFamily && item.icon
  );
  if (icon_pens && icon_pens.length > 0) {
    let iconList = [
      '/icon/国家电网/iconfont.css',
      '/icon/电气工程/iconfont.css',
      '/icon/通用图标/iconfont.css',
    ];
    let defsList: any = await Promise.all(
      iconList.map((item) => getIconDefs(item))
    );
    mySerializedSVG = mySerializedSVG.replace(
      '<defs/>',
      `<defs>
    <style type="text/css">
${defsList.join('\n')}
</style>
{{bk}}
  </defs>
{{bkRect}}`
    );
  }
  /*  mySerializedSVG = mySerializedSVG.replace(
        '<defs/>',
        `<defs>
    <style type="text/css">
  @font-face {
    font-family: 'ticon';
    src: url('icon/通用图标/iconfont.ttf') format('truetype');
  }
</style>
{{bk}}
  </defs>
{{bkRect}}`
      );
*/
  if (meta2d.store.data.background) {
    mySerializedSVG = mySerializedSVG.replace('{{bk}}', '');
    mySerializedSVG = mySerializedSVG.replace(
      '{{bkRect}}',
      `<rect x="0" y="0" width="100%" height="100%" fill="${meta2d.store.data.background}"></rect>`
    );
  } else {
    mySerializedSVG = mySerializedSVG.replace('{{bk}}', '');
    mySerializedSVG = mySerializedSVG.replace('{{bkRect}}', '');
  }

  mySerializedSVG = mySerializedSVG.replace(/--le5le--/g, '&#x');

  const urlObject: any = (window as any).URL || window;
  const export_blob = new Blob([mySerializedSVG]);
  const url = urlObject.createObjectURL(export_blob);

  const a = document.createElement('a');
  a.setAttribute(
    'download',
    `${(meta2d.store.data as Meta2dBackData).name || 'le5le.meta2d'}.svg`
  );
  a.setAttribute('href', url);
  const evt = document.createEvent('MouseEvents');
  evt.initEvent('click', true, true);
  a.dispatchEvent(evt);
};

const onUndo = () => {
  meta2d.undo();
};

const onRedo = () => {
  meta2d.redo();
};

const onCut = () => {
  meta2d.cut();
};

const onCopy = () => {
  meta2d.copy();
};

const onPaste = () => {
  meta2d.paste();
};

const onAll = () => {
  meta2d.activeAll();
};

const onDelete = () => {
  meta2d.delete();
};

const onToggleAnchor = () => {
  //取消连线状态
  // meta2d.store.options.disableAnchor = false;
  if (!meta2d.store.options.disableAnchor) {
    meta2d.canvas.drawingLineName && drawPen();
    meta2d.toggleAnchorMode();
  }
};

const onAddAnchorHand = () => {
  meta2d.addAnchorHand();
};

const onRemoveAnchorHand = () => {
  meta2d.removeAnchorHand();
};

const onToggleAnchorHand = () => {
  meta2d.toggleAnchorHand();
};

const onScaleUp = () => {
  const _scale = meta2d.store.data.scale + 0.1;
  meta2d.scale(_scale);
};

const onScaleDown = () => {
  const _scale = meta2d.store.data.scale - 0.1;
  meta2d.scale(_scale);
};

const autoAnchor = ref(true);
const onAutoAnchor = () => {
  meta2d.store.options.autoAnchor = !meta2d.store.options.autoAnchor;
  autoAnchor.value = meta2d.store.options.autoAnchor;
};

const showAnchor = ref(false);
const onDisableAnchor = () => {
  meta2d.store.options.disableAnchor = !meta2d.store.options.disableAnchor;
  changeDisableAnchor();
};

const changeDisableAnchor = () => {
  const { disableAnchor, autoAnchor } = meta2d.store.options;
  showAnchor.value = !disableAnchor || false;
  if (disableAnchor && autoAnchor) {
    // 禁用瞄点开了，需要关闭自动瞄点
    onAutoAnchor();
  }
};

const payListDialog = reactive({
  show: false,
});

const prePay = async () => {
  let list = [];

  data.goods[0].checked &&
    prePayList.pngs.forEach((item) => {
      list.push({
        type: '图片图元',
        name: item,
      });
    });
  data.goods[3].checked &&
    prePayList.jsPens.forEach((item) => {
      list.push({
        type: 'JS线性图元',
        name: item,
      });
    });
  data.goods[1].checked &&
    prePayList.iotPens.forEach((item) => {
      list.push({
        type: '控件',
        name: item,
      });
    });
  if (data.goods[2].checked) {
    if ([...prePayList.svgPens].includes('*')) {
      _list.push({
        type: 'SVG线性图元',
      });
    } else {
      prePayList.svgPens.forEach((item) => {
        list.push({
          type: 'SVG线性图元',
          name: item,
        });
      });
    }
  }
  const res: any = await axios.post('/api/order/2d/component/submit', {
    list,
  });
  wechatPayDialog.show = true;
  data.order = res;
};

const skipPay = () => {
  //跳过支付，直接下载
  preDownload(meta2d.data());
};

const finishPay = async () => {
  let id = data.order.id;
  const result: { state: number } = await axios.post('/api/order/pay/state', {
    id,
  });
  if (result && result.state) {
    MessagePlugin.success('支付成功');
    wechatPayDialog.show = false;
    payListDialog.show = false;
    preDownload(meta2d.data());
  } else {
    MessagePlugin.error('支付失败');
    wechatPayDialog.show = false;
  }
};

const finalPrice = computed(() => {
  let total = 0;
  let price = 0;
  data.goods.forEach((item, index) => {
    if (item.checked) {
      total += item.unPurchased;
      price += item.unPurchased * item.unitPrice;
    }
  });
  return {
    total,
    price,
  };
});

const wechatPayDialog = reactive({
  show: false,
});

const emit = defineEmits(['success']);

const onSuccess = (success: boolean) => {
  emit('success', success);
};
</script>
<style lang="postcss" scoped>
.app-header {
  display: flex;
  height: 40px;
  background-color: var(--color-background);
  position: relative;
  z-index: 2;
  .logo {
    display: flex;
    padding: 0 16px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;

    img {
      height: 20px;
      margin-right: 6px;
    }
  }

  a {
    display: flex;
    padding: 0 8px;
    margin: 0 8px;
    align-items: center;
    color: var(--color);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: var(--color-primary);
    }

    svg {
      font-size: 15px;
      margin: 2px 4px 0 0;
    }

    &.active {
      background-color: var(--color-primary);
      color: #ffffff;
    }
  }

  input {
    font-size: var(--font-size);
    flex-grow: 1;
    background: none;
    outline: none;
    border: none;
    text-align: center;
    color: var(--color-title);
  }
}

.pay-dialog {
  background-color: red;
}

.pay-body {
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 30px;
  .t-collapse {
    border: 0px;
    :deep(.t-collapse-panel__wrapper .t-collapse-panel__header) {
      border-bottom: 0px;
    }
    :deep(.t-collapse-panel__wrapper .t-collapse-panel__body) {
      background: #fff0;
      border-bottom: 0px;
      .t-collapse-panel__content {
        padding: 0;
        color: #c1c8d7;
      }
    }
  }
}
.pay-line {
  display: flex;
  height: 54px;
  background-color: #afcaff0a;
  margin-top: 1px;
  div {
    width: 30%;
    text-align: center;
    line-height: 54px;
    :deep(.t-image) {
      width: 40px;
      height: 40px;
      margin-top: 7px;
    }
    :deep(.pay-svg) {
      .t-image {
        background: #fff;
      }
    }
    .l-icon {
      width: 40px;
      height: 40px;
      margin-top: 7px;
      width: 30%;
    }
  }

  & > div:first-child {
    width: 40%;
    display: flex;
  }
}
.pay-tip {
  height: 54px;
  width: 100%;
  position: relative;
  p {
    position: absolute;
    right: 16px;
    color: var(--color-desc);
  }
}
.pay-footer {
  margin-bottom: -42px;
  position: relative;
  .pay-price {
    position: absolute;
    right: 215px;
    /* margin-left: 50px; */
    align-items: flex-end;
    line-height: 10px;
    /* p{
    vertical-align: bottom;
    line-height: normal;
  } */
    p:nth-child(2) {
      font-size: 32px;
      font-weight: Semibold;
      color: #4480f9;
      line-height: 20px;
    }
    p:nth-child(1) {
      font-size: 14px;
      color: #4480f9;
    }
  }
}

.pay-title {
  margin: 18px 0px 12px 18px;
}
</style>