<template>
	<d2-container>
		<div v-if="isExpend" class="d2-fl d2-tree-view" >
			 <pubilc-tree ref="Tree" :type="type" @orgId="getOrgId"  @action="action" @handleList='handleList'></pubilc-tree>
		 </div>
		<div @click="isExpend = !isExpend" :class="[{'angle-view':isExpend},{'angle-view-none':!isExpend}]">
			<i :class="['fa', {'fa-angle-left':isExpend},{'fa-angle-right':!isExpend}]"></i>
		</div>
	<div :class="[{'d2-fl':isExpend},{'d2-table-view':isExpend},{'d2-table-view-full':!isExpend}]" style="overflow: hidden">
		   <div class="d2-table-view-header">
		   <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
		     <el-form-item label="名称">
		       <el-input v-model="filter.depNm" placeholder="名称" clearable/>
		     </el-form-item>
		     <!-- <el-form-item label="机构编码">
		       <el-input v-model ="filter.orgCode" placeholder="机构编码" clearable/>
		     </el-form-item> -->
		     <el-form-item>
		       <el-button   type="primary" @click="handleList('1')">查询</el-button>
 		     </el-form-item>
		   </el-form>
		   </div>
		   <div class="d2-table-view-content">
				 <div class="d2-table-view-handle">
					 <el-button :disabled="falg" @click="operVisible = !operVisible" size="small" icon="el-icon-plus">新增</el-button>
					 <el-button type="primary" size="small" @click="exportFile()">导出</el-button>
				 </div>
		   <d2-crud
		           title="机构管理列表"
		           ref="d2Crud"
		           :options="tableOptions"
		           :loading="loading"
		           :columns="columns"
		           :data="data"
							 @delete="handleDelete"
							 @edit="handleEdit"
		           :rowHandle="rowHandle">
		   </d2-crud>
		   </div>
		   <div class="d2-table-view-footer">
		   <el-pagination
		           @current-change="handleCurrentChange"
		           @size-change="handleSizeChange"
		           :page-size="tableOptions.pageList[0]"
		           :page-sizes="tableOptions.pageList"
		           :current-page.sync="currentPage"
		           layout="total,sizes, prev, pager, next,jumper"
		           :total="pagination.total">
		   </el-pagination>
		   </div>
		 </div>
		 	 <el-dialog
		           :title="diaLogName"
		           :visible.sync="operVisible"
		           @close="clearForm"
		           width="50%"
		 					:close-on-click-modal="false">
		 		<el-form ref="form" :model="form" label-width="80px"   labelPosition="right" :rules="rules">
		 		  <el-row :gutter="20">
						<el-col :span="12">
						  <el-form-item label="编号" prop="depCode">
						    <el-input maxlength="8" :disabled="form.depId?true:false" v-model="form.depCode" placeholder="编号"/>
						  </el-form-item>
						</el-col>
		 				<el-col :span="12">
		 				  <el-form-item label="名称" prop="depNm">
		 				    <el-input maxlength="30"  v-model.trim="form.depNm" placeholder="名称"/>
		 				  </el-form-item>
		 				</el-col>
						<el-col :span="12">
						  <el-form-item label="上级" >
						    <el-input   disabled v-model.trim="form.parentNm" placeholder="上级"/>
						  </el-form-item>
						</el-col>
		 				<!-- <el-col :span="12">
		 				  <el-form-item label="机构编码" >
		 				    <el-input disabled  maxlength="12" v-model="form.orgCode" placeholder="系统自动生成"/>
		 				  </el-form-item>
		 				</el-col> -->
		 		   <el-col :span="12">
		 		      <el-form-item label="类别" prop="depTyp">
								<el-select v-model="form.depClasses" placeholder="请选择" disabled style="width: 100%;">
									<el-option    label="年级" value="0" />
									<el-option    label="班级" value="1" />
								</el-select>
		 		      </el-form-item>
		 		    </el-col>
		 				<el-col :span="12">
		 				<el-form-item label="负责人" prop="depLead" >
		 					 <el-input maxlength="30" v-model.trim="form.depLead" placeholder="请输入负责人"/>
		 				</el-form-item>
		 				</el-col>
							<el-col :span="12">
						<el-form-item label="联系方式" prop="mblNo" >
							 <el-input v-model.trim="form.mblNo" placeholder="请输入联系方式"/>
						</el-form-item>
						</el-col>
		 				<!-- <el-col :span="24">
		 				  <el-form-item label="机构描述">
		 				    <el-input type="textarea" maxlength="60" v-model="form.remarks"/>
		 				  </el-form-item>
		 				</el-col> -->
		 		  </el-row>
		 		</el-form>
		  <span slot="footer" class="dialog-footer">
		   <zl-button :loading="staLoading" @click="operInstance()"/> 
		 </span>
		   </el-dialog>
	</d2-container>
</template>

<script>
	import {tableOptions} from '../../../assets/options'
	import {userInfoList,saveOrUpdataList,getList,deleteList} from '../../../api/sys/organization'
	 import util from '../../../libs/util'
	export default {
		 name: 'system-organization',
		 data() {
			 let checkPhone = (rule, value, callback) => {
			  let reg = /^1[345789]\d{9}$/;
				let reg_1 = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
			  if (reg.test(value) || reg_1.test(value)) {
								  callback();
			  } else {
			     return callback(new Error("请输入正确的联系方式"));
			  }
			};
			 let checkOrgCode = (rule, value, callback) => {
			   let reg = /^\w+$/;
			   if (!reg.test(value)) {
			     return callback(new Error("请输入由数字或字母组成的正确编号"));
			   } else {
			     callback();
			   }
			 };
		 	return {
				options:[
					{ value: 'JG001',label: '行政机构'},{value: 'JG002',label: '年级'},{value: 'JG003',label: '班级'}
				],
				falg:true,
				type:'org01',
				staLoading:false,
				operVisible: false,
				diaLogName: '新增',
				loading:false,
		 		isExpend:true,//是否收缩
				tableOptions,
				filter:{
					depNm:'',
					orgCode:'',
					depId:'',
					orgId:'',
					depTyp:'JG002',
					pageSize:10,
					pageNum:1
				},
				  currentPage:1,
				 pagination:{ //分页参数
				    total: 0
				},
				columns: [
						{
						title: '序号',
						key: 'index',
						minWidth: '50',
						formatter (row, column, cellValue, index) {
							return index+1
						}
					},
					{
					  title: '班级编号',
					  key: 'depCode',
					  minWidth: '100',
						showOverflowTooltip: true
					},
					{
					  title: '班级名称',
					  key: 'depNm',
					  minWidth: '100',
						showOverflowTooltip: true
					},
					{
					  title: '上级部门',
					  key: 'parentNm',
					  minWidth: '100',
						showOverflowTooltip: true
					},
					{
					  title: '类别',
					  key: 'depClasses',
					  minWidth: '90',
					  showOverflowTooltip: true,
						formatter (row, column, cellValue, index) {
							 if(cellValue === '0'){
								 return '年级'
							 }else if(cellValue === '1'){
								 return '班级'
							 }
						}
					},
						{
					  title: '负责人',
					  key: 'depLead',
					  minWidth: '100',
						showOverflowTooltip: true
					},
						{
					  title: '联系方式',
					  key: 'mblNo',
					  minWidth: '100',
						showOverflowTooltip: true
					},
				],
				data:[],//列表数据
				rowHandle: {
				  columnHeader: '操作',
				  minWidth: '150',
				  align:'center',
				 custom: [
						 {
						 	 text: '编辑',
						 	 type: 'primary',
						 	 size: 'small',
						 	 emit: 'edit'
						  },
						{
							 text: '删除',
							 type: 'danger',
							 size: 'small',
							 emit: 'delete'
						 }
				 ]
				},
				 form: {
					depId:'',
					orgId:'',
					parentId:'',
					parentName:'',
					depNm:'',
					orgCode:'',
					depTyp:'JG002',
					depLead:'',
					mblNo:'',
					remarks:'',
					depCode:'',
					parentNm:''
				},
				rules: {
				  depNm: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
				  depCode: [{ required: true, validator: checkOrgCode, trigger: "blur" }],
					//depTyp: [{ required: true, message: "请输入机构类型", trigger: "change" }],
				  depLead: [{ required: true, message: "请输入负责人", trigger: "blur" }],
				  mblNo: [{ validator: checkPhone, required: true, trigger: "blur" }]
				}
		 	}
		 },
		 methods: {
			 //导出
			   exportFile () {
			   if (!this.data.length){
			     this.$message({
			       message: '页面无数据,无法导出',
			       type: 'error'
			     })
			     return false
			   }
			   const TOKENID = util.cookies.get('TOKENID')
				 const REQTM = '2019-06-14 18:00:00'
			   window.open(`${process.env.VUE_APP_API}/origin/downOriginByExcel?depNm=${this.filter.depNm}&orgId=${this.filter.orgId}&depId=${this.filter.depId}&depTyp=${this.filter.depTyp}&REQTM=${REQTM}&TOKENID=${TOKENID}`)
			 },
			 //查询
		 	handleList(val) {
		 		  if(val){this.filter.pageNum=1
		 		this.currentPage = 1
		 		}
		 		this.loading = true
				userInfoList(this.filter).then(res=>{
				  this.loading = false
				  this.data = res.page.list
				  this.pagination.total = res.page.total
				}).catch(err=>{
				  this.loading = false
				})
		 	},
			  handleCurrentChange (val) {
			  this.filter.pageNum = val
			  this.handleList()
			},
			handleSizeChange (val) {
			  this.filter.pageNum = 1
			  this.filter.pageSize = val
			  this.handleList()
			},
			//新增
			operInstance(){
				 this.$refs['form'].validate((valid) => {
				    if (valid) {
							this.staLoading=true
				      saveOrUpdataList(this.form).then(res=>{
								this.staLoading=false
				        this.operVisible = false
				        this.$message({
				          message: this.form.depId?'编辑成功':'新增成功',
				          type: 'success'
				        })
				        this.handleList()
								this.$nextTick(()=>{
									this.$refs.Tree.handleTreeNode()
								})
				      }).catch(err=>{
								this.staLoading=false
							})
				    }
				  })
			},
			handleDelete({inde,row}){
				this.$confirm(`确定要删除吗?`, '确认操作', {
				  confirmButtonText: '确定',
				  cancelButtonText: '放弃',
				  type: 'warning'
				}).then(() => {
				  let depId = row.depId
				  deleteList({
				    depId
				  }).then(res=>{
				    this.$message({
				      message: '删除成功',
				      type: 'success'
				    })
				    this.handleList()
						this.$nextTick(()=>{
							this.$refs.Tree.handleTreeNode()
						})
				  })
				})
			},
			handleEdit({index,row}){
				this.diaLogName = '编辑'
				let depId = row.depId
				getList({depId}).then(res=>{
					this.form = res.originDepVO
					this.operVisible = true
				})
			},
			action(data){
				if(data.alias === 'top'){
					this.form.depClasses = '0'
				}else{
						this.form.depClasses = '1'
				}
				this.falg = false
				this.form.parentNm = data.name
				this.form.parentId = data.id
				this.form.parentName = data.name
				this.filter.depId = data.id
				this.handleList()
			},
			getOrgId(val){
				this.form.orgId = val
			  this.filter.orgId = val
				this.filter.depId = val
			},
			clearForm(){
				this.form={
					depId:'',
					orgId:this.orgId,
					parentId:this.parentId,
					parentName:this.parentName,
					depNm:'',
					orgCode:'',
					depTyp:'JG002',
					depLead:'',
					mblNo:'',
					depClasses:this.form.depClasses,
					remarks:'',
					depCode:'',
					parentNm:this.form.parentNm
				}
			}
		 },
		mounted () {
			//this.handleList()
		  this.filter.pageSize = this.tableOptions.pageList[0]
		  this.tableOptions = this.$calcTableHeight(tableOptions,51)
		}
	}
</script>

<style>
</style>
