<template>
  <d2-container>
	  <div v-if="isExpend" class="d2-fl d2-tree-view">
		  <el-tree
				  ref="tree"
				  highlight-current
				  :data="treeData"
				  default-expand-all
				  :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 == 'JG001'">
          	<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 == 'user'">-->
          	<!--<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 @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.trim="filter.userNo" placeholder="人员编号" clearable/>
		  </el-form-item>
		  
		  <el-form-item label="姓名">
		  			<el-input v-model.trim="filter.userNm" 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.extIdCard" placeholder="身份证" clearable/>
		  </el-form-item>
		  <el-form-item label="设备名称">
			<el-input v-model.trim="filter.readerName" placeholder="设备名称" clearable/>
		</el-form-item>
			<el-form-item label="设备编号">
				<el-input v-model.trim="filter.readerCode" 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>
	<!-- <img  :src="form1.carPhotos" > -->
  </d2-container>
</template>

<script>
  // import {treeNodeAll} from '@/api/face/faceManage'
  import { tableOptions } from '../../../assets/options'
  import recordPic from './components/recordPic'
  import {treeNodeAll,getFaceRecordList} from '@/api/face/record'
  export default {
    name: 'system-merchant',
    components: {
      recordPic
    },
    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: {
          userNo: '',
          userNm: '',
          depId:'',
          extIdCard:"",
          readerName:"",
          readerCode:"",
          startTime:'',
          endTime:'',
          pageSize: 10,
          pageNum: 1
        },
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '人员编号',
            key: 'userNo',
            minWidth: '120'
          },
		  // {
			// title: 'GUID',
			// key: 'orgNm',
			// minWidth: '180'
		  // },
          {
            title: '人员姓名',
            key: 'userNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
		  {
			title: '识别模式',
			key: 'discernModel',
			minWidth: '120',
            formatter (row, column, cellValue, index) {
              if (cellValue === 'face_0') {
                return '人脸识别'
              } else if (cellValue === 'card_1') {
                return '卡识别'
              }else if (cellValue === 'face_1') {
                return '人脸识别 识别陌生人'
              }
            }
		  },
		  {
			title: '识别时间',
			key: 'discernTime',
			minWidth: '180'
		  },
		  {
		  			title: '设备编号',
		  			key: 'readerCode',
		  			minWidth: '180'
		  },
		  {
		  			title: '设备名称',
		  			key: 'readerName',
		  			minWidth: '120'
		  },
          {
            title: '所属部门',
            key: 'depNm',
            minWidth: '120'
          },
		  {
		  			title: '抓拍图片',
		  			key: 'recordPic',
		  			minWidth: '180',
            component:{
              name:recordPic
            }
		  },
		  {
		  			title: '身份证',
		  			key: 'extIdCard',
		  			minWidth: '180'
		  },
		  {
		  			title: '备注',
		  			key: 'remark',
		  			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.depId = data.id
				}else{
					this.falg = false
					this.filter.depId = ''
				}
        this.handleList()
      },
	  
      handleTreeNode () {
        treeNodeAll({
          depType: ''
        }).then(res => {
          this.treeData = JSON.parse(res.msgDat)
          // this.form.orgId = this.treeData[0].id
        })
        this.handleList()
      },
	  
      handleList (val) {
        if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getFaceRecordList(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>