{extend name="$builderLayout"/}
{block name="style"}
<style>
  {$stylesheet|raw}
</style>
{/block}

{block name="content"}
<div class="page-loader" id="page-loader" style="display: none;">
  <script type="text/javascript">
    if(/^layui\-layer\-iframe/i.test(window.name)){
        document.getElementById('page-loader').style.display = 'block';
    }
  </script>
</div>
<div class="main-panel" style="display: none;" id="app">
  {notempty name="$title"}
  <div class="main-panel-heading">
    <h4 class="main-panel-title">
      {$title|raw}
      {notempty name="$desc"}
      <small> - {$desc|raw}</small>
      {/notempty}
    </h4>
  </div>
  {/notempty}
  <div class="main-panel-body">
    <tiny-layout :cols="12">
      {volist name="rows" id="row"}
      {:$row->render()}
      {/volist}
    </tiny-layout>
    <div class="hidden">
      <tiny-image v-if="previewList.length" ref="previewRef" :z-index="3000" show-index="true" fit="scale-down" :src="previewImageUrl"
          :preview-src-list="previewList">
      </tiny-image>
      <a ref="downloadRef" :href="previewImageUrl" target="_blank">{{previewImageUrl}}</a>
    </div>
  </div>
</div>
<script type="text/javascript">
  window.__blang = JSON.parse('{$__blang|raw}');
</script>
{/block}
{block name="script"}
<script type="importmap">
  {
    "imports": {
      "vue": "/assets/tpexttinyvue/lib/vue.esm-browser.prod.js?aver={$aver}",
      "echarts": "/assets/tpexttinyvue/lib/echarts.esm.js",
      "@opentiny/vue": "/assets/tpexttinyvue/lib/tiny-vue-simple.min.js?aver={$aver}",
      "@opentiny/vue-common": "/assets/tpexttinyvue/lib/tiny-vue-common.min.js?aver={$aver}",
      "@opentiny/vue-icon": "/assets/tpexttinyvue/lib/tiny-vue-icon.min.js?aver={$aver}",
      "@opentiny/vue-locale": "/assets/tpexttinyvue/lib/tiny-vue-locale.min.js?aver={$aver}"
    }
  }
</script>
<script type="module">
  import { {$vueImport} } from 'vue';
  import TinyVue from '@opentiny/vue';
  import * as TinyIcon from '@opentiny/vue-icon';

  import { 
    {$componentsImport} 
  } from '@opentiny/vue';

  const __getImageOrFileIco = (url, isImage) => {
    if(__isImage(url, isImage)) {
        return url;
    }
    return '/index/file/extimg?type=' + url.replace(/.+?\.(\w+)$/, '$1');
  }

  const __isImage = (url, op) => {
      return (!/.+?\.(\w+)$/i.test(url) && op.isImage) || /.+\.(png|jpg|jpeg|gif|bmp|wbmp|webpg|ico|svg)$/i.test(url);
  }
  let loading = false;
  layui.use(function(){
    window.layer = layui.layer;
  });

  let app = createApp({
    setup() {
      onBeforeMount(() => {
        document.getElementById('page-loader').remove();
        document.getElementById('app').style.display = 'block';
      });
      onMounted(() => {
        
        {$onMountedScript|raw}

      });

      {$setupScript|raw}

      const previewRef = ref(null);
      const downloadRef = ref(null);
      const previewImageUrl = ref();
      const previewList = ref([]);

      const previewFile = (file, files, isImage) => {
          if(!Array.isArray(files)) {
              files = files.split(',').filter(x => x.trim());
          }
          previewImageUrl.value = file;
          if(__isImage(file, isImage)) {
              previewImageUrl.value = file;
              let images = files.filter(x => __isImage(x, isImage));
              let i = 0;
              let find = false;
              let arr = [];
              images.forEach(x => {
                  if(x === file) {
                      find = true;
                  }
                  if(find) {
                      arr.push(x);
                  }
                  else {
                      i += 1;
                  }
              });
              for(let j = 0; j < i; j+=1) {
                  arr.push(images[j]);
              }
              previewList.value = [];
              nextTick(() => {
                previewList.value = arr;
                nextTick(() => {
                  previewRef.value.clickHandler();
                });
              });
          } else {
              nextTick(() => {
                  downloadRef.value.click();
              });
          }
      };

      return {
        previewFile,
        previewRef,
        downloadRef,
        previewImageUrl,
        previewList,
        {$vueTokens|raw}
      };
    }
  });
  app.use(TinyVue);
  app.config.globalProperties.$__isImage = __isImage;
  app.config.globalProperties.$__getImageOrFileIco = __getImageOrFileIco;
  window.vm = app.mount('#app');
  //导出为全局变量
  window.TinyLoading = TinyLoading;
  window.TinyAlert = TinyAlert;
  window.TinyModal = TinyModal;
  window.TinyNotify = TinyNotify;

</script>
<div class="hidden" id="script-div"></div>
{/block}