<template>
    <button
        :class="[buttonClass]"
        :style="[buttonStyle]"
        :lang="lang"
        :form-type="formType"
        :open-type="openType"
        :session-from="sessionFrom"
        :app-parameter="appParameter"
        :hover-class="buttonHoverClass"
        :hover-start-time="hoverStartTime"
        :hover-stay-time="hoverStayTime"
        :send-message-img="sendMessageImg"
        :send-message-path="sendMessagePath"
        :show-message-card="showMessageCard"
        :send-message-title="sendMessageTitle"
        :hover-stop-propagation="hoverStopPropagation"
        @click="onClick"
        @error="onError"
        @launchapp="onLaunchapp"
        @getuserinfo="onGetuserinfo"
        @opensetting="onOpensetting"
        @getphonenumber="onGetphonenumber"
    >
        <view :class="[bem('content')]">
            <text :class="[bem('icon'), b('icon', loadingIcon)]" :style="[iconStyle]" v-if="_loading && loadingIcon"></text>
            <text :class="[bem('icon'), b('icon', icon)]" :style="[iconStyle]" v-if="icon && !_loading"></text>
            <text :class="[bem('text')]" :style="[textStyle]" v-if="_loading && loadingText">{{ loadingText }}</text>
            <view :class="[bem('text')]" :style="[textStyle]" v-else-if="$slots.default"><slot></slot></view>
        </view>
    </button>
</template>

<script>
import mixin from "../../mixins";
import propsOption from "./props";
import defaultProps from "./defaultProps";
import { namespace } from "../../utils/use";
import { addUnit, addColor, addStyle } from "../../utils/style";
const { name, props, bem, b } = namespace("button");
console.log("fine-button");
export default {
    name,
    mixins: [mixin],
    props: props(propsOption, defaultProps),
    emits: ["click", "error", "launchapp", "getuserinfo", "opensetting", "getphonenumber"],
    data() {
        return {
            b,
            bem,
            _loading: false,
            _disabled: false
        };
    },
    computed: {
        buttonClass() {
            const { type, size, text, round, block, plain, _loading: loading, _disabled: disabled, themeName } = this;
            return bem([type, size, { text, round, block, plain, loading, disabled }, themeName]);
        },
        buttonStyle() {
            let style = {};
            style.width = addUnit(this.width);
            style.height = addUnit(this.height);
            style.borderWidth = addUnit(this.borderWidth);
            style.borderColor = addColor(this.borderColor || this.background);
            style.borderRadius = addUnit(this.borderRadius);
            if (!this.text) style.borderStyle = this.borderStyle;
            if (!this.plain) style.background = addColor(this.background);
            if (this.background && !uni.$fine.check.isHexColor(this.background) && !this.borderColor && !this.plain) style.borderWidth = 0;
            return this.filterEmpty({ ...style, ...addStyle(this.customStyle) });
        },
        buttonHoverClass() {
            return this._disabled || this._loading ? "" : bem("button", ["active"]);
        },
        iconStyle() {
            let style = {};
            style.color = addColor(this.iconColor);
            style.fontSize = addUnit(this.iconSize);
            style.fontWeight = addUnit(this.iconWeight);
            if (this.plain) style.color = addColor(this.iconColor || this.background);
            return this.filterEmpty(style);
        },
        textStyle() {
            let style = {};
            style.color = addColor(this.textColor);
            style.fontSize = addUnit(this.textSize);
            style.fontWeight = addUnit(this.textWeight);
            if (this.plain) style.color = addColor(this.textColor || this.background);
            return this.filterEmpty(style);
        }
    },
    watch: {
        loading: {
            handler(val) {
                this._loading = val;
            },
            immediate: true
        },
        disabled: {
            handler(val) {
                this._disabled = val;
            },
            immediate: true
        }
    },
    methods: {
        onClick(event) {
            if (this._loading || this._disabled) return;
            const next = (parmas = {}) => {
                if (uni.$fine.check.isBoolean(parmas.loading)) this._loading = parmas.loading;
                if (uni.$fine.check.isBoolean(parmas.disabled)) this._disabled = parmas.disabled;
            };
            uni.$fine.utils.throttle(() => {
                // 按钮点击事件
                // @arg `{ next：控制加载和禁用状态回调方法, event：ClickEvent }`
                this.$emit("click", { next, event });
            }, this.throttleTime);
        },
        onError(event) {
            this.$emit("error", event);
        },
        onLaunchapp(event) {
            this.$emit("launchapp", event);
        },
        onGetuserinfo(event) {
            this.$emit("getuserinfo", event);
        },
        onOpensetting(event) {
            this.$emit("opensetting", event);
        },
        onGetphonenumber(event) {
            this.$emit("getphonenumber", event);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
