<template>
    <div>
        <a-table :columns="columns" :data="list">
            <template #createUser="{ record }">
                <div>
                    {{ record.createUser.name }}
                </div>
            </template>
            <template #status="{ record }">
                <div>
                    <a-tag :color="record.status.remark"
                        >{{ record.status.label }}
                    </a-tag>
                </div>
            </template>
            <template #tag="{ record }">
                <div>
                    <a-tag color="blue">{{ record.tag.label }}</a-tag>
                </div>
            </template>
            <template #menu="{ record }">
                <div>
                    <task-info :id="record.id" />
                </div>
            </template>
        </a-table>
    </div>
</template>

<script>
import taskInfo from '@/views/project/index/components/task-info.vue'

export default {
    components: {
        taskInfo
    },
    props: {
        projectId: {
            required: true,
            type: String,
            default: ''
        }
    },
    data() {
        return {
            list: [],
            page: { page: 0, size: 10, total: 0 },
            dict: [],
            level: [],
            columns: [
                {
                    title: '任务标题',
                    dataIndex: 'name'
                },
                {
                    title: '优先级',
                    dataIndex: 'levelName'
                },
                {
                    title: '任务标签',
                    slotName: 'tag'
                },
                {
                    title: '任务状态',
                    slotName: 'status'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime'
                },
                {
                    title: '创建人',
                    slotName: 'createUser'
                },
                {
                    title: '操作',
                    slotName: 'menu'
                }
            ]
        }
    },
    mounted() {
        this.fetchDict()
    },
    methods: {
        fetchDict() {
            const tmpStatus = sessionStorage.getItem('project_task_status')
            if (tmpStatus) {
                this.dict = JSON.parse(tmpStatus)
            } else {
                this.$api.sys
                    .dict({ code: 'project_task_status' })
                    .then(res => {
                        if (res.code === 200) {
                            this.dict = res.data
                            sessionStorage.setItem(
                                'project_task_status',
                                JSON.stringify(this.dict)
                            )
                        }
                    })
            }
            const tmplevel = sessionStorage.getItem('project_task_level')
            if (tmplevel) {
                this.level = JSON.parse(tmplevel)
            } else {
                this.$api.sys.dict({ code: 'project_task_level' }).then(res => {
                    if (res.code === 200) {
                        this.level = res.data
                        sessionStorage.setItem(
                            'project_task_level',
                            JSON.stringify(this.level)
                        )
                        this.fetchList()
                    }
                })
            }
        },
        fetchList() {
            const data = { projectId: this.projectId, ...this.page }
            this.$api.task.page(data).then(res => {
                if (res.code === 200) {
                    this.list = res.data.records.map(e => {
                        var item = { ...e }
                        item.status = this.dict.find(
                            e => e.value === item.status.toString()
                        )
                        item.levelName = this.level.find(
                            e => e.value === item.level
                        ).label
                        return item
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
