<template>
  <el-select
    :id="id"
    v-model="model"
    v-bind="attrs"
    v-on="$listeners"
    v-bind:disabled="isDisable"
    :clearable="clearable"
    @click.native="handleClick"
  >
    <template v-if="code.length > 0">
      <el-option
        v-for="item in code"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </template>
    <slot v-else></slot>
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Array, Number],
      default: undefined,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: undefined,
    },
    code: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      },
    },
    mode() {
      return this.$store.state.Status.mode;
    },
    isDisable: {
      get() {
        return this.mode === "display" || this.disabled;
      },
    },
    highlight() {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
    },
    attrs() {
      if (this.mode === "display" || this.disabled) {
        let { placeholder, ...rest } = this.$attrs;
        rest = { placeholder: " ", ...rest };
        return rest;
      }
      return this.$attrs;
    },
  },
  methods: {
    handleClick: function (e) {
      let ev = new Event("click", { bubbles: true });
      let node = e.target;
      if (node.parentElement) {
        node.parentElement.dispatchEvent(ev);
      }
    },
  },
};
</script>

<style>
/* .el-select.highlight .el-input .el-input__inner {
  border-color: red;
} */
</style>