<template>
    <view class="task-item" @click="jumpDetail">
		<view class="task-item-left">
			{{task.status}}
		</view>
		<view class="task-item-content">
			<view class="task-item-title">
				{{task.title}}
			</view>
			<view class="task-info">
				{{task.order}}
			</view>
			<view class="task-info">
				{{task.createTime}}
			</view>
		</view>
    </view>
</template>

<script>
export default {
	name: 'TaskItem',
	props: {
		task: {
			type: Object,
			default: () => ({})
		}
	},
	methods: {
		jumpDetail() {
			console.log(1111)
			uni.navigateTo({
				url: '/pages/task/detail/detail'
			})
		}
	}
}
</script>

<style>
	.task-item {
		display: flex;
		flex-direction: row;
		padding: 20rpx;
	}
	.task-item-left {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #007AFF;
		color: #fff;
		margin-right: 20rpx;
		font-size: 25rpx;
	}
	.task-item-content {
		flex: 1;
	}
	.task-item-title {
		font-size: 30rpx;
		color: #000;
	}
	.task-info {
		font-size: 20rpx;
		color: #666;
	}
</style>
