<template>
  <d2-container>
	<div v-if="isExpend" class="d2-fl d2-tree-view">
	   <pubilc-tree ref="Tree" :type="type" @orgId="getOrgId"  @action="action" ></pubilc-tree>
	</div>
	<!--</transition>-->
	<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 :value="filter.eqpTyp" :isAll="true" v-model="filter.eqpTyp" typeName="设备类型"/>
		  </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">
		</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 {getOnLineList } from '../../../api/equ/register'
  import { tableOptions } from '../../../assets/options'

  export default {
    name: 'equipment-onlie',
    data () {
      return {
				func:{
					select:false
				},
        isExpend:true,
        tableOptions,
        loading: false,
				type:'equ',
        currentPage:1,
        filter: {
          eqpNo:'',	
					eqpNm:'',	
					eqpTyp:null,
					pageSize:10,
					pageNum:1
        },
        pagination: {
          total: 0
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '60',
            formatter (row, column, cellValue, index) {
              return index + 1
            }
          },
          {
            title: '联机状态',
            key: 'lnkSts',
            minWidth: '100',
						formatter (row, column, cellValue, index) {
							if(cellValue === "0"){
								return '离线'
							}else if(cellValue === "1"){
								return '在线'
							}
						}
          },
          {
            title: '设备序号',
            key: 'serialNo',
            minWidth: '180',
						showOverflowTooltip: true
          },
          {
            title: '设备机号',
            key: 'eqpNo',
            minWidth: '120',
						showOverflowTooltip: true
          },
          {
            title: '设备名称',
            key: 'eqpNm',
            minWidth: '180',
						showOverflowTooltip: true
          },
          {
            title: '类型',
            key: 'eqpTyp',
            minWidth: '100',
					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: '80',
						formatter (row, column, cellValue, index) {
							if(cellValue === 1){
								return '启用'
							}else if(cellValue === 0){
								return '禁用'
							}
						}
          },
          {
            title: '所属区域',
            key: 'orgNm',
            minWidth: '180',
						showOverflowTooltip: true
          },
          {
            title: '最近联机时间',
            key: 'updTm',
            minWidth: '180'
          },
        ],
        data: []
      }
    },
    methods: {
			 action(data){
				 if(data.alias === 'top'){
				 	this.filter.resId = ''
				 }else{
				   this.filter.resId = data.id
				 }
				 this.handleList()
			},
			getOrgId(val){
				this.form.orgId = val
			},
      handleList (val) {
        if(val){this.filter.pageNum=1
        this.currentPage = 1}
        this.loading = true
        getOnLineList(this.filter).then(res => {
          this.loading = false
          this.data = res.page.list
          this.pagination.total = res.page.total
					this.tableOptions.rowClassName = function ({row, rowIndex}) {
           if (row.lnkSts === '1') {
            return 'success-row'
          } else {
						return ''
					}
        }
        }).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()
			},
		/* 	getFunction () {
			  this.$GetFunction({
			    menuUrl:this.$route.path
			  }).then(res=>{
			    res.data.forEach(item=>{
			      if (item.functionType === 'select') {
			        if (item.remarks === 'true') {
			          this.func.select = true
			        } else {
			          this.func.select = false
			        }
			      }    
			    })
			  })
			} */
    },
    mounted () {
			//this.getFunction ()
			this.tableOptions.stripe = false
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,20)
			this.tableOptions.stripe=false
      this.handleList()
    }
  }
</script>
<style>
 .el-table .success-row {
    background: #90EE90;
  }
</style>
