<template>
    <view class="home padding-bottom">
        <cu-custom class="home-custom" bgColor=".bg-sancolor"
                   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png" :isBack="true">
            <block slot="content">例行监测</block>
        </cu-custom>
        <view class="padding-sm">
            <view class="cu-list menu margin-top taskDetail bg-white"
                  v-for="(item, index) in taskListData" :key="index" @click="navigateToDetail(item.ahTasks.id)">
                <view class="cu-item arrow">
                    <view class="title text-black text-bold text-lg">
                        <text class="cuIcon-titles text-green"></text>
                        {{ item.ahTasks.taskName }}
                    </view>
                </view>
                <view class="content padding-sm detail solid-bottom padding-bottom padding-left">
                    <view>任务编号：{{ item.ahTasks.taskNumber }}
                    </view>
                    <view>年度/季度：{{ item.ahTasks.taskYear.substr(0, 4) }}/{{
                            item.ahTasks.taskBatch
                        }}
                    </view>
                    <view>发布单位：{{ item.ahTasks.publishUnitName }}</view>
                    <view>任务时间：{{
                            formatDate(item.ahTasks.startTime)
                        }}至{{ formatDate(item.ahTasks.endTime) }}
                    </view>
                </view>
            </view>
        </view>
        <view class="cu-load bg-green light text-sm" v-show="pageTotal > 0"
              :class="page > pageTotal?'over':'loading'"></view>
        <view class="radius shadow-warp bg-white margin-top text-lg" v-show="pageTotal === 0">
            <view class="cu-list menu-avatar">
                <view class="cu-item">
                    <view class="content">
                        <view class="text-sm text-center" style="justify-content: center;">
                            <text class="text-cut">
                                <text class="cuIcon-warn text-yellow margin-right-xs text-xl"></text>
                                未查询到相关数据
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>


<script>
    import {
        _zfyTaskList
    } from "./zf-task-list-model.js";

    export default {
        data() {
            return {
                page: 1,
                size: 10,
                pageTotal: 1,
                taskListData: []
            };
        },
        onReachBottom() {
            this.getCheckTaskList();
        },
        onShow() {
            this.page = 1;
            this.pageTotal = 1;
            this.getCheckTaskList();
        },
        methods: {
            getCheckTaskList() {
                if (this.page === 1 || (this.page <= this.pageTotal)) {
                    _zfyTaskList.getCheckTaskList({
                        pageNum: this.page,
                        pageSize: this.size,
						taskType:"TASK_COMMON"
                    }, res => {
                        const {data, message, code} = res;
                        if (code === 200) {
                            const {records, total} = data;
                            this.pageTotal = Math.ceil(total / this.size);
                            if (this.page === 1) {
                                this.taskListData = records;
                            } else {
                                this.taskListData = this.taskListData.concat(records);
                            }
                            this.page++;
                        } else {
                            this.$msg(message);
                        }
                    });
                }
            },
            navigateToDetail(taskId) {
                uni.navigateTo({
                    url: "/pages/zf-task-list/index?taskId=" + taskId
                });
            },

            formatDate(dateTime) {
                return dateTime.substring(0, 10)
            }
        }
    };
</script>

<style scoped>
    .detail view {
        font-size: 30rpx;
        height: 2em;
        line-height: 2em !important;
        border: none;
        color: gray;
    }

    .tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30upx;

    }
    .tool .text{
        font-size: 1.1em!important;
    }

    .taskDetail {
        /*border: 1rpx solid #8799a3;*/
        box-shadow: 0 0 25upx #aaa;
        border-radius: 10rpx;
        overflow: hidden;
    }

    .btn-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cu-tag {
        padding: 20upx;
        border-radius: 10upx;
    }

    label {
        padding-left: .5em;
    }

    .text-content {
        line-height: 2em;
        white-space: pre-line;
        text-align: left;
        max-height: 60vh;
        overflow-y: scroll;
        /*padding-bottom: 100rpx;*/
    }
</style>
