<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-date-picker
                                v-model="time"
                                type="datetimerange"
                                value-format="yyyy-MM-dd"
                                @change="dateChange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="卡号">
                        <el-input v-model ="filter.cardCode" placeholder="卡号" clearable/>
                    </el-form-item>
                    <el-form-item label="工号/学号">
                        <el-input v-model ="filter.empCode" placeholder="工号/学号" clearable/>
                    </el-form-item>
                    <el-form-item label="充值类型">
                        <custom-select :value="filter.kind" v-model="filter.kind" typeName="充值类型" style="width: 100%"></custom-select>
                    </el-form-item>
                    <el-form-item label="操作员">
                        <el-select v-model="filter.userTyp" style="width: 100%" clearable>
                            <el-option label="管理员" value="YH001"></el-option>
                            <el-option label="财务" value="YH002"></el-option>
                            <el-option label="运营" value="YH003"></el-option>
                        </el-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 {getRechargeList} from '../../../api/card/recharge'
  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:{
          pageSize: 10,
          pageNum: 1,
          startTime:"",
          endTime:"",
          cardCode:"",
          empCode:"",
          kind:"",
          userTyp:""
        },
        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: '90',
            showOverflowTooltip: true
          },
          {
            title: '部门',
            key: 'depNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '充值类型',
            key: 'typeName',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '充值前金额',
            key: 'beforeAmountRecharge',
            minWidth: '100',
            showOverflowTooltip: true
          }, {
            title: '充值金额',
            key: 'chargeMoney',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '余额',
            key: 'cardBalance',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '机号',
            key: 'eqpNo',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '操作人',
            key: 'userTypNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '操作日期',
            key: 'opYmd',
            minWidth: '120',
            showOverflowTooltip: true
          }
        ],
        data:[],//列表数据
      }
    },
    methods: {
      //查询
      handleList(val) {
        if(val){
          this.filter.pageNum=1
          this.currentPage = 1
        }
        this.loading = true
        getRechargeList(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()
      },
      dateChange(val) {
        if (val == null) {
          this.filter.startTime = "";
          this.filter.endTime = "";
        } else {
          this.filter.startTime = val[0];
          this.filter.endTime = val[1];
        }
      }
    },
    mounted () {
      this.handleList()
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,60)
      this.tableOptions.showSummary = true
      this.tableOptions.summaryMethod = function (param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 2 || index === 3 || index === 1 || index === 4 || index === 5||index === 9||index === 10||index === 11) {
            sums[index] = ''
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                let real = this.NP.plus(prev,curr)
                return this.NP.round(real,2)
                //return prev+curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ''
          } else {
            sums[index] = ''
          }
        })

        return sums
      }
    }
  }
</script>

<style>
</style>
