<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="!searchShow?'巡检问题跟踪':'搜索'" 
                :leftFlag="true" 
                :rightFlag="false"  
                @back="handleBack" :searchType="searchShow?1:undefined"
            ></customHeader>
            
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>
          
            <!-- 搜索处理 -->
            <customSearch v-if="searchShow"   
                :searchKeywords="searchText" 
                :searchType="searchTypeObj" 
                :checkTypeObj="notictTypeCheck"
                :searchTypeList="noticeTypeList" 
                @confirm="handleSearchConfirm"
            ></customSearch>
            <view class="search" v-else  @click="handleSearchFocus">
                <view class="search-bg">
                    <view class="search-left">{{ notictTypeCheck.name?notictTypeCheck.name:'全部' }}</view>
                    <view class="search-right">
                        <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
                        <input class="uni-input" v-model="searchText" placeholder="搜索" placeholder-class="search-color" />
                    </view>
                </view>
            </view>

            <!-- 列表 -->
            <mescroll-uni  v-if="!searchShow" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                :up="upOption" :down="downOption" :fixed="false" class="scroll-h" :class="{'loading-scroll':cssFlag}">
                <view class="white-bg" :class="{'bg-height':list.length<8}">
                    <block v-if="list.length>0">
                        <view class="report-list" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
                            <view class="r-list" style="padding-bottom:0">
                                <view class="r-name">{{ item.groupName }}</view>
                                <view class="r-right">
                                    <!-- 问题状态 1=追踪、2=关闭 -->
                                    <view v-if="item.problemStatus==1" class="btn-red">进行中</view>
                                    <view v-if="item.problemStatus==2" class="btn-green">已解决</view>
                                </view>
                            </view>
                            <view class="r-list">
                                <view class="r-left">
                                    <view class="r-l-left" style="width:220rpx">跟踪次数<span class="r-gray">{{ item.logNum }}</span></view>
                                    <view class="r-l-right">最近跟踪时间<span class="r-gray">{{parseTime(item.lastLogTime,'{y}-{m}-{d} {h}:{i}') }}</span></view>
                                </view>
                            </view>
                            <view class="report-border" v-if="index<list.length-1"></view>
                        </view>
                    </block>
                    <view v-else class="no-data">
                        <img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import { onLoad,onHide } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'
import customSearch from '@/components/customSearch.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { parseTime } from '@/utils/datetime.js'
import { problemList } from '@/api/polling.js'

onLoad(async(opt) => {
    uni.setStorageSync('page_cache',true);
})

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

// 搜索处理
let searchShow = ref(false);
let searchText = ref(undefined);
let searchTypeObj = ref({typeId:3,typeName:'巡检类型'});
let noticeTypeList=ref([
    {id:1,name:'日常巡检'}, 
    {id:2,name:'临时巡检'}, 
]);
let notictTypeCheck = ref({});//选中类型

onHide(()=>{
    searchShow.value=false;
})

// 搜索返回操作
const handleBack=()=>{
    searchShow.value=false;
}
// 获取input 焦点跳转
const handleSearchFocus=()=>{
    searchShow.value = true;
}

// 搜索完返回处理
const handleSearchConfirm = (param1,param2)=>{
    // console.log(param1,param2)
    notictTypeCheck.value=param1.value;
    searchText.value=param2.value;;
    searchShow.value=false;
}

// 清除未读
const handleRead = () => {
    list.value.forEach(item => {
        item.isRead = false;
    })
}
// 查询通知列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
    page: { num: 0, size: 10 },
    noMoreSize: 5,
    empty: { 
        tip: '~ 空空如也 ~',
        icon: "../../../static/images/mescroll-empty.png"
    },
    textLoading: '加载中...',
    textNoMore: '已经到底了'
});

const downOption = ref({
    auto: false,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});

let cssFlag=ref(false);//控制样式
const mescrollInit = (mescroll) => {
    cssFlag.value = true;
    mescrollRef.value = mescroll;
};

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        console.log("下拉刷新")
        const res = await getList(1, upOption.value.page.size);
        cssFlag.value = false;
        list.value = res.list;
        // mescroll.resetUpScroll();
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}
// 上拉加载更多
const upCallback = async (mescroll) => {
    try {
        console.log("上拉加载更多")
        let res = await getList(mescroll.num, mescroll.size);
        if (mescroll.num === 1) {
            list.value = res.list;
        } else {
            list.value.push(...res.list);
        }
        mescroll.endBySize(res.list.length, res.total);
    } catch (error) {
        mescroll.endErr();
    }
}

// 获取数据列表
const getList = (pageIndex, pageSize) => {
    return new Promise(async (resolve) => {
        let param = {
            pageIndex,
            pageSize,
            key:searchText.value?searchText.value:undefined,
            taskType:notictTypeCheck.value.id
        }
        let res = await problemList(param);
        let list = res.list || [];
        resolve({
            list,
            // total: res.recordCount || 0
        });
    });

}

// 查看详情
const handleDetail = (item) =>{
    let url= '/pages/business/polling/problemDetail?problemId='+item.problemId;
    uni.navigateTo({
        url
    });
}
</script>

<style scoped>
.all-body{
    position: absolute;
    /* #ifdef APP-PLUS */
    top:150rpx;
    height: calc(100vh - 75px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top:120rpx;
    height: calc(100vh - 64px);
    /* #endif */
    overflow: hidden;
}

:deep(.mescroll-downwarp .downwarp-progress){
    border-color:#fff !important;
}

:deep(.mescroll-downwarp .downwarp-tip){
    color:#fff;
}


.white-bg {
    width: 670rpx;
    padding: 30rpx 40rpx 40rpx;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    position: relative;
}
.white-bg.bg-height{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 150px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 140px);
    /* #endif */
}
.scroll-h{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 130px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 105px);
    /* #endif */
}

.report-list{
    position: relative;
}
.report-border{
    border-bottom:1px solid #E7E7E7;
    width:710rpx;
    height: 1px;
    margin:20rpx 0;
}
.report-list .r-list{
    padding: 5rpx 0;
}
.report-list .r-list .r-left{
    display: flex;
}
.report-list .r-list .r-gray{
    margin-left:10rpx;
}
.report-list .r-list .r-blue{
    margin-left:10rpx;
    font-weight: bold;
}
.report-list .r-list .r-red{
    font-weight: bold;
}
.report-list .r-list .r-name{
    width:525rpx
}
.r-left .r-l-left{
    width:280rpx;
}
.r-left .r-l-right{
   
}
.no-data .no-pic{
    display: block;
    width:440rpx;
    height:210rpx;
    margin:40rpx auto;
}
:deep(.mescroll-upwarp){
    display: none !important;
}
</style>