<template>
    <app-layout>
        <view class="form-item" v-for="item in list" :key="item.id">
            <view class="item-head cross-center main-between">
                <view class="item-name">{{item.form_list_name}}</view>
                <view v-if="item.reply">已回复</view>
            </view>
            <view class="item-bottom cross-center main-between">
                <view>提交时间：{{item.created_at}}</view>
                <view @click="toDetail(item.id)" class="look-detail">查看详情</view>
            </view>
        </view>
        <view class='no-tip' v-if="list.length === 0 && !loading">
            <image class="icon-image" src='./../image/no-log.png'></image>
            <view>没有任何表单信息哦~</view>
        </view>
    </app-layout>
</template>

<script>

    import { mapState } from "vuex";

    export default {
        data() {
            return {
                loading: true,
                over: true,
                page: 1,
                list: []
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info
            })
        },
        onReachBottom() {
            if (!this.over) {
                this.page++;
                uni.showLoading({
                    mask: true
                });
                this.getList(this.page);
            }
        },
        methods: {
            toDetail(id) {
                uni.navigateTo({
                    url: "/plugins/diy/detail/detail?id=" + id
                })
            },
            getList(page) {
                this.$request({
                    url: this.$api.diy.form_list,
                    data: {
                        page: page ? page : 1
                    }
                }).then(response=>{
                    this.loading = false;
                    this.$hideLoading();
                    uni.hideLoading();
                    if(response.code === 0) {
                        this.list = this.list.concat(response.data.list);
                        this.over = response.data.list.length == 20 ? false : true;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                    uni.hideLoading();
                });
            },
        },

        onLoad() { this.$commonLoad.onload();
            let that = this;
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            that.getList(this.page);
        }
    }
</script>

<style scoped lang="scss">
    .no-tip {
        position: fixed;
        top: #{400rpx};
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #666666;
        font-size: #{24rpx};
        width: #{240rpx};
        text-align: center;
        image {
            height: #{240rpx};
            width: #{240rpx};
            margin-bottom: #{20rpx};
        }
    }
    .form-item {
        margin: 30rpx auto;
        width: 702rpx;
        height: 180rpx;
        border-radius: 15rpx;
        background-color: #fff;
        padding: 0 29rpx;
        font-size: 24rpx;
        color: #353535;
        .item-head {
            height: 50%;
            .item-name {
                font-size: 30rpx;
            }
        }
        .item-bottom {
            height: 50%;
            border-top: 2rpx solid #e2e2e2;
            color: #999999;
            .look-detail {
                width: 130rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                color: #FF4544;
                background-color: rgba(255,69,68,0.1);
                border-radius: 5rpx;
            }
        }
    }
</style>