<template>
    <div>
        <i-page-header title="支付记录" ></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate">
				<Row type="flex" :gutter="12">
					<Col>
					    <FormItem style="width: 180px"  label="用户UID：" label-for="uid">
					        <Input placeholder="用户UID" v-model="formValidate.uid"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="绑定手机号：" label-for="mobile">
					        <Input  placeholder="用户绑定手机号" v-model="formValidate.mobile"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="状态：" label-for="status">
					        <div style="width: 180px;height: 33px;"></div>
					        <div>
					            <el-col >
					                <el-select v-model="formValidate.status" placeholder="请选择状态">
					                    <el-option label="全部"   value=""></el-option>
										<el-option label="待支付" value="0"></el-option>
										<el-option label="支付成功" value="1"></el-option>
					                  </el-select>
					            </el-col>
					        </div>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="商家交易号：" label-for="pay_no">
					        <Input  placeholder="商家交易号" v-model="formValidate.pay_no"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="订单编号：" label-for="order_id">
					        <Input  placeholder="订单编号" v-model="formValidate.order_id"/>
					    </FormItem>
					</Col>
					
				</Row>
                <Row type="flex" :gutter="24">
					<Col>
					    <FormItem style="width: 180px" label="类型：" label-for="type">
					        <div style="width: 180px;height: 33px;"></div>
					        <div>
					            <el-col >
					                <el-select v-model="formValidate.type" placeholder="请选择类型">
					                    <el-option label="全部"   value=""></el-option>
										<el-option label="模板购买" value="temp"></el-option>
					                  </el-select>
					            </el-col>
					        </div>
					    </FormItem>
					</Col>
                    <Col>
                        <FormItem style="width: 280px" label="选择时间：" label-for="time">
                            <div style="width: 280px;height: 33px;"></div>
                            <div>
                                <el-col >
                                    <DatePicker style="width: 100%" format="yyyy-MM-dd HH:mm:ss" v-model="formValidate.time" type="datetimerange" placement="bottom-start" placeholder="自定义时间" :options="options"></DatePicker>
                                </el-col>
                            </div>
                        </FormItem>
                    </Col>
                    <Col class="ivu-text-right userFrom">
                        <FormItem style="margin-top: 30px">
                            <Button type="primary" icon="ios-search" label="default" class="mr15"  @click="getSearch">搜索</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div class="muser-order-container clearfix">
                <el-table :data="listData" height="500px" v-loading="isLoad">
                    <el-table-column  align="center"  width="80"   	   label="详情"         prop="id" type="expand">
						<template slot-scope="scope">
						    <el-form label-position="left" inline class="demo-table-expand" v-if="scope.row.pay_json">
								<el-form-item label="交易编号">
								    <span>{{ scope.row.pay_json.payTradeNo }}</span>
								</el-form-item>
								<el-form-item label="交易状态">
								    <span>{{ scope.row.pay_json.tradeStatus }}</span>
								</el-form-item>
								<el-form-item label="交易金额">
								    <span>{{ scope.row.pay_json.totalMoney }}</span>
								</el-form-item>
								<el-form-item label="实付金额">
								    <span>{{ scope.row.pay_json.payMoney }}</span>
								</el-form-item>
								<el-form-item label="交易时间">
								    <span>{{ scope.row.pay_json.payTime }}</span>
								</el-form-item>
						    </el-form>
						</template>
					</el-table-column>
					<el-table-column  align="center"  width="220"      label="商家交易号" prop="pay_no"></el-table-column>
					<el-table-column  align="center"  width="200"      label="订单编号"   prop="order_id">
						<template slot-scope="scope">
							
							<i-link :to="'/system/order/showTemplate?order_id=' + scope.row.order_id + '&title=模板订单' " v-if="scope.row.type=='temp'">
								{{scope.row.order_id}}
							</i-link>
							<!-- <i-link :to="'/system/order/index?order_id=' + scope.row.order_id + '&title=商城订单' " v-if="scope.row.type=='pro' || scope.row.type=='ip'">
								{{scope.row.order_id}}
							</i-link> -->

						</template>
					</el-table-column>
					
                    <el-table-column  align="center"  width="200"   label="用户"       prop="uid">
						<template slot-scope="scope">
							<div v-if="scope.row.uid">
								<div>{{scope.row.nickname}}[UID:{{scope.row.uid}}]</div>
							</div>
							<span v-else>--</span>
						</template>
					</el-table-column>
                    <el-table-column  align="center"  width="100"   label="类型"     prop="type">
						<template slot-scope="scope">

							<el-tag v-if="scope.row.type=='temp'" type="danger">模板购买</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column  align="center"  width="100"      label="支付金额"   prop="money"> </el-table-column>
					<el-table-column  align="center"  minwidth="150"   label="添加时间"   prop="time"></el-table-column>
					<el-table-column  align="center"  minwidth="150"   label="支付时间"   prop="pay_time"></el-table-column>
					<el-table-column  align="center"  width="80"       label="支付类型" prop="pay_type">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.pay_type == 'wxpay'"   type="success">微信</el-tag>
							<el-tag v-if="scope.row.pay_type == 'system'"  type="danger" >系统后台</el-tag>
						</template>
					</el-table-column>
					<el-table-column  align="center"  width="80"       label="状态"       prop="handle" >
					    <template slot-scope="scope">
					        <el-tag v-if="scope.row.status == 0"  type="warning">待支付</el-tag>
					        <el-tag v-if="scope.row.status == 1"  type="success">支付成功</el-tag>
					    </template>
					</el-table-column>
					<el-table-column  align="center"  minwidth="100"   label="操作"   prop="handle" fixed="right">
					    <template slot-scope="scope">
							<div v-if="!scope.row.pay_json  && scope.row.pay_type!='system'">
							    <a @click="tapSearchPayTrade(scope.row)">查询交易</a>
							</div>
							<!-- <div v-if="scope.row.admin_id">
								<div>【{{scope.row.admin_name}}】</div>
							</div>
							<div v-if="scope.row.mono">
								<div>{{scope.row.mono}}</div>
							</div> -->
					    </template>
					</el-table-column>
					
					
                </el-table>
                <div style="margin-top: 10px;">
                    <Page :total="page.count" :page-size="page.pageSize" show-total show-elevator @on-change="pageChange"/>
                </div>
            </div>
        </Card>
        <ui-loading :text="loadText" v-if="isLoading"></ui-loading>
    </div>
</template>


<script>
    import IPageHeader from "../../../layouts/system/page-header/index";
    import {SystemPayTradeList,SystemSearchPayTrade} from "../../../api/system/user";
    import UiLoading from "../../../ui/loading/index";
    export default {
        name: "SystemPayTradeList",
        components: {UiLoading, IPageHeader},
        computed: {},
        data() {
            return {
                listData:[],
                isLoad : true,
                loadText:"",
                isLoading:false,
                title:"",
				options: {
				    shortcuts: [
				        {
				            text: '今天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
				                return [start, end];
				            }
				        },
				        {
				            text: '昨天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)));
				                end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近7天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近30天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本月',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本年',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
				                return [start, end];
				            }
				        }
				    ]
				},
                formValidate: {
                    time    	: [],
					status      : '',
					uid			: '',
					type        : '',
					mobile      : '',
					pay_no      : '',
					order_id    : '',
                },
                // 搜索区域
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                //订单分页
                page : {
                    count : 0,
                    pageSize : 0,
                    page : 1
                }
            }
        },

        created() {
            this.initView();
        },
        methods: {
            initView:function(){
                this.getData();
            },
            getData:function () {
                var post = {...this.formValidate, page : this.page.page};
                this.isLoad = true;
                SystemPayTradeList(post)
                    .then(res=>{
                        this.isLoad = false;
                        if(res.code == 200) {
                            this.listData = res.data.list;
                            this.page.pageSize = res.data.pageSize;
                            this.page.count = res.data.pageCount;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.isLoad = false;
                        this.listData = [];
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            pageChange: function (index) {
                this.page.page = index;
                this.getData();
            },
            //搜索
            getSearch () {
                this.page.page = 1;
                this.getData();
            },
			
			/**
			 * 查询交易
			 */
			tapSearchPayTrade:function(row){
			    let loading = this.$loading('查询数据中..');
			    SystemSearchPayTrade({id:row.id})
			        .then(res=>{
			            loading.close();
			            if(res.code == 200) {
			                this.$alert(res.msg,'系统提示');
			                this.initView();
			            } else {
			                this.$alert(res.msg, '系统提示');
			            }
			        })
			        .catch(err=>{
			            loading.close();
			            this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			        });
			},

        }
    }
</script>
<style scoped>
    .muser-order-container{background: #ffffff;padding: 20px;margin-bottom: 20px;}

    .muser-order-count-nav{padding: 0px 50px;width:30%;position: relative;}
    .muser-order-count-nav-name{font-size: 14px;color:#9B9B9B;height:20px;line-height: 20px;}
    .muser-order-count-nav-val{display: inline-block;height:42px;line-height: 42px;font-size: 32px;color:#333333;font-weight: 700;}
    .muser-order-count-nav-unit{display: inline-block;height:20px;line-height: 20px;font-size: 14px;color:#333333;}
    .muser-order-count-line{height:72px;width:1px;background: #EEEEEE;}
    a.muser-order-count-a{display: block;position: absolute;top:20px;right:50px;height:32px;line-height: 32px;padding: 0px 20px;border:1px solid #FFB300;border-radius: 20px;color:#FFB300;font-size: 14px;}
    a.muser-order-count-a.muser-afull{background: #FFB300;color:#ffffff}
    .user-show{background: #ffffff;padding: 0px 15px;}
    .user-show-title{height:32px;line-height: 32px;padding-left: 7px;position: relative;font-size: 16px;color:#333333}
    .user-show-title .sline{width: 3px;height: 14px;background: #EA312B;border-radius: 2px;position: absolute;top:9px;left:0px}
    .user-show-content{}

    table.muser-order-table{width:100%;border:1px solid #f0f0f0}
    table.muser-order-table tr:nth-child(odd){background: #F7F7F7;}
    table.muser-order-table tr th{padding: 12px 0px;font-size: 13px;color:#848484;text-align: center;}
    table.muser-order-table tr td{padding: 16px 0px;font-size: 12px;color:#333333;text-align: center;border-top:1px solid #f0f0f0}
    a.muser-order-table-a{font-size: 12px;color:#1492E6;}
    .muser-order-table-line{display: inline-block;height:10px;background: rgba(112,112,112,0.31);width:1px;margin: 0px 4px;}

    .spping{ position: absolute; width: 100%;height: 100%;z-index: 9;top: 0;left: 0; background: rgba(255,255,255,0.5);}

    .muser-tab-continer{border-bottom:1px solid #EEEEEE}
    a.muser-tab-a{display: inline-block;padding: 0px 28px;height:42px;line-height: 42px;border-bottom:3px solid transparent;font-size: 17px;color:#595959;}
    a.muser-tab-a.active{border-bottom:3px solid #EA312B;color:#EA312B}
	
	
	
	.demo-table-expand {
	    font-size: 0;
	  }
	  .demo-table-expand label {
	    width: 90px;
	    color: #99a9bf;
	  }
	  .demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 100%;
	  }
	
</style>
