<template>
    <div :class="bem('nomore-templets')">
        <div :class="bem('text')">
            没有更多了
        </div>

        <div :class="bem('feedback')">
            没有找到想要的模板？
            <udesk :config="config">
                <div :class="bem('udesk')" @click="$emit('showUdesk')">
                    <div :class="bem('feedback-icon')"/>
                    反馈给我们
                </div>
            </udesk>
        </div>
    </div>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';
import Udesk from '../Udesk';

export default {
    name: createComponentName('nomore-templets'),
    components: {
        Udesk,
    },
    mixins: [componentMixin],
    props: {
        // udesk 配置
        config: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
        };
    },
    methods: {
    }
};
</script>
<style lang="less">
@import '../_styles/base.less';

.@{nomore-templets} {
    &__text {
        position: relative;
        left: 50%;
        margin-left: -122px;
        width: 244px;
        height: 48px;
        line-height: 48px;
        // box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        background:rgba(240,243,244,1);
        cursor: default;
        // background: rgba(204,204,204, .45);;
        color: @black80;
    }
    &__feedback {
        display: flex;
        justify-content: center;
        background: #fff;
        color: @black80;
        font-size: 14px;
        line-height: 22px;
        margin-top: 24px;
    }
    &__udesk {
        color: #000;
        cursor: pointer;
        display: flex;
        align-items: center;

        &:hover {
            color: #005CF9;
            .@{nomore-templets}__feedback-icon {
                background: url(../../assets/img/feedback-hover.png);
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }
    &__feedback-icon {
        // position: absolute;
        // left: 0;
        // top: 0;
        width: 17px;
        height: 16px;
        cursor: pointer;
        margin-right: 4px;

        background: url(../../assets/img/feedback.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
}
</style>
