/**
  二级导航栏
 */
<template>
  <div class="secondNav">
    <div class="contentNav">
      <div class="logo">
        <router-link to="/">
          <icon-svg icon-class="logo" />
        </router-link>
      </div>
      <div class="search">
        <div class="searchSelect">
          <el-dropdown trigger="click" @command="searchCommand">
            <span class="el-dropdown-link">
              {{ searchVal }}
              <i class="el-icon-arrow-down cur-poi el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="宝贝">宝贝</el-dropdown-item>
              <el-dropdown-item command="店铺">店铺</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="searchRight">
          <input v-model="keyword" type="text" maxlength="20" placeholder="请输入搜索商品" @keyup.enter="searchPro">
        </div>
        <span class="btn cur-poi" @click="searchPro"><i class="icon el-icon-search"></i></span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      searchVal: '宝贝',
      keyword: ''
    }
  },
  methods: {
    ...mapMutations({
      setSearchObj: 'SET_SEARCHOBJ'
    }),
    searchCommand(command) {
      this.searchVal = command
    },
    searchPro() {
      if (!this.keyword) { return this.$message.error('请输入搜索内容') }
      this.setSearchObj({
        keyword: this.keyword,
        searchVal: this.searchVal
      })
      if (this.$route.name !== 'search') {
        this.$router.push({
          path: '/activity/search'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.secondNav {
	width: 100%;

	.contentNav {
		max-width: 1250px;
		height: 80px;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {
			font-size: 60px;
		}

		.search {
			width: 394px;
			height: 39px;
			border: 2px solid #F3F4F5;
			display: flex;

			.searchSelect {
				width: 82px;
				height: 30px;
				margin-top: 2px;
				border-right: 1px solid #CCCCCC;
				text-align: center;
				line-height: 30px;

				.el-dropdown {
					color: #C5AA7B;
				}
			}

			.searchRight {
				flex: 1;

				input {
					padding-left: 15px;
					font-size: 14px;
					color: #333;
					line-height: 35px;
				}
			}

			.btn {
				font-size: 20px;
				line-height: 35px;
				padding-right: 15px;
			}
		}
	}
}
</style>
