<template>
    <view class="content">
        <view class="tips">
            <view class="noticeImg" :class="{active : noticeData.type == 'SystemNotification'}">
                <block v-if="noticeData.type == 'SystemNotification'">
                    <u-icon name="bell-fill" color="#77e79f" size="20" bold style="padding: 14rpx"></u-icon>
                </block>
                <block v-else>
                    <u-icon name="calendar-fill" color="#f1a166" size="20" bold style="padding: 14rpx"></u-icon>
                </block>
            </view>
            <view class="noticeBox">
                <view class="noticeTitle">
                    {{ noticeData.type == 'SystemNotification' ? '系统通知' : '订单通知'}}
                </view>
                <view class="contant">
                    <view class="title">
                        {{ noticeData.title }}
                    </view>
                    <view class="text">
                        时间:{{ noticeData.created_at }}
                    </view>
                    <view class="text">
                        {{ noticeData.content }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { noticeDet } from '@/apis/interfaces/notice'
    export default {
        data() {
            return {
                noticeData : ''
            };
        },
        mounted() {
            // 获取列表
            this.getDet()
        },
        methods: {
            // 列表
            getDet(){
            	noticeDet(this.$Route.query.id).then(res => {
                    this.noticeData = res
            	})
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        background-color: $window-color;
		min-height: 100vh;
    }
    .tips {
        padding: $padding;
        box-sizing: border-box;
        position: relative;
        .noticeImg {
            width: 64rpx;
            height: 64rpx;
            text-align: center;
            border-radius: 50%;
            background-color: #ffefe2;
            &.active {
                background-color: #e7f8f0;
            }
        }
        .noticeBox {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: $padding + 10 $padding $padding $padding + 90rpx;
            box-sizing: border-box;
            .noticeTitle {
                margin-bottom: $margin;
            }
            .contant {
                background-color: white;
                padding: $padding $padding - 10;
                box-sizing: border-box;
                border-radius: $radius;
                .title {
                    font-weight: bold;
                    margin-bottom: $margin;
                }
                .text {
                    line-height: 48rpx;
                    font-size: $title-size-m;
                    color: $text-gray;
                }
            }
        }
    }
</style>
