<template>
    <view class="container">
        <top></top>
        <view class="flex-col">
            <u-popup :show="show" :round="10" @close="geclose" :closeOnClickOverlay="true" :borderRadius="20">
                <filtrate></filtrate>
            </u-popup>
            <u-popup :show="show1" :round="10" @close="geclose1" :closeOnClickOverlay="true" :borderRadius="20">
                <jiedan></jiedan>
            </u-popup>

            <scroll-view :style="'height:'+windowHeight+'px'" scroll-y="true" class="list scroll-Y"
                @scrolltolower="getmore">
                <div class="items">
                    <item :item="item" v-for="(item,index) in list" :key="index"></item>
                </div>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import item from '../../components/hall/item.vue'
    import filtrate from '../../components/hall/filtrate.vue'
    import jiedan from '../../components/hall/jiedan.vue'
    import top from '../../components/hall/top.vue'
    import {
        tradeIndex
    } from '../../config/api.js'
    export default {
        components: {
            item,
            filtrate,
            jiedan,
            top
        },
        data() {
            return {
                show: false,
                show1: false,
                windowHeight: 0,
                list: [],
                formdata: {
                    acceptName: "",
                    billType: "",
                    limit: '10',
                    maxAmount: "",
                    maxDay: "",
                    maxRate: "",
                    minAmount: "",
                    minDay: "",
                    minRate: "",
                    order: "desc",
                    page: 1,
                    sidx: "id",
                    tradeState: "",
                }
            };
        },
        mounted() {
            this.getdata()
            var that = this;
            uni.getSystemInfo({
                success: function(res) {
                    console.log(res)
                    console.log(123)

                    that.windowHeight = res.windowHeight - res.statusBarHeight - 125
                }
            })
        },
        // onReachBottom: function() {
        //  this.getmore()
        // },
        methods: {
            geclose() {
                this.show = false
            },
            getshow() {
                this.show = true
            },
            getshow1() {
                this.show1 = true
            },
            getdata() {
                var that = this;
                that.formdata.page = that.formdata.page.toString()
                tradeIndex(that.formdata).then(res => {
                    if (res.code == 0) {
                        that.list = res.page.list
                    }
                }).catch(err => {

                })
            },
            getmore() {
                var that = this;
                that.formdata.page = (Number(that.formdata.page) + 1).toString();
                that.status = 'loading';
                tradeIndex(that.formdata).then(res => {
                    console.log(res.data)
                    var data = res.page.list;
                    if (!data || data.length == 0) {
                        that.status = 'nomore';
                    }
                    for (var i = 0; i < data.length; i++) {
                        that.list.push(data[i]);
                    }
                }).catch(err => {

                })
            },
        }
    };
</script>

<style scoped lang="scss">
    .container {
        width: 100vw;
        background: url('https://piaolala.oss-cn-beijing.aliyuncs.com/bg.jpg');
        background-size: 100%;
        height: 100%;
        position: absolute;
    }

    .leftgroupx {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;

        .left-group {
            margin-right: 40rpx;
        }
    }

    .groupsx {
        position: relative;
    }

    .scroll-Y {
        position: absolute;
        width: 750rpx;
        height: 100%;
    }

    .items {
        width: 690rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
    }
</style>