<template>
    <el-container>
        <el-main>
            <!--检索条件-->
            <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                <el-col :span="6">
                    <el-input v-model="queryinfo.name" placeholder="名称" style="width: 200px" clearable>
                        <template slot="prepend">名称</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="queryinfo.key" placeholder="key-ID" style="width: 200px" clearable>
                        <template slot="prepend">key-ID</template>
                    </el-input>
                </el-col>

                <el-col :span="8">
                    <el-button type="primary" v-on:click="getList">查询</el-button>
                    <el-button type="success" v-on:click="toAddDialog">新增</el-button>

                </el-col>
            </el-row>
            <el-row>
                <template>
                    <el-table
                            v-loading="tableloading"
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                            :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                    >
                        <el-table-column
                                prop="name"
                                label="名称"
                                width="160">
                        </el-table-column>
                        <el-table-column
                                prop="category"
                                label="类别">
                        </el-table-column>
                        <el-table-column
                                prop="key"
                                label="key-ID"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="id"
                                width="160"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="deploymentTime"
                                label="时间"
                                width="160">
                        </el-table-column>
                        <el-table-column
                                prop="filePath"
                                label="文件路径">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="280">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>
                                <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>
                                <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
            <!--分页模块-->
            <el-row style="float: right;margin-top: 20px">
                <el-col>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="queryinfo.pageNum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="queryinfo.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
<!--            新增弹框-->
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible" style="margin-top: -60px" width="60%">
                <el-form :model="formInline" :rules="rules" ref="formInline">
                    <el-row>
                        <el-col :offset="2" :span="12">
                            <el-form-item label="" :label-width="formLabelWidth">
                                <el-upload
                                        class="upload-demo"
                                        drag
                                        :action="uploadPath"
                                        :headers="uploadHeaderObj"
                                        :on-success="handleUploadSuccess">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传xml文件</em></div>
                                    <div class="el-upload__tip" slot="tip">只能上传xml文件，且不超过2MB</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="" :label-width="formLabelWidth">
                                <el-input v-model="formInline.filePath" disabled style="width: 220px">
                                    <template slot="prepend">路径</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="key">
                                <el-input v-model="formInline.key" style="width: 220px">
                                    <template slot="prepend">key</template>
                                </el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="" :label-width="formLabelWidth">
                                <el-input v-model="formInline.category" style="width: 220px">
                                    <template slot="prepend">类别</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="formInline.name " style="width: 220px">
                                    <template slot="prepend">名称</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="" :label-width="formLabelWidth">
                                <el-input v-model="formInline.tenantId " style="width: 220px">
                                    <template slot="prepend">租户</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
<!--                        <el-col :span="12">-->
<!--                            <el-form-item label="" :label-width="formLabelWidth">-->
<!--                                <el-input v-model="" style="width: 220px">-->
<!--                                    <template slot="prepend">其他</template>-->
<!--                                </el-input>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" align="center">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="trans_add">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>

</template>

<script>
    import {deployment, del,upload,create,uploadPath} from "../../api/technological";


    export default {
        name: "technological",
        data() {
            return{
                queryinfo:{
                    name:'',
                    key:'',
                    pageNum:1,
                    pageSize:10,
                },
                uploadPath:uploadPath,
                total:0,
                tableData: [],
                tableloading:false,
                formInline:{
                    filePath :'',
                    category:'',
                    key:'',
                    name:'',
                    tenantId:'',
                    variables: {},
                    // cascade:'true'
                },
                uploadHeaderObj: {
                    Authorization: window.sessionStorage.getItem("token"),
                },
                faceImageUrl:'',
                formLabelWidth: '120px',
                dialogFormVisible:false,
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    filePath : [
                        { required: true, message: '请上传文件', trigger: 'blur' }
                    ],
                    key : [
                        { required: true, message: '请输入部署key', trigger: 'blur' }
                    ],
                }
            }
        },
        mounted() {
            this.getList();
        },
        methods: {

            // 分页
            handleSizeChange(val) {
                this.queryinfo.pageSize= val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryinfo.pageNum  = val
                this.getList()
            },
            //查询
            getList() {
                const _this = this
                this.tableloading = true;
                deployment(this.queryinfo).then((response) => {
                    const res = response.data
                    if (res.code != '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data
                    // 获取列表的总记录数
                    _this.total = res.total
                    _this.$message.success('获取消息收发记录，成功！')
                    this.tableloading = false;
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                    this.tableloading = false;

                })
            },
            //打开新增
            toAddDialog() {
                this.dialogFormVisible = true;
                this.formInline = {
                    filePath :'',
                        category:'',
                        key:'',
                        name:'',
                        tenantId:'',
                        variables: {},
                    // cascade:'true'
                }
            },
            //上传文件
            handleUploadSuccess: function(response, file, fileList){
                let res = response.data;
                if (response.code !== '200') {
                    // 关闭加载
                    return this.$message.error(response.msg);
                }
                this.$message.success(response.msg);
                this.formInline.filePath = res.relativePath

            },
            //新增功能
            trans_add() {
                // 进行表单的预验证
                this.$refs.formInline.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    create(this.formInline).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            return this.$message.error(res.msg);
                            // 隐藏对话框
                            this.dialogFormVisible = false;
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.dialogFormVisible = false;
                        // 刷新列表
                        this.getList();
                    }).catch(error => {
                        this.$message.error(error.toString());
                    });
                })
            },
            //删除
            remove(index,row){
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    del({id:row.id,cascade:false}).then((response) => {
                        let res = response.data;
                        this.$message.success(res.msg);
                        this.getList();
                    }).catch(error => {
                        this.$message.error(res.msg);
                    });
                }).catch(() => {
                });
            },
            removeDel(index,row){
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    del({id:row.id,cascade:true}).then((response) => {
                        let res = response.data;
                        this.$message.success(res.msg);
                        this.getList();
                    }).catch(error => {
                        this.$message.error(res.msg);
                    });
                }).catch(() => {
                });
            },
            sendForm(){
                this.$router.push({path:'/example',query:{processDefinitionKey:this.queryinfo.key}});
            }
        }
    }
</script>

<style scoped>
    .toolbar{
        height: 60px;
        background-color: white;
        /*line-height: 60px;*/
        vertical-align: middle;
        border-radius: 5px 5px 5px 5px;
        padding: 15px 0 0 20px;
        box-shadow: 0px 5px 5px #e5e8eb;
    }
</style>