<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.employeeName" placeholder="姓名" clearable/>
                    </el-form-item>
                    <el-form-item label="部门">
                       <department-tree v-model="filter.depId" :isClear="isClear" @clearInput="clearInput"></department-tree>
                    </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 {getCostList} from '../../../api/card/cost'
  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 {
        options:[
          { value: 'jg001',label: '行政机构'},{value: 'jg002',label: '年级'},{value: 'jg003',label: '班级'}
        ],
        staLoading:false,
        operVisible: false,
        loading:false,
        isExpend:true,//是否收缩
        tableOptions,
        isClear:'123',
        filter:{
          cardCode:'',
          employeeName:'',
          orgCode:"",
          pageSize:10,
          pageNum:1
        },
        currentPage:1,
        pagination:{ //分页参数
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '工号/学号',
            key: 'employeeCode',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '卡号',
            key: 'cardCode',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '姓名',
            key: 'employeeName',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '部门',
            key: 'depNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '卡成本',
            key: 'costMoney',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '卡管理费',
            key: 'manageMoney',
            minWidth: '90',
            showOverflowTooltip: true
          }, {
            title: '类型',
            key: 'costType',
            minWidth: '90',
            formatter (row, column, cellValue, index) {
              if (cellValue === "0") {
                return '收入'
              } else if (cellValue === "1") {
                return '支出'
              }
            }
          },
          {
            title: '操作日期',
            key: 'handleDate',
            minWidth: '140',
            showOverflowTooltip: true
          }
        ],
        data:[],//列表数据
      }
    },
    methods: {
      clearInput(){
        this.filter.depId = ''
      },
      //查询
      handleList(val) {
        if(val){this.filter.page=1
          this.currentPage = 1
        }
        this.loading = true
        getCostList(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.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
    },
    mounted () {
      this.handleList()
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,10)
    }
  }
</script>

<style>
</style>
