<template>
  <div class="container border-bottom">
    <ul class="flex-align-center normal-margin">
      <li :class="brand_act === item.sa_brandid?'act':''" class="brand-item" v-for="item in brands" :key="item.sa_brandid" @click="selectClick(brand_act = item.sa_brandid)">{{item.brandname}}</li>
    </ul>
    <div style="font-size:14px">
      <ul class="flex-align-center normal-margin">
        <li :class="class_act === item.itemclassid?'act':''" class="class-item" v-for="item in classlist" :key="item.itemclassid" @click="selectClick(class_act = item.itemclassid)">{{item.itemclassname}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      brands:[],
      classlist:[],
      brand_act:0,
      class_act:0
    }
  },
  methods:{
    async queryBrands (fn) {
      const res = await this.$api.requested({
        "id": "20220924163702",
        "version":1,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.brands = res.data
      this.brand_act = res.data[0].sa_brandid
      fn()
    },
    async querySaleClass () {
      const res = await this.$api.requested({
        "id": "20220926095202",
        "version":1,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.classlist = res.data
      this.class_act = res.data[0].itemclassid
      this.selectClick()
     
    },
    selectClick () {
      this.$emit('selectClick',this.brand_act,this.class_act)
    }
  },
  mounted () {
    this.queryBrands(this.querySaleClass)
  }
}

</script>
<style>
</style>
<style scoped>
.brand-item{
  margin-right: 20px;
  color: #768093;
  cursor: pointer;
  transition: .2s all linear;
  font-weight: 700;
}
.class-item{
  margin-right: 20px;
  color: #8491a9;
  cursor: pointer;
  transition: .2s all linear;
  font-size: 13px;
  font-weight: 400;
}
.act{
  color:red;
}
.border-bottom{
  border-bottom: 1px solid #e3e5ea;
}
</style>