<template>
  <div class="border-bottom">
    <div>
      <ul class="flex-align-center normal-margin-new">
<!--        <li style="color:#999;font-size: 13px;">领域:</li>-->
        <li :class="field_act === item.value?'act':''" class="brand-item" style="margin-left:0" v-for="item in fields" :key="item.value" @click="clickField(item)">{{item.value}}</li>
      </ul>
<!--      <ul class="flex-align-center normal-margin">
        <li style="color:#999;font-size: 13px;">标准:</li>
        <li :class="standard_act === item.value?'act':''" class="brand-item" v-for="item in itemstandards" :key="item.value" @click="clickStandard(item)">{{item.value}}</li>
      </ul>-->
      <ul class="flex-align-center normal-margin-new">
<!--        <li style="color:#999;font-size: 13px;">品牌:</li>-->
        <li :class="brand_act === item.sa_brandid?'act':''" class="brand-item" style="margin-left:0" v-for="item in brands" :key="item.sa_brandid" @click="clickBrand(item.sa_brandid)">{{item.brandname}}</li>
      </ul>
      <ul class="flex-align-center normal-margin-new">
<!--        <li style="color:#999;font-size: 13px;">分类:</li>-->
        <li  :class="class_act === ''?'act':''" class="brand-item border-all" @click="clickClass('')">全部分类</li>
        <li :class="class_act === item.itemclassnum?'act':''" class="brand-item margin-notAll" v-for="item in itemclass" :key="item.itemclassnum" @click="clickClass(item)">{{item.itemclassname}}</li>
      </ul>
      <classTree style="padding-left:80px" :data="activeClass.subdep" @onClassChange="change"></classTree>
    </div>
    <div>

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

<script>
import classTree from './classTree.vue'
export default {
  data () {
    return {
      value:'',
      brands:[],
      fields:[],
      itemclass:[],
      activeClass:{},
      field_act:0,
      brand_act:0,
      class_act:'',
      standard_act:0,
      itemstandards:[]
    }
  },
  props: {
    default: {
      type: Boolean,
      default:() => false
    }
  },
  components:{
    classTree
  },
  methods:{
    /*async queryAgentiInfo () {
      const res1 = await this.$api.requested({
        "id": 20221223141802,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
              "condition": ""
            }
        }
      })
      this.fields = res1.data
      this.field_act = res1.data[0].sys_enterprise_tradefieldid
    },*/
    queryAgentiInfo () {
      this.$store.dispatch('optiontypeselect','tradefield').then(res=>{
        this.fields = res.data
        console.log(this.fields,'tradefield')
        this.field_act = res.data[0].value
        console.log(this.field_act)
        this.queryStandard()
      })
    },
    queryStandard(){
      this.$store.dispatch('optiontypeselect','itemstandards').then(res=>{
        this.itemstandards = res.data
        console.log(this.itemstandards,'itemstandards')
        this.standard_act = res.data[0].value
        console.log(this.standard_act)
        this.queryBrands()
      })
    },
    async queryBrands () {
      const res = await this.$api.requested({
        "id": "20220924163702",
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.brands = res.data
      this.brand_act = this.brands[0].sa_brandid
      this.queryClass()
    },

    async queryClass () {
      const res = await this.$api.requested({
        "id":"20220922110403","content":{"sa_brandid":this.brand_act}
      })
      console.log(res.data,'pop')
      this.itemclass = res.data[0].ttemclass
    },
    clickBrand (id) {
      this.brand_act = id
      this.queryClass()
    },
    clickField (item) {
      this.field_act = item.value
      this.$emit('clickField',item)
    },
    clickStandard (item) {
      this.standard_act = item.value
      this.$emit('clickStandard',item)
    },
    clickClass (item) {
      this.activeClass = item
      this.class_act = item.itemclassnum
      this.change(item)
    },
    change(n) {
      console.log(n)
      this.$emit('onClassChange',n)
    },
    clearSearch() {
      this.$emit('clearSearch')
    }
  },
  mounted () {
    this.queryAgentiInfo()
    this.queryClass()
    this.queryBrands()
   /* this.queryBrands()
    this.queryStandard()*/
  }
}

</script>
<style>
</style>
<style scoped>
.brand-item{
  margin:0 25px;
  color: #333;
  cursor: pointer;
  transition: .2s all linear;
  font-size: 13px;
}
.act{
  color:#3874f6;
}
.border-bottom{
  padding-bottom:16px;
  border-bottom: 1px solid #e3e5ea;
}
.border-all{
  margin-left: 0px
}
.margin-notAll{
  margin-left: -18px
}
.normal-margin-new{
  margin-bottom: 2px !important;
}
</style>