<template>
  <div class="p_all_20">
        <div class="tit">提现记录</div>

		 <div class="box">
            <span class="search">类型：
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option
                        v-for="item in statusArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </span>
				<span class="search timeInput01">选择日期：
					<el-date-picker
						v-model="date"
						type="daterange"
						range-separator="-"
						value-format="yyyy-MM-dd HH:mm:ss"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:clearable="false"
						/>
				</span>
				   
            <div style="float:right;">
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="" @click="handleRest">重置</el-button>            
            </div>

        </div>
		 <div class="box">

            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="userName"
                align="center"
                label="提现人">
                </el-table-column>
                <el-table-column
                prop="tradeAccount"
                align="center"
                label="提现账号">
                </el-table-column>
                <el-table-column
                prop="amount"
                align="center"
                label="提现金额">
                </el-table-column>
                <el-table-column
                prop="balance"
                align="center"
                label="提现后余额">
                </el-table-column>
				<el-table-column
                prop="applyTime"
                align="center"
                label="发起时间">
                </el-table-column>
				       <el-table-column
                prop="statusDesc"
                align="center"
                label="状态">
                </el-table-column>

            </el-table>
            <el-pagination
                class="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.pageNum"
                :page-sizes="[10,20,30, 40]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal">
                </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  name: 'record',
  data(){
    return {
      	tableData: [],
					date: "",
					pageTotal: 1,
					statused:-1,
					form: {
						pageNum: 1,
						pageSize: 20,
						type: "",
						beginDate: "",
						endDate:""
					},
					statusArr: [
						{
							label: '全部',
							value: "",
						},
						{
							label: '系统处理中',
							value: 0,
						},
						//{
						//	label: '支付宝处理中',
						//	value: 1,
						//},
						{
							label: '提现成功',
							value: 2,
						},
						//{
						//	label: '提现失败',
						//	value: 3,
						//}
					],
        }
			},
			mounted() {
				var _this = this;
				this.getList();

			},

			methods: {
				getList() {
					let params = this.form;
					let _this = this;
					this.$axios.post('/mypay/cash/records',
						params
					).then(function (res) {
						if (res.data.code == 200) {
							if (res.data.data.list) {
								_this.tableData = res.data.data.list;
							}
							_this.pageTotal = res.data.data.total;

						} else {
							_this.$message.warning(res.data.message);
						}
					}).catch(function (res) { console.log(res) })
				},


				handleSearch() {
					this.form.pageNum = 1;
					this.form.beginDate = this.date[0] ? this.date[0]:"";
					this.form.endDate = this.date[1] ? this.date[1]:"";
					this.getList()
				},
				handleSizeChange: function (e) {
					var that = this
					that.form.pageSize = e
					that.getList()
				},
				handleCurrentChange: function (e) {
					var that = this
					that.form.pageNum = e
					that.getList()
				},
				handleRest() {
					this.form.type ="";
					this.form.pageNum = 1;
					this.form.beginDate = "";
					this.form.endDate = "";
					this.date = [];
					this.getList()
				},

			},
}
</script>

<style lang="scss" scoped>
        .tit{font-size:16px;color:#6B6B6B;margin-bottom:20px;}
        .tit:before{content:'';display:inline-block;width:4px;
        height:24px;background:#FF6800;border-radius:2px;vertical-align:middle;margin-right:5px;}
        .table-box{border:1px solid #DADADA;padding:10px;text-align:center;}
        .table-tit{color:#FF6800;}
        .layui-table th{text-align:center;}
        .table-box img{width:30px;height:30px;}
        [type="checkbox"] {width:15px;height:15px;vertical-align:middle;}
        // .layui-input-block span{vertical-align:middle;}
        // .layui-input-block{line-height:36px;}

        .page{margin-top:15px;text-align: center;}

		    .box{
          padding:15px;
          .search{color: #333;}
        }
    	.timeInput01 {
    		padding-left:10px;
		}
</style>
