<template>
    <div>
        <div class="header">
            <div class="title">今日待办
                <div class="knowledge">了解更多安检知识</div>
            </div>
            <div class="more" @click="goToMyToDo">
                查看更多
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </div>
        </div>

        <div class="list">
            <list-card v-for="item in list" :key="item.id" :class="item.status" class="list-item">
                <template #title>
                    <view class="list-item-title">
                        <div class="text-grey1">{{ item.title }}</div>
                        <list-icon :text="'移交公安'"
                            :divStyle="{ backgroundColor: item.type === 'task' ? '#FEF8F8' : '#FEF8F8', color: '#F55B5D', border: '2rpx dashed #F55B5D' }" />
                    </view>
                </template>
                <view class="list-item-content">
                    <view class="list-label">截止：</view>
                    <view class="list-value">{{ item.desc }}</view>
                </view>
            </list-card>
        </div>
    </div>
</template>
<script>
import { listCheckTask } from "@/api/check/checkTask";
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    title: "设备故障通知",
                    time: "10分钟之前",
                    content: "国内出发B区X光机出现故障，技术人员正在维修，请相关人员注意。",
                    status: 'error'
                },
                {
                    id: 2,
                    title: "排版调整通知",
                    time: "10分钟之前",
                    content: "7月15日安检员排班有调整，请各位员工及时查看个人排班信息。",
                    status: 'active'
                }
            ]
        };
    },
    methods: {
        goToMyToDo() {
            uni.navigateTo({
                url: '/pages/myToDoList/index'
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;

        .knowledge {
            font-size: 24rpx;
            color: #999;
        }
    }

    .more {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
    }
}

.list {
    .list-item {
        .list-item-title {
            width: 100%;
            display: flex;
            justify-content: space-between;

        }

        .list-item-content {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            line-height: 28rpx;

            .mr-32 {
                margin-right: 32rpx;
            }
        }
    }
}
</style>