<template>
<div>
	<div class="query-box appProval">
		<ul>
			<li><span><em>所属公司</em>
					<el-select :disabled="IsParentCompany!=1" v-model="QueryMsg.BranchId" @change="getList()"  >
			            <el-option
			                v-for="item in companyList"
			                :label='item.BName'
			                :value='item.Id'
			                :key='item.Id'>
			            </el-option>
			        </el-select>					
				</span></li>
				<li>
					<!-- <input type="button" class="hollowFixedBtn" value="查询" @click="getList()"/> -->
				</li>
		</ul>
	</div>
	<div class="flexOne">
		<div class="approval_title">出勤休假(4)</div>
		<div class="approval_list" v-loading='loading'>
			<div class="approval_item" v-for="(item,index) in dataList">
				<img :src="item.Icon" width="86" style="float: left;margin: 17px 20px 0 0;" />
				<div class="approval_desDiv">
					<p class="tit">{{item.Name}}</p>
					<p class="des" v-html="item.describe"></p>
					<p class="tim">{{item.UpdateTime}}</p>
				</div>
				<div class="approval_fwDiv">
					<p>可见范围</p>
					<p class="updateP">全部可见</p>
				</div>
				<div class="approval_doDiv">
					<p>
						<button v-if='item.Status==1'  class="normalBtn" @click="goUrl('ApprovalProcess',item.Id)">审批流程</button> &nbsp;&nbsp;
						<button v-if='item.Status==1' @click="updateTempStatus(item.Id,item.TemplateType,item.Status)" class="hollowFixedBtn">{{$t('fnc.tingyong')}}</button>
						<button v-if='item.Status==2' @click="updateTempStatus(item.Id,item.TemplateType,item.Status)" class="hollowFixedBtn">{{$t('fnc.qiyong')}}</button>
					</p>
				</div>
			</div>
		</div>

	</div>
</div>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				//请求数据
				QueryMsg: {
					BranchId: '-1'
				},
				//返回数据
				dataList: [],
				companyList: [],
				IsParentCompany:2
			}
		},
		methods: {
			getList() {
				let describe = ['适用于请假申请，<br/>精确扣减出勤时间，并同步考勤报表', '适用于出差申请，<br/>精确汇总至考勤报表', '适用于外出申请，<br/>精确汇总至考勤报表', '当员工考勤出现缺卡时，可发起补卡审批，<br/>审批通过后考勤报表中的缺卡记录改为正常']
				this.apipost('WorkFlow_get_GetTemplateList', {BranchId:this.QueryMsg.BranchId}, res => {
					if(res.data.resultCode == 1) {
						this.loading=false;
						this.dataList = res.data.data[0].List;
						this.dataList.forEach((item, index) => {
							item.describe = describe[index]
						})

					}
				}, err => {})
			},
			getCompanyList() {
				let userInfo = this.getLocalStorage();
				let RB_Group_id = userInfo.RB_Group_id;
				let msg = {
					Status: 0,
					is_show: 0,
					RB_Group_Id: RB_Group_id
				}
				this.apipost('admin_get_BranchGetList', msg, res => {
					if(res.data.resultCode == 1) {
						res.data.data.forEach(x => {
							var obj = {
								Id: '',
								BName: ''
							}
							obj.Id = x.Id.toString();
							obj.BName = x.BName;
							this.companyList.push(obj);
						})
					}
				}, err => {})
			},
			updateTempStatus(id, type, status) {
				if(status == 1) {
					this.$confirm('是否停用?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.apipost('WorkFlow_post_SetTemplate', {
							Id: id,
							TemplateType: type,
							Status: 2,
							BranchId:this.QueryMsg.BranchId
						}, res => {
							if(res.data.resultCode == 1) {
								this.$message.success("已经停用")
								this.getList()
							} else {
								this.$message.error("操作失败")
							}
						}, err => {})
					}).catch(() => {
						this.$message.info('已取消停用')
					});
				}
				if(status == 2) {
					this.$confirm('是否启用?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.apipost('WorkFlow_post_SetTemplate', {
							Id: id,
							TemplateType: type,
							Status: 1,
							BranchId:this.QueryMsg.BranchId
						}, res => {
							if(res.data.resultCode == 1) {
								this.$message.success("启用成功")
								this.getList()
							} else {
								this.$message.error("操作失败")
							}
						}, err => {})
					}).catch(() => {
						this.$message.info('已取消启用')

					});
				}
			},
			goUrl (path,id) {
	            this.$router.push({ name: path,query:{"id":id,"Bid":this.QueryMsg.BranchId} }) 
			}
		},
		mounted() {
			let userInfo = this.getLocalStorage();
			this.QueryMsg.BranchId=userInfo.RB_Branch_id.toString();
			this.IsParentCompany=userInfo.IsParentCompany;
			let RefBranchId=this.$route.query.Bid;
			if(RefBranchId!=null&&this.IsParentCompany==1){
				this.QueryMsg.BranchId=RefBranchId.toString();
			}
			this.getCompanyList();
			this.getList()
		}
	}
</script>

<style>

	.approval_title {
		height: 14px;
		line-height: 14px;
		padding-left: 15px;
		border-left: 3px solid #E95252;
		margin: 30px 0;
	}
	
	.appProval .el-input__inner{
		height: 34px!important;
	}
	
	.approval_desDiv {
		float: left;
		width: 450px;
		height: 120px;
		padding: 15px 0;
		border-right: 1px dotted #DCDFE6;
	}
	
	.approval_item {
		height: 160px;
		padding: 20px;
		background: #fff;
		overflow: auto;
		border-radius: 8px;
		margin-bottom: 10px;
	}
	
	.approval_item p.tit {
		font-size: 18px;
		color: #333;
	}
	
	.approval_item p.des {
		font-size: 14px;
		color: #666;
		line-height: 22px;
	}
	
	.approval_item p.tim {
		font-size: 14px;
		color: #999;
		line-height: 22px;
	}
	
	.approval_fwDiv {
		float: left;
		width: 520px;
		height: 120px;
		padding: 50px 0;
		border-right: 1px dotted #DCDFE6;
	}
	
	.approval_fwDiv>p {
		text-align: center;
		font-size: 16px;
		color: #333;
	}
	
	.approval_fwDiv>p.updateP {
		font-size: 14px;
		color: #666;
		line-height: 24px;
	}
	
	.approval_doDiv {
		float: left;
		width: 500px;
	}
	
	.approval_doDiv>p {
		text-align: center;
		line-height: 120px;
	}
</style>