<template>
  <header class="comm-header">
    <div class="header-nav">
      <router-link class="logo" to="/">
        <div class="header-logo"><span></span></div>HEY UI
      </router-link>
      <AutoComplete v-width="180" dict="menus" autoSelectFirst v-model="search" @change="goSearch" placeholder="搜索..."></AutoComplete>
      <div class='header-nav-list'>
        <a @click="goLink({name: 'Home'})" :class="{'router-link-active': $route.name == 'Home'}">首页</a>
        <!-- <router-link to="/guide">入门</router-link> -->
        <router-link to="/component">组件</router-link>
        <router-link to="/resource">资源</router-link>
        <a target="_blank" href="http://admin.heyui.top">Admin</a>
        <!-- <router-link to="/about">团队</router-link> -->
        <ButtonGroup class="change-lang">
          <Button size="s" @click="goGithub"><i class="h-icon-github link"></i></Button>
          <Button size="s" @click="openWeixin"><span class="link">微信</span></Button>
          <Button @click="changeLang" size="s"><span class="link">English</span></Button>
        </ButtonGroup>
      </div>
    </div>
    <Modal v-model="showModel" class-name="weixin-modal">
      <div slot="header">加入 HeyUI 微信交流群</div>
      <div>
        <!-- <p>微信群</p> -->
        <div class="weixin-image">
          <img src="https://github.com/heyui/heyui/blob/master/doc/static/images/qrcode.jpg?raw=true"/>
          <p>该二维码10月15日前有效。</p>
        </div>
      </div>
    </Modal>
  </header>
</template>

<script>
import utils from 'hey-utils';

export default {
  data() {
    return {
      pass: '',
      error: false,
      search: null,
      showModel: false
    }
  },
  created() {
    this.$nextTick(()=>{
      if(utils.getLocal('wenxinNotice')) return;
      utils.saveLocal('wenxinNotice', 1);
      this.$Notice({
        timeout: 0,
        title: '加入 HeyUI 微信交流群',
        content: '拥有更快速更详细的交流，加入我们的微信交流群。',
        buttons: [{
          type: 'confirm',
          color: 'primary',
          name: '查看'
        }],
        events: {
          confirm: (notice)=> {
            this.openWeixin();
            notice.close();
          }
        }
      })
    })
  },
  methods: {
    changeLang() {
      this.$i18n.locale = 'en';
      this.$router.push({name: `en_${this.$route.name}`});
    },
    goLink(params) {
      this.$router.push(params);
    },
    go(link) {
      this.$router.go(link);
    },
    goGithub() {
      window.open('https://github.com/heyui/heyui')
    },
    openWeixin() {
      this.showModel = true;
    },
    goSearch(data) {
      if(!data.key) return;
      this.$router.push({name: data.key});
      this.$nextTick(() => {
        this.search = null;
      })
    }
  }
}
</script>
