<template>
    <div
        class="but"
        :style="{
            width,
            display: max ? 'flex' : 'inline-flex',
            flex: max ? '1' : '',
            borderRadius: radius,
            ...type,
            height,
            cursor: isDisabled ? 'not-allowed' : 'pointer',
        }"
        @click="onTap"
        @mouseover="mouseover"
        @mouseout="mouseout"
        @mousedown="mousedown"
        @mouseup="mouseup"
    >
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "qg-btn",
    inject: {
        elForm: {
            default: "",
        },
    },
    props: {
        mode: {
            type: String,
            default: "",
        },
        color: {
            type: String,
            default: "",
        },
        radius: {
            type: String,
            default: "4rem",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        fixed: {
            type: Boolean,
            default: false,
        },
        height: {
            type: String,
            default: "",
        },
        max: {
            type: Boolean,
            default: false,
        },
        width: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            odlType: {},
            params: {},
            mousType: {},
            state: false,
        };
    },
    mounted() {
        this.odlType = { ...this.type };
    },
    computed: {
        type: {
            get() {
                if (this.state) return this.params;
                if (this.isDisabled) {
                    this.params.color = "#ccc";
                    this.params.border = "1rem solid #ccc";
                    this.params.backgroundColor = "#f5f7fa";
                } else if (this.mode.includes("bg")) {
                    this.params.backgroundColor = this.color || this.$btnStyle.backColor;
                    this.params.color = "#fff";
                } else {
                    this.params.border = `1rem solid ${this.color || this.$btnStyle.borderColor}`;
                    this.params.color = this.color || this.$btnStyle.color;
                }
                return this.params;
            },
            set(val) {
                this.params = val;
            },
        },
        isDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        },
        mouseoverStyle() {
            let params = {};
            if (this.isDisabled) {
                params.color = "#ccc";
                params.border = "1rem solid #ccc";
                params.backgroundColor = "#f5f7fa";
            } else if (this.mode.includes("bg")) {
                params.backgroundColor = this.colorLuminance(this.color || this.$btnStyle.backColor, 0.2);
                params.color = "#fff";
            } else {
                params.border = `1rem solid ${this.colorLuminance(this.color || this.$btnStyle.borderColor, 0.4)}`;
                params.color = this.colorLuminance(this.color || this.$btnStyle.color, 0.4);
            }
            return params;
        },
    },
    methods: {
        mouseover() {
            if (this.isDisabled || this.fixed) return;
            this.state = true;
            this.type = { ...this.type, ...this.mouseoverStyle };
            this.mousType = { ...this.type };
        },
        mouseout() {
            if (this.isDisabled || this.fixed) return;
            this.state = false;
            this.type = { ...this.odlType };
        },
        mousedown() {
            if (this.isDisabled || this.fixed) return;
            this.type = { ...this.odlType };
        },
        mouseup() {
            if (this.isDisabled || this.fixed) return;
            this.type = { ...this.mousType };
        },
        onTap(e) {
            if (this.isDisabled || this.fixed) return;
            this.$debounce(() => {
                this.$emit("click", e);
            });
        },
        /**
         * 动态计算颜色值
         * @param {*} hex 十六进制颜色值，例如“#abc”或“＃123456”（散列是可选的）
         * @param {*} lum  亮度因数，即，-0.1是10％更暗，0.2是轻20％等
         */
        colorLuminance(hex, lum = 0) {
            hex = String(hex).replace(/[^0-9a-f]/gi, "");
            if (hex.length < 6) {
                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
            }
            let rgb = "#";
            for (let i = 0; i < 3; i++) {
                let c = parseInt(hex.substr(i * 2, 2), 16);
                c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
                rgb += ("00" + c).substr(c.length);
            }
            return rgb;
        },
    },
};
</script>

<style lang="less" scoped>
.but {
    // display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0rem 20rem;
    height: 36rem;
    user-select: none;
}
// .but:active {
//     background-color: #000000 !important;
//     color: #fff !important;
// }
// .disabled {
//     pointer-events: none;
// }
</style>
