<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="page-home">
    <div class="container">
      <div class="page-home-banner page-category-bg">
        <div class="page-home-banner-title">{{ companyName }}欢迎您</div>
        <!-- <div class="page-home-banner-subtitle">致力于成为一流的汽车数字化运营服务提供商</div> -->
      </div>
      <div class="page-home-realname page-category-bg">
        <div v-if="!disabledClass('PersonRealnameStep1')" class="page-home-column" @click="handleToPage('PersonRealnameStep1')">
          <div class="page-home-column-imageicon person" />
          <div class="page-home-column-name">自然人实名认证</div>
          <div class="page-home-column-desc">个人用户实名信息登记</div>
          <div class="page-home-column-btn">立即认证</div>
        </div>
        <div v-if="!disabledClass('EnterpriseRealnameStep1')" class="page-home-column" @click="handleToPage('EnterpriseRealnameStep1')">
          <div class="page-home-column-imageicon company" />
          <div class="page-home-column-name">企业实名认证</div>
          <div class="page-home-column-desc">单位用户实名信息登记</div>
          <div class="page-home-column-btn">立即认证</div>
        </div>
        <div v-if="!disabledClass('CarEnterpriseRealname')" class="page-home-column" @click="handleToPage('CarEnterpriseRealname')">
          <div class="page-home-column-imageicon vehicle" />
          <div class="page-home-column-name">车企实名认证</div>
          <div class="page-home-column-desc">车辆研发/测试期的企业实名</div>
          <div class="page-home-column-btn">立即认证</div>
        </div>
        <div v-if="!disabledClass('PersonChangeStep1')" class="page-home-column" @click="handleToPage('PersonChangeStep1')">
          <div class="page-home-column-imageicon change" />
          <div class="page-home-column-name">企业责任人变更</div>
          <div class="page-home-column-desc">单位用户实名责任人变更</div>
          <div class="page-home-column-btn">立即认证</div>
        </div>
      </div>
      <div class="page-home-other-service page-category-bg">
        <div class="page-home-row">
          <div :class="disabledClass('CardBindingStepOne') && 'disabled'" class="page-home-column-middle" @click="handleToPage('CardBindingStepOne')">
            <div class="page-home-column-container">
              <div class="page-home-column-imageicon multicard-bind" />
              <div class="page-home-column-wrap">
                <div class="page-home-column-name">一车多卡绑定</div>
                <div class="page-home-column-desc">支持已实名车辆新增卡绑定，无需重复认证</div>
              </div>
            </div>
            <div class="page-home-column-bind">立即绑定 >></div>
          </div>
          <div :class="disabledClass('CardUnbindingStepOne') && 'disabled'" class="page-home-column-middle" @click="handleToPage('CardUnbindingStepOne')">
            <div class="page-home-column-container">
              <div class="page-home-column-imageicon card-unbind" />
              <div class="page-home-column-wrap">
                <div class="page-home-column-name">卡解绑</div>
                <div class="page-home-column-desc">支持误绑、退/换车等场景下的卡解绑</div>
              </div>
            </div>
            <div class="page-home-column-bind">立即解绑 >></div>
          </div>
          <div :class="disabledClass('ReplacementStepOne') && 'disabled'" class="page-home-column-middle no-border-right" @click="handleToPage('ReplacementStepOne')">
            <div class="page-home-column-container">
              <div class="page-home-column-imageicon iccid-change" />
              <div class="page-home-column-wrap">
                <div class="page-home-column-name">换件</div>
                <div class="page-home-column-desc">支持硬件设备更换场景下的卡解绑及卡绑定，无需重复认证</div>
              </div>
            </div>
            <div class="page-home-column-bind">立即换件 >></div>
          </div>
          <div :class="disabledClass('CarUnbindingStepOne') && 'disabled'" class="page-home-column-large" @click="handleToPage('CarUnbindingStepOne')">
            <div class="page-home-column-large-container">
              <div class="page-home-column-imageicon vehicle-unbind" />
              <div class="page-home-column-large-wrap">
                <div class="page-home-column-large-name">车企实名解绑</div>
                <div class="page-home-column-large-desc">支持车企研发、制造期的批量解绑，降低安全风险</div>
              </div>
            </div>
            <div class="page-home-column-large-bind">立即解绑 >></div>
          </div>
          <div :class="disabledClass('EnterpriseUnbindingStepOne') && 'disabled'" class="page-home-column-large no-border-right" @click="handleToPage('EnterpriseUnbindingStepOne')">
            <div class="page-home-column-large-container">
              <div class="page-home-column-imageicon company-unbind" />
              <div class="page-home-column-large-wrap">
                <div class="page-home-column-large-name">企业实名解绑</div>
                <div class="page-home-column-large-desc">支持单位用户实名的卡解绑</div>
              </div>
            </div>
            <div class="page-home-column-large-bind">立即解绑 >></div>
          </div>
        </div>
      </div>
    </div>
    <footer>Copyright 2017-2019 联通智网科技股份有限公司 版权所有 京ICP备16005440号-1</footer>
  </div>
</template>

<script>
import { queryCarEnterpriseDetail } from '@/api/realname-car-enterprise'

export default {
  name: 'Home',
  data() {
    return {
      companyName: this.$store.getters.companyName,
      fullscreenLoading: false,
      isTablet: window.OS.isTablet
    }
  },
  methods: {
    /**
     * 跳转页面
     */
    handleToPage(name) {
      // 如果当前是禁用的菜单
      if (this.disabledClass(name)) {
        return
      }
      if (name === 'CarEnterpriseRealname') {
        // 车企实名
        this.queryCarEnterpriseRealnameState()
        return
      }
      // 如果当前是企业实名
      if (name === 'EnterpriseRealnameStep1') {
        // 如果当前是平板,且非一体机
        if (this.isTablet && this.$store.getters.deviceType !== 'aio') {
          this.$router.push({ name: 'EnterpriseRealnameStepPad1' })
          return
        }
      }
      this.$router.push({ name })
    },

    async queryCarEnterpriseRealnameState() {
      this.fullscreenLoading = true
      try {
        const respData = await queryCarEnterpriseDetail({})
        if (respData.vehicleEnterpriseId) {
          this.$router.push({ name: 'CarEnterpriseRealnameFlow1' })
        } else {
          this.$router.push({ name: 'CarEnterpriseRealnameStep1' })
        }
      } catch (e) {
        console.log(e)
      }
      this.fullscreenLoading = false
    },

    /**
     * 检测是否是禁用的class
     * @param routerName 路由名称
     */
    disabledClass(routerName) {
      // 是否在路由中包括
      let isEnable = false
      // 取出当前所有的路由
      this.$store.getters.addRoutes.forEach(route => {
        // 如果一级目录匹配上了
        if (route.name === routerName) {
          isEnable = true
        }
        // 如果孩子节点中有此目录
        if (route.children && route.children.some(child => child.name === routerName)) {
          isEnable = true
        }
      })
      return !isEnable
    }
  }
}
</script>

<style lang="scss" scoped>
.page-home {
  .page-category-bg {
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }
  .page-home-banner {
    background-image: url(../../assets/img/pic_banner.png);
    background-size: auto 100%;
    color: #FFFFFF;
    height: 300px;
    padding: 128px 0 0;
    text-align: center;
    .page-home-banner-title {
      font-size: 40px;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
    }
    .page-home-banner-subtitle {
      font-size: 20px;
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 2px;
      margin-top: 28px;
    }
  }
  .page-home-realname {
    background-image: url(../../assets/img/realname-pic.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    padding: 146px 0 60px;
    position: relative;
    justify-content: center;
    .page-home-column {
      align-items: center;
      background-color: rgba(255, 255, 255, 0);
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      width: 232px;
      height: 290px;
      justify-content: center;
      margin-left: 12px;
      transition: all 500ms ease;
      .page-home-column-imageicon {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        width: 102px;
        height: 116px;
        &.person {
          background-image: url(../../assets/img/icon-person.png);
        }
        &.company {
          background-image: url(../../assets/img/icon-company.png);
        }
        &.vehicle {
          background-image: url(../../assets/img/icon-vehicle.png);
        }
        &.change {
          background-image: url(../../assets/img/icon-change.png);
        }
      }
      .page-home-column-name {
        color: #191C28;
        font-size: 20px;
        text-align: center;
        font-weight: 600;
        line-height: 28px;
        margin-top: 18px;
      }
      .page-home-column-desc {
        color: #9DA6BB;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 20px;
        margin-top: 6px;
      }
      .page-home-column-btn {
        align-items: center;
        background: #2A68FF;
        box-shadow: 0 7px 13px 0 rgba(42,104,255,0.20);
        border-radius: 4px;
        color: #FFFFFF;
        display: flex;
        font-size: 14px;
        font-weight: 500;
        width: 88px;
        justify-content: center;
        margin-top: 16px;
        height: 20px;
        opacity: 0;
        overflow: hidden;
        transition: all 300ms ease;
      }
      &:first-child {
        margin-left: 0px;
      }
      &:hover {
        background: #FFFFFF;
        box-shadow: 0 8px 22px 0 rgba(111,119,171,0.10);
        transform: translateY(-12px);
        .page-home-column-btn {
          opacity: 1;
          height: 32px;
        }
      }
    }
    &:after {
      background-image: url(../../assets/img/text_realname.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      content: "";
      display: block;
      width: 432px;
      height: 52px;
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .page-home-other-service {
    background-image: url(../../assets/img/other-service-pic.png);
    background-size: auto 260px;
    padding: 134px 0 0;
    position: relative;
    .page-home-row {
      background: #FFFFFF;
      box-shadow: 0 8px 24px 0 rgba(112,118,150,0.19);
      border-radius: 4px;
      display: flex;
      width: 960px;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: center;
      .page-home-column-imageicon {
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        &.multicard-bind {
          background-image: url(../../assets/img/icon-multicard-unbind.png);
        }
        &.card-unbind {
          background-image: url(../../assets/img/icon-card-unbind.png);
        }
        &.iccid-change {
          background-image: url(../../assets/img/icon-change-iccid.png);
        }
        &.vehicle-unbind {
          background-image: url(../../assets/img/icon-vehicle-unbind.svg);
        }
        &.company-unbind {
          background-image: url(../../assets/img/icon-enterprise-unbind.svg);
        }
      }
      .page-home-column-middle {
        border-right: 1px solid #eeeeee;
        box-sizing: border-box;
        cursor: pointer;
        flex-shrink: 0;
        width: 320px;
        height: 262px;
        position: relative;
        overflow: hidden;
        .page-home-column-container {
          align-items: center;
          display: flex;
          flex-direction: column;
          padding: 40px 60px 0px;
          .page-home-column-wrap {
            text-align: center;
            .page-home-column-name {
              color: #0A1D30;
              font-size: 18px;
              line-height: 26px;
              font-weight: 600;
              margin-top: 24px;
            }
            .page-home-column-desc {
              color: #757F92;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              margin-top: 12px;
            }
          }
        }
        .page-home-column-bind {
          background: #FFFFFF;
          align-items: center;
          bottom: 0;
          color: #FFFFFF;
          display: flex;
          font-size: 14px;
          font-weight: 500;
          position: absolute;
          left: 0px;
          right: 0px;
          height: 40px;
          justify-content: center;
          transform: translateY(40px);
          transition: all 500ms ease;
        }
        &:hover {
          box-shadow: 0 8px 24px 0 rgba(66, 72, 109, 0.10);
          .page-home-column-bind {
            background: #2A68FF;
            transform: translateY(0px);
          }
        }
        &.no-border-right {
          border-right: 0;
        }
        &.disabled {
          cursor: not-allowed;
          .page-home-column-container {
            opacity: 0.3;
            .page-home-column-imageicon {
              filter: grayscale(100%);
            }
          }
          &:hover {
            box-shadow: none;
            .page-home-column-bind {
              display: none;
            }
          }
        }
      }
      .page-home-column-large {
        border-top: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        box-sizing: border-box;
        cursor: pointer;
        flex-shrink: 0;
        width: 480px;
        height: 200px;
        position: relative;
        overflow: hidden;
        .page-home-column-large-container {
          display: flex;
          padding: 60px 70px 0px 60px;
          .page-home-column-large-wrap {
            padding-left: 30px;
            .page-home-column-large-name {
              color: #0A1D30;
              font-size: 18px;
              line-height: 26px;
              font-weight: 600;
            }
            .page-home-column-large-desc {
              color: #757F92;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              margin-top: 12px;
            }
          }
        }
        .page-home-column-large-bind {
          background: #FFFFFF;
          align-items: center;
          bottom: 0;
          color: #FFFFFF;
          display: flex;
          font-size: 14px;
          font-weight: 500;
          position: absolute;
          left: 0px;
          right: 0px;
          height: 40px;
          justify-content: center;
          transform: translateY(40px);
          transition: all 500ms ease;
        }
        &:hover {
          box-shadow: 0 8px 24px 0 rgba(66, 72, 109, 0.10);
          .page-home-column-large-bind {
            background: #2A68FF;
            transform: translateY(0px);
          }
        }
        &.no-border-right {
          border-right: 0;
        }
        &.disabled {
          cursor: not-allowed;
          .page-home-column-large-container {
            opacity: 0.3;
            .page-home-column-large-imageicon {
              filter: grayscale(100%);
            }
          }
          &:hover {
            box-shadow: none;
            .page-home-column-large-bind {
              display: none;
            }
          }
        }
      }
    }
    &:after {
      background-image: url(../../assets/img/text_other_service.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      content: "";
      display: block;
      width: 275px;
      height: 52px;
      left: 50%;
      position: absolute;
      top: 50px;
      transform: translateX(-50%);
    }
  }
  footer {
    align-items: center;
    background: #1D2229;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 80px;
    margin-top: 40px;
    justify-content: center;
  }
}
</style>
