<template>
	<div>
		<div style="color: red">注：一个任务若被审批多次，则会显示出多条审批记录（审批留痕）</div>
		<div id="printComment">
			<div>
				<el-row>
					<div class="mb8" style="width: 100%">
						<right-toolbar
							v-model:showSearch="showSearch"
							v-model:search="search"
							class="ml10"
							style="float: right; margin-right: 20px"
							@queryTable="getDataList"
						></right-toolbar>
					</div>
				</el-row>
				<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%; display: none" @sort-change="sortChangeHandle">
					<el-table-column type="index" :label="t('jfcomment.index')" width="40" />
					<el-table-column prop="flowKey" :label="t('jfcomment.flowKey')" show-overflow-tooltip :width="data.width">
						<template #default="scope">
							<convert-name :options="state.dicData.flowInstId" :value="scope.row.flowInstId" :valueKey="'id'" :showKey="'flowName'"></convert-name>
						</template>
					</el-table-column>
					<el-table-column prop="runNodeId" :label="t('jfcomment.runNodeId')" show-overflow-tooltip :width="data.width">
						<template #default="scope">
							<convert-name :options="state.dicData.runNodeId" :value="scope.row.runNodeId" :valueKey="'id'" :showKey="'nodeName'"></convert-name>
						</template>
					</el-table-column>
					<el-table-column prop="runJobId" :label="t('jfcomment.runJobId')" show-overflow-tooltip :width="data.width">
						<template #default="scope">
							<convert-name :options="state.dicData.runJobId" :value="scope.row.runJobId" :valueKey="'id'" :showKey="'jobName'"></convert-name>
						</template>
					</el-table-column>
					<el-table-column prop="jobType" :label="t('runJob.jobType')" show-overflow-tooltip>
						<template #default="scope">
							<dict-tag :options="DIC_PROP.JOB_USER_TYPE" :value="scope.row.jobType"></dict-tag>
						</template>
					</el-table-column>
					<el-table-column prop="roleId" :label="t('runJob.roleId')" :width="data.width">
						<template #default="scope">
							<convert-role-name :value="scope.row" :isJobType="'0'"></convert-role-name>
						</template>
					</el-table-column>
					<el-table-column prop="userId" :label="t('jfcomment.userId')" show-overflow-tooltip :width="data.width">
						<template #default="scope">
							<convert-name :options="state.dicData.userId" :value="scope.row.userId" :valueKey="'userId'" :showKey="'name'"></convert-name>
						</template>
					</el-table-column>
					<el-table-column prop="startTime" :label="t('runJob.startTime')" show-overflow-tooltip width="160px" />
					<el-table-column prop="endTime" :label="t('runJob.endTime')" show-overflow-tooltip width="160px" />
					<el-table-column prop="useTime" :label="t('jfcomment.useTime')" show-overflow-tooltip width="120px" />
					<el-table-column prop="status" :label="t('runJob.status')" show-overflow-tooltip width="90px">
						<template #default="scope">
							<dict-tag :options="DIC_PROP.NODE_STATUS" :value="scope.row.status"></dict-tag>
						</template>
					</el-table-column>
					<el-table-column prop="subFlowInstId" :label="t('runJob.subFlowInstId')" show-overflow-tooltip>
						<template #default="scope">
							<el-tooltip placement="top" content="点击可查看关联子流程工单信息" v-if="scope.row.subFlowInstId">
								<convert-name
									:options="state.dicData.subFlowInstId"
									:value="scope.row.subFlowInstId"
									:valueKey="'id'"
									:showKey="'flowName'"
									:elTagType="'primary'"
									@click="handleJobByFlowInstId(scope.row)"
								></convert-name>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="subFlowStatus" :label="t('jfcomment.subFlowStatus')" show-overflow-tooltip :width="data.width">
						<template #default="scope">
							<dict-tag :options="DIC_PROP.FLOW_STATUS" :value="scope.row.subFlowStatus"></dict-tag>
						</template>
					</el-table-column>
					<el-table-column prop="signatureType" :label="t('runJob.signatureType')" show-overflow-tooltip width="90px">
						<template #default="scope">
							<dict-tag :options="DIC_PROP.BELONG_TYPE" :value="scope.row.belongType" v-if="scope.row.belongType !== '0'"></dict-tag>
							<dict-tag :options="DIC_PROP.SIGNATURE_TYPE" :value="scope.row.signatureType" v-else></dict-tag>
						</template>
					</el-table-column>
					<el-table-column prop="suspension" :label="t('runJob.suspension')" show-overflow-tooltip :width="data.width">
						<template #default="scope">
							<dict-tag :options="DIC_PROP.YES_OR_NO" :value="scope.row.suspension"></dict-tag>
						</template>
					</el-table-column>
					<el-table-column prop="signName" :label="t('jfcomment.signName')" :width="data.width">
						<template #default="scope">
							<img width="200px" v-if="scope.row.signName" :src="scope.row.signName" />
						</template>
					</el-table-column>
					<el-table-column prop="remark" :label="t('jfcomment.remark')" show-overflow-tooltip :width="data.width" />
					<el-table-column :label="$t('common.action')" width="300">
						<template #default="scope">
							<el-button
								text
								type="primary"
								icon="Bell"
								@click="remind(scope.row, '0')"
								v-if="(scope.row.status === '0' || scope.row.status === '9') && scope.row.roleId"
							>
								{{ $t('jfForm.urgentTask') }}
							</el-button>
							<el-button text type="primary" icon="Bell" @click="remind(scope.row, '1')" v-if="scope.row.subFlowStatus === '0'">
								{{ $t('jfForm.urgentSubFlow') }}
							</el-button>
							<el-button text type="primary" icon="delete" @click="signOff(scope.row)" v-if="scope.row.status === '0' && validateSignOff(scope.row)">
								{{ $t('jfForm.reduceSign') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination style="display: none" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
			</div>
			<el-timeline style="margin-top: 22px; margin-left: 12px">
				<el-timeline-item
					v-for="(item, index) in state.dataList"
					:key="index"
					:icon="item.status === '0' ? 'Loading' : 'SuccessFilled'"
					:color="item.status === '0' ? '#409EFF' : '#19be6b'"
					size="large"
					:timestamp="item.endTime"
				>
					<div style="align-items: center; display: flex">
						<span style="margin-right: 15px"> {{ item.nodeName }} {{ item.userName }} </span>
						<span style="margin-right: 15px">
							<convert-role-name :value="item"></convert-role-name>
						</span>
						<span style="margin-right: 15px">
							{{ item.status === '0' || item.status === '2' || item.status === '9' ? item.useTime : item.remark }}
						</span>

						<el-tooltip placement="top" content="点击可查看关联子流程工单信息" v-if="item.subFlowInstId && state.dicData.subFlowInstId">
							<convert-name
								:options="state.dicData.subFlowInstId"
								:value="item.subFlowInstId"
								:style="'margin-right: 15px'"
								:valueKey="'id'"
								:showKey="'flowName'"
								:elTagType="'primary'"
								@click="handleJobByFlowInstId(item)"
							></convert-name>
						</el-tooltip>

						<el-tooltip placement="top" :content="t('jfcomment.subFlowStatus')" v-if="item.subFlowInstId">
							<dict-tag :options="DIC_PROP.FLOW_STATUS" :value="item.subFlowStatus" style="margin-right: 15px"></dict-tag>
						</el-tooltip>

						<dict-tag :options="DIC_PROP.BELONG_TYPE" :value="item.belongType" v-if="item.belongType !== '0'"></dict-tag>

						<dict-tag :options="DIC_PROP.SIGNATURE_TYPE" :value="item.signatureType" v-else></dict-tag>

						<template v-if="item.signName">
							<img width="200px" :src="item.signName" />
						</template>

						<el-button text type="primary" icon="Bell" @click="remind(item, '0')" v-if="(item.status === '0' || item.status === '9') && item.roleId">
							{{ $t('jfForm.urgentTask') }}
						</el-button>
						<el-button text type="primary" icon="Bell" @click="remind(item, '1')" v-if="item.subFlowStatus === '0'">
							{{ $t('jfForm.urgentSubFlow') }}
						</el-button>
						<el-button text type="primary" icon="delete" @click="signOff(item)" v-if="item.status === '0' && validateSignOff(item)">
							{{ $t('jfForm.reduceSign') }}
						</el-button>
					</div>
				</el-timeline-item>
			</el-timeline>
		</div>
		<!--        <footer class="el-dialog__footer" style="text-align: center;">-->
		<!--            <span class="dialog-footer">-->
		<!--                <el-button type="primary" @click="printForm">{{-->
		<!--                        t('jfI18n.print')-->
		<!--                    }}-->
		<!--                </el-button>-->
		<!--            </span>-->
		<!--        </footer>-->

		<el-drawer v-if="data.showHiJob" class="flow-header-drawer" direction="rtl" append-to-body size="90%" v-model="data.showHiJob">
			<handle-job :curr-job="data.currJob"></handle-job>
		</el-drawer>
	</div>
</template>

<script setup lang="ts" name="CommentTimeline">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchComment } from '/@/api/jsonflow/comment';
import { useMessage, useMessageBox } from '/@/hooks/message';

import { useI18n } from 'vue-i18n';
import { onLoaded } from '/@/flow/components/convert-name/convert';
import * as runJob from '/@/api/jsonflow/run-job';
import { validateNull } from '/@/utils/validate';
import { printHtml } from '/@/flow';

const HandleJob = defineAsyncComponent(() => import('/@/flow/components/handle-job/handle.vue'));

// 引入组件
const { t } = useI18n();
const $message = useMessage();

const props = defineProps({
	currJob: {
		type: Object,
		default: null,
	},
});

// 搜索变量
const showSearch = ref(true);
const search = ref(false);

const data = reactive({
	currJob: {},
	showHiJob: false,
	width: '-',
});
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		flowInstId: props.currJob.flowInstId,
	},
	pageList: fetchComment,
	pagination: {
		size: 1000,
	},
	onLoaded: onLoaded({ key: 'userId' }, { key: 'flowInstId' }, { key: 'subFlowInstId' }, { key: 'runNodeId' }, { key: 'runJobId' }),
	descs: ['create_time'],
});

function signOff(row) {
	runJob.signOff(row).then(() => {
		getDataList();
		$message.success('Reduce Sign Success');
	});
}

function remind(row, type) {
	row.remindType = type;
	runJob.remind(row).then(() => {
		$message.success('Urgent Success');
	});
}

const router = useRouter();
function handleJobByFlowInstId(row) {
	let find = state.dicData.subFlowInstId.find((f) => f.id === row.subFlowInstId);
	data.currJob.flowInstId = find.id;
	data.currJob.isHiJob = '1';
	data.currJob.isForm = '1';
	data.showHiJob = true;
}

function validateSignOff(row) {
	// TODO 此处需要全量数据，否则判断有问题。目前pageSize 1000
	// 当前节点下只有一个任务不能做减签操作
	let existNodeJobs = state.dataList.filter(
		(f) => f.runNodeId === row.runNodeId && f.id !== row.id && ['0', '1', '2', '9'].some((s) => s === f.status)
	);
	if (validateNull(existNodeJobs)) return false;
	// 当前流程只有一个任务不能做减签操作
	let existFlowJobs = state.dataList.filter((f) => f.flowInstId === row.flowInstId && f.id !== row.id && ['0', '2', '9'].some((s) => s === f.status));
	return !validateNull(existFlowJobs);
}

function printForm() {
	data.width = '55';
	let flowName = state.dicData.flowInstId.find((f) => f.flowKey === state.dataList[0].flowKey).flowName;
	printHtml('printComment', flowName, data);
}

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle } = useTable(state);

// 监听双向绑定
watch(
	() => props.currJob.id,
	(val) => {
		getDataList();
	}
);
</script>

<style scoped>
@import '../../../flow/components/style/flow-drawer.scss';
</style>
