<template>
  <div class="search-bar">
    <!--    <a-select default-value="all" class="select" @change="handleChange" :dropdownMatchSelectWidth="false">-->
    <!--      <a-select-option v-for="d in selectOption" :key="d.value">-->
    <!--        {{ d.text }}-->
    <!--      </a-select-option>-->
    <!--    </a-select>-->
    <a-auto-complete
      v-model="searchInput"
      class="search-input"
      ref="autoComplete"
      placeholder="请输入查询的内容"
      option-label-prop="title"
      @search="fetchFunction"
    >
      <a-spin v-if="searching" slot="notFoundContent" size="small" />
      <template slot="dataSource">
        <a-select-option v-for="item in dataSourceResults" :key="item.category" :title="item.category">
          <span>{{ item.category.substr(0,item.category.indexOf(searchInput)) }}</span>
          <span style="color: red">{{ searchInput }}</span>
          <span>{{ item.category.substr(item.category.indexOf(searchInput)+searchInput.length) }}</span>
        </a-select-option>
      </template>
      <a-input
        class="contentInput"
        v-model="searchInput"
        placeholder="请输入查询的内容">
      </a-input>
    </a-auto-complete>
    <a-button-group size="large" class="btn_group">
      <a-button @click="onSearch(searchInput)" :loading="loading">
        <a-icon type="search"/>
        搜索
      </a-button>
    </a-button-group>
  </div>
</template>

<script>
import FavoriteList from './FavoriteList.vue'
import { get, post } from '@vue2-client/services/api'
import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'

export default {
  name: 'SearchBar',
  components: { FavoriteList },
  data () {
    // 检索去抖
    this.fetchFunction = debounce(this.fetchFunction, 300)
    return {
      // 最后检索版本
      lastFetchId: 0,
      searching: false,
      searchInput: '', // 绑定搜索输入框的数据,
      favoriteState: false, // 是否收藏
      obj: undefined,
      favoriteListVisible: false,
      loading: false,
      dataSourceResults: [],
      selectOption: [],
      queryType: 'all',
    }
  },
  computed: {
  },
  created () {
    this.selectOption = [
      { value: 'all', text: '全部' }
    ]
    get('/ai/question_types', {}).then(res => {
      for (const item of res) {
        this.selectOption.push({ value: item, text: item })
      }
    })
  },
  mounted () {
    this.init()
  },
  methods: {
    handleChange (value) {
      this.queryType = value
    },
    fetchFunction (value) {
      this.dataSourceResults = []
      if (value) {
        this.searching = true
        this.lastFetchId += 1
        const fetchId = this.lastFetchId
        post('/api/af-system/logic/openapi/getCommonData', {
          type: 'ai-question',
          content: value
        }).then(res => {
          if (fetchId !== this.lastFetchId) {
            return
          }
          if (res != null && Array.isArray(res)) {
            // 提取 json 中的 question， 并去重
            this.dataSourceResults = res.map(item => JSON.parse(item.f_json).question)
              .filter((item, index, arr) => arr.indexOf(item) === index)
              .map(item => ({ category: item }))
          }
        }).finally(() => {
          this.searching = false
        })
      }
    },
    // 处理搜索操作
    onSearch (value) {
      this.loading = true
      // 触发父组件的搜索事件，传递搜索输入的值
      this.$emit('search', value, this.queryType, () => {
        this.loading = false
      })
    },
    // // 处理打开收藏操作
    // openFavorites (uuid) {
    //   this.$emit('openFavorites', uuid)
    // },
    // 收藏夹显示隐藏的回调
    favoriteListVisibleAction (visible) {
      if (this.$refs.favoriteList && visible) {
        this.$refs.favoriteList.loadData()
      }
    },
    init () {
      this.searchInput = ''
      this.obj = undefined
      this.favoriteState = false
    },
    setObj (obj) {
      this.obj = obj
      this.searchInput = obj.question
      this.favoriteState = obj.isFavorite
    },
    setFavorite (uuid, isFavorite) {
      if (this.obj && uuid === this.obj.uuid) {
        this.favoriteState = isFavorite
      }
      this.favoriteListVisibleAction(true)
    }
  }
}
</script>

<style lang="less" scoped>
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center; /* 添加这一行来实现垂直居中 */
  height:100%;

  .btn_group {
    padding-left: 6px;

    :deep(.ant-btn) {
      height: 3rem;
      color: #4F93FE;
    }

    .star_button {
      color: #ffba00;
    }
  }

  :deep(.ant-select-selection--single) {
    height: 100%;
  }
  :deep(.search__field__mirror) {
    height: 100%;
  }
  .contentInput{
    height: 48px;
    width: 35rem;
    background-color: #fff;
    padding: 4px 80px 4px 40px;
    font-size: 16px;
  }
  .select {
    width: 160px;
    height: 48px;
    padding-right: 6px;
    font-size: 16px;
    text-align: center;
    :deep(.ant-select-selection-selected-value) {
      width: 120px;
      height: 48px;
      line-height: 48px;
    }
  }
}

</style>
