<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="components/vue/vue-list :: head('权限列表', 'list')"></head>
<body>
<div id="app">
    <template>
        <div style="margin-left: 6px;margin-bottom: 6px;">
            <el-form :inline="true" :model="searchForm" style="margin: 0; padding: 0;">
                <el-form-item th:label="#{quartzJob.beanName}">
                    <el-input size="small" v-model="searchForm.beanName" th:placeholder="#{pleaseInput} + #{quartzJob.beanName}" clearable></el-input>
                </el-form-item>
                <el-form-item th:label="#{quartzJob.jobStatus}">
                    <el-select size="small" v-model="searchForm.jobStatus" th:placeholder="#{pleaseChoose}">
                        <el-option
                                v-for="item in jobStatusList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="doSearch"><span th:text="#{search}"></span></el-button>
                    <el-button size="mini" icon="el-icon-refresh" @click="doReset"><span th:text="#{reset}"></span></el-button>
                </el-form-item>
            </el-form>
            <el-button th:if="${#authorization.expression('hasAnyRole(''__${add}__'')')}" type="primary" size="mini"
                       icon="el-icon-plus" @click="doAdd"><span th:text="#{add}"></span>
            </el-button>
            <!--<el-button type="primary" size="mini" icon="el-icon-upload2" @click="doImport"><span th:text="#{import}"></span></el-button>
            <el-button type="primary" size="mini" icon="el-icon-download" @click="doExport"><span th:text="#{export}"></span></el-button>-->
        </div>
        <el-table border stripe size="medium" height="356" :data="tableData" highlight-current-row
                  style="font-size: 12px"
                  v-loading="tableLoading" cell-style="padding:1px">
            <el-table-column align="center" type="index" :index="indexSerial" width="50"></el-table-column>
            <!--<el-table-column align="center" prop="id" label="id" width="180"></el-table-column>-->
            <el-table-column align="center" prop="cronExpression" th:label="#{quartzJob.cronExpression}" width="180"></el-table-column>
            <el-table-column align="center" prop="jobName" th:label="#{quartzJob.jobName}" width="180" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="jobGroup" th:label="#{quartzJob.jobGroup}" width="180" :show-overflow-tooltip="true"></el-table-column>
            <!--<el-table-column align="center" prop="beanName" th:label="#{quartzJob.beanName}" width="240"
                             :show-overflow-tooltip="true"></el-table-column>-->
            <el-table-column align="center" prop="description" th:label="#{quartzJob.description}" width="180"></el-table-column>
            <!--<el-table-column align="center" prop="triggerName" th:label="#{quartzJob.triggerName}" width="180"></el-table-column>-->
            <el-table-column align="center" prop="jobStatus" th:label="#{quartzJob.jobStatus}" width="180" :formatter="formatJobStatus"></el-table-column>
            <el-table-column align="center" th:label="#{operation}" width="400">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" circle
                               @click="handleStartJob(scope.$index, scope.row)"><i class="fas fa-play"></i>
                    </el-button>
                    <el-button size="mini" type="primary" circle
                               @click="handleStopJob(scope.$index, scope.row)"><i class="fas fa-stop"></i>
                    </el-button>
                    <el-button th:if="${#authorization.expression('hasAnyRole(''__${edit}__'')')}" size="mini"
                               type="primary" icon="el-icon-edit" circle
                               @click="handleEdit(scope.$index, scope.row)">
                    </el-button>
                    <el-button th:if="${#authorization.expression('hasAnyRole(''__${delete}__'')')}" size="mini"
                               type="danger" icon="el-icon-delete" circle
                               @click="handleDelete(scope.$index, scope.row)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col class="toolbar" style="padding:10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
                           :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total"
                           style="float:right"></el-pagination>
        </el-col>
    </template>
</div>
</body>
<script th:src="@{/js/vue/common.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //Vue.http.options.emulateJSON = true;
    //Vue.http.options.emulateHTTP = true;
    var headerName = [[${_csrf.headerName}]];
    axios.defaults.headers.common[headerName] = [[${_csrf.token}]];

    //国际化
    international([[${session.locale}]]);

    var requestUrls = {
        list: "/api/quartzJobs/data",
        add: "/api/quartzJobs/add",
        edit: "/api/quartzJobs/edit",
        delete: "/api/quartzJobs",
        updateJobStatus: "/api/quartzJobs/updateJobStatus"
    };

    var app = new Vue({
        el: '#app',
        data: {
            jobStatusList: [[${jobStatusList}]],
            tableData: [],
            pageNo: 1,
            pageSize: 10,
            total: 1000,
            tableLoading: true,
            searchForm: {
                beanName: '',
                jobStatus: ''
            }
        },
        mounted: function () {
            this.loadData(this.pageNo, this.pageSize);
        },
        methods: {
            indexSerial(index) {
                return index + 1 + (this.pageNo - 1) * this.pageSize;
            },
            loadData(pageNo, pageSize) {
                if (!isNaN(pageNo)) {
                    this.pageNo = pageNo;
                }
                if (!isNaN(pageSize)) {
                    this.pageSize = pageSize;
                }
                var params_ = {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                };
                Object.assign(params_, this.searchForm);
                for (let key in params_) {
                    if (isArray(params_[key])) {
                        params_[key] = params_[key].join(',');
                    }
                }

                this.tableLoading = true;
                this.$http.get(requestUrls.list, {
                    params: params_
                }).then((response) => {
                    this.tableLoading = false;
                    this.total = parseInt(response.data.total);
                    this.tableData = [];
                    for (let key in response.data.rows) {
                        this.$set(this.tableData, key, response.data.rows[key]);
                    }
                }).catch((error) => {
                    this.tableLoading = false;
                    let errorMessage = [[#{requestError}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.showError(errorMessage);
                });
            },
            //每页显示数据量变更
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            //页码变更
            handleCurrentChange(val) {
                this.pageNo = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            doSearch(event) {
                this.pageNo = 1;
                this.loadData(this.pageNo, this.pageSize);
            },
            doReset(event) {
                for (let i in this.searchForm) {
                    this.searchForm[i] = null;
                }
                this.doSearch(event);
            },
            formatJobStatus(row, column) {
                let list = [[${jobStatusList}]];
                let value = row.jobStatus;
                for (let i = 0; i < list.length; i++) {
                    if (String(value) === String(list[i]["typeCode"])) {
                        return list[i]["typeName"];
                    }
                }
                return value;
            },
            handleStartJob(index, row) {
                parent.openLoading();
                this.$http.post(requestUrls.updateJobStatus, {
                    jobName: row.jobName,
                    jobGroup: row.jobGroup,
                    jobStatus: 1
                }).then((response) => {
                        parent.closeLoading();
                        parent.showSuccess([[#{quartzJob.operation.startSuccess}]]);
                        parent.updateListData();
                        closeLayer();
                    }).catch((error) => {
                    let errorMessage = [[#{requestError}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.closeLoading();
                    parent.showError(errorMessage);
                });
            },
            handleStopJob(index, row) {
                parent.openLoading();
                this.$http.post(requestUrls.updateJobStatus, {
                    jobName: row.jobName,
                    jobGroup: row.jobGroup,
                    jobStatus: 0
                }).then((response) => {
                    parent.closeLoading();
                    parent.showSuccess([[#{quartzJob.operation.stopSuccess}]]);
                    parent.updateListData();
                    closeLayer();
                }).catch((error) => {
                    let errorMessage = [[#{quartzJob.operation.stopFailed}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.closeLoading();
                    parent.showError(errorMessage);
                });
            },
            handleEdit(index, row) {
                parent.showWindow({
                    title: [[#{edit}]],
                    content: requestUrls.edit + "?jobName=" + row.jobName + "&jobGroup=" + row.jobGroup + "&cronExpression=" + row.cronExpression + "&description=" + row.description
                });
            },
            handleDelete(index, row) {
                parent.showDelete(index, row);
            },
            doAdd(event) {
                parent.showWindow({
                    title: [[#{add}]],
                    content: requestUrls.add
                });
            },
            doEdit(event) {

            },
            doDelete(index, row) {
                this.$http.delete(requestUrls.delete + "?jobName=" + row.jobName + "&jobGroup=" + row.jobGroup)
                    .then((response) => {
                        parent.showSuccess([[#{deleteSuccess}]]);
                        this.loadData(this.pageNo, this.pageSize);
                    }).catch((response) => {
                    console.error(response);
                });
            },
            doImport(event) {
                this.$http.get("/api/authorities/import", {}).then(function (response) {
                    this.$notify({
                        title: [[#{hint}]],
                        message: response.data.message,
                        position: 'bottom-right',
                        duration: 2000
                    });
                }).catch(function (response) {
                    console.error(response);
                });
            },
            doExport(event) {
                window.open("/api/authorities/export");
            }
        }
    });

    function iframeMethond(index, row) {
        console.log('iframeMethond');
        app.doDelete(index, row);
    }

    function iframeUpdateList() {
        app.loadData(app.pageNo, app.pageSize);
    }

    /*]]>*/
</script>
</html>