<template>
  <a-select
    ref="selector"
    v-model="myVal"
    allow-clear
    :auto-clear-search-value="false"
    :mode="mode"
    :disabled="disabled ? disabled : false"
    :loading="loading"
    :placeholder="$t(placeholder)"
    :filter-option="remote && filterable"
    :option-filter-prop="optionFilterProp"
    :show-search="remote"
    @search="searchMethod"
    @change="change"
  >
    <template v-if="optionsType === 'String'">
      <a-select-option v-for="item in optionData" :key="item" :value="item">
        {{ item }}
      </a-select-option>
    </template>
    <template v-else>
      <a-select-option
        v-for="item in optionData"
        :key="getValue(item)"
        :value="getValue(item)"
      >
        {{ getLabel(item) }}
      </a-select-option>
    </template>
  </a-select>
</template>

<script>
export default {
  name: "ITableSelect",
  props: {
    // 字段名
    field: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "PLACESELECT",
    },
    value: {
      type: [String, Array, Number],
      default: "",
    },
    remote: {
      type: Boolean,
      default: false,
    },
    remoteMethod: {
      type: [Function, Object],
      default: null,
    },
    optionsType: {
      type: String,
      default: () => "",
    },
    options: {
      type: Array,
      default: () => [],
    },
    allowCreate: {
      type: Boolean,
      default: false,
    },
    optionFilterProp: {
      type: String,
      default: "children",
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    // 是否选择内容默认以分号分隔
    semicolon: {
      type: Boolean,
      default: false,
    },
    dictCode: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isSelectAll: {
      type: Boolean,
      default: false,
    },
    optionsProps: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value",
        };
      },
    },
    initOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      myVal: this.multiple ? [] : "",
      optionData: [],
    };
  },
  computed: {
    mode() {
      if (this.allowCreate) {
        return "tags";
      }
      if (this.multiple) {
        return "multiple";
      }
      return "default";
    },
    searchMethod(value) {
      const { remote, filterable, remoteMethod } = this;
      // 开启远程搜索且不是筛选
      if (remote && !filterable) {
        return remoteMethod;
      }
      return () => {};
    },
  },
  watch: {
    "initOptions.length": function () {
      if (!this.dictCode) {
        this.optionData = this.initOptions;
      }
    },
    value(newVal, oldVal) {
      this.setVal(newVal);
    },
    options: {
      handler(newVal, oldVal) {
        this.optionData = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.queryRemote();
  },
  methods: {
    // 统一的查询方法
    queryRemote() {
      // 自动远程查询
      if (this.dictCode) {
        this.getDictByCode(this.dictCode).then((res) => {
          if (this.dictCode === "DIC:COMMON:WHETHER_INT") {
            this.optionData = res.data.data.map((item) => {
              return {
                label: item.label,
                value: parseFloat(item.value),
              };
            });
          } else {
            this.optionData = res.data.data;
          }
          this.setVal(this.value);
        });
      } else {
        this.setVal(this.value);
      }
    },
    // 根据传入的prop 格式化label
    getLabel(item) {
      if (this.optionsProps && this.optionsProps.label) {
        // 根据label 的数据类型 决定是否拼接显示
        return Object.prototype.toString.call(this.optionsProps.label) ===
          "[object Array]"
          ? this.getLabelText(item)
          : this.$t(item[this.optionsProps.label]);
      }
      return item.label;
    },
    // 根据传入的prop 格式化value
    getValue(item) {
      if (this.optionsProps && this.optionsProps.value)
        return item[this.optionsProps.value];
      return item.value;
    },
    // // 当select选项为拼接展示时调用
    getLabelText(item) {
      const labelArr = this.optionsProps.label;
      const label = labelArr[0];
      const label1 = labelArr[1];
      return `${item[label]}/${item[label1]}`;
    },
    setVal(val) {
      if (this.multiple && this.semicolon) {
        this.myVal = val && typeof val === "string" ? val.split(";") : [];
      } else {
        this.myVal = val === undefined ? undefined : val;
      }
    },
    change(val) {
      let strVal = val;
      if (Array.isArray(val) && this.multiple && this.semicolon) {
        strVal = val.join(";");
      }
      this.$emit("change", strVal);
      this.$emit("input", strVal);
    },
  },
};
</script>
