<template>
  <el-select v-model="value" placeholder="全部">
    <el-option label="全部" :value="''" v-if="showAll"></el-option>
    <el-option v-for="item in options" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
  </el-select>
</template>

<script>
import selectComponentJs from "../select";
import { getDeptList } from "@/request/config";
import axios from "axios";

const extObj = selectComponentJs();

let ret = [];

const _getOptions = (items) => {
  for (let i = 0; i < items.length; i++) {
    if (items[i].children) {
      _getOptions(items[i].children);
    }

    let item = {
      ...items[i],
      id: items[i].id.toString(),
    };

    ret.push(item);
  }
};

export default {
  ...extObj,
  watch: {
    filter() {
      this.filterOptions()
    },
    ...extObj.watch
  },
  methods: {
    filterOptions() {
      if (typeof this.filter == "string") {
        this.options = this.cache.filter((item) => {
          return this.filter == 2 ? item.id == 1 : item.id != 1;
        });
        setTimeout(() => {
          if (this.options[0]) {
            this.value = String(this.options[0].id).trim();
          }
        });
      }
    },
    ...extObj.methods
  },
  async mounted() {
    ret = [];
    let res = await axios.post(getDeptList);
    let coms = Array.isArray(res.data) ? res.data : [res.data];
    _getOptions(coms);

    this.options = ret;
    this.cache = JSON.parse(JSON.stringify(ret));
    this.filterOptions()
    this.$emit("asyncLoad");
    extObj.mounted.call(this);
  },
};
</script>
