<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 :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline" size="small">
				<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>
					<el-button type="primary"   @click="handleList('1')" >查询</el-button>
				</el-form-item>
			</el-form>
			</div>
			<div class="d2-table-view-content">
			<d2-crud
			title="考勤模式列表"
			ref="d2Crud"
			:options="tableOptions"
			:loading="loading"
			:columns="columns"
			:data="data"
			:rowHandle="rowHandle"
			@edit="handleRowEdit">
			</d2-crud>
			</div>
			<div class="d2-table-view-footer">
			<el-pagination
							@current-change="handleCurrentChange"
							@size-change="handleSizeChange"
							:current-page.sync="currentPage"
							:page-size="tableOptions.pageList[0]"
							:page-sizes="tableOptions.pageList"
							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" :inline="true" :model="form" @keyup.enter.native="handleList" class="demo-form-inline" :rules="rules" >
						<el-form-item label="设备机号" prop="eqpNo" >
							<el-input v-model="form.eqpNo" placeholder="机号" clearable :disabled="true"/>
						</el-form-item>
						<el-form-item label="读卡模式" prop="readcardModel">
							<el-select v-model="form.readcardModel" placeholder="读卡模式" clearable>
							<el-option label="物理卡号" value="0"></el-option>
							<el-option label="逻辑卡号" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="工作模式"  prop="workmodel">
							<el-select v-model="form.workmodel" placeholder="工作模式" clearable>
							<el-option label="普通考勤模式" value="1"></el-option>
							<el-option label="考勤+报警模式" value="2"></el-option>
							<el-option label="验卡模式" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="名单模式" prop="listModel">
							<el-select v-model="form.listModel" placeholder="请选择" clearable>
							<el-option label="黑名单" value="0"></el-option>
							<el-option label="白名单" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="实时上传" prop="doorState">
							<el-select v-model="form.doorState" placeholder="实时上传" clearable>
							<el-option label="停用" value="0"></el-option>
							<el-option label="启用" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="刷卡间隔" prop="difference">
							<el-input v-model="form.difference" placeholder="刷卡间隔" maxlength="6"   clearable/>
						</el-form-item>
						</el-form>
						<div class="time-selects">
								<div v-for="(item,index) in arr" :key="index">
									 <span class="time-name">{{item.name}}</span>
										<el-time-select
										   style="width: 180px;margin-top: 10px;"
                       v-model="item.diabolo"
                       :picker-options="{
                       start: '00:00',
                       step: '00:01',
                       end: '24:00'
                        }"
                     placeholder="选择响铃时间">
                    </el-time-select>
								</div>
								</div>
						<span slot="footer" class="dialog-footer">
					<zl-button :loading="modelLoading" @click="operInstance('form')"/> 
					</span>
			</el-dialog>
  </d2-container>
</template>
<script>
	import {TreeNode,getWorkModeList,saveWorkMode,getWorkModeListById} from '../../../api/att/workMode'
	import {tableOptions} from '../../../assets/options'
	export default{
		name: 'attendance-workMode',
		data(){
			  let checkPhone = (rule, value, callback) => {
			  let reg = /^[+]{0,1}(\d+)$/
			  if (!reg.test(value)) {
			    return callback(new Error('请输入数字'))
			  } else {
			    callback ()
			  }
			
			}
			return{
			type:'equ',
			func:{
				select:false,
				workMode:false
			},
			arr:[{name:'响铃1:',diabolo:''},{name:'响铃2:',diabolo:''},{name:'响铃3:',diabolo:''},{name:'响铃4:',diabolo:''},
			{name:'响铃5:',diabolo:''},{name:'响铃6:',diabolo:''},{name:'响铃7:',diabolo:''},{name:'响铃8:',diabolo:''},
			{name:'响铃9:',diabolo:''},{name:'响铃10:',diabolo:''},{name:'响铃11:',diabolo:''},{name:'响铃12:',diabolo:''},
			{name:'响铃13:',diabolo:''},{name:'响铃14:',diabolo:''},{name:'响铃15:',diabolo:''},{name:'响铃16:',diabolo:''}
			],
			isExpend:true,
      currentPage:1,
      arrList:[],
			tableOptions,
			operEquVisible:false,
			operVisible:false,
			diaLogName:'新增工作模式',
			isEdit:false,
			loading:false,
			modelLoading:false,
			 treeData: [],
			 defaultProps: {
				children: 'children',
				label: 'name'
			 },
			 filter:{
			  eqpNo:'',
				eqpNm:'',
				resId:'',
			 	pageSize: 10,
			 	pageNum:1
			 },
			 pagination:{
			 	total: 0
			 },
			 data: [],
			 list:[],
			 columns: [
				 	{
				 	title: '序号',
				 	key: 'index',
				 	minWidth: '50',
				 	formatter (row, column, cellValue, index) {
				 		return index+1
				 	}
				 },
			 	{
			 		title: '设备序号',
			 		key: 'serialNo',
			 		minWidth: '160',
					showOverflowTooltip: true
			 	},
			 	{
			 		title: '设备号',
			 		key: 'eqpNo',
			 		minWidth: '150',
					showOverflowTooltip: true
			 	},
			 	{
			 		title: '设备名称',
			 		key: 'eqpNm',
			 		minWidth: '150',
					showOverflowTooltip: true
			 	},
				{
					title: '区域',
					key: 'resName',
					minWidth: '150',
					showOverflowTooltip: true
				},
			 	{
			 		title: '工作模式',
			 		key: 'workmodel',
			 		minWidth: '150',
					formatter(row, column, cellValue, index) {
						if(cellValue === '1'){
							return '普通考勤模式'
						}else if(cellValue === '2'){
							return '考勤+报警模式'
						}else if(cellValue === '3'){
							return '验卡模式'
						}else if(cellValue === '4'){
                          return '门禁模式'
                        }
					}
			 	},
			 	{
			 		title: '读卡模式',
			 		key: 'readcardModel',
			 		minWidth: '150',
					formatter(row, column, cellValue, index) {
						 if(cellValue === '1'){
							 return '逻辑卡号'
						 }else if(cellValue === '0'){
							 return '物理卡号'
						 }
					}
					 
			 	},
				{
					title: '实时上传',
					key: 'doorState',
					minWidth: '160',
					formatter(row, column, cellValue, index) {
						if(cellValue === '1'){
							return '启用'
						}else if(cellValue === '0'){
							return '停用'
						}
						
					}
				},
			 ],
	    form:{
	    	eqpNo:'',
	    	readcardModel:'',
	    	workmodel:'',
	    	listModel:'',
	    	doorState:'',
	    	difference:'',
	    	alarms:'',
	    	serialNo:'',
	    	workmodeid:'',
				eqpId:''
	    },
		  rowHandle: {
			  columnHeader: '操作',
			  minWidth: '150',
			  align:'center',
			 custom: [
			  	{
			  		text: '工作模式',
			  		type: 'primary',
			  		size: 'small',
			  		emit: 'edit'
			  	}]
			},
			rules: {
				readcardModel: [{ required: true, message: '请选择读卡模式', trigger: 'change' }],
				workmodel:[{ required: true, message: '请选择工作模式', trigger: 'change' }],
			  listModel: [{ required: true, message: '请选择名单模式', trigger: 'change' }],
			  doorState:[{ required: true, message: '请选择实时上传', trigger: 'change' }],
				difference:[{ required: true, validator: checkPhone, trigger: 'blur' }]
			},
		 }
		},
		methods:{
				handleCurrentChange (val) {
					this.filter.pageNum = val
					this.handleList()
			},
			handleSizeChange (val) {
			this.filter.pageNum = 1
			this.filter.pageSize = val
			this.handleList()
			},
      action(data){
				this.falg = false
				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()
			},
			handleList (val) {
			 	if (val) {
			  	  this.filter.pageNum = 1
				  this.currentPage = 1
				}
				this.loading = true
				getWorkModeList(this.filter).then(res=>{
					this.loading = false
					this.data = res.page.list
					this.pagination.total = res.page.total
				}).catch(err=>{
					this.loading = false
				})
			},	
	   handleRowEdit({index, row}){
			 this.form.eqpNo=row.eqpNo
			 this.form.serialNo=row.serialNo
			 if(row.workmodeid){
				 this.form.workmodeid=row.workmodeid
			 }else{
				this.form.workmodeid='' 
			 }
			 if(this.form.workmodeid == ''){
				 this.form.eqpId = row.eqpId
				 this.operVisible=true
			 }else{
				 this.arrList=[]
				 getWorkModeListById(this.form).then(res=>{
				 this.operVisible=true
				 this.form = res.equipmentWorkMode
				 this.form.eqpId = row.eqpId
				 this.arrList=this.form.alarms.split(',')
					 for(var i=0;i<this.arr.length;i++){
						 if(this.arrList ==''){
							 this.arr[i].diabolo=''
						 }else{
							 if(this.arrList[i] != undefined){
								 if(this.arrList[i] == null){
									 this.arr[i].diabolo='' 
								 }else{
									 this.arr[i].diabolo=this.arrList[i]
								 }
							 }else {
								 break
							 }
						 }
					 }
				 })
			 }
			
		 },
		 operInstance(formName){
			 if(this.form.workmodeid != ''){
				 this.form.alarms=''
			 }
			 for(var i=0;i<this.arr.length;i++){
				 if(this.arr[i].diabolo == null){
					 this.arr[i].diabolo =''
				 }
				 if(this.arr[i].diabolo !=''){
					 this.form.alarms=this.form.alarms+","+this.arr[i].diabolo
				 }
			 }
			 this.form.alarms=this.form.alarms.substring(1,this.form.alarms.length)
			 	this.$refs[formName].validate((valid) => {
			 		if (valid) {
                      this.modelLoading=true
						 saveWorkMode(this.form).then(res=>{
										 this.modelLoading=false
						 this.operVisible = false
						 this.$message({
						 	message:this.form.workmodeid == ''?'新增成功':'编辑成功',
						 	type: 'success'
						 })
										this.handleList()
										this.$nextTick(()=>{
											this.$refs.Tree.handleTreeNode()
										})
						}).catch(err=>{
											this.modelLoading=false
										})
					}
					})
		 },
		 clearForm(){
			 this.modelLoading=false
			 this.arr=[{name:'响铃1:',diabolo:''},{name:'响铃2:',diabolo:''},{name:'响铃3:',diabolo:''},{name:'响铃4:',diabolo:''},
			{name:'响铃5:',diabolo:''},{name:'响铃6:',diabolo:''},{name:'响铃7:',diabolo:''},{name:'响铃8:',diabolo:''},
			{name:'响铃9:',diabolo:''},{name:'响铃10:',diabolo:''},{name:'响铃11:',diabolo:''},{name:'响铃12:',diabolo:''},
			{name:'响铃13:',diabolo:''},{name:'响铃14:',diabolo:''},{name:'响铃15:',diabolo:''},{name:'响铃16:',diabolo:''}
			],
			 this.form={
				 eqpNo:'',
				 readcardModel:'',
				 workmodel:'',
				 listModel:'',
				 doorState:'',
				 difference:'',
				 alarms:'',
				 serialNo:'',
				 workmodeid:'',
				 eqpId:''
			 }
			 
		 },
		 	/* getFunction () {
		   this.$GetFunction({
		     menuUrl:this.$route.path
		   }).then(res=>{
		     res.data.forEach(item=>{
		       if (item.functionType === 'select') {
		         if (item.remarks === 'true') {
		           this.func.add = true
		         } else {
		           this.func.add = false
		         }
		       }else if(item.functionType === 'workMode') {
			        if (item.remarks === 'true') {
			          this.$set(this.rowHandle,'custom',[
			            {
			            	text: '工作模式',
			            	type: 'primary',
			            	size: 'small',
			            	emit: 'edit'
			            }
			          ])
			
			        }
			      }   
		     })
		   })
		 } */
		 
	 },
    mounted () {
			//this.getFunction()
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,30)
      this.handleList()
    }
  }

</script>
<style>
	.time-selects {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	.time-name{
	  display: inline-block;
		width: 60px;
		margin:10px 0px 0px 5px;
	}
	 
</style>