<script lang="ts" setup>
import Login from '@/apps/app-bmc/Login/Login.vue';
import Navigate from '@/apps/app-bmc/Navigate/Navigate.vue';
import Home from '@/pages/Home/Home.vue';
import { downloadFileWithResponse } from '@/utils/common-service';
import { getStoreData, setStoreData } from '@/utils/composition';
import { ref } from 'vue';

const emit = defineEmits(['close']);
const selectView = ref('login');
const customizeStyle = JSON.parse(localStorage.getItem('customizeStyle') || '{}');
const lastTime = ref(`上次保存时间：${customizeStyle.time || '--'}`);
const navStyle = ref(getStoreData('loct', 'navStyle'));
const ptc = JSON.parse(localStorage.getItem('ptc') || '{}');
const sn = ref(ptc.software || 'openUBMC');

// 生成JSON文件
function generate() {
  const data = JSON.parse(localStorage.getItem('customizeStyle') || '{}');
  delete data.time;
  const blob = new Blob([JSON.stringify(data)]);
  downloadFileWithResponse(blob, 'style_config.json');
  emit('close', true);
  setStoreData('event', 'alertMessage', { type: 'success', message: '操作成功' });
}

function cancel() {
  emit('close', false);
}
</script>

<template>
  <div class="customize-tool">
    <p class="text title">如何使定制方案生效完成定制？</p>
    <p class="text">
      使用本工具，您可将当前方案导出为.json文件并下载至本地。查看工具菜单页“如何使定制生效”，将json文件生效在您的软件内。
    </p>
    <div class="display-area">
      <div class="display-overview">
        <div v-if="selectView === 'login'" class="origin-size customize-login"><Login /></div>
        <div v-else class="origin-size customize-home" :class="{ 'nav-left': navStyle === 'left' }">
          <Navigate :show-el-message="false" />
          <Home :is-preview="true" />
        </div>
      </div>
      <div class="display-info">
        <p class="info-title">当前方案信息</p>
        <p class="info-text">{{ '软件名称：' + sn }}</p>
        <p class="info-text">{{ lastTime }}</p>
        <div class="select-area">
          <el-tooltip content="登录页预览" placement="top" trigger-keys>
            <div
              class="small-overview"
              :class="{ selected: selectView === 'login' }"
              @click="selectView = 'login'"
            >
              <div class="overlay"></div>
              <div class="origin-size customize-login">
                <Login />
              </div>
            </div>
          </el-tooltip>
          <el-tooltip content="首页预览" placement="top" trigger-keys>
            <div
              class="small-overview"
              :class="{ selected: selectView !== 'login' }"
              @click="selectView = 'home'"
            >
              <div class="overlay"></div>
              <div class="origin-size customize-home">
                <Navigate :show-el-message="false" />
                <Home :is-preview="true" />
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="operate-button">
      <el-button type="primary" size="large" @click="generate">生成</el-button>
      <el-button size="large" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<style lang="scss">
.customize-tool {
  .nav-container {
    #homeIbmc {
      display: none !important;
    }
    .layout-with-sider {
      display: none !important;
    }

    #leftNavCollapse {
      height: 1180px !important;
    }
  }

  #homeIbmc {
    pointer-events: none;
    margin-top: -80px;
  }

  .navbar {
    pointer-events: none;
  }

  #leftNavCollapseBox {
    pointer-events: none;
  }

  .customize-login {
    pointer-events: none;
  }

  .nav-left {
    #homeIbmc {
      margin-left: 256px;
      width: calc(100% - 256px);
    }
    .footer {
      bottom: -130px !important;
    }
  }
  .dashboard-overview {
    margin-top: 64px;
  }
  .text {
    font-size: 12px;
    color: var(--o-text-color-secondary);
    letter-spacing: 0;
    line-height: 16px;
    margin-bottom: 8px;
  }
  .title {
    font-weight: 900;
  }
  .info-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--o-text-color-primary);
    letter-spacing: 0;
    line-height: 24px;
    margin-bottom: 16px;
  }
  .info-text {
    font-size: 12px;
    color: var(--o-text-color-primary);
    letter-spacing: 0;
    line-height: 16px;
    margin-bottom: 8px;
  }
  .login-left-img img {
    margin-top: 0;
  }

  .origin-size {
    width: 1920px;
    height: 1080px;
  }

  .display-area {
    display: flex;
    background: var(--o-bg-color-light);
    border-radius: 4px;
    margin-top: 24px;
    .display-overview {
      width: 892px;
      height: 504px;
      padding: 2px;
      .overlay {
        width: 892px;
        height: 504px;
      }

      .customize-login {
        transform: scale(calc(888 / 1920));
        margin-top: -290px;
        margin-left: -516px;
      }

      .customize-home {
        transform: scale(calc(888 / 1920));
        margin-top: -289px;
        margin-left: -516px;
        background-color: var(--o-bg-color-dark);
        overflow: auto;
      }
    }

    .display-info {
      padding: 24px;
      position: relative;
      .select-area {
        display: flex;
        bottom: 24px;
        position: absolute;

        .small-overview {
          width: 98px;
          height: 62px;
          padding: 8px;
          border: 1px solid var(--o-scrollbar-color);
          border-radius: 2px;
          &:first-child {
            margin-right: 16px;
          }

          .overlay {
            width: 98px;
            height: 62px;
          }

          .customize-login {
            transform: scale(calc(82 / 1920));
            margin-top: -519px;
            margin-left: -921px;
          }
          .customize-home {
            transform: scale(calc(82 / 1920));
            margin-top: -518px;
            margin-left: -921px;
            background-color: var(--o-bg-color-dark);
            overflow: hidden;
          }
          &:hover {
            border: 2px solid var(--o-color-primary-secondary);
            border-radius: 2px;
            padding: 7px;
          }
        }
        .selected {
          border: 2px solid var(--o-color-primary);
          border-radius: 2px;
          padding: 7px;
        }
      }
    }

    .customize-home {
      .customize-tool-icon {
        display: none;
      }
    }
    .overlay {
      z-index: 100;
      position: absolute;
    }

    .login-copyright {
      bottom: 78px;
    }
  }

  .operate-button {
    margin-top: 24px;
    margin-left: 516px;
  }
}
</style>