<template>
  <div>
    <Modal centered v-model:visible="visible" title="预览模式">
      <div class="prevMode">
        <div @click="handlePreviewMode" @mousemove="handleMoveMode(1)" :class="{ active: prevModeActive === 1.0 }">
          <IconZuhe class="" style="height: 120px; width: 120px" />
          <p>整体组合模式 [默认]</p>
        </div>
        <Dropdown placement="right">
          <div @click="handlePreviewMode('home')" @mousemove="handleMoveMode(2)" :class="{ active: prevModeActive == 2.0 }">
            <IconFenli style="height: 120px; width: 120px" />
            <p>单页路由模式</p>
          </div>
          <template #overlay>
            <Menu>
              <template v-for="item in modeConfig" :key="`${item.key}`">
                <MenuItem @click="handlePreviewMode(item.key)">
                  {{ item.label }}
                </MenuItem>
              </template>
            </Menu>
          </template>
        </Dropdown>
      </div>

      <p style="opacity: 0.6; text-align: center; margin-top: 1em" v-if="prevModeActive === 1.0"
        >整体组合模式：所有标签页面整合在一起进行预览</p
      >
      <p style="opacity: 0.6; text-align: center; margin-top: 1em" v-if="prevModeActive === 2.0"
        >单页路由模式：每个标签即为一个页面，可以单独进行预览</p
      >
      <template #footer>
        <c-button @click="visible = false">关闭</c-button>
      </template>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
  import './index.less';
  import { ref } from 'vue';
  import { IconZuhe, IconFenli } from '../../../../../icons';
  import { rawComponentsData, GlobalModule, handleImportComponents, handlePreview } from '@jdlinker/func';
  import { getDataVisual } from '../service';
  import { Modal, Dropdown, Menu, MenuItem } from 'ant-design-vue';

  const visible = ref<boolean>(false);
  const modeId = ref(null);
  const prevModeActive = ref(1.0);
  const modeConfig = ref<any>(null);

  function handlePreviewMode(key): void {
    GlobalModule().MODEL_PAGE_ID = key;
    handlePreview({ routerId: modeId.value }, prevModeActive.value);
    visible.value = false;
  }
  function handleMoveMode(val) {
    prevModeActive.value = val;
  }
  const show = (item) => {
    visible.value = true;
    modeId.value = item.id;
    getDataVisual(item.id).then(async (res: any) => {
      handleImportComponents(JSON.parse(res.config)).then(() => {
        modeConfig.value = Object.keys(rawComponentsData.value)
          .map((id) => {
            return {
              key: id,
              label: (rawComponentsData.value[id].name || id) + `${id == 'home' ? '【默认页】' : ''}`
            };
          })
          .slice(1);
      });
    });
  };
  defineExpose({
    show: show
  });
</script>
<style lang="less" scoped>
  :deep(.ant-select) {
    width: 222px;
  }
  .prevMode {
    display: flex;
    width: 100%;
    height: 200px;
    padding: 20px;
    & > div {
      flex: 1;
      height: 180px;
      background: #e5e7eb;
      margin: 0 10px;
      text-align: center;
      border-radius: 10px;
      padding: 20px;
      cursor: pointer;
      border: 1px transparent solid;
      transition: border 1s, background 0.5s;
      &:hover,
      &.active {
        border: 1px solid var(--datav-main-color);
        background: #2680ff2e;
      }
    }
  }
  :deep(.ant-modal-close-x) {
    width: 50px;
  }
</style>
