<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>
