<template>
  <div class="login-container">
    <!-- <div v-if="!isMobileTerminal" class="top-banner">
      <div class="banner-cont">
        <img src="@/assets/login/top-mail.png">
        <span>邮箱  sales@changan-inkasso.com</span>
      </div>
      <div class="banner-cont">
        <img src="@/assets/login/top-phone.png">
        <span>电话 +86（755）3633 9382</span>
      </div>
    </div> -->
    <div class="login-nav">
      <div class="logo-cont" @click="clickLogo">
        <svg-icon icon-class="logo" style="width: 136px; height: 42px;" />
      </div>
      <template v-if="!isMobileTerminal">
        <div class="nav-desc">
          <div v-for="item in bannerList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
            {{ item.name }}
          </div>
        </div>
      </template>
      <div v-if="isMobileTerminal" class="mobile-btn">
        <img
          v-if="!showCloseIcon"
          src="@/assets/login/mobile_1.png"
          :style="iconAnimate1"
          @click="mobileIconClick"
        >
        <img
          v-if="showCloseIcon"
          src="@/assets/login/mobile_2.png"
          :style="iconAnimate2"
          @click="mobileIconClick"
        >
      </div>
      <div v-if="!isMobileTerminal && $route.path !== '/login/register'">
        <el-button type="primary" round @click="loginClick('login')">登 录</el-button>
        <el-button type="text" @click="loginClick('register')">注册</el-button>
      </div>
    </div>
    <div v-if="showBackToTop && !isMobileTerminal" class="back-to-top" @click="backTotop">
      <i class="el-icon-top" />
    </div>
    <template v-if="isMobileTerminal">
      <div v-if="showCloseIcon" class="nav-desc-mobile">
        <div v-for="item in bannerMobileList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
          {{ item.name }}
        </div>
      </div>
    </template>
    <router-view :key="key" />
    <div v-if="loginStatus" class="login-modal" />
    <transition mode="out-in">
      <div v-if="loginStatus" class="login-container-box">
        <div class="left">
          <div>
            <template v-if="loginType === 'register' && protocolStatus === 'register'">
              <register-protocal />
            </template>
            <template v-else-if="loginType === 'register' && protocolStatus === 'privacy'">
              <privacy-protocal />
            </template>
            <template v-else>
              <img src="../../assets/login/leftLogo.png" alt="">
            </template>
          </div>
        </div>
        <div class="back-home" @click="() => { loginStatus = false }">
          <svg-icon icon-class="backArrow" style="width: 14px; height: 14px;" />
          返回首页
        </div>
        <login-content v-if="loginType === 'login'" @hideLogin="showChangePwd" />
        <register-content v-if="loginType === 'register'" @protocol="protocol" @goLogin="() => { loginClick('login')}" />
      </div>
    </transition>

    <div v-if="notHomepagePath.includes($route.path)" class="bottom-cont">
      <div class="bt-l">
        <!-- <img src="@/assets/glory/bt_desc.png"> -->
        <div class="bt-l-orange" @click="handleJumpFiling">© 陕ICP备2024033180号-1</div>
        <template v-if="!isMobileTerminal">
          <div class="bt-l-orange" @click="handleClickProtocol">用户协议</div>
          <div
            class="bt-l-orange"
            @click="handleJumpInkasso"
          >长安银科官网：www.changan-inkasso.com</div>
        </template>
        <div v-if="isMobileTerminal">服务邮箱：citp@changan-inkasso.com</div>
        <div v-if="isMobileTerminal">服务电话：029-86689192</div>
      </div>
      <div v-if="!isMobileTerminal" class="bt-m">
        <div class="case-cont" @click="handleJumpCase">陕公网安备61019102000586号</div>
        <div>服务邮箱：citp@changan-inkasso.com</div>
        <div>服务电话：029-86689192</div>
      </div>
      <div class="bt-r">
        <div class="qrocde" />
        <div class="qrcode-desc">关注长银</div>
      </div>
    </div>

    <home-bottom v-if="homepagePath === $route.path && !isMobileTerminal" />

    <template v-if="isMobileTerminal && $route.path !== '/login/register'">
      <div class="bottom-cont">
        <div class="bt-l">
          <div class="bt-l-orange" @click="handleJumpFiling">© 陕ICP备2024033180号-1</div>
          <div class="case-cont" @click="handleJumpCase">陕公网安备61019102000586号</div>
          <div>服务邮箱：citp@changan-inkasso.com</div>
          <div>服务电话：029-86689192</div>
        </div>
        <div class="bt-r">
          <div class="qrocde" />
          <div class="qrcode-desc">关注长银</div>
        </div>
      </div>
    </template>

    <cy-dialog v-if="!isMobileTerminal" ref="protocolDialog" title="用户协议" top="10vh">
      <div class="user-protocol-content">
        <register-protocal />
      </div>
    </cy-dialog>

    <cy-dialog ref="dialog" :modal="false" title="重置密码" top="10vh">
      <change-password @showLogin="loginStatus = true" />
    </cy-dialog>
  </div>
</template>

<script>
import { isMobileDevice } from '@/utils/index'

export default {
  name: 'Login',
  components: {
    LoginContent: () => import('./components/LoginContent'),
    RegisterContent: () => import('./components/RegisterContent'),
    RegisterProtocal: () => import('./components/RegisterProtocal'),
    PrivacyProtocal: () => import('./components/PrivacyProtocal'),
    HomeBottom: () => import('./components/HomeBottom'),
    ChangePassword: () => import('./components/ChangePassword')
  },
  data() {
    return {
      loginStatus: false,
      loginType: '',
      protocolStatus: '',
      bannerList: [
        {
          name: '跨境通',
          isActice: true,
          order: 0,
          path: '/login/tradeSinceLink'
        },
        {
          name: '资质荣誉',
          isActice: false,
          order: 1,
          path: '/login/qualificationsHonors'
        },
        {
          name: '关于我们',
          isActice: false,
          order: 2,
          path: '/login/aboutUs'
        },
        {
          name: '联系我们',
          isActice: false,
          order: 3,
          path: '/login/contactUs'
        }
      ],
      bannerMobileList: [
        {
          name: '跨境通',
          isActice: true,
          order: 0,
          path: '/login/tradeSinceLink'
        },
        {
          name: '资质荣誉',
          isActice: false,
          order: 1,
          path: '/login/qualificationsHonors'
        },
        {
          name: '关于我们',
          isActice: false,
          order: 2,
          path: '/login/aboutUs'
        },
        {
          name: '联系我们',
          isActice: false,
          order: 3,
          path: '/login/contactUs'
        },
        {
          name: '立即注册',
          isActice: false,
          order: 4,
          path: '/login/register'
        }
      ],
      showBackToTop: false,
      isMobileTerminal: false,
      showCloseIcon: false,
      iconAnimate1: {},
      iconAnimate2: {},
      homepagePath: '/login/tradeSinceLink',
      notHomepagePath: ['/login/qualificationsHonors', '/login/aboutUs', '/login/contactUs']
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  watch: {
    $route: {
      handler(val) {
        let findIdx = -1
        this.isMobile()
        if (this.isMobileTerminal) {
          findIdx = this.bannerMobileList.findIndex(el => el.path === val.path)
        } else {
          findIdx = this.bannerList.findIndex(el => el.path === val.path)
        }
        if (findIdx !== -1) {
          this.clickNav(findIdx)
        }
      },
      immediate: true
    },
    loginStatus: {
      handler(val) {
        if (val) {
          window.addEventListener('scroll', this.preventDefault, { passive: false })
        } else {
          window.removeEventListener('scroll', this.preventDefault)
        }
      },
      immediate: true
    }
  },
  mounted() {
    window.addEventListener('scroll', this.isScrollGt1000)
    this.isMobile()
    window.addEventListener('resize', this.isMobile)
  },
  destroyed() {
    window.removeEventListener('scroll', this.isScrollGt1000)
    window.removeEventListener('resize', this.isMobile)
  },
  methods: {
    preventDefault(e) {
      e.preventDefault()
    },
    isScrollGt1000() {
      if (window.scrollY > 1000) {
        this.showBackToTop = true
      } else {
        this.showBackToTop = false
      }
    },
    // 是否是手机端
    isMobile() {
      if (isMobileDevice() && window.screen.width < 768) {
        this.isMobileTerminal = true
      } else {
        this.isMobileTerminal = false
      }
    },
    mobileIconClick() {
      this.showCloseIcon = !this.showCloseIcon
    },
    loginClick(type) {
      this.loginStatus = true
      this.loginType = type
    },
    protocol(type) {
      this.protocolStatus = type
    },
    // 顶部菜单点击
    clickNav(idx) {
      if (this.isMobileTerminal) {
        this.showCloseIcon = false
        this.bannerMobileList.forEach(element => {
          element.isActice = false
        })
        this.bannerMobileList[idx].isActice = true
        this.$router.push({
          path: this.bannerMobileList[idx].path,
          query: this.$route.query
        })
      } else {
        this.bannerList.forEach(element => {
          element.isActice = false
        })
        this.bannerList[idx].isActice = true
        this.$router.push({
          path: this.bannerList[idx].path
        })
      }
    },
    showChangePwd() {
      this.loginStatus = false
      this.$refs.dialog.show = true
    },
    // 回到顶部
    backTotop() {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    },
    clickLogo() {
      this.$router.push('/login')
    },
    handleJumpFiling() {
      window.open('https://beian.miit.gov.cn/')
    },
    handleJumpInkasso() {
      window.open('http://www.changan-inkasso.com')
    },
    handleClickProtocol() {
      this.$refs.protocolDialog.show = true
    },
    handleJumpCase() {
      window.open('https://beian.mps.gov.cn/#/query/webSearch?code=61019102000586')
    }
  }

}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1930px) {
  .login-container {
    .login-nav {
      padding: 0 !important;
      justify-content: center !important;
      .nav-desc {
        flex: initial !important;
        width: 44% !important;
        padding-left: 6% !important;
      }
    }
  }
}

@media screen and (min-width: 768) and (max-width: 1536px) {
  .login-container {
    .login-nav {
      padding: 0 !important;
      justify-content: center !important;
      .nav-desc {
        flex: initial !important;
        width: 62% !important;
        padding-left: 6% !important;
      }
    }
  }
}

.back-to-top {
  position: fixed;
  right: 40px;
  bottom: 60px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, .6);
  z-index: 9;
  cursor: pointer;
  color: #fff;
}
.login-container {
  width: 100%;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  .top-banner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 0 210px 0 360px;
    width: 100%;
    height: 55px;
    background-color: #292929;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    .banner-cont {
      height: 100%;
      font-size: 12px;
      color: #A3A8AC;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 15px;
        height: 12px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
  .login-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 80px;
    width: 100%;
    background-color: rgba(41, 41, 41, .7);
    padding: 0 210px 0 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    .logo-cont {
      cursor: pointer;
    }
    .nav-desc {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #E6E6E6;
      padding-left: 8%;
      div {
        cursor: pointer;
        margin-right: 8%;
      }
    }
    .nav-btn {
      flex-basis: 100px;
    }
  }
  .login-container-box {
    height: 600px;
    width: 1000px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    box-shadow: 0px 0px 10px 2px #8b8080;
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(.9);
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    margin: 0 auto;
    .left {
      width: 440px;
      height: 100%;
      background: #F9FCFF;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      & > div {
        height: 100%;
        width: 100%;
        img {
          width: 100%;
          height: 100%;

        }
      }
    }
    .back-home {
      font-size: 14px;
      color: #2C4270;
      text-align: right;
      position: absolute;
      right: 35px;
      top: 20px;
      cursor: pointer;
    }
  }

  .login-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 18;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .bottom-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 230px;
    background-color: #212121;
    color: #fff;
    font-size: 14px;
    .bt-l {
      margin-right: 214px;
       > .bt-l-orange {
        cursor: pointer;
        margin-bottom: 10px;
      }
      .bt-l-orange:hover {
        color: #FE7D0B;
      }
      .case-cont {
        cursor: pointer;
      }
      .case-cont:hover {
        color: #FE7D0B;
      }
      .case-cont::before {
        content: ' ';
        display: inline-block;
        width: 16px;
        height: 18px;
        background: url('../../assets/login/case-icon.png') no-repeat;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .bt-m {
      padding-top: 70px;
      align-self: flex-start;
      margin-right: 120px;
      > div {
        margin-bottom: 10px;
      }
      .case-cont {
        cursor: pointer;
      }
      .case-cont:hover {
        color: #FE7D0B;
      }
      .case-cont::before {
        content: ' ';
        display: inline-block;
        width: 16px;
        height: 18px;
        background: url('../../assets/login/case-icon.png') no-repeat;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .bt-r {
      .qrocde {
        width: 130px;
        height: 130px;
        background: url('../../assets/login/qrcode.png');
      }
      .qrcode-desc {
        width: 130px;
        font-size: 16px;
        color: #fff;
        margin-top: 12px;
        text-align: center;
      }
    }
  }

}

@media screen and (max-width: 768px) {
  .login-container {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    .login-nav {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
      height: 60px;
      width: 100%;
      background-color: rgba(41, 41, 41, .7);
      padding: 0 10px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
    }
    .nav-desc {
      flex: initial;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #E6E6E6;
      padding-left: 8%;
      div {
        cursor: pointer;
        margin-right: 8%;
      }
    }
    .nav-desc-mobile {
      position: fixed;
      top: 60px;
      right: 0;
      flex-direction: column;
      background-color: #fff;
      z-index: 9;
      > div {
        padding: 12px;
      }
    }
    // @keyframes rotateIcon1 {
    //   0% {
    //     opacity: 1;
    //     transform: rotate(0deg);
    //   }
    //   100% {
    //     opacity: 0;
    //     transform: rotate(-180deg);
    //   }
    // }
    .mobile-btn {
      width: 15px;
      height: 15px;
    }
    .login-container-box {
      height: 600px;
      width: 100%;
      background: #fff;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      box-shadow: 0px 0px 10px 2px #8b8080;
      position: fixed;
      top: 50%;
      right: 0px;
      bottom: 0px;
      left: 0px;
      margin: 0 auto;
      z-index: 20;
      transform: translateY(-50%);
      .left {
        width: 440px;
        height: 100%;
        background: #F9FCFF;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        & > div {
          height: 0;
          width: 0;
          img {
            width: 0;
            height: 0;
          }
        }
      }
      .back-home {
        font-size: 14px;
        color: #2C4270;
        text-align: right;
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
      }
    }

    .bottom-cont {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 170px;
      background-color: #212121;
      color: #fff;
      font-size: 14px;
      .bt-l {
        margin-right: 20px;
        transform: scale(.9);
        .bt-l-orange {
          color: #fff;
        }
      }
      .bt-r {
        transform: scale(.8);
        margin-right: 0;
        .qrocde {
          width: 130px;
          height: 130px;
          background: url('../../assets/login/qrcode.png');
        }
        .qrcode-desc {
          width: 130px;
          font-size: 16px;
          color: #fff;
          margin-top: 12px;
          text-align: center;
        }
      }
    }
  }
}

.user-protocol-content {
    height: 80vh;
    overflow-y: auto;
    margin: -20px;
    margin-top: -60px;
  }
</style>
