<template>
  <el-select
    v-model="nowValue"
    filterable
    remote
    clearable
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    style="width: 100%"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { queryProject } from "@/api/app/project.js";

export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },

  watch: {
    nowValue(val) {
      console.log(val);
      this.$emit("input", val);
      this.$emit("change", val);
    },
  },
  data() {
    return {
      options: [],
      nowValue: this.value,
      loading: false,
      state: [],
    };
  },
  mounted() {
    this.getProjectList("");
  },
  methods: {
    getProjectList(searchValue) {
      queryProject({
        pageNum: 1,
        pageSize: 100,
        searchValue,
      }).then((res) => {
        this.options = res.data.records.map((item) => {
          return { value: item.id, label: item.name };
        });
        this.state.length > 0 ? null : (this.state = this.options);
        console.log(this.options);
      });
    },
    remoteMethod(query) {
      console.log(query);
      if (query !== "") {
        this.getProjectList(query);
      } else {
        console.log(this.state);
        this.options = this.state;
      }
    },
  },
};
</script>
