<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    clearable
    :multiple-limit="1"
    reserve-keyword
    :size="size || 'medium'"
    style="width: 100%"
    :placeholder="placeholder || ''"
    :disabled="disabled"
    :remote-method="remoteMethod"
    :loading="selectLoading"
    :type="type"
    :name="name"
    @change="selectChange"
  >
    <el-option
      v-for="(item, index) in options"
      :key="item.id + index"
      :label="item.label"
      :value="item.value"
      :disabled="item.canOrder !== '1'"
    >
    </el-option>
  </el-select>
</template>

<script>
import asyncRequest from "./http";
import resToken from "@/mixins/resToken";
export default {
  name: "SearchExpress",
  mixins: [resToken],
  props: [
    "size",
    "value",
    "placeholder",
    "isDetail",
    "disabled",
    "order_source",
    "names",
    "type",
    "name",
  ],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail          : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {String}        names            : 选中值label         展示详情必填
   * @param {String}        type            :快递列表状态
   * @param {String}        name            : 快递模糊查询
   *
   *
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      selectLoading: false,
      searchName: "",
      options: [],
      formValue: {
        type: "",
        order_source: "",
        name: "",
      },
    };
  },
  watch: {
    names: function (val, old) {
      this.searchName = val;
      if (this.isDetail && this.searchName) {
        this.remoteMethod(this.searchName);
      }
    },
  },
  mounted() {
    this.options = [];
    this.selectLoading = false;
  },
  methods: {
    async selectChange(e) {
      // console.log(e);
      if (e && e.length > 0) {
        let index = this.options.findIndex((v) => v.value === e[0]);
        if (index !== -1) {
          let model = {
            id: this.options[index].id,
            code: this.options[index].value,
            label: this.options[index].label,
            shortName: this.options[index].shortName,
          };
          this.$emit("searchChange", model);
        } else {
          this.$emit("searchChange", {});
        }
      } else {
        this.$emit("searchChange", {});
      }
    },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.options = [];
        this.formValue = {
          //看接口入参字段
          type: "",
          order_source: this.order_source,
          name: query,
        };
        const res = await asyncRequest.list(this.formValue);
        const { code, data, message } = await this.useResHandle(res);
        if (code === 0) {
          let arr = data ?? [];
          arr.forEach((element) => {
            let obj = {
              value: element.id,
              label: element.name,
              type: element.type,
              id: element.id,
              canOrder: element.canOrder,
              shortName: element.shortName,
            };
            this.options.push(obj);
          });
          // console.log(this.options, "options");
        } else {
          this.options = [];
        }
      } else {
        this.options = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>

<style></style>
