<template>
  <div class="login_bg">
    <div class="contact-header">
      <div class="header-image">
        <img src="../assets/logo.png" height="40px" />
      </div>
      <div class="user-info">
        <!-- <div class="user-msg">
          <span class="user-name">{{ '小溪' }}</span>
          <span>欢迎您</span>
        </div> -->
        <div class="logout" title="退出登录" @click="logout">
          <img src="../assets/images/logout.png" />
        </div>
      </div>
    </div>
    <div class="login_content">
      <div class="no-authority">
        <div
          style="
            text-align: center;
            color: #fff;
            font-size: 50px;
            line-height: 100px;
            font-family: '微软雅黑';
          "
          v-if="userInfo && userInfo.erpKey">
          <a
            :href="`https://${userInfo && userInfo.erpKey}.jomalls.com`"
            target="_blank"
            style="text-decoration: none">
            {{ `https://${userInfo && userInfo.erpKey}.jomalls.com` }}
          </a>
        </div>
        <h1
          style="
            text-align: center;
            color: #fff;
            font-size: 50px;
            line-height: 100px;
            font-family: '微软雅黑';
          "
          v-else>
          您尚未开通erp权限,请联系您的商务经理
        </h1>
        <h2
          style="
            text-align: center;
            color: #fff;
            font-size: 36px;
            line-height: 100px;
            font-family: '微软雅黑';
          ">
          联系电话:18710915638
        </h2>
        <h2
          style="
            text-align: center;
            color: #fff;
            font-size: 36px;
            line-height: 50px;
            font-family: '微软雅黑';
          ">
          邮箱:nina@jomalls.com
        </h2>
        <el-button
          style="
            text-align: center;
            font-size: 30px;
            width: 160px;
            height: 60px;
            margin-left: 300px;
            margin-top: 30px;
            border-radius: 15px;
          "
          type="success"
          @click="goBack">
          返回首页
        </el-button>
      </div>
    </div>
    <!-- <div class="contain" v-else></div> -->
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { post } from '../utils/axios'

export default {
  name: 'contact',
  components: {},
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      shopifyObj: JSON.parse(localStorage.getItem('shopifyObj'))
    }
  },
  computed: {
    ...mapState(['shopifyObj']),
  },
  mounted() {
    console.log(this.shopifyObj);
    if (this.userInfo && this.shopifyObj) {
      this.getShopifyInfo()
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    goBack() {
      this.$router.push('/')
    },
    getShopifyInfo() {
      console.log(this.shopifyObj)
      if (!this.shopifyObj.shopKey || !this.userInfo.erpKey) return
      post('business/shop/bind', {
        shopKey: this.shopifyObj.shopKey,
        platform: this.shopifyObj.platform,
        companyCode: this.userInfo.erpKey,
      }).then((res) => {
        console.log(res)
      })
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.setUserInfo(undefined)
      this.$router.push('/login')
    },
  },
}
</script>
<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.login_content {
  flex: 1;
  background: url(../assets/contact.jpg) center / cover no-repeat;
  position: relative;
}

.contact-header {
  display: flex;
  align-items: center;
  background-color: #182633;
  height: 60px;
  padding: 0 100px;
  justify-content: space-between;
}

.user-msg {
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
}

.logout img {
  width: 20px;
  vertical-align: middle;
  cursor: pointer;
}

.user-msg {
  margin-right: 50px;
}

.user-name {
  margin-right: 10px;
}

.no-authority {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40%;
}

.contain {
  flex: 1;
}
</style>
