<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" title="问题跟踪" 
            :leftFlag="true" :rightFlag="true"
        >
            <template #right>
                <view class="head-right" @click="handleQuestion" v-if="problemObj.problemStatus==1">
                    <view class="btn-yellow">
                        <uni-icons type="plus" size="20" color="#4C2D11"></uni-icons> 新增跟踪信息
                    </view>
                </view>
            </template>
        </customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <!-- 下拉刷新 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit"
            :down="downOption"  @down="downCallback"
            :fixed="false" class="scroll-h"
        >
            <view class="white-bg">
                <view class="red-title">问题：{{problemObj.groupName}}</view>
                <view class="report-list">
                    <view class="report-pro">问题项</view>
                    <view class="report-right">
                        <view class="r-list"  v-for="(item, index) in problemObj.list" :key="index">
                            <view class="r-left" :class="{'r-red':item.active}">
                                <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                                <view>{{ item }}</view>
                            </view>
                            <view class="r-right">
                                <view class="r-r-round" :class="{active:item.active}"></view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="report-border"></view>
                <view class="report-list">
                    <view style="width:45%;display:flex;">
                        <view class="report-pro report-w" style="margin-right:20rpx;">提交人</view>
                        <view class="report-right report-w">{{problemObj.createUserName}}</view>
                    </view>
                    <view style="width:55%;display:flex;">
                        <view class="report-pro report-w" style="margin-right:20rpx;">提交时间</view>
                        <view class="report-right report-w">{{parseTime(problemObj.createTime,'{y}-{m}-{d} {h}:{i}')}}</view>
                    </view>
                </view>
                <view class="report-border"></view>
                <view class="report-list">问题描述</view>
                <view class="report-list report-gray">{{problemObj.problemDesc}}</view>
                <view class="report-border"></view>
                <view class="report-list">问题点位照片或视频</view>
                <view class="report-list">
                    <view class="img-flex">
                        <block v-for="(item2,index2) in problemObj.listFile" :key="index2">
                            <view class="img-show" v-if="getFileType(item2)=='image'" @click="showMediaPreview(item2)">
                                <image :src="minioObj.minioThumbUrl+'/'+item2" mode="aspectFill" /> 
                            </view>
                            <view class="img-show" v-else-if="getFileType(item2)=='video'" @click="showMediaPreview(item2)">
                                <view class="img-icon">
                                    <img :src="'static/images/polling/icon-play.png'" />
                                </view>
                                <!-- <video :src="minioObj.minioUrl+'/'+item" controls  v-show="videoShow"></video> -->
                                <DomVideoPlayer :src="minioObj.minioUrl+'/'+item2"  objectFit="cover"  v-show="videoShow" />
                            </view>
                        </block>
                    </view>
                </view>

                <!-- 当天提的 增加按钮 修改和删除 -->
                <view class="btn-con" v-if="isToday && problemObj.problemStatus==1">
                    <button type="primary" @click="handleUpdate" size="mini" style="margin-right:50rpx;" class="btn-primary">修改</button>
                    <button type="primary" @click="handleDelete" size="mini">删除</button>
                </view>

                <!-- 追踪列表 -->
                <block v-if="problemObj.logList">
                <block v-if="problemObj.logList.length>0">
                    <view class="bg-border"></view>
                    <view v-for="(item,index) in problemObj.logList" :key="index" class="log-con">
                        <view class="blue-title">
                            {{parseTime(item.createTime,'{y}-{m}-{d} {h}:{i}')}}
                            <text style="margin-left:20rpx;">巡检人：{{item.modifyUserName}}</text>
                        </view>
                        <view class="report-list">检查点跟踪情况描述</view>
                        <view class="report-list report-gray">{{item.logDesc}}</view>
                        <view class="report-border"></view>
                        <view class="report-list">检查点位照片或视频</view>
                        <view class="report-list">
                            <view class="img-flex">
                                <block v-for="(item2,index2) in item.listFile" :key="index2">
                                    <view class="img-show" v-if="getFileType(item2)=='image'" @click="showMediaPreview(item2)">
                                        <image :src="minioObj.minioThumbUrl+'/'+item2" mode="aspectFill" /> 
                                    </view>
                                    <view class="img-show" v-else-if="getFileType(item2)=='video'" @click="showMediaPreview(item2)">
                                        <view class="img-icon">
                                            <img :src="'static/images/polling/icon-play.png'" />
                                        </view>
                                        <!-- <video :src="minioObj.minioUrl+'/'+item" controls v-show="videoShow"></video> -->
                                        <DomVideoPlayer :src="minioObj.minioUrl+'/'+item2"  objectFit="cover"  v-show="videoShow" />
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </block>
                </block>
            </view>
        </mescroll-uni>
    </view>
    <!-- 图片放大 -->
    <mediaPreview :visible="isVisible" :url="mediaUrl" @close="handlePreviewClose"></mediaPreview>
</view>
</template>

<script setup>
import { ref,onMounted,onUnmounted,nextTick,computed,reactive } from 'vue'
import { onLoad,onShow,onHide} from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import mediaPreview from "@/components/mediaPreview.vue"
import DomVideoPlayer from 'uniapp-video-player'
import { parseTime } from '@/utils/datetime.js';
import {getFileType} from '@/utils/common.js';
import { problemDetail,problemDel } from '@/api/polling.js'
import { MINIO_KEY } from '@/enums/cacheEnums';
import {showAlert,showLoading,hideLoading} from '@/utils/message.js'

let problemId=ref('');
let problemObj = ref({});
let isToday = ref(false);
let minioObj = {};
onLoad(option => {
    // console.log(option)
    problemId.value = option.problemId;
    minioObj = JSON.parse(uni.getStorageSync(MINIO_KEY) || "\{\}")
})

onShow(()=>{
    getList();
})

// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
    mescrollRef.value = mescroll;
};
const downOption = ref({
    auto: false,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});
// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        getList();
    } catch (error) {
        mescroll.endErr();
    } finally {
        mescroll.endSuccess();
    }
}


// 获取数据列表
const getList = async() => {
    isToday.value = false;
    let data = await problemDetail({problemId:problemId.value});
    data.list = data.pointName?.split(",") || [];
    data.listFile=data.problemVedio?.split(",") || [];
    data.logList.forEach(item => {
        item.listFile = item.logVedio?.split(",")||[]
    });
    // 判断是否当天创建的，显示按钮
    let createTime = parseTime(data.createTime,'{y}-{m}-{d}');
    let dateNow = parseTime(new Date().getTime(),'{y}-{m}-{d}');
    if(createTime == dateNow){
        isToday.value = true;
    }
    problemObj.value = data;
}

// 放大视频或图片
let isVisible= ref(false);//放大处理
let mediaUrl= ref('');//放大地址
let videoShow = ref(true);
const showMediaPreview=(url)=>{
    url = minioObj.minioUrl+'/'+url;
    isVisible.value = true;
    videoShow.value = false;
    mediaUrl.value = url;
}
const handlePreviewClose=()=>{
    isVisible.value = false;
    videoShow.value = true;
}

// 跳转问题上报页面
const handleQuestion=()=>{
    uni.navigateTo({
        url: '/pages/business/polling/problemLog?problemId='+problemId.value
    });
}

// 修改
const handleUpdate=()=>{
    uni.navigateTo({
        url: '/pages/business/polling/problemReport?problemId='+problemId.value
    });
}

// 删除
const handleDelete=()=>{
    showLoading("加载中...")
    problemDel({problemId:problemId.value}).then(res=>{
        // content, title = '提示',showCancel=false,succFun
        showAlert("删除成功！",'提示',false,()=>{
            uni.navigateBack()
        })
    }).finally(()=>{
        hideLoading();
    })
}
</script>

<style lang="scss" scoped>
.scroll-h{
   /* #ifdef APP-PLUS */
    height:calc(100vh - 78px) !important;
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 58px) !important;
    /* #endif */
}
:deep(.mescroll-upwarp){
    display: none !important;
}
.head-right{}
.head-right .btn-yellow{
    background-color: #FCC123;
    color: #4C2D11;
    font-size: 28rpx;
    font-weight: bold;
    border-radius: 10rpx;
    padding:10rpx 25rpx;
    display: flex;
    align-items: center;
}
.head-right .btn-yellow .img-repair{
    width: 30rpx;
    height: 30rpx;
}
.white-bg{
    width: 680rpx;
    padding: 15rpx 30rpx 50rpx 40rpx;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.white-bg .red-title{
    margin-bottom:30rpx;
    color:#FF2B44;
    font-size:38rpx;
}
.report-border{
    border-bottom:1px solid #E7E7E7;
    width:710rpx;
    height: 1px;
    margin:30rpx 0;
}

.report-list{
    display: flex;
    font-size:28rpx;
}
.report-list.report-gray{
    color:#919191;
    padding:20rpx 0 0;
}
.report-list .r-title{
    position: relative;
}
.report-list text{
    color:#FF2B44;
    font-size:28rpx;
}
.report-list .report-pro{
    font-size:28rpx;
    width:16%;
    /* margin-right:30rpx; */
}
.report-list .report-right{
    width:84%;
    color:#919191;
    font-size:28rpx;
}
.report-list .report-w{
    width:auto;
}
.report-list .r-list{
    padding: 10rpx 0;
}
.report-list .r-list:first-child{
    padding-top:0;
}
.report-list .r-left{
    display: flex;
    /* align-items: center; */
    font-size:28rpx;
    color:#919191;
}
.report-list .r-left view:first-child{
    margin-right: 10rpx;
}
.report-list .r-left.r-red{
    color: #FF2B44;
    font-size: 28rpx;
}

.report-list .r-right{
    display: flex;
    font-size:30rpx;
    align-items: center;
    justify-content: center;
}


.report-list .img-flex{
    display: flex;
    flex-flow:row wrap;
    margin-bottom:30rpx;
    width:100%;
}
.report-list .img-con{
    background-color: #EEEEEE;
    width:210rpx;
    height: 140rpx;
    text-align: center;
    color:#919191;
    font-size: 24rpx;
}
.report-list .img-con .img-pic{
    width:76rpx;
    height: 76rpx;
    margin-top:30rpx;
}
.report-list .img-show,
.report-list .img-con{
    width: calc(100% / 3 - 10px); /* 减去一些间隙以避免溢出 */
    margin:20rpx 20rpx 0 0;
}
.report-list .img-show{
    position: relative;
}
.report-list .img-show .img-icon{
    position: absolute;
    top:50%;
    left: 50%;
    width: 64rpx;
    height:64rpx;
    margin-left:-32rpx;
    margin-top:-32rpx;
    z-index:1;
}
.report-list .img-show .img-icon img{
    width: 64rpx;
    height:64rpx;
}

.report-list .img-show img,
.report-list .img-show video,
.report-list .img-show image,
.report-list .img-show .player-wrapper{
    width:210rpx;
    height: 140rpx;
}
.report-list .img-show :deep(.uni-video-cover-play-button){
    width:64rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size:60rpx;
}

.btn-con{
    text-align: center;
    padding-top:50rpx;
}
uni-button[type='primary']{
    background-color: #05A3F4;
    border-radius: 40rpx;
    line-height: 2.5;
    padding:0 80rpx;
}
uni-button:after{
    display: none;
}

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

.log-con{
    padding-top:10rpx;
}
.log-con .blue-title{
    font-size:32rpx;
}
</style>