<template>
    <view style="margin:10rpx">
        <uni-list :border="true">
            <uni-list-item v-for="(item, index) in reportList" @click="redirecrDetail(item)" :key="index" link>
                <template v-slot:header>
                    <view class="slot-box">
                        <image src="@img/week-report.png"></image>
                    </view>
                </template>
                <template v-slot:body>
                    <view class="slot-content">
                        <view class="slot-panel">
                            <view class="slot-title">{{ '第' + item.week + '周' }}
                            </view>
                            <view class="slot-subtitle">{{ item.prj_name }}</view>
                            <view class="slot-subtitle" style="color: #3b4144">{{ item.reporter_name }}</view>
                        </view>
                        <view class="slot-desc">
                            <view class="slot-desc-text">
                                {{ item.created_at }}
                            </view>
                        </view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
    </view>

</template>


<script lang="ts">
export default {
    options: {
        styleIsolation: 'apply-shared', //解除样式隔离
    }

}
</script>
<script setup lang="ts">
import { WeekReport } from '@/types/week-report';

defineProps({
    reportList: {
        type: Array as PropType<WeekReport[]>,
        required: true
    }
})

// 跳转到详情页面
const redirecrDetail = (report: WeekReport) => {
    uni.navigateTo({ url: `/pages/project/week-report/week-report-detail?id=${report.id}` })
}
</script>
<style scoped lang="less">
.slot-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;

    image {
        width: 90rpx;
        height: 90rpx;
    }
}


.slot-content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    /* height: 45px; */
}

.slot-panel {
    display: flex;
    padding-right: 8px;
    flex: 1;
    color: #3b4144;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}

.slot-title {
    font-size: 14px;
    color: #3b4144;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.slot-subtitle {
    display: flex;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 5px;
    overflow: hidden;
}

.slot-desc {
    color: #999;
    font-size: 13px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-left: 5px;

    .slot-desc-text {
        color: #999;
        font-size: 12px;
        font-weight: 400;
    }

}

.chat-custom-text {
    font-size: 12px;
    color: #999;
}
</style>