<template>
    <div class="test_page">
        <!-- 下拉选择公司 -->
		<!-- <div class="company-select" v-if="companys !== '' && companys.length > 1">
			<el-dropdown
					trigger="click"
					@command="selectComPany"
			>
					<span class="el-dropdown-link">
							{{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
							<div v-for="item in companys" :key="item.id">
									<el-dropdown-item :command="item">{{item.companyName}}</el-dropdown-item>
							</div>
					</el-dropdown-menu>
			</el-dropdown>
		</div> -->
        <div class="searchArea">
            <el-form
                v-model="searchForm"
                inline
            >
                <el-form-item prop="type">
                    <el-select
                        v-model="searchForm.type"
                        size="small"
                        clearable
                        placeholder="流程类型">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.index"
                            :label="item.dictName"
                            :value="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="processCnName">
                    <el-input
                        v-model="searchForm.name"
                        size="small"
                        placeholder="流程名称"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="key">
                    <el-input
                        v-model="searchForm.key"
                        size="small"
                        placeholder="流程KEY"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="bigestVersion">
                    <el-checkbox v-model="searchForm.bigestVersion">查询最高版本</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="searchData"
                        size="small"
                        icon="el-icon-search"
                        v-privilege="activeMenu + 'QUERY'"
                    >查询</el-button>
                    <el-button
                        type="primary"
                        @click="refresh"
                        size="small"
                        icon="el-icon-refresh"
                        v-privilege="activeMenu + 'QUERY'"
                    >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tableArea">
            <el-table
                individual-columns="individual-vue-table-columns"
                :individual-info="individualInfo"
                drag-column="individual-vue-table"
                v-loading="tableLoading"
                ref="singleTable"
                :data="tableData"
                :height="tableHeight + 'px'"
                border
                class="yt-table-no-srcoll"
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column
                    width="80"
                    type="index"
                    label="序号"
                    align="center">
                </el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="type"
                    label="流程类型"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="name"
                    label="流程名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="key"
                    label="流程KEY"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="id"
                    label="流程名"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="version"
                    :show-overflow-tooltip="true"
                    label="版本"
                    align="center"
                    width="120"
                >
                    <template slot-scope="scope">
                        <el-tag style="min-width: 56px;">v{{scope.row.version}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="crtDate"
                    :show-overflow-tooltip="true"
                    label="创建时间"
                    align="center"
                    width="200"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    :show-overflow-tooltip="true"
                    width="100"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="editRow(scope.row, 'start')"
                            :disabled="scope.row['key'] !== 'leaveApplicatin' && scope.row['key'] !== 'countActicities'"
                            v-privilege="activeMenu + 'START'"
                        >发起</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="foot-style">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page='pageIndex'
                :page-sizes="[10, 20, 30, 40, 100, 200]"
                :page-size='pageSize'
                layout="total, sizes, prev, pager, next, jumper"
                :total='total'
            >
            </el-pagination>
        </div>
        <el-dialog
        	:visible.sync="dialogVisible"
        	:before-close="handleClose">
        	<userApplyStart
        		@on-then="handleClose"
                :companyId="companyId"
        		:dataItem="applyData"
        		:design="type"
                ref="userApplyStart">
        	</userApplyStart>
        </el-dialog>
        <el-dialog
            :visible.sync="dialogVisible2"
            :before-close="handleClose2">
            <countTaskApply
                @on-then="handleClose2"
                :companyId="companyId"
                :dataItem="applyData"
                :design="type"
                ref="countTaskApply">
            </countTaskApply>
        </el-dialog>
        <icore-individual :uiId="activeMenu" indexClass="individual-index"></icore-individual>
    </div>
</template>
<script>
import { checkCharLength, checkCharLength2, checkCharNoChinese, checkChar, checkChinese } from '@/utils/validator.js';
import userApplyStart from '../components/userApplyStart.vue'
import countTaskApply from '../components/countTaskApply.vue'
import store from '@/store/index.js';
export default {
    name: 'processManagement',
    components: {
    	userApplyStart, countTaskApply
    },
    data () {
        return {
            store,
            individualInfo: {},
            activeMenu: '',
            dialogFormVisible: false,
            tableLoading: false, // 表格loading
            dialogVisible: false, // 发起流程弹窗显示
            dialogVisible2: false, // 发起流程弹窗显示
            searchForm: {
                type: '',
                name: '',
                key: '',
                bigestVersion: true,
                queryType: '0'
            },
            tableData: [],
            applyData: [], // 行数据
            tableHeight: 0,
            formLabelWidth: '80px',
            pageSize: 20,
            pageIndex: 1,
            total: 0,
            type: '',
            companys: [], // 公司数组
            companyId: '',
            companyName: '',
            typeOptions: []
        }
    },
    watch: {
        'searchForm.bigestVersion': {
            immediate: true,
            handler (n, o) {
                if (n === true) {
                    this.searchForm.queryType = '0';
                } else {
                    this.searchForm.queryType = '1';
                }
            }
        }
    },
    mounted: function () {
        this.$nextTick(() => {
            this.tableHeight = this.getTreeHeight(this.$refs['singleTable'].$el) - 80;
        })
        // 获取公司信息
        this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
        this.companyId = window.top.localStorage.getItem('companyId');
        if (this.companyId !== '' && this.companyId !== null) {
            this.companyName = this.companys.find((x) => x.id === this.companyId).companyName;
        }
        this.searchData();
        this.getDictList();
    },
    // 获取菜单页面id
    created () {
        this.activeMenu = window.top.localStorage.getItem('activeMenu');
    },
    methods: {
        //  计算树区域高度
        getTreeHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 获取数据字典中-流程类型数据
        getDictList () {
            this.axios.get('pass/v1/sysdicts/listDict?pDictId=PROCESS_TYPE&status=1&companyId=' + this.companyId).then((res) => {
                if (res.code === '0') {
                    this.typeOptions = res.data.list
                } else {
                    this.$message.error(res.message)
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        editRow: function (row, type) {
            switch (type) {
                case 'start':
                    // this.goStart(row, 'start');
                    this.type = type;
                    this.applyData = row;
                    if (row.key === 'leaveApplicatin') {
                        this.dialogVisible = true;
                    } else if (row.key === 'countActicities') {
                        this.dialogVisible2 = true;
                    }
                    break;
                case 'end':
                	// 
                	break;
            }
        },
        // 关闭弹窗
        handleClose (status) {
            if (status === 'success') {
                this.$refs.userApplyStart.clearForm();
                this.dialogVisible = false;
            } else {
                this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogVisible = false;
                })
                .catch(_ => {});
            }
        },
        // 关闭弹窗
        handleClose2 (status) {
            if (status === 'success') {
                this.$refs.countTaskApply.clearForm();
                this.dialogVisible2 = false;
            } else {
                this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogVisible2 = false;
                })
                .catch(_ => {});
            }
        },
        // 重置搜索
        refresh () {
            for (let item in this.searchForm) {
                this.searchForm[item] = ''
            }
            this.searchData();
        },
        // 搜索
        searchData () {
            let that = this,
                searchData = {
                    pageNum: this.pageIndex,
                    pageSize: this.pageSize,
                    type: this.searchForm.type,
                    name: this.searchForm.name,
                    key: this.searchForm.key,
                    queryType: this.searchForm.queryType
                };
            that.getActList(searchData);
        },
        handleCurrentChange (pageIndex) {
            this.pageIndex = pageIndex
            this.searchData();
        },
        handleSizeChange (pageSize) {
            this.pageIndex = 1
            this.pageSize = pageSize;
            this.searchData()
        },
        cancel () {
            this.dialogFormVisible = false;
            this.cleraForm();
        },
        getActList (data) {
            let that = this;
            that.tableLoading = true;
            let url = data ? '&queryType=' + data.queryType : '';
            that.axios.get('pass/act/v1/actreprocdefs/like/?pageSize=100000000' + (data ? '&type=' + data.type + '&name=' + data.name + '&key=' + data.key : '') + '&companyId=' + this.companyId + url).then(res => {
                let data = [];
                if (res.code === '0') {
                    for (let i = 0; i < res.data.list.length; i++) {
                        if (res.data.list[i].suspended === false) {
                            let item = {};
                            item.type = res.data.list[i].type;
                            item.id = res.data.list[i].id;
                            item.name = res.data.list[i].name;
                            item.key = res.data.list[i].key;
                            item.crtDate = res.data.list[i].deploys[0].deploymentTime;
                            item.version = res.data.list[i].version;
                            data.push(item);
                        }
                    }
                    this.tableData = data.slice((this.pageIndex - 1) * this.pageSize, (this.pageIndex) * this.pageSize);
                    this.total = data.length;
                    this.tableLoading = false;
                } else {
                    that.$message.error(res.message);
                    that.tableLoading = false;
                }
            }).catch((err) => {
            	console.log(err);
                that.tableLoading = false;
            })
        },
        // 下拉选择公司
        selectComPany (command) {
            this.companyId = command.id;
            this.companyName = command.companyName;
            // 下拉选择了公司以后需要再重新调用下查询接口，重新获取数据
            this.getActList();
        }
    }
}
</script>
<style lang="less" scoped>
.test_page {
    padding: 15px;
    min-width: 1000px;
    position: relative;
    .tableArea {
		.el-table__row {
			height: 35px;
		}
	}
    .foot-style {
        margin: 5px 0 0;
        text-align: right;
    }
}
.tableButton {
    margin-bottom: 10px;
}
.el-form {
    .lineFormItem {
        width: 20%;
        display: inline-block;
        margin: 0 1%;
    }
    .buttonFormItem {
        width: 7%;
        display: inline-block;
    }
    .el-select {
        width: 100%;
    }
}
.company-select {
    position: absolute;
    right: 20px;
    top: 28px;
    .el-dropdown {
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
}
</style>
