<template>
  <el-select
      :clearable="clearable"
      :collapse-tags="collapseTags"
      :disabled="disabled"
      :filterable="filterable"
      :multiple="multiple"
      :placeholder="placeholder"
      :size="size"
      :value="value"
      style="width: 100%"
      @change="change"
  >
    <el-option
        v-for="(item, index) in optionsMap[key] || []"
        :key="index"
        :label="item[getDatas.label]"
        :value="item[getDatas.value]"
    />
  </el-select>
</template>

<script>
//import request from "@/utils/request";

export default {
  name: "aqsc-select",
  props: {
    // 保留element-ui的基础配置信息,如需要可额外扩展
    placeholder: {
      type: String,
      default: ""
    },
    filterable: {
      type: Boolean,
      default: true
    },
    collapseTags: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "small"
    },
    // api信息
    getDatas: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 获取options信息的参数
    params: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // options数据
    optionsMap: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 默认值
    value: {
      type: [String, Number, Array],
      default: null
    },
    // 封装的调接口方法
    request: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      key: ""
    };
  },
  watch: {
    params: {
      handler() {
        this.getOptions()
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    getOptions() {
      const apiKeys = Object.keys(this.getDatas);
      if (!apiKeys.length) {
        this.$message.warning("请正确配置 getDatas 参数");
      }
      const key = (this.key = JSON.stringify(this.params) + this.getDatas.url);
      const optipnsKey = Object.keys(this.optionsMap);
      if (optipnsKey.includes(key)) {
        return;
      }
      this.$emit("renewOptionsMap", [], key);
      if (!this.request) {
        this.$message.warning("请传入request方法")
        return;
      }
      this.request({
        url: this.getDatas.url,
        method: this.getDatas.method,
        [this.getDatas.method === "get" ? "params" : "data"]: this.params
      }).then((res) => {
        if (res.success) {
          const responseKey = this.getDatas.responseKey.split(".");
          let optionsArr = res;
          while (responseKey.length) {
            const nestKey = responseKey.shift();
            optionsArr = optionsArr[nestKey];
          }
          this.$emit("renewOptionsMap", optionsArr, key);
        }
      });
    },
    change(val) {
      // console.log(val)
      this.$emit("input", val);
      if (this.getDatas.isReturnAllInfo) {
        let selectedOpions;
        if (this.multiple) {
          selectedOpions = this.optionsMap[this.key].filter((item) =>
              val.includes(item[this.getDatas.value])
          );
        } else {
          selectedOpions = this.optionsMap[this.key].filter(
              (item) => val === item[this.getDatas.value]
          );
        }
        this.$emit(
            "receiveSelectedOptions",
            selectedOpions,
            this.getDatas.emitTab
        );
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.xx {
  height: 100px;
}
</style>
