<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" title="巡检详情" 
            :leftFlag="true" :rightFlag="false"
        ></customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <view class="week">{{parseTime(taskObj.planTime,'{y}-{m}-{d} 星期{a} {h}:{i}')}}开始 时长{{taskObj.workHour}}小时</view>
        <view class="bg-progress">
            <view class="progress-container">
                <circleTemplate :progress="progress"></circleTemplate>
                <span>{{ (taskObj.groupFinishNum / taskObj.groupNum*100).toFixed()  }}%</span>
            </view>
            <view class="polling">
                <view class="p-title p-border">巡检单号<text>{{taskObj.taskNo}}</text></view>
                <view class="p-title">完成进度<text class="p-blue">{{taskObj.groupFinishNum}}</text>/{{taskObj.groupNum}}</view>
                <view class="btn-primary">
                    <button type="primary" size="mini" @click="handleConfirm" :disabled="taskObj.taskStatus!=3">任务提交</button>
                </view>
            </view>
        </view>

        <!-- 列表 -->
        <view class="white-bg2">
            <!-- @up="upCallback" :up="upOption"  -->
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" 
                @down="downCallback" :down="downOption" :up="upOption"
                :fixed="false" class="scroll-h" 
                :class="{'loading-scroll':cssFlag}"
            >
                <view class="white-bg">
                    <view class="blue-title">{{taskObj.taskName}}</view>
                    <block v-if="taskObj.groupList">
                        <block v-if="taskObj.groupList.length>0">
                            <view class="report-list" v-for="(item, index) in taskObj.groupList" :key="index" @click="handleDetail(item,1)">
                                <view class="r-list">
                                    <view class="r-left">{{ item.groupName }}</view>
                                    <view class="r-right">
                                        <block v-if="item.pointFinishNum<item.pointNum">
                                            <text class="r-orange">{{item.pointFinishNum}}</text>/{{item.pointNum}}
                                        </block>
                                        <block v-else>{{item.pointFinishNum}}/{{item.pointNum}}</block>
                                        <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                                    </view>
                                </view>
                                <view class="report-border" :style="{borderColor:index<taskObj.groupList.length-1?'#E7E7E7':'#fff'}"></view>
                            </view>
                        </block>
                        <view v-else class="no-data">
                            <img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
                        </view>
                    </block>
                    <view v-else class="no-data">
                        <img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
                    </view>

                    <!-- 问题跟踪 -->
                    <view class="bg-border"></view>
                    <view class="red-title">问题跟踪</view>
                    <block v-if="taskObj.problemList">
                        <block v-if="taskObj.problemList.length>0">
                            <view class="report-list" v-for="(item, index) in taskObj.problemList" :key="index" @click="handleDetail(item,2)">
                                <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,'{m}-{d} {h}:{i}') }}</span></view>
                                    </view>
                                </view>
                                <view class="report-border" v-if="index<taskObj.problemList.length-1"></view>
                            </view>
                        </block>
                        <view v-else class="no-data">
                            <img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
                        </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>

    <!-- 弹窗提示 -->
    <pollingShowModal :visible="visible"
        :title="title"
        :content="content" 
        :subContent="subContent"
        :btnFlag2="btnFlag2"
        :btnTxt="btnTxt"
        :isGreen="isGreen"
        :subTime="subTime"
        @close="handleClose"
        @confirm="submitConfirm"
        ref="showModel"
    ></pollingShowModal>
</view>
</template>
<script setup>
import { ref,onMounted,nextTick,computed } from 'vue'
import { onLoad,onHide, onShow } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import pollingShowModal from "@/components/pollingShowModal.vue";
import circleTemplate from '@/components/circleTemplate.vue';
import { parseTime } from '@/utils/datetime.js';
import { formatTaskStatus } from '@/utils/status.js';
import { taskDetail,submitTask } from '@/api/polling.js';
import {showAlert,showLoading,hideLoading} from '@/utils/message.js';

// '2025-12-29  星期五'
let taskId = ref(undefined);
let dateStr = ref('');
const progress = ref(0); // 初始进度为0
onLoad(option => {
    // console.log(option)
    taskId.value = option.id;
})

onShow(async ()=>{
    let res = await getList(1, 10);
    taskObj.value = res;
})

// 查询列表
let taskObj = ref({
    list:[],
    questList:[],
    groupFinishNum:0,
    groupNum:1
});
const mescrollRef = ref(null);
const upOption = ref({
    use: false,
    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;
        taskObj.value = res;
        // 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) {
            taskObj.value = res;
        } 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 = {
            taskId:taskId.value
        }
        let res = await taskDetail(param);
        let data = res||{};
        progress.value = (data.groupFinishNum / data.groupNum*100).toFixed()
        resolve({
            ...data,
        });
    });

}

// 自定义弹窗
let title = ref('');
let content = ref('');
let visible = ref(false);
let subContent= ref('');
let subTime= ref(undefined);
let btnFlag2=ref(true)
let btnTxt=ref('')
let isGreen =ref(false);
const showModel=(str)=>{
    visible.value = true;
    content.value = str;
    subContent.value='是否确认提交?';
    btnTxt.value='提交'
    btnFlag2.value=true;
    isGreen.value = false;
    subTime.value=undefined;
}
const showModel2=(str)=>{
    content.value = str;
    subContent.value='提交时间';
    btnTxt.value='确定';
    btnFlag2.value=false;
    isGreen.value = true;
    visible.value = true;
}
//关闭
const handleClose=()=>{
    visible.value = false;
}


// 执行提交
const handleConfirm=()=>{
    let taskItem = taskObj.value;
    if(taskItem.groupFinishNum<taskItem.groupNum){
        showModel('有未完成的巡检项');
    }else{
        let param = {
            taskId:taskObj.value.taskId
        }
        showLoading("加载中...")
        submitTask(param).then(async res=>{
            showAlert("任务提交成功！");
            let res2 = await getList(1, 10);
            taskObj.value = res2;
        }).finally(()=>{
            hideLoading();
        })
    }
   
}

// 提交
const submitConfirm=()=>{
    let param = {
        taskId:taskObj.value.taskId
    }
    showLoading("加载中...")
    submitTask(param).then( async res=>{
        visible.value = false;
        showAlert("任务提交成功！");
        let res2 = await getList(1, 10);
        taskObj.value = res2;
    }).finally(()=>{
        hideLoading();
    })
}


// 查看详情 type 1-详情 2-问题详情
const handleDetail = (item,type) =>{
    let url='' 
    if(type==1){
        url = '/pages/business/polling/optionDetail?taskId='+taskId.value+"&groupId="+item.groupId;
    }else{
        url = '/pages/business/polling/problemDetail?problemId='+item.problemId;
    }
    uni.navigateTo({
        url
    });
}

</script>
<style scoped>
.week{
    padding:0 40rpx;
    color: #fff;
    font-size:32rpx;
    margin-bottom:20rpx;
}

.bg-progress{
    background: url('@/static/images/polling/bg-XunJian.png') no-repeat;
    background-size:750rpx 352rpx;
    /* width:750rpx;
    height: 352rpx; */
    width:730rpx;
    height: 312rpx;
    padding:20rpx 0rpx 20rpx 20rpx;
    display: flex;
}

.bg-progress .progress-container{
    width:280rpx;
    height: 280rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.bg-progress .progress-container span{
    position: absolute;
    font-size: 72rpx;
    color:#10F6FC;
    font-weight: bold;
}
.bg-progress .polling{
    padding:20rpx 0rpx 50rpx 50rpx;
}
.polling .p-title{
    font-size:26rpx;
    color:#fff;
    padding:10rpx 30rpx 20rpx 0;
    width:328rpx;
}
.polling .p-title.p-border{
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.polling .p-title text{
    font-size:32rpx;
    font-weight: bold;
    margin-left:10rpx;
}
.polling .p-title text.p-blue{
    color:#10F6FC
}
.polling .btn-primary{
    width:220rpx;
    margin-top:10rpx;
}
.polling .btn-primary uni-button[type='primary']{
    background-color: #05A3F4;
}

.scroll-h{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 253px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 253px);
    /* #endif */
}
.white-bg{
    width: 680rpx;
    padding: 30rpx 30rpx 30rpx 40rpx;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.white-bg2{
   /* padding:0 40rpx; */
   margin-top:-30rpx;
}
.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-right{
    display: flex;
    align-items: center;
}
.report-list .r-list .r-right .r-orange{
    color:#FF9638
}
.report-list .r-list .r-right .uniui-right{
    margin-left:20rpx;
}

.bg-border{
    width:750rpx;
    height:20rpx;
    background-color: #F5F5F5;
    margin-left:-40rpx;
    margin-top:40rpx;
}

.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>