<template>
  <div class="login-page-content" :style="{ background: loginSetInfo?.LH_BACKGROUND_COLOR }">
    <!-- 背景遮罩层 -->
    <div :style="loginBgMaskStyle"></div>
    <!-- 水印信息 -->
    <template v-if="loginSetInfo?.watermarkConfig?.length">
      <span
        v-for="(item, index) in loginSetInfo.watermarkConfig"
        :key="index"
        class="watermark"
        :style="{
          color: loginSetInfo.systemTitleColor,
          top: item.top + '%',
          left: item.left + '%',
          opacity: item.opacity ? item.opacity : 0.2,
          transform: `rotate(${item.rotateAngle}deg) scale(${item.scale ? item.scale : 1})`,
        }"
      >
        {{ item.text }}
      </span>
    </template>
    <!--logo标题  -->
    <div class="login-logo">
      <div class="logo">
        <img :src="loginSetInfo?.LH_SYSTEM_LOGO_ICON" alt="" />
        <!-- <img src="@/assets/ICP/icp-icon_top_tcl.svg" alt="" /> -->
      </div>
      <div class="title">{{ loginSetInfo?.LH_SYSTEM_LOGO_COPY }}</div>
    </div>
    <!-- 居中模式 -->
    <!-- <CenterLogin v-if="loginSetInfo.modelVal === 'center'" :centerloginsetting="loginSetInfo" /> -->

    <!-- 左右模式（居右） -->
    <!-- <LeftRightLogin v-if="loginSetInfo.modelVal === 'right'" :uncenterloginsetting="loginSetInfo" /> -->
    <div class="login-left-right">
      <div class="login-left-image">
        <div class="login-title-box">
          <div class="system-title-top-box" :style="{ color: loginSetInfo?.LH_SYSTEM_TITLE_COLOR }">
            {{ loginSetInfo?.LH_SYSTEM_TITLE }}
          </div>
          <div class="system-title-box">
            <p class="system-title" :style="{ color: loginSetInfo?.LH_SYSTEM_SUBTITLE_COLOR }">
              {{ loginSetInfo?.LH_SYSTEM_SUBTITLE }}
            </p>
          </div>
          <div
            class="system-description"
            :style="{ color: loginSetInfo?.LH_SYSTEM_SUBTITLE_COLOR }"
          >
            {{ loginSetInfo?.LH_SYSTEM_DESCRIPTION }}
          </div>
        </div>
        <svg
          class="h-svg-icon h-icon h-icon"
          aria-hidden="true"
          data-v-098ef6d6=""
          style="width: 600px; height: 500px; transform: rotate(0deg)"
        ></svg>
      </div>
      <router-view />
    </div>

    <!-- 小屏模式 -->
    <!-- <SmallScreenLogin
      v-if="loginSetInfo.modelVal === 'small'"
      :smallscreenloginsetting="loginSetInfo"
    /> -->

    <!-- 脚注 -->
    <!-- 按设计图注释掉 -->
    <div class="system-login-footer">
      <span class="decoration-line" :style="footerLineLeftStyle"></span>
      <p class="system-login-footer-text" :style="{ color: loginSetInfo.systemSubTitleColor }">
        {{ loginSetInfo.LH_SYSTEM_BOTTOM_DESCRIPTION }}
      </p>
      <!-- <span class="decoration-line" :style="footerLineRightStyle"></span> -->
    </div>
    <!-- 中英文切换 -->
    <div class="change-language">
      <h-dropdown trigger="[click]">
        <a class="ant-dropdown-link change-organization-title" @click.prevent>
          {{ selectedKeys[0] === 'zhs' ? '简体中文' : 'English' }}
          <caret-down-outlined class="down-arrow-icon" />
        </a>
        <template #overlay>
          <h-menu v-model:selectedKeys="selectedKeys">
            <h-menu-item key="zhs" @click="changeLanguage('zhs')">简体中文</h-menu-item>
            <h-menu-item key="en" @click="changeLanguage('en')">English</h-menu-item>
          </h-menu>
        </template>
      </h-dropdown>
    </div>
    <!-- <HButton
      v-show="loginSetInfo.queryDisplay.showChineseEnglishSwitch"
      id="loginLanguageButton"
      ref="loginLanguageButtonCtrl"
      class="login-language-button"
      :options="loginLanguageButtonOption"
      :data="loginLanguageButtonData"
      @click="loginLanguageButtonClick"
    ></HButton> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, provide, ref } from 'vue';
import LoginBgA from '../assets/login_bg.png';
// import { loginGetInfo } from '@/api/platform/user/login';
import store from '@/store/index';
import { GET_SYSTEM_INFO } from '@/store/modules/app/actions';
import { downloadUrlAPI } from '@/api/platform/ImpExp/upload';
import { SET_WATER_MARK } from '@/store/modules/app/mutations';
import { CaretDownOutlined } from '@ant-design/icons-vue';
import { useI18n, setI18nLanguage } from '@crami/locale';
import bus from '@/utils/bus';
import { langMap } from '@/locales';

export default defineComponent({
  name: 'UserLayout',
  components: { CaretDownOutlined },
  setup() {
    const { t } = useI18n();
    const loginSetInfo: any = ref({});
    // 背景遮罩层
    const LoginBg = ref();
    const loginBgMaskStyle = computed(() => {
      console.log(loginSetInfo.value);
      return {
        width: ' 100%',
        height: '100%',
        background: 'url(' + LoginBg.value + ') no-repeat center/auto 100%',
        // background:
        //   'url(' +
        //   loginSetInfo.value?.imagePath +
        //   loginSetInfo.value?.backgroundUrl +
        //   ') no-repeat center/auto 100%',

        position: 'absolute',
      };
    });
    const footerLineLeftStyle = computed(() => {
      return {
        backgroundImage:
          'linear-gradient(to left, ' + loginSetInfo.value?.systemSubTitleColor + ', transparent)',
      };
    });
    const getPic = () => {
      if (loginSetInfo.value.LH_SYSTEM_LOGO_ICON) {
        downloadUrlAPI(loginSetInfo.value.LH_SYSTEM_LOGO_ICON).then(pathRes => {
          if (pathRes.code == 200) {
            loginSetInfo.value.LH_SYSTEM_LOGO_ICON = pathRes.data.templateUrl;
          }
        });
      }
      if (loginSetInfo.value.LH_BROWSER_TITLE_ICON) {
        downloadUrlAPI(loginSetInfo.value.LH_BROWSER_TITLE_ICON).then(pathRes => {
          if (pathRes.code == 200) {
            loginSetInfo.value.LH_BROWSER_TITLE_ICON = pathRes.data.templateUrl;
          }
        });
      }
      if (loginSetInfo.value.LH_BACKGROUND_IMAGE) {
        downloadUrlAPI(loginSetInfo.value.LH_SYSTEM_LOGO_ICON).then(pathRes => {
          if (pathRes.code == 200) {
            loginSetInfo.value.LH_SYSTEM_LOGO_ICON = pathRes.data.templateUrl;
          }
        });
      }
      if (loginSetInfo.value.LA_SYSTEM_LOGIN_TITLE_ICAN) {
        downloadUrlAPI(loginSetInfo.value.LA_SYSTEM_LOGIN_TITLE_ICAN).then(pathRes => {
          if (pathRes.code == 200) {
            loginSetInfo.value.LA_SYSTEM_LOGIN_TITLE_ICAN = pathRes.data.templateUrl;
          }
        });
      }
      if (loginSetInfo.value.SR_LOCAN_LOGO_SYSTEM) {
        downloadUrlAPI(loginSetInfo.value.SR_LOCAN_LOGO_SYSTEM).then(pathRes => {
          if (pathRes.code == 200) {
            loginSetInfo.value.SR_LOCAN_LOGO_SYSTEM = pathRes.data.templateUrl;
          }
        });
      }
      if (loginSetInfo.value.LH_BACKGROUND_IMAGE) {
        downloadUrlAPI(loginSetInfo.value.LH_BACKGROUND_IMAGE).then(pathRes => {
          if (pathRes.code == 200) {
            loginSetInfo.value.LH_BACKGROUND_IMAGE = pathRes.data.templateUrl;
            LoginBg.value = loginSetInfo.value?.LH_BACKGROUND_IMAGE
              ? loginSetInfo.value?.LH_BACKGROUND_IMAGE
              : LoginBgA;
          }
        });
      }
    };
    const selectedKeys: any = ref(
      store.getters['app/lang'] ? new Array(store.getters['app/lang']) : ['zhs'],
    );
    onMounted(async () => {
      // loginGetInfo(ICP_CONFIG).then(res => {
      //   console.log('=====', res);
      //   if (res.code === 200 && res.data) {
      // loginSetInfo.watermarkConfig = res.data?.watermarkConfig;
      // loginSetInfo.querySystem = res.data?.system;
      //     loginSetInfo.value = res.data;
      //   }
      // });
      const res = await store.dispatch(`app/${GET_SYSTEM_INFO}`);
      if (res.code === 200 && res.data) {
        loginSetInfo.value = {
          ...(res.data || {}),
          watermarkConfig: res.data?.watermarkConfig ? JSON.parse(res.data?.watermarkConfig) : [],
        };
        // 接口数据初始化时保证可以登录
        if (loginSetInfo.value.LA_ENABLE_TENANT == null) {
          loginSetInfo.value.LA_ENABLE_TENANT = '1';
        }
        getPic();

        // 初始化多语言
        if (loginSetInfo.value?.DP_DEFAULT_LANGUAGE) {
          selectedKeys.value = new Array(LangArr[loginSetInfo.value.DP_DEFAULT_LANGUAGE]);
          updateLanguage();
        }
        console.log('loginSetInfo', loginSetInfo);
      }
    });

    provide('loginInfo', loginSetInfo);

    //多语言映射
    const LangArr = {
      'zh-CN': 'zhs',
      zhs: 'zhs',
      'en-US': 'en',
      en: 'en',
    };

    // 多语言切换
    const changeLanguage = val => {
      selectedKeys.value = [val];
      updateLanguage();
    };

    // 更新多语言
    const updateLanguage = () => {
      store.dispatch('app/SET_LANG', selectedKeys.value[0]);
      setI18nLanguage(langMap[selectedKeys.value[0]]);
      // bus.emit('changeLangue', selectedKeys.value[0]);
    };

    return {
      loginBgMaskStyle,
      loginSetInfo,
      footerLineLeftStyle,
      LoginBg,
      getPic,
      selectedKeys,
      changeLanguage,
      t,
    };
  },
});
</script>

<style lang="less" scoped>
@import url('./style.less');

.login-page-content {
  background: linear-gradient(to bottom, #4e5a70, #3f4b60);
  height: 100%;
  min-height: 930px;
}
.change-language {
  position: absolute;
  top: 24px;
  right: 30px;
  color: #fff;
}
.login-logo {
  position: absolute;
  top: 55px;
  left: 130px;
  z-index: 999;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  .logo img {
    height: 52px;
    margin-right: 6px;
  }
  .title {
    color: #333;
    font-weight: 500;
    font-size: 18px;
    line-height: 52px;
  }
}
</style>
