<template>
	<view class="task-page">
		<ch-nav-bar title="作业" :height="66"></ch-nav-bar>
		<uni-segmented-control class="task-type__bar" :current="current" :values="items" @clickItem="taskTypeChange" />
		<uni-list :border="true">
			<template v-for="item in taskList" :key="item.id">
				<uni-list-item
					showExtraIcon="true"
					:clickable="true" 
					:showArrow="true" 
					:extraIcon="iconObj"
					:title="item.homeworkname" 
					:note="item.starttime" 
					@click="clickTask(item.homeworkid)">
				</uni-list-item>
			</template>
		</uni-list>
		<ch-empty v-if="!taskList.length"></ch-empty>
	</view>
</template>

<script setup>
import { onMounted, reactive, toRefs } from 'vue';
import ChNavBar from '@/components/ch-nav-bar/ch-nav-bar.vue'
import { useUserStore } from '@/store/user.js'
import { getTaskList } from '@/api/task.js';

const userStore = useUserStore();
const userId = userStore.userId;
const params = {
	id: userId,
	status: 1,
}

console.log('id', userId, params)

const data = reactive({
	current: 0,
	items: ['未提交', '已提交'],
	taskList: [],
	iconObj: {
		color: '#4cd964',
		size: '64',
		type: 'compose'
	},
})

const { current, items, iconObj, taskList } = toRefs(data);

onMounted(() => {
	getTaskListData();
})

function taskTypeChange (e) {
	params.status = ++e.currentIndex;
	getTaskListData();
}

function clickTask (taskId) {
	uni.navigateTo({
		url: `/pages/taskDetails/taskDetails?id=${taskId}`
	})
}

function getTaskListData () {
	return getTaskList(params, { loading: true }).then(list => {
		return taskList.value = list;
	})
}
</script>

<style lang="scss" scoped>
@import './task.scss';
</style>
