<template>
    <view class="content">
        <view class="noticeList" v-for="(item, index) in tabArr" :key="index" @click="$Router.push({ name: 'noticeList', params: {type: item.type }})" >
            <view class="noticeImg" :class="{active : item.count != 0}">
                <block v-if="item.type == 'SystemNotification'">
                    <u-icon name="bell-fill" color="#77e79f" size="22" bold style="padding: 14rpx"></u-icon>
                </block>
                <block v-else>
                    <u-icon name="calendar-fill" color="#f1a166" size="22" bold style="padding: 14rpx"></u-icon>
                </block>
            </view>
            <view class="noticeCont">
                <view class="name">
                    {{ item.name }}
                </view>
                <view class="nowrap text">
                    {{ item.type == 'SystemNotification' ? 'APP特色功能介绍、官方推进、活动通知' : '商品订单购买成功、发货成功、退货' }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { categories } from '@/apis/interfaces/notice'
    export default {
        data() {
            return {
                tabArr    : []
            };
        },
        mounted() {
            // 获取分类
            this.getNotice()
        },
        methods: {
            // 分类
            getNotice(){
            	categories().then(res => {
                    this.tabArr = res
            	})
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        padding: $padding;
        box-sizing: border-box;
        background-color: $window-color;
		min-height: 100vh;
    }
    
    .noticeList {
        padding: $padding;
        box-sizing: border-box;
        position: relative;
        background-color: white;
        margin-bottom: $margin;
        border-radius: $radius;
        height: 146rpx;
        &:first-child {
            .noticeImg {
                background-color: #e7f8f0;
            }
        }
        .noticeImg {
            width: 68rpx;
            height: 68rpx;
            text-align: center;
            border-radius: 50%;
            margin-top: $margin - 20;
            background-color: #ffefe2;
            position: relative;
            &.active::after {
                position: absolute;
                content: '';
                top: $margin - 25;
                right: 0;
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                background-color: $text-price;
            }
        }
        .noticeCont {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: $padding $padding 0 $padding + 100rpx;
            .name {
                font-weight: bold;
                font-size: $title-size-lg;
            }
            .text {
                margin-top: $margin - 20;
                font-size: $title-size-sm;
            }
        }
    }
</style>
