<template>
  <div style="flex: 1">
    <el-select
      style="width: 100%"
      v-model="targetType"
      placeholder="请选择指标种类"
      @change="targetTypeChange"
      v-if="selectStyleType===1"
    >
      <el-option
        v-for="item in etaTypeOpt"
        :key="item.val"
        :label="item.label"
        :value="item.val"
      />
    </el-select>
    <div v-else>
      <label>选择指标：</label>
      <el-radio-group v-model="targetType" @change="targetTypeChange">
        <el-radio  
          v-for="item in etaTypeOpt"
          :key="item.val"
          :label="item.val"
        >{{item.label}}</el-radio>
      </el-radio-group>
    </div>
    <el-select
      v-model="search_txt"
      v-loadMore="searchLoad"
      :filterable="!search_txt"
      remote
      clearable
      placeholder="请选择指标名称"
      style="width: 100%; margin-top: 20px"
      :remote-method="searchHandle"
      @click.native="inputFocusHandle"
      @change="handleSelectTarget"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
      <el-option
        v-for="item in searchOptions"
        :key="item.EdbInfoId"
        :label="item.EdbName"
        :value="item.EdbInfoId"
      >
        <edbDetailPopover :info="item">
          <div slot="reference">{{item.EdbName}}</div>
        </edbDetailPopover>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
export default {
    props:{
      defaultId:{
        default:''
      },
      defaultOpt:{
        default:()=>[]
      },
      defaultType:{
        default:''
      },
      selectStyleType: {
        default: 1
      }
    },
    watch:{
      defaultId(){
        this.search_txt=this.defaultId||''
        this.searchOptions=this.defaultOpt||[]
        this.current_search=this.defaultOpt[0]?this.defaultOpt[0].EdbName:''
        this.targetType=this.defaultType==1?'2':'1' //EdbInfoCategoryType 0普通 1预测
      }
    },
    data() {
        return {
            targetType:'1',//1：ETA指标 2：ETA预测指标
            etaTypeOpt:[
                {
                    label:'ETA指标',
                    val:'1'
                },
                {
                    label:'ETA预测指标',
                    val:'2'
                },
            ],
            search_txt: this.defaultId||'',
            searchOptions: this.defaultOpt||[],
            search_have_more: true,
            search_page: 1,
            current_search: this.defaultOpt[0]?this.defaultOpt[0].EdbName:'',
        }
    },
    methods: {
        /* 搜索 */
        searchHandle(query) {
            this.search_page = 1;
            this.current_search = query;
            this.searchApi(this.current_search)
        },

        async searchApi(query, page = 1) {
            let params = {
                KeyWord: query,
                CurrentIndex: page,
            }
            const res = this.targetType=='1'?await dataBaseInterface.targetSearchByPage(params):await preDictEdbInterface.edbSearch(params)

            if (res.Ret !== 200) return
            const { List, Paging } = res.Data;
            this.search_have_more = page < Paging.Pages;
            this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
        },

        /* 聚焦获取当前检索 */
        inputFocusHandle(e) {
            this.search_page = 1;
            this.current_search = e.target.value;
            this.searchApi(this.current_search);
        },

        searchLoad() {
            if (!this.search_have_more) return;
            this.searchApi(this.current_search, ++this.search_page);
        },

        //要搜索的指标类型变化
        targetTypeChange(){
          this.searchOptions=[]
          this.search_page = 1;
          this.search_txt=''
          this.$emit('select','')
        },

        // 指标选择
        handleSelectTarget(e){
            let arr=this.searchOptions.filter(_item=>_item.EdbInfoId==e)
            this.$emit('select',arr[0])
        },
    },
}
</script>

<style>
</style>