<template>
    <view>
        <view class="lz-status_bar" :style="{ height: menuButtonInfo + 'px' }">
            <view class="lz-top_view"></view>
        </view>
		<!--#ifdef MP-WEIXIN-->
		<view class="index-head">
		    <view class="index-head-top">
		        <!-- <view class="index-head-l" @tap="$navigateBack">
		            <view class="iconfont icon-youjiantou"></view>
		        </view> -->
		        <view class="index-head-m">巡检记录</view>
		    </view>
		</view>
		<!--#endif-->
        <mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                       :down="downOption" :up="upOption">
            <view class="shenpi-list-flex">
                <view class="shenpi-list" v-for="(item,index) in  dataList" :key="index" @tap="gotoDetail(item)">
                    <view class="shenpi-flex">
                        <view class="shenpi-title shenpi-title-top">
                            <view class="shenpi-title-l">
                                <view>{{item.site_name}}</view>
                                <view v-if="item.status==2" class="shenpi-title-t">已跳过巡检</view>
                            </view>
                            <view v-if="item.status==1" class="shenpi-list-button" hover-class="navigator-hover">巡检详情
                            </view>
                        </view>

                        <view style="display: flex;align-items: center;justify-content: space-between;">
                            <view>
                                <view v-if="item.status==1" class="shenpi-title">
                                    <view>巡检时间:</view>
                                    <view class="shenpi-list-r">{{item.checktime}}</view>
                                </view>
                                <view v-else class="shenpi-title">
                                    <view>跳过时间:</view>
                                    <view class="shenpi-list-r">{{item.jumptime}}</view>
                                </view>
                                <!-- <view class="shenpi-title">
									<view>结束时间:</view>
                                    <view class="shenpi-list-r">
                                        {{item.endtime}}
                                    </view>
                                </view> -->
                            </view>
                        </view>
                    </view>

                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 注意.vue后缀不能省
    import {mapState} from 'vuex';
    import util from '@/lib/utils/index.js'
    import WucTab from '@/components/wuc-tab/wuc-tab.vue';
    import noRecode from "@/components/no-recode.vue";

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                is_recode: false,
                xunjianList: {
                    list: [],
                    // 请求参数
                    requestParams: {
                        page: 1,
                        limit: 10
                    }
                },
                list: [],

                mescroll: null, //mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的常用配置
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的常用配置
                upOption: {
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                // 列表数据
                dataList: []
            }
        },
        computed: {
            ...mapState([
                "userInfo","menuButtonInfo"
            ])
        },
        onLoad() {

        },
        onShow() {
            if (this.userInfo.token == undefined) {
                this.loginOut();
            } else {
                this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据
                this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
            }
        },
        components: {
            WucTab,
            MescrollBody,
            noRecode
        },
        methods: {
            loginOut() {
                this.$lib.$store.commit('clearUserInfo')
                uni.reLaunch({
                    url: '/pages/login/index'
                })
            },
            async upCallback(page) {
                // console.log(page)
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.xunjianRecord,
                    data: {
                        status: this.status,
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin: true
                })
                if (res.code == 1) {
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage =Math.ceil(totalSize/pageSize);
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.count;
                    // 接口返回的是否有下一页 (true/false)
                    // let hasNext = data.xxx;

                    //设置列表数据
                    if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表

                    for (let i = 0, leng = curPageData.length; i < leng; i++) {
                        var timestamp = Date.parse(new Date()).toString();
                        timestamp = timestamp.substr(0, 10);
                        let item = curPageData[i]
                        curPageData[i].area_name = item.area_name;
                        curPageData[i].jumptime = util.timestampToTime(item.jumptime);
                        curPageData[i].checktime = util.timestampToTime(item.checktime);
                        curPageData[i].begintime = util.timestampToTime(item.begintime);
                        curPageData[i].endtime = util.timestampToTime(item.endtime);
                        curPageData[i].id = item.id;
                        curPageData[i].status = item.status;
                        curPageData[i].uid = item.uid;
                    }
                    this.dataList = this.dataList.concat(curPageData); //追加新数据

                    this.mescroll.endBySize(curPageLen, totalSize);

                    this.$nextTick(() => {
                        this.mescroll.endSuccess(curPageLen)
                    })
                }
            },

            filter_xunjian_list() {
                if (this.xunjianList.list) {
                    let arr = [];
                    for (let i = 0, leng = this.xunjianList.list.length; i < leng; i++) {
                        if (this.status == 2) {
                            this.xunjianList.list[i].delay = 0 //1 超时 0 未超时
                        }
                        if (this.xunjianList.list[i].status == this.status) {
                            arr.push(this.xunjianList.list[i]);
                        }
                    }
                    this.list = arr;
                }
                if (this.list.length == 0) {
                    this.is_recode = true
                }
                // console.log(this.list)
            },
            resetData() {
                this.upOption = {
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                };
            },
            gotoDetail(item) {
                if (item.status == 2) return
                this.$lib.$utils.Router.navigateTo({
                    url: '/pages/xunjian/detail',
                    params: {
                        id: item.id
                    }
                })
            },
        }
    }
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .shenpi-list-flex {
        font-size: 16px;
        padding-top: 14px;
    }

    .shenpi-list {
        padding: 16px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-radius: 5px;
        box-shadow: 1px 2px 4px rgb(2 2 2 / 5%);
        width: 93%;
        margin: 0 auto;
        margin-bottom: 14px;
    }

    .shenpi-list-flex .shenpi-list:last-child {
        margin-bottom: none;
    }


    .shenpi-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 16px;
        flex: 1;
    }

    .shenpi-title {
        display: flex;
        align-items: center;
        padding: 0 14px;
        font-size: 14px;
    }

    .shenpi-title-top {
        border-bottom: solid 1px #f3f3f3;
        margin-bottom: 14px;
        padding-bottom: 14px;
        font-size: 16px;
    }

    .shenpi-title-l {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .shenpi-list-button {
        padding: 7px 14px;
        background: #4d72ff;
        color: #fff;
        border-radius: 5px;
        font-size: 12px;
    }

    .shenpi-list-r {
        color: #9f9f9f;
        margin-left: 7px;
    }

    .shenpi-title-t {
        border: solid 1px #f00;
        font-size: 12px;
        color: red;
        padding: 4px 8px;
        margin-left: 8px;
        border-radius: 5px;
    }
</style>