<template>
  <el-select
    v-model="code"
    multiple
    filterable
    remote
    :multiple-limit="1"
    reserve-keyword
    :size="size"
    style="width: 100%"
    :placeholder="placeholder"
    :disabled="disabled"
    :remote-method="remoteMethod"
    :loading="selectLoading"
    @change="selectChange"
  >
    <el-option
      v-for="item in activeOptions"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
</template>
<script>
import asyncRequest from "@/apis/service/network/orderEntry";
import resToken from "@/mixins/resToken";
export default {
  name: "search-select",
  props: [
    "code",
    "placeholder",
    "size",
    "type",
    "isDetail",
    "disabled",
    "names",
  ],
  mixins: [resToken],
  data() {
    return {
      activeOptions: [],
      code: [],
      selectLoading: false,
      searchName: "",
    };
  },
  watch: {
    names: function (val) {
      this.searchName = val;
      if (this.isDetail && this.searchName) {
        this.remoteMethod(this.searchName);
      }
    },
  },
  created() {
    this.activeOptions = [];
    this.initForm();
  },
  methods: {
    async initForm() {
      this.selectLoading = false;
    },
    async selectChange() {
      this.$emit("end", this.code);
    },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.activeOptions = [];
        let formValue = {
          page: 1,
          size: 50,
          name: query,
          company: query,
        };

        let res = {};
        if (this.type === "1") {
          delete formValue["name"];
          res = await asyncRequest.list1(formValue);
        } else if (this.type === "2") {
          delete formValue["company"];
          res = await asyncRequest.list2(formValue);
        } else if (this.type === "3") {
          delete formValue["company"];
          res = await asyncRequest.list3(formValue);
        } else {
          res = await asyncRequest.list4({});
        }
        if (res && res.code === 0 && res.data) {
          this.activeOptions;
          let list = [];
          if (this.type === "4") {
            list = res.data;
          } else {
            list = res.data.list;
          }
          list.forEach((v1) => {
            let item = {
              code:
                this.type === "1"
                  ? v1.companyNo || ""
                  : this.type === "2"
                  ? v1.companyNo || ""
                  : this.type === "3"
                  ? v1.code || ""
                  : v1.id || "",
              name:
                this.type === "1"
                  ? v1.companyName || ""
                  : this.type === "2"
                  ? v1.company_name || ""
                  : this.type === "3"
                  ? v1.name || ""
                  : v1.rate+"%" || "",
            };
            this.activeOptions.push(item);
          });
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      } else {
        this.activeOptions = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>

   <style lang="scss" scoped>
.search-select {
}
</style>
