<template>
    <div class="riskWarning">
        <div class="contentList">
            <md-scroll-view
                    ref="scrollView"
                    :bouncing="false"
                    :scrolling-x="false"
                    :auto-reflow="true"
                    @end-reached="$_onEndReached"

            >
                <ul>
                    <li v-for="(item,index) in riskList" :key="index">
                        <p>
                      <span class="title">
                      （{{index+1}}）{{item.riskPointName}}
                      </span>
                            <span class="newstime">
                        {{item.createdTime | dateFilter(2)}}
                      </span>
                        </p>
                        <p class="cont">
                            {{item.causeDesc}}
                        </p>
                    </li>
                </ul>
                <!--<md-scroll-view-more
                        slot="more"
                        :is-finished="isFinished"
                >
                </md-scroll-view-more>-->
            </md-scroll-view>

        </div>
    </div>
</template>

<script>
    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Tag,
        Toast,
    } from 'mand-mobile';
    import {getBigScreenMessage} from '@/api/risk_point';

    export default {
        name: "",
        components: {
            [TabBar.name]: TabBar,
            [Swiper.name]: Swiper,
            [SwiperItem.name]: SwiperItem,
            [ScrollView.name]: ScrollView,
            [ScrollViewRefresh.name]: ScrollViewRefresh,
            [ScrollViewMore.name]: ScrollViewMore,
            [Button.name]: Button,
            [InputItem.name]: InputItem,
            [Icon.name]: Icon,
            [Tag.name]: Tag,
        },
        data() {
            return {
                riskList: [],
                page: 0,
                isFinished: false,
            }
        },
        mounted(){
            if(this.$route.query.fromUrl){
                this.$store.dispatch('request_config/setBaseUrl', this.$route.query.fromUrl)
            }else{
                this.$store.dispatch('request_config/setBaseUrl', location.host)
            }

            this.getRiskList()
        },
        created() {
        },
        methods: {
            async getRiskList(){
                console.log(this.isFinished)
                if(this.isFinished){
                    return
                }
                this.page +=1
                // Toast.loading('加载中...')
                await getBigScreenMessage({
                    gId:this.$route.query.gId,
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId,
                    path: 'riskPointControlRecord'

                    /*page: this.page,
                    limit: 10*/
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 1) {
                        console.log(JSON.parse(data).riskPointControlRecord[0])
                        const lastPage = Math.ceil(count / limit);
                        if (page >= lastPage) {
                            this.isFinished = true
                        }
                        this.riskList = this.riskList.concat(JSON.parse(data).riskPointControlRecord[0]);
                        console.log(this.riskList)
                    }
                }).catch(err => {
                })
                /*setTimeout(function () {
                    Toast.hide()
                }, 300)*/
                // this.$refs.scrollView.finishLoadMore()
            },
            $_onEndReached(){

            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
.riskWarning{
    .contentList{
        height: 100vh;
        ul{
            overflow: hidden;
            padding: 15px 18px;
            li{
                list-style: none;
                border-bottom: 1px dashed #dedede;
                padding: 0.15rem 0;
                p{
                    margin:0;
                    color: #222222;
                    font-size: 0.3rem;
                    span{

                    }
                    span.title{
                        text-overflow: ellipsis;
                        font-weight: bold;
                    }
                    span.newstime{
                        font-size: 0.24rem;
                        display: inline-block;
                        float: right;
                        color: #505d8b;
                    }
                }
                .cont{
                    font-size: 0.27rem;
                    margin-top: 0.15rem;
                }
                /*p:first-child{
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                    flex-direction: row;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                }*/
            }
            li:last-child{
                border-bottom: none;
            }
        }
    }
}
</style>