<template>
    <div>
      <div class="search-head">
        <div class="search-input">
          <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
        </div>
        <div style="padding: 0 24px">
          <a-tabs :tabBarStyle="{margin: 0}" @change="navigate" :activeKey="activeKey">
            <a-tab-pane tab="文章" key="1"></a-tab-pane>
            <a-tab-pane tab="应用" key="2"></a-tab-pane>
            <a-tab-pane tab="项目" key="3"></a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <div class="search-content">
        <router-view />
      </div>
    </div>
</template>

<script>
import AInput from 'vue-antd-ui/es/input/Input'
import AInputGroup from 'vue-antd-ui/es/input/Group'
import AButton from 'vue-antd-ui/es/button/button'
import AInputSearch from 'vue-antd-ui/es/input/Search'
import ATabs from 'vue-antd-ui/es/tabs'

const ATabPane = ATabs.TabPane

export default {
  name: 'SearchLayout',
  components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput},
  computed: {
    activeKey () {
      switch (this.$route.path) {
        case '/list/search/article':
          return '1'
        case '/list/search/application':
          return '2'
        case '/list/search/project':
          return '3'
        default:
          return '1'
      }
    }
  },
  methods: {
    navigate (key) {
      switch (key) {
        case '1':
          this.$router.push('/list/search/article')
          break
        case '2':
          this.$router.push('/list/search/application')
          break
        case '3':
          this.$router.push('/list/search/project')
          break
        default:
          this.$router.push('/workplace')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .search-head{
    background-color: #fff;
    margin: -25px -24px -24px;
    .search-input{
      text-align: center;
    }
  }
  .search-content{
    margin-top: 48px;
  }
</style>
