<template>
    <div class="nav_detail">
        <Table
            ref="taskTable"
            :tableParams="tableParams"
            :btnRole="btnRole"
            @handleAdd="handleAdd('add')"
            @handleEdit="handleAdd('edit', $event)"
            :right-btn="[]"
            :is-checkbox="false"
        >
            <template #left-search>
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="nav_detail_search">
                    <el-form-item prop="taskStatus">
                        <SelectDict v-model="queryParams.taskStatus" placeholder="任务状态" dictCode="task_status_type"></SelectDict>
                    </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 prop="blurry">
                        <el-input
                            v-model="queryParams.blurry"
                            placeholder="搜索关键词"
                            clearable
                            @keyup.enter="handleQuery"
                            prefix-icon="Search"
                        />
                    </el-form-item>
                    <el-button style="margin-right: 12px" type="primary" @click="handleQuery">查询</el-button>
                </el-form>
            </template>
        </Table>
    </div>

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

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

<script setup lang="ts">
import { listTask, delTask } from '@/api/task';
import { ElButton } from 'element-plus';
import { TaskVO, TaskQuery } from '@/api/task/types';
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'
import auth from "@/plugins/auth";
import { noticeEventStore } from '@/store/modules/noticeEvent'
const userNoticeEventStore = noticeEventStore()
const { queryDictDetailByCodes } = useDictCache(['task_status_type'])
queryDictDetailByCodes()

const props = defineProps({
	resourceType: {
		type: String
	},
	resourceTypeId: {
		type: String || Number
	},
    perPrefix: {
        type: String,
    }
})

const btnRole = ref([
    { type: 'edit', hasPermi: `${ props.perPrefix }:detail:tab_rwjl_bj` },
    // { type: 'remove', hasPermi: `${ props.perPrefix }:detail:tab_rwjl_sc` },
    { type: 'export', hasPermi: `${ props.perPrefix }:detail:tab_rwjl_dc` }
])

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

const tableParams = reactive<tableTypes<TaskQuery, TaskVO>>({
	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(`${ props.perPrefix }:detail:tab_rwjl_xq`) ?
                    h(ElButton, { link: true, type: 'primary', onClick: () => { handleDetail(column) } }, () => '详情') : '',
				]
			}
		},
	],
	queryParams: {
        blurry: undefined,
		resourceType: props.resourceType,
		resourceTypeId: props.resourceTypeId,
		taskStatus: undefined,
        beginTime: undefined,
        endTime: undefined
	},
	listFn: listTask,
	delFn: delTask,
	keyId: 'id',
    exportCode: 'EXPORT_TASK_EXCEL',
    commonQueryOrderBy: 'taskBeginTime'
})

const { queryParams } = toRefs(tableParams);

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

const taskTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
	taskTable.value.getData()
}
watch(() => userNoticeEventStore.noticTask, (newValue, oldValue) => {
    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)
}

defineExpose({
    handleQuery
})
</script>
