<template>
    <d2-container>
        <div v-if="isExpend" class="d2-fl d2-tree-view">
            <el-tree style="height: 500px;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 == '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>
				 		 </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.empCode" placeholder="工号/学号" clearable/>
                    </el-form-item>
                    <el-form-item label="卡 号">
                        <el-input v-model.trim="filter.cardCode" 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 {treeNodeAll} from '@/api/face/record'
  import {getWaterCardCountList} from '@/api/water/WaterCardCount'


  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: {
          empCode:"",
          cardCode:'',
          depId:"",
          pageSize: 10,
          pageNum: 1
        },


        pagination: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'merchantCode',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '工号/学号',
            key: 'empCode',
            minWidth: '120'
          },
          {
            title: '卡号',
            key: 'cardCode',
            minWidth: '120'
          },
          {
            title: '姓名',
            key: 'empName',
            minWidth: '120',
            // formatter (row, column, cellValue, index) {
            //   if (cellValue === '1') {
            //     return '授权'
            //   } else if (cellValue === '2') {
            //     return '撤销权限'
            //   }else if (cellValue === '3') {
            //     return '参数下发'
            //   }
            // }
          },
          {
            title: '部门/班级',
            key: 'depNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '是否发卡',
            key: 'sffka',
            minWidth: '120',
            showOverflowTooltip: true,
            formatter (row, column, cellValue, index) {
              if (cellValue=='1') {
                return '已发卡'
              }else{
                return '未发卡'
              }
            }
          },
          {
            title: '卡物理序号',
            key: 'cardSeq',
            minWidth: '120'
          },
          {
            title: '卡状态',
            key: 'cardStats',
            minWidth: '120',
       formatter (row, column, cellValue, index) {
        if (cellValue=='0') {
          return '未启用'
        }else if(cellValue=='1'){
          return '已启用'
        }else if(cellValue=='2'){
          return '已停用'
        }else if(cellValue=='3'){
          return '已退卡'
        }else if(cellValue=='4'){
          return '黑名单卡'
        }
      }
          },
          {
            title: '卡类型',
            key: 'cardTypeCode',
            minWidth: '120'
          },
          {
            title: '发卡日期',
            key: 'startDate',
            minWidth: '180'
          },
          {
            title: '卡余额',
            key: 'cardMoney',
            minWidth: '120'
          },
        ],
        currentParentId:'',
        treeData:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        data: []
      }
    },
    methods: {
      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.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
        getWaterCardCountList(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,10)
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.handleTreeNode()
    }
  }
</script>