<template>
  <el-select
    v-model="mValue"
    :disabled="disabled"
    v-bind="$attrs"
    style="width: 100%;"
    v-on="$listeners"
    clearable
    :placeholder="placeholder"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { tgList } from "@/api/adviser.js";

export default {
  name: "AdviserSelect",
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    deptId: {
      type: [String, Number],
      default: undefined
    },
    name: {
      type: [String, Object],
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterSelf: {
      // 是否过滤掉自己 1:过滤 2:不过滤
      type: Number,
      default: 2
    },
    placeholder: {
      type: String,
      default: "请选择"
    }
  },
  data() {
    return {
      options: []
    };
  },
  watch: {
    deptId() {
      this.getTgList();
    }
  },
  computed: {
    mValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update:value", val);

        const item = this.options.find(item => item.id === val);
        if (item) {
          this.$emit("update:name", item.name);
        }
      }
    }
  },
  mounted() {
    this.getTgList();
  },
  methods: {
    getTgList() {
      tgList({
        current: 1,
        size: 9999,
        status: 3,
        userType: 1,
        deptId: this.deptId,
        filterSelf: this.filterSelf
      }).then(res => {
        this.options = res.data.list;
        if (!this.disabled && this.options.length === 1) {
          const item = this.options[0];
          this.mValue = item.id;
          this.$emit("update:value", item.id);
          this.$emit("update:name", item.name);
          this.$emit("init", item);
        }
      });
    }
  }
};
</script>
