<script setup lang="ts">
import { getThemeMode } from '@/utils/utils';
import { onUnmounted, ref, watch } from 'vue';
import { reactive } from 'vue';

const props = defineProps({
  select: {
    type: Object,
    required: true,
    default: () => {
      return { other: '', size: '', position: '', qrEnable: true };
    },
  },
});
const isNotBackground = ref(true);
const theme = getThemeMode();
const isDark = theme === 'dark';
const popDarkClass = isDark ? 'poper-customize-logo2 dark' : 'poper-customize-logo2';
watch(
  () => props.select,
  newValue => {
    showTip(newValue.other);
    isNotBackground.value = newValue.other !== 'background';
  },
  { deep: true },
);

const tipShow = reactive({
  logo: false,
  notice: false,
  qrcode: false,
  copyright: false,
  background: false,
});

// 显示或隐藏tip
function showTip(key?: string) {
  Object.keys(tipShow).forEach(_key => {
    if (_key === key) {
      tipShow[key] = true;
    } else {
      tipShow[_key] = false;
    }
  });
}

onUnmounted(() => {
  Object.keys(tipShow).forEach(key => {
    tipShow[key] = false;
  });
});
</script>
<template>
  <div v-if="[1, 2, 6, 7, 9, 10].indexOf(select.index) > -1" class="box-shadow"></div>
  <div class="stage-items">
    <!-- 登录页背景图 -->
    <div class="stage-login" :class="{ active: select.other === 'background' }">
      <img src="/src/static/image/login.jpg" alt="" />
    </div>

    <!-- 登录页背景提示 -->
    <el-tooltip
      :visible="tipShow.background"
      :popper-class="'dz-tip-nowrap'"
      transition="none"
      popper-class="poper-no-limit"
      content="图片为.jpg格式，建议尺寸1920*1080像素，且不超过1MB。"
      placement="bottom"
      trigger-keys
    >
      <div class="login-tip"></div>
    </el-tooltip>

    <!-- 版权信息 -->
    <el-tooltip
      :visible="tipShow.copyright"
      :popper-class="'dz-tip-nowrap'"
      transition="none"
      popper-class="poper-no-limit"
      content="0~128个字符，支持数字、中文、英文字母、和特殊字符。"
      placement="top"
      trigger-keys
    >
      <div
        v-if="isNotBackground"
        id="platCopyright"
        class="stage-item stage-copyright"
        :class="{ active: select.other === 'copyright', dark: isDark }"
      ></div>
    </el-tooltip>

    <!-- 系统Logo1 -->
    <el-tooltip
      :visible="tipShow.logo"
      transition="none"
      popper-class="poper-customize-logo1"
      content="LOGO标志，用于登录页面卡片上方及全局页面左上角。支持.png格式，建议最大尺寸178*32像素，且不超过1MB。"
      placement="right-start"
      trigger-keys
    >
      <div
        v-if="isNotBackground"
        id="platLogo1"
        class="stage-item stage-logo logo1"
        :class="{ active: select.other === 'logo', dark: isDark }"
      >
        <img v-if="!isDark" src="../images/ibmc.png" alt="" />
        <img v-if="isDark" src="../images/ibmc-dark.png" alt="" />
      </div>
    </el-tooltip>

    <!-- 系统Logo2 -->
    <el-tooltip
      :visible="tipShow.logo"
      :popper-class="popDarkClass"
      transition="none"
      placement="bottom"
      trigger-keys
    >
      <div
        v-if="isNotBackground"
        id="platLogo2"
        class="stage-item stage-logo logo2"
        :class="{
          active: select.other === 'logo',
          active2: select.index === 6 || select.index === 7,
          center: select.position === 'center',
          large: select.size === 'large',
          dark: isDark
        }"
      >
        <img v-if="!isDark" src="../images/ibmc.png" alt="" />
        <img v-if="isDark" src="../images/ibmc-dark.png" alt="" />
      </div>
      <template #content>
        <div class="poper-logo2-content" :class="{ dark: isDark }">
          <p>示例：</p>
          <div class="cus-welcome">
            <img v-if="!isDark" width="200" src="../images/example.png" alt="" />
            <img v-if="isDark" width="200" src="../images/example-dark.png" alt="" />
          </div>
        </div>
      </template>
    </el-tooltip>

    <!-- 二维码功能 -->
    <el-tooltip
      :visible="tipShow.qrcode"
      :popper-class="popDarkClass"
      transition="none"
      placement="left-start"
      trigger-keys
    >
      <div
        v-if="select.qrEnable && isNotBackground"
        id="platQrCode"
        class="stage-item stage-qrcode"
        :class="{
          dark: isDark,
          active: select.other === 'qrcode',
          active2: select.index === 6 || select.index === 7,
          center: select.position === 'center',
          large: select.size === 'large'
        }"
      >
        <img v-if="!isDark" src="../images/qrcode.png" alt="" />
        <img v-if="isDark" src="../images/qrcode-dark.png" alt="" />
      </div>
      <template #content>
        <div class="poper-logo2-content" :class="{ dark: isDark }">
          <p>示例：</p>
          <div class="cus-welcome">
            <img
              v-if="!isDark" id="lightImg" width="200" src="../images/qr-content.png"
              alt=""
            />
            <img
              v-if="isDark"
              id="darkImg"
              width="200"
              src="../images/qr-content-dark.png"
              alt=""
            />
          </div>
        </div>
        <p class="poper-logo2-text" :class="{ dark: theme === 'dark' }">
          二维码用于扫码查看帮助资料。支持.png格式，建议尺寸200*200像素，且不超过1MB。
        </p>
      </template>
    </el-tooltip>

    <!-- 登录框 -->
    <div
      v-if="isNotBackground"
      id="platLogin"
      class="stage-pane"
      :class="{
        active: select.index === 6 || select.index === 7,
        large: select.size === 'large',
        small: select.size === 'small',
        right: select.position === 'right',
        center: select.position === 'center',
        dark: isDark
      }"
    ></div>

    <!-- 安全公告 -->
    <el-tooltip
      :visible="tipShow.notice"
      :popper-class="'dz-tip-nowrap'"
      transition="none"
      popper-class="poper-no-limit"
      content="设置安全公告默认值。openUBMC内支持编辑安全公告与恢复默认值。"
      placement="bottom"
      trigger-keys
    >
      <div
        v-if="isNotBackground"
        id="platSecNotice"
        class="stage-item stage-notice"
        :class="{
          active: select.other === 'notice',
          bottom: select.other === 'pane-big',
          dark: isDark
        }"
      ></div>
    </el-tooltip>
  </div>
</template>
<style scoped lang="scss">
.box-shadow {
  position: absolute;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.16);
  height: 100%;
  width: 100%;
  border-radius: 4px;
}
.stage-items {
  height: 100%;
  border-radius: var(--o-border-radius);
  box-sizing: border-box;
  .stage-login {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    &.active {
      img {
        border: 2px solid var(--o-color-band);
      }
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: var(--o-border-radius);
    }
  }
  .login-tip {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .stage-item {
    position: absolute;
    background: rgba(244, 246, 250, 0.2);
    border-radius: 2px;
    box-sizing: border-box;
    border: 2px solid transparent;
    &.active {
      border-color: #0077ff;
      background-color: rgba(244, 246, 250, 1) !important;
      z-index: 101;
      &.dark {
        background-color: var(--o-bg-color-light) !important;
      }
    }
    &.active2 {
      z-index: 102;
    }
    &.hide {
      display: none;
    }
  }

  .stage-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    &.logo1 {
      top: 24px;
      left: 16px;
      width: 56px;
      height: 26px;
      img {
        max-width: 31px;
        max-height: 100%;
      }
    }
    &.logo2 {
      top: 128px;
      left: 540px;
      width: 60px;
      height: 32px;
      background-color: rgba(244, 246, 250, 0.5);
      img {
        max-width: 41px;
        max-height: 100%;
      }
    }
    &.dark {
      background-color: rgba(42, 47, 55, 0.5);
      &.logo1 {
        background-color: rgba(42, 47, 55, 0.3);
      }
    }
    &.center {
      left: 306px;
    }
    &.large {
      left: 565px;
    }
  }
  .stage-notice {
    top: 24px;
    left: 248px;
    width: 270px;
    height: 70px;
    background: rgba(244, 246, 250, 0.3) url('../images/notice.png') no-repeat center;
    &.dark {
      background-color: rgba(41, 47, 56, 0.3);
      background-image: url('../images/notice-dark.png');
    }
  }
  .stage-copyright {
    width: 264px;
    height: 24px;
    left: 281px;
    bottom: 16px;
    background: rgba(244, 246, 250, 0.2) url('../images/copyright.png') no-repeat center;
    &.dark {
      background-color: rgba(41, 47, 56, 0.3);
      background-image: url('../images/copyright-dark.png');
    }
  }

  .stage-qrcode {
    display: flex;
    width: 32px;
    height: 32px;
    top: 128px;
    right: 50px;
    z-index: 99;
    background-color: var(--o-color-white);
    align-items: center;
    justify-content: center;
    &.dark {
      background-color: rgba(42, 47, 55, 0.5);
    }
    &.center {
      right: 290px;
    }
    &.large {
      right: 32px;
    }
  }

  .stage-pane {
    position: absolute;
    width: 194px;
    height: 212px;
    top: 104px;
    right: 38px;
    background-color: #ffffff;
    background-image: url('../images/login-input.png');
    background-repeat: no-repeat;
    background-size: 162px 112px;
    background-position: center 72px;
    border-radius: var(--o-border-radius);
    &.dark {
      background-color: var(--o-border-color-light);
      background-image: url('../images/login-input-dark.png');
    }
    &.active {
      border: 2px solid var(--o-color-band);
      z-index: 101;
    }
    &.large {
      top: 0;
      right: 0;
      width: 230px;
      height: 100%;
      background-position-y: 178px;
    }
    .stage-logo-pane {
      display: flex;
      width: 60px;
      height: 32px;
      top: 24px;
      left: 16px;
      background-color: var(--o-bg-color-light);
      align-items: center;
      justify-content: center;
      img {
        max-width: 41px;
        max-height: 100%;
      }
    }
    &.center {
      right: 50%;
      margin-right: -105px;
    }
  }
}
</style>
<style lang="scss">
.el-popper.poper-customize-logo1 {
  max-width: 382px !important;
}
.el-popper.poper-customize-logo2 {
  max-width: 222px !important;
  background-color: #f4f6fa !important;
  .el-popper__arrow::before {
    background: #f4f6fa;
  }
  &.dark {
    background-color: var(--o-bg-color-light) !important;
    border: 1px solid var(--o-border-color-light);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    .el-popper__arrow {
      right: -5px;
      &::before {
        background-color: var(--o-bg-color-light);
        border-color: var(--o-border-color-light);
      }
    }
  }
}
.poper-logo2-content {
  background-color: #fff;
  &.dark {
    background-color: var(--o-bg-color-base);
  }
}
.poper-logo2-content p {
  padding: 8px;
}
p.poper-logo2-text {
  padding-top: 8px;
  line-height: 18px;
}
p.poper-logo2-text.dark {
  color: var(--o-color-white);
}
.el-popper.dz-tip-nowrap {
  max-width: none;
}
</style>
