<!--
 * @Author: PoJun
 * @Date: 2023-09-15 15:30:09
 * @LastEditors: PoJun
 * @LastEditTime: 2023-10-06 17:26:19
 * @Message: Nothing
-->
<template>
    <view class="boxContent">
        <view v-if="title" class="boxContent-title">
            <view class="boxContent-title-line"></view>
            <view>{{ title }}</view>
        </view>
        <uv-grid :col="col">
            <uv-grid-item
                @click="click(item)"
                v-for="(item, index) in list"
                :key="index"
                :customStyle="{ height: 140 + 'rpx' }"
            >
                <uv-icon :name="item.icon" custom-prefix="custom-icon" size="26" color="#f8b700"></uv-icon>
                <text class="boxContent-text">{{ item.title }}</text>
            </uv-grid-item>
        </uv-grid>
    </view>
</template>

<script>
export default {
    name: "BoxWithTitle",
    props: {
        title: {
            type: String,
            default: "", //给个空格占位
        },
        list: {
            type: Array,
            default: function () {
                return [];
            },
        },
        col: {
            type: [String, Number],
            default: "4", //给个空格占位
        },
    },
    data() {
        return {};
    },
    methods: {
        click({ path, title, web, id }) {
            if (web) {
                uni.$uv.route("/subpkg/resource/webview/index", { title: encodeURI(title), url: web });
            } else if (path) {
                uni.$uv.route(path, { id, title: encodeURI(title) });
            } else {
                uni.$uv.toast("暂未开放");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.boxContent {
    padding: 36rpx 0;
    border-radius: 12rpx;
    margin-bottom: 30rpx;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    overflow: hidden;
    &-title {
        margin-bottom: 30rpx;
        padding: 0 26rpx;
        font-size: 28rpx;
        color: $uv-info;
        display: flex;
        flex-direction: row;
        align-items: center;
        &-line {
            width: 8rpx;
            height: 32rpx;
            background: $uv-wow-main-color;
            border-radius: 10rpx 0rpx 0rpx 10rpx;
            margin-right: 10rpx;
            flex-shrink: 0;
        }
    }
    &-text {
        font-size: 26rpx;
        color: $uv-wow-sub-color;
        margin-top: 14rpx;
    }
}
</style>
