<!--
 * @Description  : 按钮组件
 * @Author       : 黎志恒
 * @Date         : 2020-04-23 18:32:37
 * @LastEditTime: 2020-10-10 14:46:07
 * @LastEditors: 李璕
 * @FilePath: \cms-components\see-button.vue
 -->
<template>
    <div
        class="see-button"
        v-if="isShow"
        :class="{
            'position-center': componentData.buttonPosition == 1,
            'position-left': componentData.buttonPosition == 2,
        }"
    >
        <template v-for="(item, index) in componentData.group">
            <div
                :key="index"
                class="button"
                :class="{
                    'is-button': componentData.buttonType == 1 && !isMobile,
                    'is-text': componentData.buttonType == 2 && !isMobile,
                    'is-mobile': isMobile,
                }"
                v-if="isDesign || (!isDesign && item.linkText)"
                @click="btnClick(item.linkUrl)"
            >
                {{ item.linkText || (isDesign ? "按钮" : "") }}
            </div>
        </template>
    </div>
</template>
<script>
import btnMixin from "./button-mixin";
import permissionMixin from "./permission-mixin";
export default {
    name: "see-button",
    mixins: [btnMixin, permissionMixin],
    components: {},
    props: {
        componentData: {
            required: false,
        },
    },
    data() {
        return {};
    },
    computed: {
        isMobile() {
            return this.componentData.commonVariable.isMobile;
        },
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        },
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        btnClick(url) {
            if (!url) return;
            this._mixJumpClick(!this.isMobile, url);
        },
    },
    destroyed() {},
};
</script>

<style lang="scss" >
.see-button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 32px;
    .button {
        cursor: pointer;
    }
    .is-mobile,
    .is-button {
        padding: 5px 16px;
        background: #007aff;
        border-radius: 2px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
    }
    .is-text {
        padding: 5px 8px;
        font-size: 14px;
        color: #1890ff;
        line-height: 22px;
    }
    .is-mobile {
        padding: 5px 30px;
        border-radius: 3px;
        line-height: 18px;
    }
}
.position-left {
    justify-content: flex-start;
    .button {
        margin: 4px 16px 4px 0;
    }
    .is-mobile {
        margin: 4px 11px 4px 0;
    }
}
.position-center {
    justify-content: center;
    .button {
        margin: 4px 8px 4px 8px;
    }
    .is-mobile {
        margin: 4px 5.5px 4px 5.5px;
    }
}
</style>

