<template>
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">

        <div class="task-list">
            <div class="task-item" v-for="item in task_list" :key="item.id">
                <div class="task-item-header">
                    <div class="task-item-header-text">
                        <div class="task-item-header-username">{{item.username}}</div>
                        <div class="task-item-header-time">{{item.time}}</div>
                    </div>
                    <div class="task-item-header-process">
                        {{item.process}}
                    </div>
                </div>
                <div class="task-item-content">
                    <van-text-ellipsis :content="item.content" rows="3" expand-text="展开" collapse-text="收起"/>
                </div>
                <div class="task-item-bottom">
                    <van-button type="primary" size="small" @click="showInstruction">领导批示</van-button>
                </div>
                <van-steps direction="vertical" :active="-1">
                    <van-step v-for="reply in item.replys" :key="reply.id">
                        <h3>{{reply.name}}{{reply.time}}</h3>
                        <p>{{reply.content}}</p>
                        <p>附件:{{reply.attachment}}</p>
                    </van-step>
                </van-steps>
            </div>
        </div>
    </van-list>
    <van-popup v-model:show="instruction_show" :style="{ padding: '64px' }">
        <InstructionDialog @closeDialog="instructionDialogClose" ></InstructionDialog>

    </van-popup>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import InstructionDialog from './InstructionDialog.vue';

const task_list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const instruction_show = ref(false)

const onLoad = () => {
    getList();
}

const getList = () => {
    if (refreshing.value) {
        task_list.value = [];
        refreshing.value = false;
    }

    // ....
    loading.value = false;

    task_list.value.push({
        id: 1,
        username: '执行人名字',
        time: '2024-7-10 08:09:00',
        content: '这是一段很长的任务描述这是一段很长的任务描述这是一段很长的任务描述这是一段很长的任务描述这是一段很长的任的任务描述这是一段很长的任务描述',
        process: "20",
        replys: [
            {
                id: 1,
                name: '任务反馈',
                time: '2024-7-10  10:15:09',
                content: '这是一段很长的领导批示这是一段很长的领导批示这是一段很长的领导批示这是一段很长的领导批示',
                attachment: 'xxx.png'
            },
            {
                id: 1,
                name: '任务反馈',
                time: '2024-7-10  10:15:09',
                content: '这是一段很长的领导批示这是一段很长的领导批示这是一段很长的领导批示这是一段很长的领导批示',
                attachment: 'xxx.png'
            }
        ]
    })

    task_list.value.push({
        id: 2,
        username: '执行人名字',
        time: '2024-7-10 08:09:00',
        content: '1',
        process: "20",
    })

    task_list.value.push({
        id: 3,
        username: '执行人名字',
        time: '2024-7-10 08:09:00',
        content: '1',
        process: "20",
    })

    if (task_list.value.length >= 1) {
        finished.value = true;
    }

}

const showInstruction = () => {
    instruction_show.value = true
}

const instructionDialogClose = () => {
    instruction_show.value = false
}
</script>

<style lang="scss" scoped>
.task-list {
    position: relative;
    margin: 0px;
    padding: 16px;

    .task-item {
        .task-item-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            
            
            .task-item-header-text {
                display: flex;
                flex-direction: row;
                justify-content: start;

                
                
                .task-item-header-username {
                    color: #888;
                    background: #aaa;
                    padding-left: 4px;
                    padding-right: 4px;
                }
                .task-item-header-time {
                    color: #888;
                }
            }
            .task-item-header-process {

            }
        }

        .task-item-content {
            color: #888;
            background-color: #ececec;
        }

        .task-item-bottom {
            display: flex;
            flex-direction: row;
            justify-content: end;
        }
    }
}
</style>