  <template>
   <d2-container>
     <div v-if="isExpend" class="d2-fl d2-tree-view" >
        <pubilc-tree ref="Tree" :type="type"    @action="action" ></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.eqpNo" placeholder="设备机号" clearable/>
         </el-form-item>
         <el-form-item label="设备名称">
           <el-input v-model="filter.eqpNm" placeholder="设备名称" clearable/>
         </el-form-item>
       				 <el-form-item label="设备类型">
       				   <custom-select typeName="设备类型" :isAll="true" :value="filter.eqpTyp" v-model="filter.eqpTyp"></custom-select>
       				 </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" :disabled="isDisabled" @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="60%"
     						:close-on-click-modal="false">
     			<el-form ref="form" :model="form" label-width="100px" labelPosition="right" :rules="rules">
     				<el-row :gutter="20">
     					<el-col :span="8">
     						<el-form-item label="设备序列号"  prop="serialNo">
     							<el-input :disabled="form.eqpId ? true:false"  v-model="form.serialNo" maxlength="16" />
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="设备机号" prop="eqpNo">
     							<el-input :disabled="form.eqpId ? true:false"  v-model="form.eqpNo"  maxlength="8" clearable/>
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="设备类型" prop="eqpTyp" clearable>
     							<custom-select :value="form.eqpTyp" v-model="form.eqpTyp" typeName="设备类型" />
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="设备名称" prop="eqpNm">
     							<el-input maxlength="30"  v-model="form.eqpNm" clearable/>
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="城市代码" prop="cityId">
     							<el-input v-model="form.cityId" clearable maxlength='4'/>
     						</el-form-item>
     					</el-col>
							 <el-col :span="8">
							<el-form-item label="前置机IP地址" prop="lnkPcIp" clearable>
								  <el-input   v-model="form.lnkPcIp" clearable/>
							</el-form-item>
							</el-col>
     					<el-col :span="8">
     						<el-form-item label="前置机端口" prop="lnkPcPort" clearable>
     						  <el-input v-model="form.lnkPcPort" clearable/>
     						</el-form-item>
     					</el-col>
     				  <el-col :span="8">
     					<el-form-item label="钱包" prop="consumeTyp" >
     					  <el-select v-model="form.consumeTyp" placeholder="请选择" clearable style="width: 100%;" >
     						<el-option label="余额" value="0"></el-option>
     						<el-option label="银行卡" value="1"></el-option>
     					  </el-select>
     					</el-form-item>
     				  </el-col>
     					<el-col :span="8">
     						<el-form-item label="通信密匙" prop="currentKey">
     							<el-input v-model="form.currentKey" clearable />
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="版  本  号" prop="version">
     							<el-input disabled  v-model="form.version" />
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="设备状态" prop="eqpSts" >
     							<el-select v-model="form.eqpSts" placeholder="请选择" clearable style="width: 100%;" >
     							<el-option label="开启" :value="1"></el-option>
     							<el-option label="禁用" :value="0"></el-option>
     							</el-select>
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="签到间隔" prop="eqpInt">
     							<el-input  v-model="form.eqpInt" maxlength="10" clearable/>
     						</el-form-item>
     					</el-col>
     				 	<el-col :span="8">
     						<el-form-item label="心跳阀值(秒)" prop="heartbeat" label-width="130px">
     							<el-input type="number" min="0" v-model="form.heartbeat" clearable/>
     						</el-form-item>
     					</el-col>
						<el-col :span="8">
							<el-form-item label="超时未响应阀值(秒)" prop="overtime" label-width="150px">
								<el-input  v-model="form.overtime" clearable type="number" min="0"/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="重发次数阀值(次)" prop="againsend" label-width="130px">
								<el-input  v-model="form.againsend" clearable type="number" min="0"/>
							</el-form-item>
						</el-col>
     					<el-col :span="8">
     						<el-form-item label="开启注册" prop="openReg"  >
     							<el-select v-model="form.openReg" placeholder="请选择" clearable style="width: 100%;">
     							<el-option label="开启" value="1"></el-option>
     							<el-option label="禁用" value="0"></el-option>
     							</el-select>
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="设备区域" >
     							<el-input disabled v-model="form.resName"  />
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="签到次数" prop="signCnt">
     							<el-input maxlength="10" v-model="form.signCnt" clearable/>
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="门类型" prop="doorType"   >
     							<el-select v-model="form.doorType" placeholder="请选择" clearable style="width: 100%;">
									<el-option label="无门" value="0"></el-option>
     							<el-option label="单门" value="1"></el-option>
     							<el-option label="双门" value="2"></el-option>
     							<el-option label="三门" value="3"></el-option>
     							<el-option label="四门" value="4"></el-option>
     							</el-select>
     						</el-form-item>
     					</el-col>
     					<el-col :span="8">
     						<el-form-item label="所属机构" prop="deptId">
     							<department-tree   ref="saffTree" :str="form.orgNm" v-model="form.deptId"  :type="false"  ></department-tree>
     						</el-form-item>
     					</el-col>
     					<!-- <el-col :span="8">
     						<el-form-item label="重发时间(秒)" prop="overtime">
     							<el-input  v-model="form.overtime" clearable/>
     						</el-form-item>
     					</el-col> -->
     					<el-col :span="8">
     						<el-form-item label="商户选择" prop="useOrgId" >
     							<mt-tree :str="form.useOrgName" v-model="form.useOrgId" ref="mtTree"/>
     						</el-form-item>
     					</el-col>
     					<!-- <el-col :span="8">
     						<el-form-item label="SIM卡编号" prop="simCode" >
     							<el-input  v-model="form.simCode" clearable/>
     						</el-form-item>
     					</el-col> -->
     					<el-col :span="24">
     						<el-form-item label="设备描述">
     							<el-input type="textarea" maxlength="100" v-model="form.rmk"/>
     						</el-form-item>
     					</el-col>
     				</el-row>
     			</el-form>
     			<span slot="footer" class="dialog-footer">
     		<zl-button :loading="staLoading" @click="operInstanceEqu('form')"/> 
     		</span>
     </el-dialog>
   </d2-container>
 </template>
 <script>
    import {getPageList,saveOrUpdataList,deleteList,getList} from '../../../api/equ/register'
   import {tableOptions} from '../../../assets/options'
 	import util from '../../../libs/util'
   export default {
     name: 'system-address',
    /* components:{
       ApartmentTree,
 			teamShift
     }, */
     data () {
       let checkNumber = (rule, value, callback) => {
         if(!value&&value!==0){
           return callback(new Error('不能为空'))
         }
         let reg = /^[0-9]*$/
         if (!reg.test(value)) {
           return callback(new Error('请输入数字'))
         } else {
           callback ()
         }
       }
			  let checkAddress = (rule, value, callback) => {
			         if (value || (!value && this.form.eqpTyp !== '6')) {
			           let reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/
			           if (!reg.test(value)) {
			             return callback(new Error('请输入正确的IP地址'))
			           } else {
			             callback ()
			           }
			         } else {
			           if (this.form.eqpTyp === '6') {
			             callback ()
			           }
			 	}
			       }
			       let checkPort = (rule, value, callback) => {
			         if (value || !value && this.form.eqpTyp !== '6') {
			           let reg = /^\+?[1-9][0-9]*$/
			           if (!reg.test(value)) {
			             return callback(new Error('请输入正确的端口号'))
			           } else {
			             callback ()
			           }
			 	} else {
			           if (this.form.eqpTyp === '6') {
			             callback ()
			           }
			 	}
			       }
			 		let checkclockserialno = (rule, value, callback) => {
			 		 let reg =  /^[0-9]*$/
			 		 if(value == ''){
			 			 return callback(new Error('请输入设备序列号'))
			 		 }else if(!reg.test(value)){
			 			 return callback(new Error('设备序列号由数字组成'))
			 		 }else{
			 			 callback ()
			 		 }
			 		}
			 let checkCityCode = (rule, value, callback) => {
			 let reg =  /^[0-9]*$/
			 if(value == ''){
			 	return callback(new Error('请输入城市代码'))
			 }else if(!reg.test(value)){
			 	return callback(new Error('城市代码由4位以下数字组成'))
			 }else{
			 	callback ()
			 }
			 }
			 let checkBeforecodeKey = (rule, value, callback) => {
			 let reg =  /^\d{16}$/
			 if(value == ''){
			 	return callback(new Error('请输入通信密钥'))
			 }else if(!reg.test(value)){
			 	return callback(new Error('通信密钥由16位数字组成'))
			 }else{
			 	callback ()
			 }
			 }
       return {
				 isDisabled:false,
 					func:{
 					add:false,
 					delete:false,
 					update:false,
 					select:false,
 				},
				type:'equ',
 				imageUrl:'',
 				falg:true,
 				staLoading:false,
 				isExpend:true,
 				selection:[],
         tableOptions,
         filterText:'',
         loading:false,
         operVisible:false,
         isEdit: false,
         diaLogName:'新增',
         filter:{
           eqpNo:'',
           eqpNm:'',
					 eqpTyp:null,
           pageSize: 10,
           pageNum:1,
					 resId:''
         },
         pagination:{
           total: 0
       },
         currentPage:1,
         columns: [
 					{
 						title: '序号',
 						key: 'index',
 						minWidth: '50',
 						formatter (row, column, cellValue, index) {
 							return index+1
 						}
 					},
           {
             title: '设备序列号',
             key: 'serialNo',
             minWidth: '160',
 						showOverflowTooltip: true
           },
					  {
					   title: '设备名称',
					   key: 'eqpNm',
					   minWidth: '140',
					   showOverflowTooltip: true
					 },
           {
             title: '设备机号',
             key: 'eqpNo',
             minWidth: '100',
 						showOverflowTooltip: true
           },
           {
             title: '类型',
             key: 'eqpTyp',
             minWidth: '80',
             showOverflowTooltip: true,
						  formatter (row, column, cellValue, index) {
						  		if(cellValue === '1'){
						  			return '补贴机'
						  		}else if(cellValue === '2'){
						  			return '考勤机'
						  		}else if(cellValue === '3'){
						  			return '考勤门禁机'
						  		}else if(cellValue === '4'){
						  			return '门禁机'
						  		}else if(cellValue === '5'){
						  			return '人脸机'
						  		}else if(cellValue === '6'){
						  			return '发卡机'
						  		}else if(cellValue === '0'){
						  			return '消费机'
						  		}     
						  	}
           },
 					{
 					  title: '状态',
 					  key: 'eqpSts',
 					  minWidth: '100',
 					  showOverflowTooltip: true,
						 formatter (row, column, cellValue, index) {
							if(cellValue === 0){
								return '关闭'
							}else if(cellValue === 1){
								return '开启'
							}   
						}
 					},
					{
					  title: '区域',
					  key: 'resName',
					  minWidth: '100',
					  showOverflowTooltip: true
					},
					 {
					  title: '登记日期',
					  key: 'creTm',
					  minWidth: '180',
					  showOverflowTooltip: true
					}
         ],
         rowHandle: {
           columnHeader: '操作',
           minWidth: '200',
           align:'center',
          custom: [
 						{
 								text: '编辑',
 								type: 'primary',
 								size: 'small',
 								emit: 'edit'
 							},
 						{
 							 text: '删除',
 							 type: 'danger',
 							 size: 'small',
 							 emit: 'delete'
 						 }
            
           ],
 
         },
         data: [],
				 eqpId:[],
				  form:{
						eqpNm:'',	
						eqpNo:'',
						serialNo:'',	
						eqpTyp:'',	
						cityId:'',
						lnkPcIp:'',
						lnkPcPort:'',
						consumeTyp:'',
						signCnt:'',	
						version:'10',	
						eqpSts:'',
						eqpInt:'',
                    heartbeat:"",
                    againsend:"",
                    overtime:"",
						eqpIntCnt:'',	
						openReg:'',
                    deptId:'',
						doorType:'',
						rmk:'',
						eqpId:'',
						currentKey:'0000000000000000',
						orgNm:'',
						resName:'',
						resId:'',
                    useOrgId:'',
                    useOrgName:''
				 },
         	rules: {
					serialNo: [{ validator: checkclockserialno, trigger: 'blur' }],
          eqpNo: [{ validator:checkNumber,required: true,trigger: 'blur' }],
          eqpNm:[{ required: true, message: '请输入设备名称', trigger: 'blur' }],
          eqpTyp:[{ required: true, message: '请选择设备类型', trigger: 'change' }],
          cityId:[{ validator:checkCityCode, trigger: 'blur' }],
          currentKey:[{ validator: checkBeforecodeKey, trigger: 'blur' }],
         lnkPcIp:[{ validator: checkAddress, trigger: 'blur' }],
          lnkPcPort:[{ validator: checkPort, trigger: 'blur' }],
          //consumeTyp:[{ required: false, message: '请选择钱包', trigger: 'change' }],
          versioin:[{ required: true, message: '请输入版本号', trigger: 'blur' }],
          eqpInt:[{ required: true, message: '请输入签到间隔', trigger: 'blur' }],
              heartbeat:[{ required: true, message: '请输入心跳阀值', trigger: 'blur' }],
              overtime:[{ required: true, message: '请输超时未响应值', trigger: 'blur' }],
              againsend:[{ required: true, message: '请输入重发次数阀值', trigger: 'blur' }],
          //againsend:[{ required: true, message: '请输入签到重发次数', trigger: 'blur' }],
          eqpIntCnt:[{ required: true, message: '请输入数据包发送间隔时间', trigger: 'blur' }],
          //overtime:[{ required: true, message: '请输入数据包重发未响应间隔时间', trigger: 'blur' }],
              deptId:[{ required: true, message: '请输入所属机构', trigger: 'blur' }],
          eqpSts:[{ required: true, message: '请选择设备状态', trigger: 'change' }],
          /* resName:[{ required: true, message: '请输入设备区域', trigger: 'blur' }], */
          openReg:[{ required: true, message: '请选择是否开启注册', trigger: 'change' }]
         }
       }
     },
     methods: {
			 action(data){
				this.falg = false
				/* this.quId = data.id
				this.quName = data.name */
				if(data.alias === 'top'){
					this.filter.resId = ''
				}else{
				  this.filter.resId = data.id
				}
				this.form.resId = data.id
				this.form.resName = data.name
			  this.handleList()
			 },
 			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.pageValue.list
           this.pagination.total = res.pageValue.total
         }).catch(err=>{
           this.loading = false
         })
       },
		 
       //导出
			/* exportOperation(){
				  if (!this.data.length){
				   this.$message({
				     message: '页面无数据,无法导出',
				     type: 'error'
				   })
				   return false
				 }
				 const TOKENID = util.cookies.get('TOKENID')
				 //const TOKENID = '20190607000000ongaognaon'
				 const REQTM = '2019-06-14 18:00:00'
				 //const USERID = util.cookies.get('USERID')
				 window.open(`${process.env.VUE_APP_API}/student/downStaffExcel?userNo=${this.filter.userNo}&nickNm=${this.filter.nickNm}&REQTM=${REQTM}&TOKENID=${TOKENID}`)
			 }, */
       handleCurrentChange (val) {
         this.filter.pageNum = val
         this.handleList()
       },
       handleSizeChange (val) {
         this.filter.pageNum = 1
         this.filter.pageSize = val
         this.handleList()
       },
       operInstanceEqu () {
         // console.log(this.form.deptId)
				 if(this.form.eqpTyp == '5'){
				 	if(this.form.doorType == ''){
				 		this.$message({
				 			message:'请选择门类型',
				 			type: 'error'
				 		})
				 		return false
				 	}
				 }else if(this.form.eqpTyp == '1' || this.form.eqpTyp == '0'){
				   // console.log(this.form.sId)
				 	if(this.form.useOrgId == ''){
				 		this.$message({
				 			message:'请选择商户',
				 			type: 'error'
				 		})
				 		return false
				 	}
				 	if(this.form.consumeTyp == ''){
				 		this.$message({
				 			message:'请选择钱包',
				 			type: 'error'
				 		})
				 		return false
				 	}
				 }
      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.eqpId?'编辑成功':'新增成功',
                 type: 'success'
               })
               this.handleList()
             }).catch(err=>{
 							this.staLoading=false
 						})
           }
         })
       },
      handleRowEdit ({index, row}) {
        this.isEdit = true
         this.diaLogName = '编辑'
 				let eqpId = row.eqpId
 				getList({eqpId}).then(res=>{
 				   this.form=res.updateValue
					 this.operVisible = true
 				})
         
       },
			    handleRowRemove ({index, row}) {
			 				 this.delete(row.eqpId)
			   },
			  onMutilDelClick(){
						this.isDisabled = true
					setTimeout(() => {
					  this.isDisabled = false
					}, 2000)
			   if(!this.selection.length){
			     this.$message({
			       message: '请选择记录',
			       type: 'success'
			     })
					 return false
			   } 
				 this.eqpId = []
					 this.selection.forEach((item,index)=>{
					 this.eqpId.push(item.eqpId)
				 })
				 this.eqpId=this.eqpId.join(",")
				 this.delete(this.eqpId)
			 },
			 delete(eqpId){
						 this.$confirm(`确定要删除吗?`, '确认操作', {
						 confirmButtonText: '确定',
						 cancelButtonText: '放弃',
						 type: 'warning'
					 }).then(() => {
						 deleteList({eqpId}).then(res=>{
							 this.$message({
								 message: '删除成功',
								 type: 'success'
							 })
							this.handleList()
							this.$nextTick(()=>{
								this.$refs.Tree.handleTreeNode() 
						 })
						 })
					 })
			 },
 			handleClick(){},
       clearForm () {
         if (this.$refs['form']!==undefined) {
           this.$refs['form'].resetFields()
         }
				 this.$nextTick(()=>{
					  this.$refs.saffTree.clearApartment()
						 this.$refs.mtTree.clearApartment()
				 })
				
         this.form = {
 					eqpNm:'',	
 					eqpNo:'',
 					serialNo:'',	
 					eqpTyp:'',	
 					cityId:'',
 					lnkPcIp:'',
 					lnkPcPort:'',
 					consumeTyp:'',
 					signCnt:'',	
 					version:'10',	
 					eqpSts:'',
 					eqpInt:'',
           heartbeat:"",
           againsend:"",
           overtime:"",
 					eqpIntCnt:'',	
 					openReg:'',
           deptId:'',
 					doorType:'',
 					rmk:'',
 					eqpId:'',
					currentKey:'0000000000000000',
					orgNm:'',
					resId:this.form.resId,
					resName:this.form.resName,
           useOrgId:'',
           useOrgName:''
         }
         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>
  