<template>
  <el-select
    :id="id"
    class="ps-select"
    :placeholder="placeholder"
    v-model="inputValue"
    :disabled="disabled"
    :clearable="clearable"
    :multiple="multiple"
    :filterable="filterable"
    :multiple-limit="multipleLimit"
    collapse-tags
    @change="operaChange"
    @clear="clear"
  >
    <el-option
      v-for="(item, index) in dataSource"
      :key="index"
      :label="defalutProps ? item[defalutProps.desc] : item.desc"
      :value="isDropItem ? JSON.stringify(item) : defalutProps ? item[defalutProps.id] : item.id"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "PsSelect",
  props: {
    value: {},
    placeholder: {
      type: String,
      default: null,
    },
    defalutProps: {
      type: Object,
      default: () => undefined,
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isDropItem: {
      type: Boolean,
      default: false,
    },
    multipleLimit: {
      type: Number,
      default: null,
    },
    id: { type: String, default: "" },
  },
  //处理v-model语法糖的emit事件
  model: {
    prop: "value",
    event: "handler",
  },
  watch: {
    value: {
      handler(val) {
        this.inputValue = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      inputValue: "",
    };
  },
  created() { },
  mounted() { },
  methods: {
    operaChange(e) {
      // console.log("e", e);
      // const oldVal = e;
      // let itemVal = null;
      // if (this.isDropItem) {
      //     this.dataSource.forEach((el) => {
      //         if (oldVal === JSON.stringify(el)) {
      //             itemVal = JSON.stringify(el);
      //         }
      //     });
      // } else {
      //     itemVal = oldVal;
      // }

      this.$emit("handler", e);
      this.$emit("change", e);
    },
    clear() {
      this.$emit("handler", null);
      this.$emit("clear", true);
    },
  },
};
</script>

<style></style>
