<template>
    <d2-container>
        <div class="d2-table-view-full">
            <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.cardCode" placeholder="卡号" clearable/>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model ="filter.empName" placeholder="姓名" clearable/>
                    </el-form-item>
                    <el-form-item label="工号/学号">
                        <el-input v-model ="filter.empCode" placeholder="工号/学号" clearable/>
                    </el-form-item>
                    <el-form-item label="部门">
                        <department-tree v-model="filter.depId"></department-tree>
                    </el-form-item>
                    <el-form-item label="卡状态">
                        <custom-select :value="filter.cardStats" v-model="filter.cardStats" typeName="卡状态" style="width: 100%"></custom-select>
                    </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">
                </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"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </d2-container>
</template>

<script>
  import {tableOptions} from '../../../assets/options'
  import {getUserList} from '../../../api/card/user'
  import util from '../../../libs/util'
  export default {
    name: 'system-organization',
    data() {
      let checkPhone = (rule, value, callback) => {
        let reg = /^1[345789]\d{9}$/;
        if (!reg.test(value)) {
          return callback(new Error("请输入正确的手机号码"));
        } else {
          callback();
        }
      };
      return {
        time: "",
        options:[
          { value: 'jg001',label: '行政机构'},{value: 'jg002',label: '年级'},{value: 'jg003',label: '班级'}
        ],
        staLoading:false,
        operVisible: false,
        loading:false,
        isExpend:true,//是否收缩
        tableOptions,
        filter:{
          cardCode:'',
          empName:'',
          empCode:'',
          orgName:"",
          cardStats:"",
          limit:10,
          page:1,
          depName:""
        },
        currentPage:1,
        pagination:{ //分页参数
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '工号/学号',
            key: 'empCode',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '卡号',
            key: 'cardCode',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '姓名',
            key: 'empName',
            minWidth: '140',
            showOverflowTooltip: true
          },
          {
            title: '部门',
            key: 'depNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '卡状态',
            key: 'cardStatsName',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '卡次',
            key: 'addCardCount',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '卡种',
            key: 'cardType',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '变动时间',
            key: 'stateDate',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            title: '结束时间',
            key: 'endDate',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            title: '序列号',
            key: 'cardSeq',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '卡启用日期',
            key: 'startDate',
            minWidth: '180',
            showOverflowTooltip: true
          },{
            title: '卡成本',
            key: 'cardCost',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '卡上余额',
            key: 'cardMoney',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '账上余额',
            key: 'accountMoney',
            minWidth: '90',
            showOverflowTooltip: true
          }
        ],
        data:[],//列表数据
      }
    },
    methods: {
      //查询
      handleList(val) {
        if(val){this.filter.page=1
          this.currentPage = 1
        }
        this.loading = true
        getUserList(this.filter).then(res=>{
          // console.log(res)
          this.loading = false
          this.data = res.page.list
          this.pagination.total = res.page.total
        }).catch(err=>{
          this.loading = false
        })
      },
      handleCurrentChange (val) {
        this.filter.page = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.page = 1
        this.filter.limit = val
        this.handleList()
      },
      dateChange(val) {
        if (val == null) {
          this.filter.startDate = "";
          this.filter.endDate = "";
        } else {
          this.filter.startDate = val[0];
          this.filter.endDate = val[1];
        }
      }
    },
    mounted () {
      this.handleList()
      this.filter.limit = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,60)
    }
  }
</script>

<style>
</style>
