<script>
import Vue from 'vue'
import domtoimage from 'dom-to-image-more'
import hugerte from 'hugerte'
import 'hugerte/models/dom'
import 'hugerte/icons/default'
import 'hugerte/themes/silver'
import 'hugerte/skins/ui/oxide/skin.js'
import 'hugerte/skins/ui/oxide/content.js'
import 'hugerte/skins/content/default/content.js'
import { upload } from '@/api/system'
import { saveTemplate } from '@/api/template'
import { getExpoList, getMyExpoInfo, getExpoInfo } from '@/api/expo'
export default Vue.extend({
  name: 'Index',
  components: {
  },
  props: [
    'isCompletionInit'
  ],
  data() {
    return {
      code: '',
      codeList: [
        {
          name: '商务风邀请函模板',
          img: '/static/image/tempCover/temp1.png',
          code: `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邀请函</title>
</head>
<body style="padding: 48px 32px;">
  <div class="invitation-letter-container"
    style="border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 32px; position: relative"
  >
    <div class="head-box"
      style="display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;"
    >
      <div class="head-left-box"
        style="display: flex;
        align-items: center;
        grid-gap: 16px;"
      >
        <div class="img-box"
          style="width: 96px;
          height: 48px;"
        >
          <img src="https://oss.starify.cn/matchpages/share_center/2025/0910/8401/68c0de742aa57/logo.png" alt="logo.png" style="width: 100%;height: 100%;">
        </div>
        <div class="head-title-box"
          style="color: #1A4789;
          font-weight: bold;"
        >
          <div class="head-english-head"
            style="font-size: 24px;
            line-height: 1.3;"
          >
            CHINAPLAS 2024
          </div>
          <div class="head-chinese-head"
            style="font-size: 18px;
            line-height: 1.6;"
          >
            <span data-v="expo_name" class="hugerte-variable">展会名称</span>
          </div>
        </div>
      </div>
      <div class="head-right-box"
        style="color: #4B5563;
        font-size: 16px;
        line-height: 1.5;"
      >
        <div class="head-date" style="text-align: end;">
          日期 / Date：2023年8月16日
        </div>
        <div class="head-serial-number" style="text-align: end;">
          文件编号 / Ref No.：PR-CPS24-35913
        </div>
      </div>
    </div>
    <div class="content-box-1"
      style="font-weight: bold;
      font-size: 20px;
      line-height: 1.4;
      margin-bottom: 16px;"
    >
      <div class="chinese-content">
        致相关人士：
      </div>
      <div class="english-content" style="color: #4B5563;">
        To Whom It May Concern:
      </div>
    </div>
    <div class="content-box-2"
      style="font-weight: bold;
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 24px;"
    >
      <div class="chinese-content">
        关于：<span data-v="expo_name" class="hugerte-variable">展会名称</span>
      </div>
      <div class="english-content" style="color: #4B5563;">
        Re: The 36th International Exhibition on Plastics and Rubber Industries
      </div>
    </div>
    <div class="content-box-3"
      style="font-size: 16px;
      line-height: 1.5;
      margin-bottom: 32px;"
    >
      <div class="chinese-content">
        我们很高兴邀请以下代表于2024年4月23日至26日访问上海，<span data-v="expo_name" class="hugerte-variable">展会名称</span>。
      </div>
      <div class="english-content" style="color: #4B5563;">
        We are pleased to invite the following representative to visit Shanghai from April 23-26, 2024, to attend CHINAPLAS 2024.
      </div>
    </div>
    <div class="info-list" style="margin-bottom: 32px;">
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">姓名</div>
          <div class="english-label" style="color: #6B7280;">Name</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value"><span data-v="full_name" class="hugerte-variable">全名</span></div>
          <div class="english-value" style="color: #6B7280;">Zhang Xiaoming</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">性别</div>
          <div class="english-label" style="color: #6B7280;">Gender</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value">男</div>
          <div class="english-value" style="color: #6B7280;">Male</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">出生日期</div>
          <div class="english-label" style="color: #6B7280;">Date of Birth</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value">1985年6月15日</div>
          <div class="english-value" style="color: #6B7280;">June 15, 1985</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">国籍</div>
          <div class="english-label" style="color: #6B7280;">Nationality</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value">中国香港特别行政区</div>
          <div class="english-value" style="color: #6B7280;">Hong Kong SAR, China</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">护照号码</div>
          <div class="english-label" style="color: #6B7280;">Passport No.</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: center;">
          <div class="chinese-value"><span data-v="id_number" class="hugerte-variable">证件号码</span></div>
          <div class="english-value" style="color: #6B7280;"></div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">签发日期</div>
          <div class="english-label" style="color: #6B7280;">Date of Issue</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value">2021年3月15日</div>
          <div class="english-value" style="color: #6B7280;">March 15, 2021</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">有效期至</div>
          <div class="english-label" style="color: #6B7280;">Date of Expiry</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value">2031年3月14日</div>
          <div class="english-value" style="color: #6B7280;">March 14, 2031</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">签发地点</div>
          <div class="english-label" style="color: #6B7280;">Place of Issue</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value">中国香港特别行政区</div>
          <div class="english-value" style="color: #6B7280;">Hong Kong SAR, China</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">公司名称</div>
          <div class="english-label" style="color: #6B7280;">Company Name</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value"><span data-v="company" class="hugerte-variable">公司名称</span></div>
          <div class="english-value" style="color: #6B7280;">Hong Kong International Trading Co., Ltd.</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">职务</div>
          <div class="english-label" style="color: #6B7280;">Position</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value"><span data-v="position" class="hugerte-variable">职务名称</span></div>
          <div class="english-value" style="color: #6B7280;">Sales Director</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">城市</div>
          <div class="english-label" style="color: #6B7280;">City</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-value"><span data-v="city" class="hugerte-variable">城市名称</span></div>
          <div class="english-value" style="color: #6B7280;">Hong Kong</div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">邮编</div>
          <div class="english-label" style="color: #6B7280;">Postal Code</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: center;">
          <div class="chinese-value">999077</div>
          <div class="english-value" style="color: #6B7280;"></div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">联系电话</div>
          <div class="english-label" style="color: #6B7280;">Phone</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: center;">
          <div class="chinese-value"><span data-v="mobile_country_code" class="hugerte-variable">国家代码</span> <span data-v="mobile" class="hugerte-variable">手机号码</span></div>
          <div class="english-value" style="color: #6B7280;"></div>
        </div>
      </div>
      <div class="info-item" style="display: flex; align-items: center;">
        <div class="label-box" style="padding: 12px 16px; width: 24%; background-color: #F9FAFB; height: 46px; border-bottom: 1px solid #F9FAFB; display: flex; flex-direction: column; justify-content: space-between;">
          <div class="chinese-label">Email</div>
          <div class="english-label" style="color: #6B7280;">Email</div>
        </div>
        <div class="value-box" style="flex: 1; padding: 12px 16px; border-bottom: 1px solid #e8eaed; height: 46px; display: flex; flex-direction: column; justify-content: center;">
          <div class="chinese-value"><span data-v="email" class="hugerte-variable">电子邮箱</span></div>
          <div class="english-value" style="color: #6B7280;"></div>
        </div>
      </div>
    </div>
    <div class="chinese-text" style="line-height: 1.5;">
      请为上述代表安排相关签证。我们确认所有机票费用、住宿机票和旅程期间的保险费用将由上述公司承担或由上述代表自行承担。如果您需要任何进一步的信息，请随时与我们联系。
    </div>
    <div class="english-text" style="color: #4B5563; line-height: 1.5; margin-bottom: 48px;">
      Please arrange the relevant visa for the above representative. We confirm that all airfare, accommodation, and travel insurance costs during the journey will be borne by the above company or the representative. If you need any further information, please feel free to contact us.
    </div>
    <div class="bottom-box" style="display: flex; justify-content: space-between; align-items: end; position: relative;">
      <div class="bottom-left-box">
        <div style="line-height: 1.5;">北京雅展展览服务有限公司</div>
        <div style="line-height: 1.5; color: #4B5563;">Beijing Adsale Exhibition Services Co., Ltd.</div>
        <div style="line-height: 1.5;">电话 / Tel：+86 10 8460 0789</div>
        <div style="line-height: 1.5;">邮箱 / Email：info@adsale.com.cn</div>
      </div>
      <div class="bottom-right-box">
        <div style="line-height: 1.5; text-align: end;">此致</div>
        <div style="line-height: 1.5; color: #4B5563; text-align: end;">Yours sincerely,</div>
        <div style="line-height: 1.5; text-align: end;">张淑娴 女士</div>
        <div style="line-height: 1.5; color: #4B5563; text-align: end;">Ms. Zhang Shuxian</div>
        <div style="line-height: 1.5; text-align: end;">展会负责人</div>
        <div style="line-height: 1.5; text-align: end;">Exhibition Director</div>
      </div>
    </div>
    <img src="https://oss.starify.cn/matchpages/share_center/2025/0910/2919/68c11d315441d/DIV%401x.png" alt="DIV@1x.png" style="position: absolute; bottom: 40px; right: 80px;">
  </div>
</body>
</html>`
        }
      ],
      timer: null,
      editor: null,
      templateInfo: {
        id: '',
        name: '未命名表单',
        description: '',
        pic: ''
      },
      expoData: [],
      currentExpo: {},
      expoList: [],
      selectVariable: {},
      showVariableWindow: false,
      showSavePopover: false,
      showTemplateWindow: false,
      loading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params.id) {
        this.loading = true
        this.templateInfo.id = this.$route.params.id
        const templateInfo = JSON.parse(sessionStorage.getItem('invitationInfo'))
        this.templateInfo.name = templateInfo.name
        this.templateInfo.description = templateInfo.description
        this.code = templateInfo.content
        this.loading = false
      } else {
        this.code = this.codeList[0].code
        this.showTemplateWindow = true
      }
      this.initVariable()
      hugerte.PluginManager.add('variable-plugin', (editor) => {
        // 注册移除变量图标
        editor.ui.registry.addIcon('removetag', `<svg width="24" height="24" viewBox="-3 -4 20 20"><path class="c" d="M9.94,0c.53,0,1.03,.26,1.34,.69l3.62,5.07-3.62,5.07c-.31,.43-.81,.69-1.34,.69h-2.44v-1.64h2.44l2.94-4.11L9.94,1.64H1.74v2.47H.1V1.64C.1,.74,.84,0,1.74,0H9.94Z"/><path class="c" d="M4.89,6.72c-.32-.32-.84-.32-1.16,0l-1.16,1.16-1.16-1.16c-.32-.32-.84-.32-1.16,0s-.32,.84,0,1.16l1.16,1.16L.24,10.21c-.32,.32-.32,.84,0,1.16s.84,.32,1.16,0l1.16-1.16,1.16,1.16c.32,.32,.84,.32,1.16,0s.32-.84,0-1.16l-1.16-1.16,1.16-1.16c.32-.32,.32-.84,0-1.16Z"/></svg>`)
        // 注册重新连接变量图标
        editor.ui.registry.addIcon('relinktag', `<svg width="24" height="24" viewBox="-3 -4 20 20"><path class="c" d="M11.11,0c.53,0,1.03,.26,1.34,.69l3.62,5.07-3.62,5.07c-.31,.43-.81,.69-1.34,.69h-2.44v-1.64h2.44l2.94-4.11L11.11,1.64H2.91v2.47H1.27V1.64c0-.91,.74-1.64,1.64-1.64H11.11Z"/><path d="M8.01,8.72c0,2.21-1.79,4.01-4.01,4.01C1.51,12.73-.46,10.44,.09,7.84c.4-1.85,2.13-3.12,4.02-3.12h.68s-.39-.39-.39-.39l.95-.95,2,2-2,2.01-.95-.94,.39-.39h-.79c-1.69,0-3.02,1.58-2.58,3.33,.24,.96,1.02,1.72,1.99,1.93,1.73,.38,3.27-.94,3.27-2.61h1.33Z"/></svg>`)
        // 注册从模板新建插件
        editor.ui.registry.addMenuItem('new-from-template', {
          text: '从模板加载',
          icon: 'new-document',
          onAction: () => {
            this.$confirm('导入模板会覆盖当前邀请函!如果您想要新建一个邀请函，请前往邀请函新增模块。', {
              confirmButtonText: '我知道我在做什么',
              cancelButtonText: '取消操作',
              type: 'warning',
              callback: action => {
                if (action === 'confirm') {
                  this.showTemplateWindow = true
                }
              }
            })
          }
        })
        // 注册保存插件
        editor.ui.registry.addMenuItem('save', {
          text: '保存模板',
          icon: 'save',
          onAction: () => {
            this.saveTemp()
          }
        })
        // 注册转化变量插件
        editor.ui.registry.addMenuItem('add-variable', {
          text: '设置变量',
          icon: 'addtag',
          onAction: () => {
            this.setVariable(editor)
          }
        })
        // 注册取消变量插件
        editor.ui.registry.addMenuItem('remove-variable', {
          text: '取消连接',
          icon: 'removetag',
          onAction: () => {
            const node = editor.selection.getNode()
            if (node.classList.contains('hugerte-variable')) {
              editor.selection.setContent(node.getAttribute('data-o'))
              editor.undoManager.add()
            }
          }
        })
        // 注册重新连接变量插件
        editor.ui.registry.addMenuItem('relink-variable', {
          text: '改变变量',
          icon: 'relinktag',
          onAction: () => {
            this.setVariable(editor)
          }
        })
        // 注册添加取消变量按钮
        editor.ui.registry.addButton('add-variable', {
          icon: 'addtag',
          text: '设置变量',
          onAction: () => {
            const node = editor.selection.getNode()
            if (node.classList.contains('hugerte-variable')) {
              editor.selection.setContent(node.getAttribute('data-o'))
              editor.undoManager.add()
            } else {
              this.setVariable(editor)
            }
          },
          onSetup: (api) => {
            const callback = editor.on('SelectionChange', () => {
              const node = editor.selection.getNode()
              if (node.classList.contains('hugerte-variable')) {
                api.setIcon('removetag')
                api.setText('取消连接')
                api.setEnabled(true)
              } else {
                api.setIcon('addtag')
                api.setText('设置变量')
                if (editor.selection.getContent()) {
                  api.setEnabled(true)
                } else {
                  api.setEnabled(false)
                }
              }
            })
            return () => {
              callback
            }
          }
        })
        // 注册重新连接变量按钮
        editor.ui.registry.addButton('relink-variable', {
          icon: 'relinktag',
          text: '改变变量',
          onAction: () => {
            this.setVariable(editor)
          },
          onSetup: (api) => {
            const callback = editor.on('SelectionChange', () => {
              const node = editor.selection.getNode()
              if (node.classList.contains('hugerte-variable')) {
                api.setEnabled(true)
              } else {
                api.setEnabled(false)
              }
            })
            return () => {
              callback
            }
          }
        })
        // 注册转化变量右键菜单
        editor.ui.registry.addContextMenu('variable-menu', {
          update: (element) => {
            const menuList = []
            if (element.classList.contains('hugerte-variable')) {
              menuList.push('remove-variable')
              menuList.push('relink-variable')
            } else if (editor.selection.getContent()) {
              menuList.push('add-variable')
            }
            return menuList
          }
        })
      })

      hugerte.init({
        selector: '#editor-creat',
        plugins: [
          'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
          'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
          'preview', 'searchreplace', 'table', 'visualblocks', 'variable-plugin'
        ],
        menu: {
          file: { title: 'File', items: 'new-from-template save print' }
        },
        contextmenu: 'copy paste cut | variable-menu',
        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | add-variable relink-variable',
        skin_url: 'default',
        noneditable_class: 'hugerte-variable',
        content_css: '/static/hugerte/hugerte.css',
        statusbar: false,
        height: '100%',
        width: '100%',
        language_url: '/static/hugerte/langs/zh_CN.js',
        language: 'zh_CN',
        setup: editor => {
          editor.on('drop', event => {
            event.preventDefault()
            const html = event.dataTransfer.getData('text/html')
            editor.insertContent(html)
          })
        }
      }).then(editor => {
        hugerte.activeEditor.setContent(this.code)
        hugerte.activeEditor.undoManager.clear()
      }).catch(err => {
        this.$notify({
          title: '提示',
          message: '编辑器启动失败' + err,
          type: 'error'
        })
      })
    },
    setVariable(editor) {
      this.showVariableWindow = true
      this.selectVariable = {}
      this.selectDom = editor.selection.getNode()
      this.selectContent = editor.selection.getContent()
      this.editor = editor
    },
    importCode(temp) {
      this.showTemplateWindow = false
      this.code = temp.code
      window.hugerte.activeEditor.setContent(this.code)
    },
    comVariable() {
      if (this.selectDom.classList.contains('hugerte-variable')) {
        this.selectDom.setAttribute('data-v', this.selectVariable.key)
        this.selectDom.innerText = this.selectVariable.label
        this.editor.undoManager.add()
      } else {
        const html = `<span data-v="${this.selectVariable.key}" data-o="${this.selectContent}" class="hugerte-variable">${this.selectVariable.label}</span>`
        this.editor.selection.setContent(html)
        this.editor.undoManager.add()
      }
      this.showVariableWindow = false
    },
    dragStart(event, data) {
      const html = `<span data-v="${data.key}" data-o="" class="hugerte-variable">${data.label}</span>`
      event.dataTransfer.setData('text/html', html)
    },
    initVariable() {
      getExpoList(0, 100).then(res => {
        this.expoList = res.data.data
        this.currentExpo = this.expoList[0].id
        this.changeExpo()
      })
    },
    changeExpo() {
      getMyExpoInfo(this.currentExpo)
        .then(res => {
          return getExpoInfo(res.data.urla)
        }).then(res => {
          this.expoData = []
          this.expoData.push({ id: 'expo_name', key: 'expo_name', label: '展会名称' })
          this.expoData.push({ id: 'location', key: 'location', label: '展会地址' })
          this.expoData.push({ id: 'content', key: 'location', label: '展会介绍' })
          this.expoData.push({ id: 'organizer', key: 'organizer', label: '展会主办方' })
          this.expoData.push({ id: 'start_date', key: 'start_date', label: '展会开始时间' })
          this.expoData.push({ id: 'end_date', key: 'end_date', label: '展会结束时间' })
          this.expoData.push({ id: 'contact_email', key: 'contact_email', label: '展会电子邮件' })
          this.expoData.push({ id: 'contact_phone', key: 'contact_phone', label: '展会联系电话' })
          res.data.form_fields.forEach(field => {
            this.expoData.push({
              key: field.field_name || field.field_label,
              label: field.field_label,
              id: field.id
            })
          })
          console.log(this.expoData)
        })
    },
    saveTemp(quit) {
      if (this.loading) { return }
      this.loading = true
      this.showSavePopover = false
      this.code = hugerte.activeEditor.getContent()
      setTimeout(() => {
        domtoimage
          .toPng(document.querySelector('#shot'))
          .then((dataUrl) => {
            var arr = dataUrl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
            var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            const picFile = new File([u8arr], 'invitation.png', { type: mime })
            upload(picFile).then(res => {
              saveTemplate(this.templateInfo.id, this.templateInfo.name, this.templateInfo.description, this.code, res.data.file)
                .then(res => {
                  if (quit) {
                    this.$router.push('/invitation/list')
                  }
                  // this.templateInfo.id = res.data.id
                  this.loading = false
                }).catch(err => {
                  this.$notify({
                    title: '提示',
                    message: '邀请函保存失败：' + err,
                    type: 'error'
                  })
                  this.loading = false
                })
            }).catch(err => {
              this.$notify({
                title: '提示',
                message: '图片上传失败：' + err,
                type: 'error'
              })
              this.loading = false
            })
          })
      }, 500)
    }
  }
})
</script>

<template>
  <div v-loading="loading" class="main-box">
    <div class="head">
      <div class="head-left">
        <el-input v-model="templateInfo.name" v-permission="'invitation.rename'" class="name" />
      </div>

      <el-popover
        v-model="showSavePopover"
        popper-class="invitation-popover"
        placement="left-start"
        width="500"
        trigger="click"
      >
        <div class="body">
          <span class="label">模板名称</span>
          <el-input v-model="templateInfo.name" v-permission="'invitation.rename'" placeholder="请输入模板名称" />
          <span class="label">模板描述</span>
          <el-input v-model="templateInfo.description" v-permission="'invitation.desc'" type="textarea" rows="6" placeholder="请输入模板描述" />
          <div>
            <el-button v-permission="'invitation.save'" class="button" type="primary" @click="saveTemp()">保存模板</el-button>
            <el-button v-permission="'invitation.save'" class="button" @click="saveTemp(true)">保存并退出</el-button>
          </div>
        </div>
        <el-button slot="reference" icon="el-icon-plus" type="primary">保存模板</el-button>
      </el-popover>

    </div>
    <div class="body">
      <div class="viewer">
        <div class="shot-viwer">
          <div id="shot" v-html="code" />
        </div>
        <div class="viewer-box">
          <div id="editor-creat" />
        </div>
      </div>
      <div class="variable">
        <div class="variable-head">
          <div class="title">变量管理器</div>
          <div class="tool-box">
            <el-select v-model="currentExpo" placeholder="选择需要连接变量的表单" size="mini" @change="changeExpo()">
              <el-option v-for="item in expoList" :key="item.id" :label="item.expo_name" :value="item.id" />
            </el-select>
          </div>
        </div>
        <div class="variable-body-cont">
          <div class="variable-body">
            <div v-for="variable in expoData" :key="variable.id" draggable="true" class="variable-item" @dragstart="dragStart($event,variable)">{{ variable.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择变量"
      :visible.sync="showVariableWindow"
      width="400px"
      custom-class="variable-dialog"
      :append-to-body="true"
    >
      <div class="variable-box">
        <div class="variable-body">
          <div
            v-for="variable in expoData"
            :key="variable.id"
            :class="['variable-item',selectVariable.id==variable.id?'active':'']"
            @click="selectVariable=variable"
          >{{ variable.label }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVariableWindow = false">取 消</el-button>
        <el-button :disabled="!selectVariable.id" type="primary" @click="comVariable">确 定</el-button>
      </span>

    </el-dialog>
    <el-dialog
      title="选择模板"
      :visible.sync="showTemplateWindow"
      width="1000px"
      custom-class="template-dialog"
      :append-to-body="true"
    >
      <div class="template-box">
        <div class="template-body">
          <div v-for="(template,index) in codeList" :key="index" class="template-item" @click="importCode(template)">
            <img :src="template.img" class="cover">
            <div class="name">{{ template.name }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.main-box{
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-gap: 24px;
  .body{
    height: 100%;
    position: relative;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 300px;
    .variable{
      overflow: hidden;
      border: 2px solid #eee;
      border-radius: 10px;
      display: grid;
      grid-template-rows: auto 1fr;
      .variable-body-cont{
        position: relative;
        .variable-body{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow-y: scroll;
          padding: 12px 0 12px 12px;
          .variable-item{
            border-radius: 4px;
            display: block;
            font-size: 14px;
            padding: 6px 12px;
            cursor: grab;
            &:active{
              cursor: grabbing;
            }
            &:hover{
              background-color: #F0F0F0;
            }
          }
        }
      }

      .variable-head{
        z-index: 1;
        padding: 16px 16px 12px;
        box-shadow: 0 2px 2px -2px rgba(34,47,62,.1),0 8px 8px -4px rgba(34,47,62,.07);
        .title{
          padding-left: 2px;
          margin-bottom: 12px;
          font-size: 14px;
        }
        .tool-box{
          .el-select{
            width: 100%;
          }
        }
      }
    }
    .viewer{
      overflow: hidden;
      border-radius: 8px;
      position: relative;
      .viewer-box,.shot-viwer{
        overflow: hidden;
        overflow-y: auto;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        div{
          background: white;
        }
      }
    }
  }
  .head{
    display: flex;
    justify-content: space-between;
    .head-left{
      width: 50%;
      display: flex;
      gap: 8px;
      .name{
        flex: 1;
      }
    }

  }
}
</style>
<style>
.invitation-popover{
  .body{
    display: flex;
    flex-direction: column;
    gap: 8px;
    .button{
      margin-top: 16px;
    }
  }
}
.template-dialog{
  .template-box{
    height: 50vh;
    position: relative;
    width: 100%;
    .template-body{
      padding: 4px;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: grid;
      justify-content: flex-start;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 360px;
      grid-gap: 16px;
      .template-item{
        transition-duration: 300ms;
        overflow: hidden;
        box-shadow: 0 0 4px 0 #00000022;
        display: grid;
        border-radius: 8px;
        width: 100%;
        cursor: pointer;
        &:hover{
          scale: 1.01;
          box-shadow: 0 0 4px 0 #00000044;
        }
        .cover{
          object-fit: cover;
          width: 100%;
          height: 280px;
        }
        .name{
          padding: 12px 18px;
        }
      }
    }
  }
}
.variable-dialog{
  .el-dialog__body{
    padding: 0;
  }
  .variable-box{
    height: 50vh;
    position: relative;
    width: 100%;
    .variable-body{
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      padding: 12px 0 12px 12px;
      .variable-item{
        border-radius: 4px;
        display: block;
        font-size: 14px;
        padding: 6px 12px;
        cursor: pointer;
        &:hover{
          background-color: #F0F0F0;
        }
        &.active{
          color: white;
          background-color: #006CE7;
        }
      }
    }
  }
}

</style>
