<template>
  <div class="iot-login">
    <!-- 头部 -->
    <div class="login-header">
      <!-- <div class="top-line"></div> -->
      <div class="iotmenu-header-content">
        <!-- <span class="iotmenu-header-text">联锁管理系统</span> -->
         <div class="logo-img" :style="{backgroundImage: `url(${loginConfig.logoPic})`}"></div>
      </div>
    </div>
    <!--  -->
    <div class="login-content" :style="{backgroundImage: `url(${loginConfig.backPic})`}">
      <div class="login-box">
        <route-view></route-view>
      </div>
    </div>
    <!-- 尾部 -->
     <div class="login-footer u-flex">
      <div class="login-footer-text">网址：{{ loginConfig.companyUrl }}</div>
      <div class="login-footer-text">地址：{{ loginConfig.companyAddress }}</div>
      <div class="login-footer-text">电话：{{ loginConfig.companyTelephone }}</div>
      <div class="login-footer-text">{{ loginConfig.companyCopyright }}</div>
     </div>
  </div>
</template>

<script>
  import RouteView from "@/components/layouts/RouteView"
  import { mixinDevice } from '@/utils/mixin.js'
  import { getAction, postAction } from '@api/manage'

  export default {
    name: "UserLayout",
    components: { RouteView },
    mixins: [mixinDevice],
    data () {
      return {
        loginConfig: {
          logoPic: require('@/assets/logo.png'),
          backPic: require('@/assets/login.png'),
          companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
        },
        url: '/interlockLoginConfig/interlockLoginConfig/queryLoginConfig'
      }
    },
    mounted () {
      document.body.classList.add('userLayout')
    },
    created(){
      this.getLoginConfig()
    },
    beforeDestroy () {
      document.body.classList.remove('userLayout')
    },
    methods: {
      getLoginConfig(){
        getAction(this.url).then(res=>{
          console.log(res.result[0])
          this.loginConfig.logoPic = res.result[0].logoPic ? window._CONFIG['staticDomainURL'] + "/" + res.result[0].logoPic : require('@/assets/logo.png')
          this.loginConfig.backPic = res.result[0].backPic ? window._CONFIG['staticDomainURL'] + "/" +  res.result[0].backPic : require('@/assets/login.png')
          this.loginConfig.companyCopyright = res.result[0].companyCopyright ? res.result.companyCopyright : '© 1983-2024 Advantech Co., Ltd.'
          this.loginConfig.companyUrl = res.result[0].companyUrl
          this.loginConfig.companyAddress = res.result[0].companyAddress
          this.loginConfig.companyTelephone = res.result[0].companyTelephone
          console.log("loginConfig",this.loginConfig)
        })
      }
    },
  }
</script>

<style lang="less">

.iot-login{
  background-color: #F2EFEB;
  padding: 8vh 7% 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  // overflow: hidden;
  .login-header{
    height: 10vh;
    min-height: 40px !important;
    // height: 90px !important;
    // .top-line{
    //   width: 100%;
    //   height: @iotHLineHeight;
    //   background: linear-gradient(90deg,#019ff3,#004280);
    // }
    .iotmenu-header-content{
      height: 100% !important;
      line-height: 100% !important;
      background-color: #FBFAF9 !important;
      // color: rgba(0,0,0,65) !important;
      // box-shadow: 0 2px 4px 0 rgba(50,50,51,.5) !important;
      z-index: 999 !important;
      padding: 0 !important;
      position: relative;
      // .user-wrapper{
      //   .avatar{
      //     margin: 0 10px 0 0 !important;
      //   }
      // }
      .logo-img{
        width: calc(100% - 50px);
        height: 26px;
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
        // background: url('../../assets/logo.png');
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
    .iotmenu-header-text{
      font-size: 23px;
      font-weight: 700;
      color: #004280;
      letter-spacing: 1px;
      margin-left: 30px;
    }
  }
  .login-content{
    width: 100%;
    // height: calc(100vh - 75px - 90px - 147px);
    flex: 1;
    // background: url('../../assets/login.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 100%;
    position: relative;
    .login-box{
      // width: 440px;
      width: 25%;
      // min-height: 580px;
      // background-color: #fff;
      // padding: 40px;
      // box-shadow: 0 0 10px rgba(0,0,0,.25);
      // border-radius: 4px;
      position: absolute;
      top: 56%;
      right: 20%;
      transform: translate(50%, -50%);
    }
  }
  .login-footer{
    // height: 120px;
    // padding: 50px 100px 25px;
    padding: 5.5vh 100px 25px;
    background-color: #F2EFEB;
    flex-direction: column;
    .login-footer-text{
      color: #a1a1a1;
      font-size: 12px;
    }
  }
}
// @media (min-width: 1281px){
//   .iot-login .login-content{
//     background: url('../../assets/login.png');
//     background-repeat: no-repeat;
//     background-size: cover;
//     background-position: center 50%;
//     .login-box{
//       right: 30%;
//     }
//   }
// }
// @media (max-width: 1280px){
//   .iot-login .login-content{
//     background: url('../../assets/login1024.png') no-repeat;
//     background-size: cover;
//     background-position: center 50%;
//     .login-box{
//       right: 50%;
//     }
//   }
// }



// @media (max-width: 1919px) and (min-width: 1441px){
//   .iot-login .login-content .login-box{
//     left: 55.56%;
//     right: 16.67%;
//     top: 22.22%;
//     bottom: 24.07%;
//   }
// }
// @media (max-width: 1440px) and (min-width: 1367px){
//   .iot-login .login-content .login-box{
//     left: 53.15%;
//     right: 17.57%;
//     top: 8.33%;
//     bottom: 8.33%;
//   }
// }
// @media (max-width: 1366px) and (min-width: 1281px){
//   .iot-login .login-content .login-box{
//     left: 50%;
//     right: 18.75%;
//     top: 8.33%;
//     bottom: 8.33%;
//   }
// }
// @media (max-width: 1280px){
//   .iot-login .login-content .login-box{
//     left: calc(50% - 200px);
//     top: 108px;
//   }
// }
</style>