  <template>
   <d2-container>
    <div class="d2-table-view-full" >
       <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.seq" placeholder="规则编号" clearable/>
			   </el-form-item>
			   <el-form-item label="规则名称">
			     <el-input v-model="filter.resName" placeholder="规则名称" clearable/>
			   </el-form-item>
				   <el-form-item label="每月天数">
				   <el-input v-model="filter.resName" placeholder="每月天数" clearable/>
				 </el-form-item>
				 <el-form-item label="每日工时">
				   <el-input v-model="filter.resName" 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 size="small" @click="onMutilDelClick">批量删除</el-button>
					<!-- <el-button  size="small" type="primary">删除区域</el-button> -->
 				</div>
       <d2-crud
               title="区域管理列表"
               ref="d2Crud"
               :options="tableOptions"
               :loading="loading"
               :columns="columns"
               :data="data"
               :rowHandle="rowHandle"
               @delete="handleRowRemove"
							 @edit="handleRowEdit"
							  selection-row
							 @selection-change="handleSelectionChange">
       </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="35%"
     						:close-on-click-modal="false">
     			<el-form ref="form" :model="form" label-width="120px" labelPosition="left"  :rules="rules" >
     				<el-row :gutter="20">
     					<el-col :span="24">
     						<el-form-item label="区域名称" prop="resName">
     							<el-input v-model="form.resName" clearable/>
     						</el-form-item>
     					</el-col>
							<el-col :span="24">
								<el-form-item label-width="120px" label="是否为一级区域" prop="levelNum">
									<el-select v-model="form.levelNum" placeholder="请选择" clearable style="width: 100%;">
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
     					<el-col :span="24">
     						<el-form-item label="上级区域">
     							<el-input disabled v-model="form.superName" clearable/>
     						</el-form-item>
     					</el-col>
     					<el-col :span="24">
     						<el-form-item label="序号">
     							<el-input disabled v-model="form.seq" clearable/>
     						</el-form-item>
     					</el-col>
     					<el-col :span="24">
     						<el-form-item label="区域描述">
     							<el-input type="textarea" maxlength="50" v-model="form.remarks" clearable/>
     						</el-form-item>
     					</el-col>
     				</el-row>
     			</el-form>
     			<span slot="footer" class="dialog-footer">
     		<zl-button :loading="staLoading"  @click="operInstance('form')"/> 
     	</span>
     </el-dialog>
   </d2-container>
 </template>
 <script>
   import { treeNode,getPageList,saveOrUpdataList,deleteList,getList} from '../../../api/equ/area'
   import {tableOptions} from '../../../assets/options'
 	import util from '../../../libs/util'
   export default {
     name: 'system-address',
    /* components:{
       ApartmentTree,
 			teamShift
     }, */
     data () {
       return {
 					func:{
 					add:false,
 					delete:false,
 					update:false,
 					select:false,
 				},
				 resId:[],
				 multipleSelection:[],
				type:'equ',
 				imageUrl:'',
				quId:'',
				quName:'',
 				falg:true,
 				staLoading:false,
 				isExpend:true,
 				selection:[],
         tableOptions,
				 	options:[
				 	{ value: '0',label: '否'},{value: '1',label: '是'}
				 ],
         filterText:'',
         loading:false,
         operVisible:false,
         isEdit: false,
         diaLogName:'新增',
         form:{
 					 serialNo:'',
					 resId:'',
					 resName:'',	
					 levelNum:'0',	
					 seq:'',
					 parentId:'', 
					 superName:'',
					 remarks:''
         },
         filter:{
           seq:'',
           resName:'',
			 parentId:'',
           pageSize: 10,
           pageNum:1,
         },
         pagination:{
           total: 0
       },
         currentPage:1,
         columns: [
 					{
 						title: '序号',
 						key: 'index',
 						minWidth: '50',
 						formatter (row, column, cellValue, index) {
 							return index+1
 						}
 					},
           {
             title: '规则编号',
             key: 'seq',
             minWidth: '100',
 						showOverflowTooltip: true
           },
           {
             title: '规则名称',
             key: 'resName',
             minWidth: '100',
 						showOverflowTooltip: true
           },
           /* {
             title: '状态',
             key: 'status',
             minWidth: '80',
             showOverflowTooltip: true,
						 formatter (row, column, cellValue, index) {
						 	if(cellValue === "0"){
						 		return '禁用'
						 	}else if(cellValue === "1"){
						 		return '启用'
						 	} 
						 }
           }, */
 					{
 					  title: '每月天数',
 					  key: 'superName',
 					  minWidth: '100',
 					  showOverflowTooltip: true
 					},
					 {
					  title: '每日工时',
					  key: 'creTm',
					  minWidth: '150',
					  showOverflowTooltip: true
					}
         ],
         rowHandle: {
           columnHeader: '操作',
           minWidth: '200',
           align:'center',
          custom: [
 						{
 								text: '编辑',
 								type: 'primary',
 								size: 'small',
 								emit: 'edit'
 							},
 						{
 							 text: '删除',
 							 type: 'danger',
 							 size: 'small',
 							 emit: 'delete'
 						 }
            
           ],
 
         },
         data: [],
         	rules: {
           resName: [{ required: true, message: "请输入区域名称", trigger: "blur" }], 
					 levelNum: [{ required: true, message: "请选择", trigger: "change" }]
         }
       }
     },
		 watch:{
		   	'form.levelNum':function(val){
					if(val === '1'){
						this.form.parentId = ''
						this.form.superName = ''
					}else if(val === '0'){
						this.form.parentId = this.quId
						this.form.superName = this.quName
					}
				}
		 },
     methods: {
			 action(data){
				 if(data.alias === 'top'){
					 this.filter.parentId = ''
				 }else{
					 this.filter.parentId = data.id
				 }
				  this.falg = false
					this.quId = data.id
					this.quName = data.name
				  this.form.parentId = data.id
				  this.form.superName = data.name
			  this.handleList()
			 },
			 getOrgId(val){
			 	this.form.orgId = val
			 },
 			handleSelectionChange (selection) {
 			  this.selection = selection
 			},
       handleList (val) {
         if(val){this.filter.pageNum=1
         this.currentPage = 1
         }
         this.loading = true
         getPageList(this.filter).then(res=>{
           this.loading = false
           this.data = res.value.list
           this.pagination.total = res.value.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.resId?'编辑成功':'新增成功',
                 type: 'success'
               })
               this.handleList()
							 this.$nextTick(()=>{
								 this.$refs.Tree.handleTreeNode() 
							 })
             }).catch(err=>{
 							this.staLoading=false
 						})
           }
         })
       },
      handleRowEdit ({index, row}) {
        this.isEdit = true
         this.diaLogName = '编辑'
 				let resId = row.resId
 				getList({resId}).then(res=>{
 				   this.form=res.updateValue
					  this.operVisible = true
 				})
       },
       handleRowRemove ({index, row}) {
				 this.delete(row.resId)
       },
			  onMutilDelClick(){
			   if(!this.selection.length){
			     this.$message({
			       message: '请选择记录',
			       type: 'success'
			     })
			   } 
				   this.selection.forEach((item,index)=>{
				   this.resId.push(item.resId)
				 })
				 this.resId=this.resId.join(",")
				 this.delete(this.resId)
			 },
			 delete(resId){
				   this.$confirm(`确定要删除吗?`, '确认操作', {
				   confirmButtonText: '确定',
				   cancelButtonText: '放弃',
				   type: 'warning'
				 }).then(() => {
				   deleteList({resId}).then(res=>{
				     this.$message({
				       message: '删除成功',
				       type: 'success'
				     })
				    this.handleList()
						this.$nextTick(()=>{
							this.$refs.Tree.handleTreeNode() 
					 })
				   })
				 })
			 },
 			handleClick(){},
       clearForm () {
         this.form = {
 					serialNo:'',
 					resId:'',
 					resName:'',	
 					levelNum:'0',	
 					parentId:'', 	
					superName:'',
					seq:'',
 					remarks:''
         }
         this.isEdit = false
         this.diaLogName = '新增'
       }
     },  
     mounted () {
 			//this.getFunction()
 			//this.tableOptions.pageList = [20,50,100,200,500]
       this.filter.pageSize = this.tableOptions.pageList[0]
       this.tableOptions = this.$calcTableHeight(tableOptions,51)
 			this.handleList()
     }
   }
 </script>
  