<template>
    <div class="" v-if="show" @click="$emit('click', $event)">
        <slot v-bind="slotData"></slot>
    </div>
</template>

<script>
import { mapState } from "vuex";
import config from "/config.js";
export default {
    name: "qg-is-show",
    inject: {
        parent: {
            default: "",
        },
    },
    props: {
        auths: {
            type: Array,
            default: () => [1],
        },
        api: {
            type: String,
            default: "",
        },
        rangeKey: {
            type: String,
            default: "result",
        },
    },
    data() {
        return {
            slotData: {},
        };
    },
    computed: {
        params() {
            return (this.parent || {}).params;
        },
        ...mapState(["userInfo"]),
        show() {
            let boo = (this.auths || []).includes(this.userInfo.userType);
            if (boo && this.api) {
                this.$debounce(() => {
                    let req = typeof this.api === "function" ? this.api.bind(this, this.params) : this.httpGet.bind(this, this.api, this.params);
                    req().then((res) => {
                        this.slotData = res[this.rangeKey] || {};
                        this.$emit("input", this.slotData);
                    });
                }, 1000);
            }
            return boo;
        },
    },
    methods: {
        paramsIoint(params) {
            let objArr = Object.keys(params);
            let str = "";
            objArr.forEach((v, i) => {
                let a = "";
                if (i) {
                    a += `&${v}=${params[v]}`;
                } else {
                    a += `?${v}=${params[v]}`;
                }
                str += a;
            });
            return str;
        },
        httpGet(api, params) {
            api = `${config.baseUrl}${api}`;
            return new Promise((resolve, reject) => {
                let xhr = null;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    // code for IE5 and IE6
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } else {
                    console.log("浏览器不支持");
                    return;
                }
                xhr.open("get", api + this.paramsIoint(params), true);
                let token = localStorage.getItem("token");
                if (token) {
                    xhr.setRequestHeader("token", `Bearer ${token}`);
                }
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (this.status == 200) {
                            resolve(JSON.parse(this.response));
                        } else {
                            reject(this.response);
                        }
                    }
                };
                xhr.send();
            });
        },
    },
};
</script>

<style scoped></style>
