<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.empName" 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.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 {getWaterCostList} 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:"",
          startDate:"",
          endDate:"",
          empName:"",
          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',
          },
          {
            title: '人员类型',
            key: 'userType',
            minWidth: '120',
            showOverflowTooltip: true,
            formatter (row, column, cellValue, index) {
              if (cellValue === '0') {
                return '学生'
              } else if (cellValue === '1') {
                return '教工'
              }else if (cellValue === '2') {
                return '外聘人员'
              }
            }
          },
          {
            title: '部门/班级',
            key: 'depNm',
            minWidth: '120',
            showOverflowTooltip: true,
            // formatter (row, column, cellValue, index) {
            //   if (!cellValue) {
            //     return row.creTm
            //   }else{
            //     return cellValue
            //   }
            // }
          },
          {
            title: '消费前金额',
            key: 'beforeAmount',
            minWidth: '120'
          },
          {
            title: '消费金额',
            key: 'cardConsume',
            minWidth: '120'
          },
          {
            title: '余额',
            key: 'cardBalance',
            minWidth: '120'
          },
          {
            title: '消费日期',
            key: 'signTm',
            minWidth: '180'
          },
        ],
        currentParentId:'',
        treeData:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        data: []
      }
    },
    methods: {
      dateChange (val) {
        if(val == null){
          this.filter.startDate = ''
          this.filter.endDate = ''
        }else{
          this.filter.startDate = val[0]
          this.filter.endDate = 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.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
        getWaterCostList(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>