<template>
  <d2-container>
	<div v-if="isExpend" class="d2-fl d2-tree-view" >
		<el-tree style="height: 400px;overflow: auto" ref="tree" highlight-current :data="treeData"   default-expand-all  node-key="id" :props="defaultProps"  @node-click="handleNodeClick">
				 <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 == 'JG002'">-->
					 <!--<i class="fa fa-building"></i>-->
					 <!--<span>&nbsp;{{node.label}}</span>-->
					 <!--</div>-->
					 <!--<div v-if="data.alias == 'JG003'">-->
					 <!--<i class="fa fa-users"></i>-->
					 <!--<span>&nbsp;{{node.label}}</span>-->
					 <!--</div>-->
				 		 			<div v-if="data.alias == 'equi'">
				 		 				<i class="fa fa-users"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 </span>
		</el-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" labelPosition="right">
		  <!--<el-form-item label="任务编号">-->
				<!--<el-input v-model="filter.orgNm" placeholder="任务编号"/>-->
		  <!--</el-form-item>-->
		  <el-form-item label="任务名称">
				<el-input v-model.trim="filter.logName" placeholder="任务名称" clearable/>
		  </el-form-item>
		  
		  <el-form-item label="任务创建时间">
					<el-date-picker
						v-model="time"
						type="datetimerange"
					        value-format="yyyy-MM-dd HH:mm:ss"
							:default-time="['00:00:00', '23:59:59']"
					        @change="dateChange"
									style="width: 300px;"
					        range-separator="至"
					        start-placeholder="开始时间"
					        end-placeholder="结束时间">
					</el-date-picker>
		  </el-form-item>
		  
		  <el-form-item label="设备编号">
				<el-input v-model.trim="filter.readerCode" placeholder="设备编号" clearable/>
		  </el-form-item>
		  
		  <el-form-item label="设备名称">
				<el-input v-model.trim="filter.readerName" 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  @click="" size="small" type="success"  >导出</el-button>-->
			 </div>
		<d2-crud
				title="任务查询列表"
				ref="d2Crud"
				:options="tableOptions"
				:loading="loading"
				:columns="columns"
				:data="data"
				> 
				</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>
	
	
  </d2-container>
</template>

<script>
  import { tableOptions } from '@/assets/options'
  import {TreeNodeEqui, getInquiryList} from '@/api/face/inquiry'


  export default {
    name: 'system-merchant',
    data () {
			  let checkUserNo = (rule, value, callback) => {
			  let reg = /^\w+$/;
			  if (!reg.test(value)) {
			    return callback(new Error("请输入由数字或字母组成的正确编号"));
			  } else {
			    callback();
			  }
			};
      return {
		  time:'',
				falg:true,
				leaveOverId:[],
				selection:[],
				disabled:false,
        isExpend:true,
        currentPage:1,
        tableOptions,
        loading: false,
        filter: {
          logName: '',
          readerCode: '',
          readerName:'',
          startTime:'',
          endTime:'',
          resId:"",
          pageSize: 10,
          pageNum: 1
        },
		
				
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '任务编号',
            key: 'logCode',
            minWidth: '120'
          },
		  {
			title: '任务名称',
			key: 'logName',
			minWidth: '220'
		  },
          {
            title: '任务类型',
            key: 'logType',
            minWidth: '120',
            formatter (row, column, cellValue, index) {
              if (cellValue === '1') {
                return '授权'
              } else if (cellValue === '2') {
                return '撤销权限'
              }else if (cellValue === '3') {
                return '参数下发'
              }
            }
          },
		  {
			title: '任务创建时间',
			key: 'creTm',
			minWidth: '180',
			showOverflowTooltip: true
		  },
		  {
			title: '下发时间',
			key: 'lssuedTime',
			minWidth: '180',
			showOverflowTooltip: true,
            formatter (row, column, cellValue, index) {
              if (!cellValue) {
                return row.creTm
              }else{
                return cellValue
			  }
            }
		  },
		  {
		  			title: '设备编号',
		  			key: 'readerCode',
		  			minWidth: '240'
		  },
		  {
		  			title: '设备名称',
		  			key: 'readerName',
		  			minWidth: '240'
		  },
		  {
		  			title: '备注',
		  			key: 'logRemark',
		  			minWidth: '350'
		  },
        ],
        currentParentId:'',
	     	treeData:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        data: []
      }
    },
    methods: {
		dateChange (val) {
		  if(val == null){
		  	this.filter.startTime = ''
		  	this.filter.endTime = ''
		  }else{
		  	this.filter.startTime = val[0]
		  	this.filter.endTime = val[1]
		  }
		},
		
      handleNodeClick(data) {
				if(data.alias !=='top'){
					this.falg = true
					this.filter.resId = data.id
				}else{
					this.falg = false
					this.filter.resId = ''
				}
        this.handleList()
      },
	  
      handleTreeNode () {
       TreeNodeEqui({
        }).then(res=>{
          this.treeData = JSON.parse(res.msgDat)
          /* this.filter.parentId = this.treeData[0].id
          this.form.parentId = this.treeData[0].id
					this.form.parentName = this.treeData[0].name */
        })
				 this.handleList()
      },
	  
      handleList (val) {
        if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getInquiryList(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()
			},
			
    },
    mounted () {
      this.tableOptions = this.$calcTableHeight(tableOptions,60)
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.handleTreeNode()
    }
  }
</script>