<!doctype html>
<html lang="en">

<head>
    <script src="jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <title>任务信息 | Task Information</title>
    <style>
        table {
            table-layout: auto;
        }

        table,
        td,
        th,
        tr {
            border-color: black !important;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 400px;
            min-width: 150px;
        }

        .ID {
            width: 10%;
        }
    </style>
</head>

<body>

<div class="row" style="margin-top: 40px;">

    <div class="col-md-8" style="margin:0 auto" id="taskInfo" v-if="show">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb" style="padding-left:0;background-color: white">
                <li class="breadcrumb-item" @click="gotoHome"><a href="#">{{"Home~首页" | lang}}</a></li>
                <li class="breadcrumb-item active" aria-current="page"
                    style="color: black">{{"Task Information~任务信息" | lang}}
                </li>
            </ol>
        </nav>
        <h4 style="text-align: center;">{{"Task Information~任务信息" | lang}}</h4>
        <p>{{"Task Name:~任务名称：" | lang}} {{task["name"]}}</p>
        <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Task Description:~任务描述：" | lang}} {{task["desc"]}}</p>
        <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Example URL:~样例网址：" | lang}} {{task["url"]}}</p>
        <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Create Time:~创建时间：" | lang}} {{dateFormat(task["create_time"])}}</p>
        <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Update Time:~更新时间：" | lang}} {{dateFormat(task["update_time"])}}</p>
        <p>{{"Operations (Please close this window and select 'Design Task' button if you want to modify task with a browser)~操作（如要带浏览器修改任务流程请关闭此窗口并选择设计任务）" | lang}}</p>
        <p><a style="margin-top: 5px" href="javascript:void(0)" v-on:click="modifyTask(task['id'],task['url'])"
              class="btn btn-primary">{{"Modify Task~修改任务" | lang}}</a>
            <a style="margin-top: 5px" href="javascript:void(0)" v-on:click="invokeTask(task['id'],task['url'])"
               class="btn btn-primary">{{"Execute Task~执行任务" | lang}}</a></p>
        <p>{{"Input Parameters~输入参数" | lang}}</p>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th style="min-width: 50px; text-align: center">ID</th>
                <th style="text-align: center">{{"Parameter Name~参数名称" | lang}}</th>
                <th style="text-align: center">{{"Invoke Name~调用名称" | lang}}</th>
                <th style="text-align: center">{{"Parameter Type~参数类型" | lang}}</th>
                <th>{{"Example Value~示例值" | lang}}</th>
                <th>{{"Parameter Description~参数描述" | lang}}</th>
            </tr>
            <tr v-if="task.inputParameters.length>0" v-for="i in task.inputParameters.length">
                <td style="min-width: 50px; text-align: center">{{i}}</td>
                <td style="text-align: center;white-space: initial">{{task.inputParameters[i-1]["nodeName"]}}</td>
                <td style="text-align: center">{{task.inputParameters[i-1]["name"]}}</td>
                <td style="text-align: center">{{task.inputParameters[i-1]["type"]}}</td>
                <td>{{task.inputParameters[i-1]["exampleValue"]}}</td>
                <td>{{task.inputParameters[i-1]["desc"]}}</td>
            </tr>
            <tr v-if="task.inputParameters.length==0">
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
            </tr>
            </tbody>
        </table>
        <p>{{"Output Parameters~输出参数" | lang}}</p>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th style="min-width: 50px; text-align: center">ID</th>
                <th style="text-align: center">{{"Parameter Name~参数名称" | lang}}</th>
                <th style="text-align: center">{{"Parameter Type~参数类型" | lang}}</th>
                <th>{{"Example Value~示例值" | lang}}</th>
                <th>{{"Parameter Description~参数描述" | lang}}</th>
                <th style="text-align: center">{{"Record as a field~作为字段保存" | lang}}</th>
            </tr>
            <tr v-if="task.outputParameters.length>0" v-for="i in task.outputParameters.length">
                <td style="min-width: 50px; text-align: center">{{i}}</td>
                <td style="text-align: center">{{task.outputParameters[i-1]["name"]}}</td>
                <td style="text-align: center">{{task.outputParameters[i-1]["type"]}}</td>
                <td>{{task.outputParameters[i-1]["exampleValue"]}}</td>
                <td>{{task.outputParameters[i-1]["desc"]}}</td>
                <td style="text-align: center">{{task.outputParameters[i-1]["recordASField"] == 1? "Yes~是": "No~否" | lang}}
                </td>
            </tr>
            <tr v-if="task.outputParameters.length==0">
                <td style="min-width: 50px;text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
                <td style="text-align: center">{{"Empty~无" | lang}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>

</html>
<script src="global.js"></script>
<script>
    var sId = getUrlParam('id');
    var app = new Vue({
        el: '#taskInfo',
        data: {
            task: {},
            show: false, //是否渲染
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
        },
        methods: {
            dateFormat: DateFormat,
            gotoHome: function () {
                let url = "";
                if (getUrlParam("lang") == "zh") {
                    url = "taskList.html?lang=zh&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                } else {
                    url = "taskList.html?lang=en&type=" + getUrlParam("type") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                }
                window.location.href = url;
            },
            modifyTask: function (id, url) {
                let message = { //显示flowchart
                    type: 1, //消息类型，传递链接
                    message: {
                        "id": id,
                    }
                };
                // ws.send(JSON.stringify(message));
                // window.location.href = url; //跳转链接
                if (getUrlParam("lang") == "zh") {
                    window.location.href = "FlowChart_CN.html?type=" + getUrlParam("type") + "&lang=" + getUrlParam("lang") + "&id=" + id + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                } else {
                    window.location.href = "FlowChart.html?type=" + getUrlParam("type") + "&lang=" + getUrlParam("lang") + "&id=" + id + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                }

            },
            invokeTask: function (id) {
                window.location.href = "executeTask.html?type=" + getUrlParam("type") + "&lang=" + getUrlParam("lang") + "&id=" + id + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper;
            },
        }
    });
    $.get(app.$data.backEndAddressServiceWrapper + "/queryTask?id=" + sId, function (result) {
        app.$data.task = result;
        app.$data.show = true;
    });
</script>
