<template>
	<div class="_box">
		<!-- 下拉选择公司 -->
		<!-- <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="_title">流程状态激活与挂起<span></span></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"
				:data="tableData"
				v-loading="tableLoading"
				:height="tableHeight + 'px'"
				style="width: 100%" 
				ref="table"
				border
				sortable
				highlight-current-row>
				<el-table-column
					width="80"
					type="index"
					label="序号"
					align="center">
				</el-table-column>
				<!-- tableKey表示为根据获取的tableData设置的header显示值列表 -->
				<el-table-column
					v-for ="(item, index) of tableKeys"
					:key="index"
					:label="item.label"
					:prop="item.key"
					:fixed="item.fixed"
					:width="item.width"
					header-align="center"
					align="center"
					sortable
					show-overflow-tooltip>
					<template slot-scope="scope">
	                    <span v-for="item in suspendedStatus" :key="item.value" :class="item.class" v-if="scope.column.property === 'suspended' && scope.row.suspended === item.value">
	                        {{item.label}}
	                    </span>
	                    <el-tag v-if="scope.column.property === 'version'" style="min-width: 56px;">v{{scope.row.version}}</el-tag>
	                    <span v-if="scope.column.property !== 'suspended' && scope.column.property !== 'version'">
	                    	{{scope.row[scope.column.property]}}
	                    </span>
	                </template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="center"
					width="180">
					<template slot-scope="scope">
						<el-button
							:disabled="scope.row.suspended === false"
							type="text"
							size="small"
							@click="goDeal(scope.row, 'alive')"
							v-privilege="activeMenu + 'OPERATE'"
						>激活</el-button>
						<el-button
							:disabled="scope.row.suspended === true"
							type="text"
							size="small"
							@click="goDeal(scope.row, 'hang')"
							v-privilege="activeMenu + 'OPERATE'"
						>挂起</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>
		<icore-individual :uiId="activeMenu" indexClass="individual-index"></icore-individual>
	</div>
</template>

<script>
import store from '@/store/index.js';
	export default {
		data () {
			return {
				individualInfo: {},
				store,
				activeMenu: '',
				searchForm: {
					type: '',
	                name: '',
	                key: '',
	                bigestVersion: true,
	                queryType: '0'
	            },
	            // 激活挂起状态样式
	            suspendedStatus: [
	                {
	                    value: false,
	                    label: '● 已激活',
	                    class: 'green'
	                }, {
	                    value: true,
	                    label: '● 已挂起',
	                    class: 'red'
	                }
	            ],
				tableData: [],
				tableLoading: false,
				tableHeight: 0,
				tableKeys: [],
				pageSize: 20, // 默认每页显示条数
				pageIndex: 1, // 默认当前页
				total: 0, //数据总数
				companys: [], // 公司数组
				companyId: '',
				companyName: '',
				typeOptions: []
			}
		},
		watch: {
	        'searchForm.bigestVersion': {
	            immediate: true,
	            handler (n, o) {
	                if (n === true) {
	                    this.searchForm.queryType = '0';
	                } else {
	                    this.searchForm.queryType = '1';
	                }
	            }
	        }
	    },
		created () {
			this.activeMenu = window.top.localStorage.getItem('activeMenu');
		},
		mounted () {
			this.$nextTick(() => {
				this.tableHeight = this.getTreeHeight(this.$refs['table'].$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();
		},
		methods: {
			//  计算树区域高度
			getTreeHeight (dom) {
				return window.innerHeight - dom.offsetTop;
			},
			// 重置搜索
	        refresh () {
	            for (let item in this.searchForm) {
	                this.searchForm[item] = ''
	            }
	            this.searchData();
	        },
	        // 获取数据字典中-流程类型数据
	        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)
	            })
	        },
	        // 搜索
	        searchData () {
	            let that = this,
	                searchData = {
	                	type: this.searchForm.type,
	                    name: this.searchForm.name,
	                    key: this.searchForm.key,
	                    queryType: this.searchForm.queryType
	                };
	            that.tableLoading = true;
	            that.getTableData(searchData);
	        },
			// 获取待办任务
			getTableData (data) {
				this.tableLoading = true;
				this.tableKeys = [
					{
	                    key: 'type',
	                    label: '流程类型',
	                    width: 'auto'
	                },
					{
						key: 'name',
						label: '流程名称',
						width: 'auto'
					},
					{
						key: 'key',
						label: '流程Key',
						width: 'auto'
					},
					{
						key: 'id',
						label: '流程id',
						width: 'auto'
					},
					{
						key: 'version',
						label: '流程版本',
						width: 'auto'
					},
					{
						key: 'suspended',
						label: '状态',
						width: 'auto'
					},
					{
						key: 'crtDate',
						label: '创建时间',
						width: 'auto'
					}
				]
				let url = data ? '&queryType=' + data.queryType : '';
				this.axios.get('pass/act/v1/actreprocdefs/like/?pageSize=' + this.pageSize + '&pageNum=' + this.pageIndex + (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++) {
                            let item = {};
                            item.id = res.data.list[i].id;
                            item.type = res.data.list[i].type;
                            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;
                            item.suspended = res.data.list[i].suspended;
                            data.push(item);
                        }
                        this.tableData = data;
		                this.total = res.data.total;
		                this.tableLoading = false;
					} else {
						this.$message.error(res.message);
						this.tableLoading = false;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			// 激活挂起
			goDeal (data, status) {
				switch (status) {
					// 激活
					case 'alive':
						this.axios.get('pass/act/v1/act/activateProcessDefinition/' + data.id).then((res) => {
							if (res.code === '0') {
								this.$message.success('激活成功');
								this.searchData();
							} else {
								this.$message.error(res.message);
							}
						}).catch((err) => {
							console.log(err);
						}) 
						break;
					// 挂起
					case 'hang':
						this.axios.get('pass/act/v1/act/suspendProcessDefinition/' + data.id).then((res) => {
							if (res.code === '0') {
								this.$message.success('挂起成功');
								this.searchData();
							} else {
								this.$message.error(res.message);
							}
						}).catch((err) => {
							console.log(err);
						}) 
						break;
				}
			},
			// 当前页
			handleCurrentChange (pageIndex) {
				this.pageIndex = pageIndex
				this.searchData();
			},
			// 每页条数
			handleSizeChange (pageSize) {
				// this.pageIndex = 1
				this.pageSize = pageSize;
				this.searchData();
			},
			// 下拉选择公司
			selectComPany (command) {
				this.companyId = command.id;
				this.companyName = command.companyName;
				// 下拉选择了公司以后需要再重新调用下查询接口，重新获取数据
				this.getTableData();
			}
		}
	}
</script>

<style lang="less" scoped>
	._box {
		padding: 15px;
		min-width: 1000px;
    	position: relative;
		._title {
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    margin-top: 0px;
		    font-size: 18px;
		    padding-left: 15px;
		    position: relative;
			span {
		        display: block;
		        position: absolute;
		        width: 5px;
		        height: 30px;
		        background: #409EFF;
		        left: 0px;
		        top: 0px;
		    }
		}
		.tableArea {
			.el-table__row {
				height: 35px;
				.green {
				    color: #67C23A;
				}
				.red {
				    color: #F56C6C;
				}
			}
		}
		.foot-style {
			margin: 5px 0 0;
			text-align: right;
		}
	}
	.company-select {
	    position: absolute;
	    right: 20px;
	    top: 28px;
	    .el-dropdown {
	        font-weight: bold;
	        font-size: 14px;
	        cursor: pointer;
	    }
	}
</style>
