<template>
  <div class="container border-bottom">
    <div class="flex-align-center flex-between normal-margin">
      <ul class="flex-align-center">
        <li :class="brand_act === item.sa_brandid?'act':''" class="brand-item" v-for="item in brands" :key="item.sa_brandid" @click="clickBrand(item.sa_brandid)">{{item.brandname}}</li>
      </ul>
      <div class="flex-align-center">
        <el-input size="small" v-model="value" placeholder="产品名称,编号0" @clear="clearSearch" @keyup.enter.native="change" clearable></el-input>&nbsp;
        <slot name="add"></slot>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value:'',
      brands:[],
      brand_act:this.default ? this.brands ? this.brands[0].sa_brandid : 0 : 0
    }
  },
  props: {
    default: {
      type: Boolean,
      default:() => false
    }
  },
  methods:{
    async queryBrands () {
      const res = await this.$api.requested({
        "id": "20220922085103",
        "version":1,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.brands = res.data
    },
    clickBrand (id) {
      this.brand_act = id
      
      this.$emit('brandChange',[id])
    },
    change(n) {
      this.$emit('Search',this.value)
    },
    clearSearch() {
      this.$emit('clearSearch')
    }
  },
  mounted () {
    this.queryBrands()
  }
}

</script>
<style>
</style>
<style scoped>
.brand-item{
  margin-right: 20px;
  color: #768093;
  cursor: pointer;
  transition: .2s all linear;
  font-size: 14px;
}
.act{
  color:#000;
}
.border-bottom{
  border-bottom: 1px solid #e3e5ea;
}
</style>