<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center JNPF-flex-main" v-if="!formVisible">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="4">
                        <el-form-item label="流程名称">
                            <el-input v-model="listQuery.itsmProName" placeholder="请输入流程名称"
                                clearable @keyup.enter.native="getList()" @clear="getList()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="流程编号">
                            <el-input v-model="listQuery.itsmProKey" placeholder="请输入流程编号" clearable
                                @keyup.enter.native="getList()" @clear="getList()" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="类别">
                            <el-select v-model="listQuery.category" placeholder="请选择状态">
                                <el-option label="ITSM" value="1"></el-option>
                                <el-option label="自定义" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="企微启用">
                            <el-select v-model="listQuery.usedQywx" placeholder="请选择状态">
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="不启用" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="小程序启用">
                            <el-select v-model="listQuery.usedWx" placeholder="请选择状态">
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="不启用" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="getList()">
                                {{ $t("common.search") }}</el-button>
                            <el-button icon="el-icon-refresh-right"
                                @click="reset()">{{ $t("common.reset") }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head" style="justify-content: space-between;">
                    <div>
                        <el-button type="primary" @click="addFormVisible = true">新增并同步流程</el-button>
                        <el-button type="primary" @click="checkNewVersion"
                            :loading="checkNewVersionLoading">检查流程新版本</el-button>
                    </div>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="reset()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="tableData" :hasNO="true">
                    <el-table-column align="center" prop="icon" label="流程图标">
                        <template slot-scope="scope" sortable>
                            <img style="width: 40px;height: 40px;"
                                :src="minioPath+scope.row.icon"></img>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="itsmProName" label="流程名称" />
                    <el-table-column align="center" prop="itsmProKey" label="流程编号" />
                    <el-table-column align="center" prop="perfix" label="前缀">
                        <template slot-scope="scope" sortable>
                            <span>{{scope.row.perfix ||'无'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="proType" label="分组" />
                    <el-table-column align="center" prop="version" label="版本号" />
                    <el-table-column align="center" prop="hasNewVersion" label="是否有新版本">
                        <template slot-scope="scope" sortable>
                            <el-tag v-if="scope.row.hasNewVersion == '是'">是</el-tag>
                            <el-tag v-else type="danger">否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="updateTime" label="更新时间" />
                    <el-table-column align="center" label="操作" width="200" fixed="right">
                        <template slot-scope="scope" sortable>
                            <div
                                style="display: flex;align-items: center;justify-content: space-evenly">
                                <el-button style="width: 100%;margin-left: 10px;" size="mini"
                                    type="text" @click="editTeam(scope.row,scope.row.id)">流程配置
                                </el-button>
                                <el-button style="width: 100%;" size="mini" type="text"
                                    @click="synchronous(scope.row)">同步
                                </el-button>
                                <el-button style="width: 100%;color: #f56c6c" size="mini"
                                    type="text" @click="deleteProcess(scope.row)">删除
                                </el-button>
                            </div>
                        </template>

                    </el-table-column>
                </JNPF-table>
                <pagination :total="total" :page.sync="listQuery.currentPage"
                    :limit.sync="listQuery.pageSize" @pagination="getList" />

                <el-dialog title="新增同步流程" :visible.sync="addFormVisible" width="30%"
                    :before-close="()=>{addFormVisible = false, form.itsmProName = ''}">
                    <el-form @submit.native.prevent>
                        <el-form-item label="流程名称">
                            <el-select v-model="form.itsmProName" filterable remote reserve-keyword
                                placeholder="请输入流程名称(全名)" :remote-method="getProcessList"
                                :loading="formSelectLoading">
                                <el-option v-for="item in processList" :key="item.id"
                                    :label="item.processName" :value="item.processName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="formSubmit()">确 定</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="同步流程" :visible.sync="synchronousFormVisible" width="30%"
                    :before-close="()=>{synchronousFormVisible = false}">
                    <el-form @submit.native.prevent>
                        <el-form-item label="流程名称">
                            <el-select v-model="form.itsmProName" filterable remote reserve-keyword
                                placeholder="请输入流程名称(全名)" :remote-method="getProcessList">
                                <el-option v-for="item in processList" :key="item.id"
                                    :label="item.processName" :value="item.processName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="synchronousFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="synchronousFormSubmit()">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
        <Form v-if="formVisible" ref="Form" @close="closeForm" />

    </div>
</template>

<script>
import { getList, synchronizedProcessByName, findProcessList, processNewVersion, deleteProcessByKey } from "@/api/governmentCloud/processConfiguration/processConfiguration";
import Form from './Form'
import { minioPath } from '@/utils/apiUrl'

export default {
    name: "process-configuration",
    components: { Form },
    data() {
        return {
            minioPath: minioPath,
            tableData: [],
            listLoading: false,
            // organizeIdTree: [],
            addFormVisible: false,
            synchronousFormVisible: false,
            listQuery: {
                menuId: "581767763807176197", // 581767763807176197
                dataType: "0",
                sidx: "-updateTime",
                currentPage: 1,
                pageSize: 20,
                current: "1",
                category: '1',
                usedQywx: '1',
                usedWx: '1',
                itsmProKey: '',
                itsmProName: '',
            },
            form: {
                itsmProName: '',
                version: null
            },
            total: 0,
            formVisible: false,
            formSelectLoading: false,
            processList: [],
            checkNewVersionLoading: false
        };
    },
    watch: {},
    created() {
        this.getProcessList()
        this.getList();
    },
    methods: {
        deleteProcess(row) {
            console.log(row)
            this.$confirm("此操作将永久删除该流程, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let params = {
                        key: row.itsmProKey,
                        version: ''
                    }
                    deleteProcessByKey(params).then(async (res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                                duration: 1500
                            });
                            this.getList()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error",
                                duration: 1500
                            });
                        }
                    });
                })
                .catch(() => { });
        },
        getProcessList(name) {
            if (name) {
                this.formSelectLoading = true
                let params = {
                    name: name,
                    currentPage: 1,
                    pageSize: 1000
                }
                findProcessList(params).then(res => {
                    if (res.code == 200) {
                        console.log()
                        this.formSelectLoading = false
                        this.processList = JSON.parse(res.data).records
                    }
                })
            } else {
                this.options = [];
            }
        },
        checkNewVersion() {
            this.checkNewVersionLoading = true
            processNewVersion().then(res => {
                this.checkNewVersionLoading = false
                if (res.code == 200) {
                    this.$message({
                        message: "检查成功",
                        type: "success",
                        duration: 1500
                    });
                    this.getList();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                        duration: 1500
                    });
                }
            })
        },
        //编辑流程
        editFlow(item) {
            console.log(item)
            this.formVisible = true
            this.$refs.Form.init(item.itsmProKey)
        },
        synchronous(item) {
            console.log(item)
            this.form.itsmProName = item.itsmProName
            this.form.version = item.version
            this.synchronousFormVisible = true
        },
        synchronousFormSubmit() {
            let params = {
                name: this.form.itsmProName,
                isFirst: false,
                baseVersion: this.form.version
            }
            synchronizedProcessByName(params).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "同步成功",
                        type: "success",
                        duration: 1500
                    });
                    this.addFormVisible = false
                    this.getList();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                        duration: 1500
                    });
                }
            });
        },
        formSubmit() {
            let params = {
                name: this.form.itsmProName,
                isFirst: true,
            }
            synchronizedProcessByName(params).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "新增同步成功",
                        type: "success",
                        duration: 1500
                    });
                    this.addFormVisible = false
                    this.getList();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                        duration: 1500
                    });
                }
            });
        },
        getList() {
            this.listLoading = true;
            getList(this.listQuery)
                .then(res => {
                    this.tableData = []
                    this.tableData = res.data.list;
                    this.total = res.data.pagination.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        closeForm() {
            this.formVisible = false;
            this.reset()
        },
        addTeam() {
            this.formVisible = true;
            this.$nextTick(() => {
                this.$refs.Form.init("1");
            });
        },
        editTeam(row, id) {
            this.formVisible = true;
            console.log(row);
            console.log(id);
            this.$nextTick(() => {
                this.$refs.Form.init(row, id);
            });
        },
        deleteTeam(id) {
            delSysTeam(id).then(res => {
                this.$message({
                    message: "删除成功",
                    type: "success",
                    duration: 1500
                });
                this.listLoading = true;
                this.getList();
            });
        },
        reset() {
            this.listQuery = {
                menuId: "581767763807176197", // 581767763807176197
                dataType: "0",
                sidx: "-updateTime",
                currentPage: 1,
                pageSize: 20,
                current: "1",
                category: '1',
                usedQywx: '1',
                usedWx: '1',
                itsmProKey: '',
                itsmProName: '',
            },
                this.getList();
        }
    }
};
</script>
