<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" labelPosition="right">
			  <el-form-item label="权限组编号">
				<el-input v-model.trim="filter.paCode" placeholder="权限组编号" clearable/>
			  </el-form-item>
				
				<el-form-item label="权限组名称" >
					<el-select v-model.trim="filter.paName" placeholder="请选择" clearable>
					<el-option v-for="item in this.quanxians" :key="item.paId" :label="item.paName" :value="item.paName">
					</el-option>
					</el-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  @click="" size="small" type="success">导出</el-button>-->
				 <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus" slot="headerButton">新增</el-button>
			 </div>

		<d2-crud
				title="权限信息列表"
				ref="d2Crud"
				:options="tableOptions"
				:loading="loading"
				:columns="columns"
				:data="data"
				:rowHandle="rowHandle"
				@edit="handleRowEdit"
				@delete="handleRowRemove">
		</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"
		width="50%"
		@close="clearForm"
		:close-on-click-modal="false">
		<div class="d2-fl d2-tree-view" style="width: 220px">
			<div class="double-tree" style="display:inline-block">
			<el-tree :data="equTree"
					 default-expand-all
					 :props="defaultProps"
					 node-key="id"
					 ref="equTree"
					 :check-strictly="true"
					 :default-checked-keys="this.readerIdsArr"
					 style="height: 400px;overflow: auto;width: 100%;"
					 show-checkbox>
										<span class="icon-tree" slot-scope="{ node, data }">
											<div v-if="data.alias == 'top'">
												<i class="fa fa-university"></i>
												<span>&nbsp;{{node.label}}</span>
											</div>
											<div v-if="data.alias == 'fix02'">
												<i class="fa fa-building"></i>
												<span>&nbsp;{{node.label}}</span>
											</div>
											<div v-if="data.alias == 'face'">
												<i class="fa fa-users"></i>
												<span>&nbsp;{{node.label}}</span>
											</div>
									</span>
			</el-tree>
			</div>
		</div>
		<div style="overflow: hidden">
		<el-form ref="form" :model="form" label-width="110px" labelPosition="right"  :rules="rules" >
			<el-row :gutter="20">
				
				<el-col :span="24">
					<el-form-item label="权限组编号" prop="paCode">
						<el-input v-model.trim="form.paCode" maxlength="20"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24">
					<el-form-item label="权限名称" prop="paName">
						<el-input v-model.trim="form.paName" maxlength="20"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24">
				    <el-form-item label="时间段一" prop="value1">
				        <el-time-picker
				            is-range
				            v-model.trim="form.value1"
							value-format="HH:mm:ss"
							format="HH:mm:ss"
				            range-separator="至"
				            start-placeholder="开始时间"
				            end-placeholder="结束时间"
				            placeholder="选择时间范围"
				            @change="timeChange1"
							style="width: 100%;"
				    >
				    </el-time-picker>
				</el-form-item>
				</el-col>
				
				<el-col :span="24">
				    <el-form-item label="时间段二">
				            <el-time-picker
				                is-range
				                v-model.trim="form.value2"
								value-format="HH:mm:ss"
								format="HH:mm:ss"
				                range-separator="至"
				                start-placeholder="开始时间"
				                end-placeholder="结束时间"
				                placeholder="选择时间范围"
				                @change="timeChange2"
								style="width: 100%;"
				        >
				        </el-time-picker>
				    </el-form-item>
				</el-col>
				
				<el-col :span="24">
				    <el-form-item label="时间段三">
				            <el-time-picker
				                is-range
				                v-model.trim="form.value3"
								value-format="HH:mm:ss"
								format="HH:mm:ss"
				                range-separator="至"
				                start-placeholder="开始时间"
				                end-placeholder="结束时间"
				                placeholder="选择时间范围"
				                @change="timeChange3"
								style="width: 100%;"
				        >
				        </el-time-picker>
				    </el-form-item>
				</el-col>
			</el-row>
		</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
	<zl-button @click="operInstance('form')"/> 
</span>
</el-dialog>
  </d2-container>
</template>

<script>
	
  import { tableOptions } from '../../../assets/options'
import { getFacePassageList, getFacePassageAccessByList,getFaceTree,saveOrUpdata,getFacePassageAccessById,delFaceById } from '../../../api/face/tongXing'

  export default {
    name: '',
    data () {
      let checkCardId = (rule, value, callback) => {
        if(!value){
          return callback(new Error('不能为空'))
        }
        let reg = /^[0-9a-zA-Z]+$/
        if (!reg.test(value)) {
          return callback(new Error('请输入数字或英文'))
        } else {
          callback ()
        }
      }
      return {
		  quanxians:[],//权限数组
		  readerIdsArr:[],
        tableOptions,
        loading: false,
        operVisible: false,
        currentPage:1,
        diaLogName: '新增',
        form: {
					paId:'',
					paName:'',
					paCode:'',
					readerIds:[],//树
					pdStarttime1:"",//时间段1
					pdEndtiem1:"",//时间段1
					pdStarttime2:"",//时间段2
					pdEndtiem2:"",//时间段2
					pdStarttime3:"",//时间段3
					pdEndtiem3:"",//时间段3
					value1:'',//时间段1
					value2:'',//时间段2
					value3:'',//时间段3
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
		  paCode:'',//权限组编号
		  paName:'',//权限组名称
        },
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '权限组编号',
            key: 'paCode',
            minWidth: '90'
          },
          {
            title: '权限组名称',
            key: 'paName',
            minWidth: '150'
          },
          {
            title: '时间段1',
            key: 'startTime1',
            minWidth: '150'
          },
          {
            title: '时间段2',
            key: 'startTime2',
            minWidth: '150'
          },
					{
					title: '时间段3',
					key: 'startTime3',
					minWidth: '150'
					},
					{
					title: '通行设备',
					key: 'readerNames',
					minWidth: '150'
					}
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '150',
          align: 'center',
         custom: [
            {
              text: '编辑',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
						{
						  text: '删除',
						  type: 'danger',
						  size: 'small',
						  emit: 'delete'
						}
          ],

        },
				rules: {
					paCode:[{validator:checkCardId,required: true, message: '请输入权限组编号', trigger: 'blur'}],
					paName:[{required: true, message: '请输入权限名称', trigger: 'blur'}],
					value1:[{required: true, message: '请选择时间段一', trigger: 'blur'}],
						},
        data: [],
				defaultProps: {
				  children: 'children',
				  label: 'name'
				},
				equTree:[],
      }
    },
    methods: {
			
			timeChange1(val){
				if(val == null){
                  // this.$set(this.form,'pdStarttime1','')
                  // this.$set(this.form,'pdEndtiem1','')
				  this.form.pdStarttime1 = '',
				    this.form.pdEndtiem1 = ''
				}else{
                  // this.$set(this.form,'pdStarttime1',val[0])
                  // this.$set(this.form,'pdEndtiem1',val[1])
				  this.form.pdStarttime1 = val[0],
				    this.form.pdEndtiem1 = val[1]
				}
			},
			timeChange2(val){
				if(val == null){
				  this.form.pdStarttime2 = '',
				    this.form.pdEndtiem2 = ''
				}else{
				  this.form.pdStarttime2 = val[0],
				    this.form.pdEndtiem2 = val[1]
				}
			},
			timeChange3(val){
				if(val == null){
				  this.form.pdStarttime3 = '',
				    this.form.pdEndtiem3 = ''
				}else{
				  this.form.pdStarttime3 = val[0],
				    this.form.pdEndtiem3 = val[1]
				}
			},
			
			
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
	  
			handleSizeChange (val) {
			this.filter.pageNum = 1
			this.filter.pageSize = val
			this.handleList()
			},
			
			
			clearForm(){
              if (this.$refs['form']!==undefined) {
                this.$refs['form'].resetFields()
              }
				this.diaLogName='新增'
				this.$refs.equTree.setCheckedKeys([])
				this.form={
					paId:'',
					paName:'',
					paCode:'',
					value1:'',
					value2:'',
					value3:'',
					readerIds:[],//树
					pdStarttime1:"",//时间段1
					pdEndtiem1:"",//时间段1
					pdStarttime2:"",//时间段2
					pdEndtiem2:"",//时间段2
					pdStarttime3:"",//时间段3
					pdEndtiem3:"",//时间段3
				}
			},
			
			EquTreeTraverse (node) {
			  if (!node || !node.children) {return}
			  if (node.alias === 'face') {
			    node.disabled = false
			  } else {
			    node.disabled = true
			  }
			  node.children.forEach((item) => {
			    this.EquTreeTraverse(item)
			  })
			},
			
			
			//弹框确定按钮
			operInstance(formEquName){
							// if(this.form.value1){
							//   this.$set(this.form,'pdStarttime1',this.form.value1[0])
                             //  this.$set(this.form,'pdEndtiem1',this.form.value1[1])
							// 	// this.form.pdStarttime1 = this.form.value1[0]//时间段1
							// 	// this.form.pdEndtiem1 = this.form.value1[1]//时间段1
							// }
							// if(this.form.value2){
                             //  this.$set(this.form,'pdStarttime2',this.form.value2[0])
                             //  this.$set(this.form,'pdEndtiem2',this.form.value2[1])
							// 	// this.form.pdStarttime2 = this.form.value2[0]//时间段2
							// 	// this.form.pdEndtiem2 = this.form.value2[1]//时间段2
							// }
							// if(this.form.value3){
                             //  this.$set(this.form,'pdStarttime3',this.form.value3[0])
                             //  this.$set(this.form,'pdEndtiem3',this.form.value3[1])
							// 	// this.form.pdStarttime3 = this.form.value3[0]//时间段3
							// 	// this.form.pdEndtiem3 = this.form.value3[1]//时间段3
							// }
							this.$refs[formEquName].validate((valid) => {
								if (valid) {
								  // 后一时间段必须晚于前一时间段
								  if(this.form.pdStarttime2){
								    let tm2=this.form.pdStarttime2.valueOf()
									let tm1=this.form.pdEndtiem1.valueOf()
								    if(tm2<tm1){
                                      this.$message({
                                        message: '时间段节点要大于前一时间段',
                                        type: 'warning'
                                      })
                                      return false
									}
								  }
                                  if(this.form.pdStarttime3){
                                    let tm1=this.form.pdEndtiem1.valueOf()
                                    let tm3=this.form.pdStarttime3.valueOf()
                                      let tm2=this.form.pdStarttime2?this.form.pdEndtiem2.valueOf():0
                                    if(tm3<tm1||tm3<tm2){
                                      this.$message({
                                        message: '时间段节点要大于前一时间段',
                                        type: 'warning'
                                      })
                                      return false
                                    }
                                  }
                                  let temp = this.$refs.equTree.getCheckedKeys()
                                  let arr = []
                                  temp.forEach((item,index)=>{
                                    arr.push(item)
                                  })

                                  this.form.readerIds = arr.map(item => item).join(',')
                                  if(this.form.readerIds === ''){
                                    this.$message({
                                      message: '请选择设备',
                                      type: 'warning'
                                    })
                                    return false
                                  }
									saveOrUpdata(this.form).then(res => {
										this.operVisible = false
										this.$message({
											message:this.form.paId === '' ?'新增成功':'编辑成功',
											type: 'success'
										})
										this.handleList()
									})
								}
								})
			},
			

				//编辑
			  handleRowEdit ({index, row}) {
						this.diaLogName='编辑'
					 let paId = row.paId
						getFacePassageAccessById({paId}).then(res => {
							  this.form = res.facePassageAccess
								this.operVisible=true
								// if(this.form.pdStarttime1){
								// 	this.form.value1 = []
                                 //  this.$set(this.form.value1,'0',this.form.pdStarttime1)
                                 //  this.$set(this.form.value1,'1',this.form.pdEndtiem1)
								// 	// this.form.value1[0] = this.form.pdStarttime1//时间段1
								// 	// this.form.value1[1] = this.form.pdEndtiem1//时间段1
								// }
								// if(this.form.pdStarttime2){
								// 	this.form.value2 = []
                                 //  this.$set(this.form.value2,'0',this.form.pdStarttime2)
                                 //  this.$set(this.form.value2,'1',this.form.pdEndtiem2)
								// 	// this.form.value2[0] = this.form.pdStarttime2//时间段2
								// 	// this.form.value2[1] = this.form.pdEndtiem2//时间段2
								// }
								// if(this.form.pdStarttime3){
								// 	this.form.value3 = []
                                 //  this.$set(this.form.value3,'0',this.form.pdStarttime3)
                                 //  this.$set(this.form.value3,'1',this.form.pdEndtiem3)
								// 	// this.form.value3[0] = this.form.pdStarttime3//时间段3
								// 	// this.form.value3[1] = this.form.pdEndtiem3//时间段3
								// }
                          this.$set(this.form,"value1",res.time1)
                          this.$set(this.form,"value2",res.time2)
                          this.$set(this.form,"value3",res.time3)
						  console.log(this.form.value1)
								this.readerIdsArr = this.form.readerIds.split(",");
						})
			  
			  },
			
			
			//删除
			handleRowRemove ({index, row}) {
				let paId = row.paId
				this.$confirm('确定删除此记录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'error'
				}).then(() => {
					delFaceById({
						paId
					}).then(res=>{
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						this.handleList()
					})
				}) 
			},
			
			
			//权限组列表
			quanXianList () {
			  getFacePassageAccessByList({
				  paCode:""
			  }).then(res => {
				  this.quanxians = res.facePassageAccessList;
			  });
			},
			
			
			//列表
			handleList (val) {
				
			  if(val){
				this.filter.pageNum=1
				this.currentPage = 1
			  }
				this.loading = true
			
			  getFacePassageList(this.filter).then(res => {
			    this.loading = false
			    this.data = res.page.list
			    this.pagination.total = res.page.total
			  }).catch(err => {
			    this.loading = false
			  })
			  
			},
			
			
    },
    mounted () {
	  this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,45)
      this.handleList()
	  this.quanXianList()

			getFaceTree().then(res=>{
			  this.equTree = JSON.parse(res.msgDat)
			  this.EquTreeTraverse(this.equTree[0])
			})
    }
  }
</script>
 