<template>
  <el-autocomplete v-model.trim="keyWord" :fetch-suggestions="querySearchAsync"
    placeholder="请输入关键词/拼音/首字母" @select="handleSelect" style="width: 360px" class="reset-input">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
    <!-- <template slot-scope="{ item }">
      <div v-if="item.objectType == 'brand'" class="name">
        {{ item.BrandCname }}{{ item.BrandName?`（${item.BrandName}）`:'' }}
      </div>
      <div v-else class="name">
        {{ item.AliasName }}{{ `（${item.AliasCode}）` }}
      </div>
    </template> -->
  </el-autocomplete>
</template>

<script>
import { dictionBrandQuery } from "@/api/dictionary"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      keyWord: '',
    };
  },
  computed: {
    ...mapGetters('layout', ['dictionary']),
  },
  mounted() {

  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (queryString) {
        let params = {
          Keyword: queryString,
          Type: this.dictionary.dictionaryType,
          GroupId: this.dictionary.groupId,
          ProjectId: this.dictionary.projectId,
          PageSize: 5,
        }
        dictionBrandQuery(params, res => {
          this.$nextTick(() => {
            let brandList = res.Content[0].Brand.map(item => {
              return Object.assign(item, {
                value: `${item.BrandCname}${item.BrandName?`（${item.BrandName}）`:''}`,
                objectType: 'brand'
              })
            })
            let prodTypeList = res.Content[0].ProdType.map(item => {
              return Object.assign(item, {
                value: `${item.DefMajor[0].DefClass[0].AliasName}（${item.DefMajor[0].DefClass[0].AliasCode}）`,
                objectType: 'prodType'
              })
            })
            let results = [...brandList, ...prodTypeList]
            cb(results)
          })
        })
      } else {
        cb([])
      }
    },
    handleSelect(item) {
      if (item.objectType == 'brand') {
        this.$router.push({
          path: '/brand/brandDetail',
          query: {
            BrandCname: item.BrandCname,
            BrandID:item.BrandID,
            BrandName: item.BrandName
          }
        })
      } else {
        this.$router.push({
          path: '/product/productDetail',
          query: {
            major: item.Name,
            system: item.DefMajor[0].AliasName,
            class: item.DefMajor[0].DefClass[0].AliasName,
            code: item.DefMajor[0].DefClass[0].Code
          }
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
.reset-input {
  /deep/ .el-input__inner {
    background: #f6f6f6;
  }
}
</style>
<style>
.el-autocomplete-suggestion li {
  border-bottom: 1px solid #ebebeb;
}
</style>
