<template>
    <div>
        <i-page-header :title="pageTitle"></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <div class="fx-r" style="padding: 20px 0;">
				<Input placeholder="用户UID" style="width:200px" class="mr10" v-model="detial.uid"/>
				<Input placeholder="绑定手机号码" style="width:200px" class="mr10" v-model="detial.mobile"/>
                <el-date-picker v-model="detial.time" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                <el-button type="primary" style="margin-left: 6px;" @click="tapSeach">查询</el-button>
                <div class="fx-g1"></div>
                <el-button type="danger" style="margin-left: 6px;" @click="tapAd">增/减</el-button>
            </div>
            <el-tabs v-model="detial.code" @tab-click="tapTabs">
                <el-tab-pane name="" 			    	label="全部"></el-tab-pane>
				<el-tab-pane name="tx_apply"            label="提现余额"></el-tab-pane>
				<el-tab-pane name="tx_refund"           label="提现失败"></el-tab-pane>
                <el-tab-pane name="admin_add" 		    label="补加"></el-tab-pane>
                <el-tab-pane name="admin_cut"           label="补扣"></el-tab-pane>
            </el-tabs>
            <el-table :data="detial.data" v-loading="detial.loading" :stripe="true" :border="true">
                <el-table-column
                        prop="id"
                        label="id"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="uid"
                        label="用户"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="into"
                        label="值"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 1" style="color: #2b85e4"> + {{ scope.row.into }}</div>
                        <div v-if="scope.row.type == -1" style="color: red"> - {{ scope.row.into }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="剩余"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="内容"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="时间"
                        align="center"
                        width="140">
                </el-table-column>
            </el-table>
            <div>增:　{{detial.inTotal}} 减:　{{detial.outTotal}}</div>
            <div class="acea-row row-right page">
                <Page :total="detial.pageCount" show-elevator show-total @on-change="tapPage" :page-size="detial.pageSize"/>
            </div>
        </Card>
        <!--修改收益-->
        <el-dialog title="用户余额加减" :visible.sync="dialogVisible" width="600px">
            <el-form ref="addData" :model="addData" label-width="80px">
                <el-form-item label="用户UID" prop="uid" :rules="[{ required: true, message: '请输入用户UID'}]">
                    <el-input placeholder="请输入用户UID" autocomplete="off" v-model="addData.uid"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="addData.type">
                        <el-radio :label="1">增加</el-radio>
                        <el-radio :label="-1">减少</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="金额" prop="into" :rules="[{ required: true, message: '请输入金额'}]">
                    <el-input placeholder="请输入金额" autocomplete="off" v-model="addData.into"></el-input>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="textarea" placeholder="请输入操作说明" autocomplete="off" v-model="addData.othen"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
    import {SystemUserMoneyDetail, SystemUserMoneyDetailSave} from "../../../api/system/user";
    import IPageHeader from "../../../layouts/system/page-header/index";

    export default {
        name: "nergy",
        components: {IPageHeader},
        computed: {},
        data() {
            return {
				pageTitle:'余额明细',
                detial: {
                    page: 1,
                    pageSize: 0,
                    pageCount: 0,
                    outTitle:0,
                    inTotal:0,
					
					code:"",
                    mobile:"",
					uid:"",
                    time: "",
                    loading: true,
                    data: []
                },
                dialogVisible:false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                addData:{
                  uid : "",
                  type : "",
                  into:"",
                  othen:""
                }
            }
        },

        created() {
			if(this.$route.query.title){
				this.pageTitle = this.$route.query.title;
			}
			if(this.$route.query.uid){
				this.detial.uid = parseInt(this.$route.query.uid);
			}
            this.initView();
        },
        methods: {
            initView:function(){
                this.getData();
            },
            //添加
            tapAd:function(){
				if(this.detial.uid!=""){
					this.addData.uid = this.detial.uid;
				}
                this.dialogVisible = true;
            },
            //搜索栏目
            tapSeach:function () {
                this.detial.page = 1;
                this.getData();
            },
            tapTabs:function(){
                this.detial.page = 1;
                this.getData();
            },
            //分页
            tapPage:function (page) {
                this.detial.page = page;
                this.getData();
            },
            getData: function () {
                var data = {};
                this.detial.loading = true;
                data.page   = this.detial.page;
                data.time   = this.detial.time;
                data.mobile = this.detial.mobile;
				data.uid    = this.detial.uid;
                data.code   = this.detial.code;
                SystemUserMoneyDetail(data)
                    .then(res => {
                        this.detial.loading   = false;
                        this.detial.data      = res.data.list;
                        this.detial.pageSize  = res.data.pageSize;
                        this.detial.pageCount = res.data.pageCount;
                        this.detial.outTotal  = res.data.outTotal;
                        this.detial.inTotal   = res.data.inTotal;
                    })
                    .catch(err => {
                        this.detial.loading = false;
                        this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
                    });
            },
            //提交数据
            onSubmit:function () {
                this.$refs['addData'].validate((valid) => {
                    if (valid) {
                        this.$utils.loading(this, "提交数据中...");
                        SystemUserMoneyDetailSave(this.addData)
                            .then(res => {
                                this.$utils.loadingClose();
                                if (res.code == 200) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    this.getData();
                                    this.dialogVisible = false;
                                } else {
                                    this.$alert(res.msg);
                                }
                            })
                            .catch(err => {
                                this.$utils.loadingClose();
                                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                            });
                    }
                });
            }

        }
    }
</script>
<style scoped>

</style>
