<template>
	<el-card shadow="never" class="list-card">
		<template #header>
			<div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="blurry">
                        <el-input
                            v-model="queryParams.blurry"
                            placeholder="任务标题/任务描述"
                            clearable
                            @keyup.enter="handleQuery"
                            prefix-icon="Search"
                        />
                    </el-form-item>
                    <el-form-item prop="taskStatus">
                        <SelectDict v-model="queryParams.taskStatus" placeholder="任务状态" dictCode="task_status_type"></SelectDict>
                    </el-form-item>
                    <el-form-item prop="createBy">
                        <SelectUser multiple v-model="queryParams.createByIdls" placeholder="发起人员"></SelectUser>
                    </el-form-item>
                    <el-form-item prop="ownerBy">
                        <SelectUser multiple v-model="queryParams.ownerByIdls" placeholder="跟进人员"></SelectUser>
                    </el-form-item>
                    <el-form-item prop="beginTime">
                        <el-date-picker
                            v-model="rangeTime"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            start-placeholder="任务开始时间"
                            end-placeholder="任务开始时间"
                            @change="changeTime"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
		</template>

		<Table
			ref="taskTableRef"
			:tableParams="tableParams"
			:btnRole="btnRole"
			@handleAdd="handleAdd('add')"
			@handleEdit="handleAdd('edit', $event)"
			:right-btn="[]"
			:is-checkbox="false"
		>
		</Table>
	</el-card>

	<!-- 添加或修改任务对话框 -->
	<CreateTask ref="createTaskRef" isList @refresh="handleQuery" />

	<!-- 任务详情 -->
	<TaskDetail ref="taskDetailRef" @refresh="handleQuery" />
</template>

<script setup name="Task" lang="ts">
    import { listTask, delTask } from '@/api/task';
    import { TaskVO, TaskQuery } from '@/api/task/types';
    import auth from '@/plugins/auth'
    import Table from '@/components/Table/index.vue'
    import { tableTypes } from '@/components/Table/types'
    import CreateTask from '@/components/common/createTask.vue'
    import TaskDetail from '@/components/common/taskDetail.vue';
    import { useDictCache } from '@/hooks/web/useDict'

    const { queryDictDetailByCodes } = useDictCache(['task_status_type'])
    queryDictDetailByCodes()

    const props = defineProps({
        perPrefix: {
            type: String,
            required: true
        },
        queryRangeType: {
            type: Number
        }
    })

    const router = useRouter()
    const btnRole = ref([
        { type: 'add', hasPermi: `task:${ props.perPrefix }:add` },
        // { type: 'remove', hasPermi: `task:${ props.perPrefix }:remove` },
        { type: 'edit', hasPermi: `task:${ props.perPrefix }:edit` },
        { type: 'export', hasPermi: `task:${ props.perPrefix }:export` }
    ])

    let taskStatusData = [
        { label: '未开始', value: 0 },
        { label: '已完成', value: 1 },
        { label: '已取消', value: 2 },
        { label: '已超时', value: 3 },
        { label: '未完成', value: 4 }
    ]

    const rangeTime = ref()
    const changeTime = (value: string[] | null) => {
        queryParams.value.beginTime = value ? value[0] : ''
        queryParams.value.endTime = value ? value[1] : ''
    }

    const tableParams = reactive<tableTypes<TaskQuery, TaskVO>>({
        cloumnCode: props.perPrefix,
        menuId: router.currentRoute.value?.meta?.menuId,
        tableColumn: [
            { show: true, label: '开始时间', prop: 'taskBeginTime', sortable: true },
            { show: true, label: '关联类型', prop: 'resourceTypeName', sortable: false },
		    { show: true, label: '关联业务', prop: 'resourceName', sortable: false },
            { show: true, label: '任务主题', prop: 'taskContent', sortable: true },
            { show: true, label: '任务目的', prop: 'objectiveName', sortable: false },
            { show: true, label: '跟进人员', prop: 'ownerByName', sortable: false },
            { show: true, label: '任务状态', prop: 'taskStatus', sortable: false, render: ({ column }: { column: TaskVO }) => {
                return taskStatusData.find(a => a.value == column.taskStatus)?.label
            } },
            { show: true, label: '紧急程度', prop: 'priorityGradeName', sortable: false },
            {
                show: true, label: '操作', width: 150, prop: 'operation', disabledMove: true, render: ({ column }: { column: TaskVO }) => {
                    return [
                        auth.hasPermi(`task:${ props.perPrefix }:xq`) ? 
                        h(ElButton, { link: true, type: 'primary', onClick: () => { handleDetail(column) } }, '详情') : ''
                    ]
                }
            },
        ],
        queryParams: {
            blurry: undefined,
            taskStatus: undefined,
            createBy: undefined,
            ownerBy: undefined,
            queryRangeType: props.queryRangeType
        },
        listFn: listTask,
        delFn: delTask,
        keyId: 'id',
        exportCode: 'EXPORT_TASK_EXCEL',
        commonQueryOrderBy: 'taskBeginTime'
    })

    const { queryParams } = toRefs(tableParams);

    const taskTableRef = ref()
    /** 搜索按钮操作 */
    const handleQuery = () => {
        taskTableRef.value.getData()
    }

    const queryFormRef = ref()
    const resetQuery = () => {
        queryFormRef.value?.resetFields();
        rangeTime.value = null
        handleQuery()
    }

    /** 新增按钮操作 */
    const createTaskRef = ref()
    const handleAdd = (type: string, data?: TaskVO) => {
        createTaskRef.value.open({ type, obj: data })
    }

    // 任务详情
    const taskDetailRef = ref()
    const handleDetail = (data: TaskVO) => {
        taskDetailRef.value.open(data)
    }
</script>
