<!--
 * @Author: PoJun
 * @Date: 2023-10-09 15:51:12
 * @LastEditors: PoJun
 * @LastEditTime: 2023-10-26 14:46:31
 * @Message: 带左侧边框的容器, 常见于描述信息
-->
<template>
    <view
        @tap="itemClick"
        hover-class="uv-hover-class"
        :hover-stay-time="100"
        class="sidebar-container"
        :class="[readonly ? 'readonly' : '']"
    >
        <slot></slot>
        <view v-if="mark" class="sidebar-container-mark">
            <uv-icon name="checkmark-circle-fill" size="20" color="#53c21d"></uv-icon>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        readonly: {
            type: Boolean,
            default: false,
        },
        mark: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    methods: {
        itemClick() {
            this.$emit("click");
        },
    },
};
</script>

<style lang="scss" scoped>
.sidebar-container {
    padding: 24rpx;
    background-color: $uv-bg-color;
    border-radius: 10rpx;
    margin-top: 20rpx;
    font-size: 24rpx;
    position: relative;
    &::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 8rpx;
        height: 100%;
        background: $uv-primary-disabled;
        opacity: 1;
        border-radius: 10rpx 0rpx 0rpx 10rpx;
    }
    &.readonly {
        color: $uv-tips-color;
    }
    &-mark {
        height: 100%;
        position: absolute;
        top: 0;
        right: 12rpx;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }
}
</style>
