<template>
  <div class="layoutTopBox">
    <div class="layoutBox">
      <div class="layoutTopBoxLeft">
        <img
          :src="config.logo"
          height="30"
          width="140"
          class="logo hand"
          @click="logoUrl"
        />
      </div>
      <div class="layoutTopBoxRight">
        <div class="topBtn hand" @click="changeManageWork('workstation')" :class="{ isSelect: workStationStatus === 'workstation' }">
          <span>代理商</span>
        </div>
        <div class="topBtn hand qrCodeBox">
          <img
            class="Code"
            src="/img/cmanage/qrcode.svg"
            height="14"
            width="14"
          />
          <img
            class="CodeBlue"
            src="/img/cmanage/code_blue.svg"
            height="14"
            width="14"
          />
          <span>{{config.wxTitle}}</span>
          <div class="qrCode">
            <img
              :src="config.wxImg"
              height="130"
              width="130"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {setStore, getStore} from '@/util/store'

let config;
if (process.env.VUE_APP_SITE === "default") {
  config = {
    logo: "/manage/img/cmanage/logo/default.pn",
    wxTitle: "德阳市智慧就业服务平台小程序",
    wxImg: "/manage/img/cmanage/wx/xcx/default.jpeg",
    zixun: "德阳市智慧就业服务平台资讯",
    guanyu: "关于德阳市智慧就业服务平台",
  };
}

export default {
  name: "layoutTop",
  data() {
    return {
      layoutInput: getStore({ name: "searchInput" }) || "",
      workStationStatus: 'manageInfo',
      titleList: [
        {
          name: "首页",
          url: "/#/",
        },
        {
          name: "我要招聘",
          url: "/#/recruit/index",
        },
        {
          name: "企业服务",
          url: "",
          select: true
        },
        {
          name: config.zixun,
          url: "/#/news",
        },
        {
          name: config.guanyu,
          url: "/#/aboutJL",
        },
      ],
      config,
    };
  },
  methods: {
    changeManageWork (str) {
      setStore({name: 'workStationStatus', content: str, type: 'session'})
      this.workStationStatus = str
      if (str === 'manageInfo') {
        this.$emit('change','login')
      } else if (str === 'workstation') {
        this.$emit('change','workstation')
      }
    },
    enterKey(e) {
      if (!this.layoutInput.trim()) return;
      var evt = window.event || e;
      if (evt.keyCode == 13) {
        this.layoutIsSearchInput(this.layoutInput);
        window.open("/#/searchJob?id=" + this.layoutInput, "_blank");
        // window.open('http://192.168.88.123:8081/#/searchJob?id='+this.layoutInput, '_blank');
      }
    },
    isSearchSelect(type) {
      this.$store.dispatch("layoutIsSearch", type);
      this.$store.dispatch("layoutIsSearchInput", "");
      this.layoutInput = "";
      if (!type) return;
      this.$nextTick(() => {
        this.$refs.search.focus();
      });
    },
    layoutIsSearchInput(str) {
      this.$store.dispatch("layoutIsSearchInput", str);
    },
    logoUrl() {
      window.open("/#/", "_self");
    },
  },
  computed: {
    ...mapGetters(["isSearch", "searchInput"])
  },
};
</script>

<style scoped>
.hand {
  cursor: pointer;
}
.logo {
  margin-right: 46px;
}
ul {
  overflow: hidden;
}

ul li {
  list-style: none;
}

.layoutTopBox {
  background: #ffffff;
}

.layoutBox {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

.layoutTopBoxLeft,
.layoutTopBoxRight {
  display: flex;
  align-items: center;
}

.layoutTopUl,
a {
  display: flex;
  font-size: 18px;
  color: #333333;
  margin: 0 !important;
  padding: 0 !important;
}

.layoutTopUl li {
  margin: 0 10px;
}

.layoutTopUl li a:hover {
  color: #5aa0fa;
}

.isSelect {
  color: #5aa0fa !important;
}

.layoutInputBox {
  display: flex;
  align-content: center;
  width: 440px;
  padding-bottom: 6px;
  border-bottom: 1px solid #5aa0fa;
}
.layoutInputBox .searchIcon {
  margin-right: 2px;
}
.layoutInputBox img {
  margin-top: 2px;
}
.layoutInputBox input {
  width: 400px;
  height: 20px;
  border: none;
  font-size: 16px;
  color: #333333;
}

.layoutInputBox input:focus {
  outline: none;
  border: none;
}

.topBtn {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333333;
}
.topBtn:hover {
  color: #5aa0fa;
}
.topBtn:hover .search {
  display: none;
}
.topBtn:hover .searchBlue {
  display: block;
}
.topBtn .searchBlue {
  display: none;
}
.topBtn img {
  margin: 2px 5px 0 0;
}

.topBtn:first-of-type + div {
  margin: 0 16px;
}

.qrCodeBox {
  position: relative;
}
.qrCodeBox:hover {
  color: #5aa0fa;
}
.qrCodeBox:hover .qrCode {
  display: block;
}
.qrCodeBox:hover .Code {
  display: none;
}
.qrCodeBox:hover .CodeBlue {
  display: block;
}
.qrCodeBox .CodeBlue {
  display: none;
}

.qrCode {
  position: absolute;
  top: 45px;
  left: -51px;
  width: 130px;
  height: 130px;
  background-color: #ffffff;
  padding: 10px;
  z-index: 999;
  display: none;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
  border-radius: 4px;
}

.qrCode img {
  margin: 0;
}
</style>
