<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">
                    <view class="btn-yellow">
                        <img :src="'static/images/polling/icon-repair.png'" class="img-repair" />新建问题上报
                    </view>
                </view>
            </template>
        </customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <!-- 1 单选 2多选 3判断  4 问答 5 读卡 6 扫码 7 拍照 8 视频 9 定位（暂时去掉了） -->
        <view class="white-bg">
            <view class="blue-title">{{optionObj.optionName}}</view>
            <view class="blue-sub-title" style="margin-bottom:20rpx;">
                巡检日期：<text>{{parseTime(optionObj.planTime,'{y}-{m}-{d} 星期{a}')}}</text>
            </view>
            <view class="report-list" v-for="(item, index) in optionObj.list" :key="index">
                <!-- 单选 -->
                <block v-if="item.pointType==1">
                    <view class="r-left">
                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                        <view>{{ item.pointName }}</view>
                    </view>
                    <multipleSelect :multiple="false" :value="item.chooseList" downInner
                        :options="item.optionList"  @change="(...args) => changeCheck(...args, item)"
                        :slabel="'optionContent'" :svalue="'optionId'"
                    >
                    </multipleSelect>
                </block>
                <!-- 多选 -->
                <block v-else-if="item.pointType==2">
                    <view class="r-left">
                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                        <view>{{ item.pointName }}</view>
                    </view>
                    <multipleSelect :multiple="true" :value="item.chooseList" downInner
                        :options="item.optionList"  @change="(...args) => changeCheck(...args, item)"
                        :slabel="'optionContent'" :svalue="'optionId'"
                    >
                    </multipleSelect>
                </block>
                <!-- 判断 -->
                <block v-if="item.pointType==3">
                    <view class="r-list">
                        <view class="r-left">
                            <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                            <view>{{ item.pointName }}</view>
                        </view>
                        <view class="r-right">
                            <radio-group @change="radioChange($event,item)" style="transform:scale(0.9)">
                                <!-- <radio value="1" color="#02C74C" style="margin-right:30rpx;" >是</radio>
                                <radio value="2" color="#02C74C">否</radio> -->
                                <radio :value="item2.optionId+''" color="#02C74C" 
                                    v-for="(item2,index) in item.optionList" :key="index"
                                    :style="{marginRight:index==0?'30rpx':'0'}"
                                >
                                    {{item2.optionContent}}
                                </radio>
                            </radio-group>
                        </view>
                    </view>
                </block>
                <!-- 问答 -->
                <block v-else-if="item.pointType==4">
                    <view class="r-left">
                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                        <view>{{ item.pointName }}</view>
                    </view>
                    <view class="r-input">
                        <!-- <input class="uni-input" placeholder="请输入" placeholder-class="place-input" /> -->
                        <textarea class="textarea" v-model="item.result" auto-height  placeholder="请输入" placeholder-class="place-input"></textarea>
                    </view>
                </block>
                <!-- 读卡 -->
                <block v-else-if="item.pointType==5">
                    <view class="r-list">
                        <view class="r-left">
                            <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                            <view>{{ item.pointName }}</view>
                        </view>
                        <!-- #ifdef APP-PLUS -->
                        <view class="r-right" @click="initNFC">
                           <img :src="'static/images/polling/icon-NFCcode.png'" class="img-nfc" /> 开始识别
                        </view>
                        <!-- #endif -->
                    </view>
                </block>
                <!-- 扫码 -->
                <block v-else-if="item.pointType==6">
                    <view class="r-list">
                        <view class="r-left">
                            <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                            <view>{{ item.pointName }}</view>
                        </view>
                        <!-- #ifdef APP-PLUS -->
                        <view class="r-right r-active" v-if="scanStr" @click="handleScan">
                            <img :src="'static/images/polling/icon-QRcode-b.png'" class="img-nfc" />
                            <view>扫码成功<view class="r-font">点击再次扫码</view></view>
                        </view>
                        <view class="r-right" v-else @click="handleScan">
                          <img :src="'static/images/polling/icon-QRcode.png'" class="img-nfc" /> 开始扫码
                        </view>
                        <!-- #endif -->
                    </view>
                </block>
                <!-- 拍照 -->
                <block v-else-if="item.pointType==7">
                    <view class="r-left">
                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                        <view>{{ item.pointName }}</view>
                    </view>
                    <view class="img-flex">
                        <view class="img-show" v-for="(item,index) in imgArr" :key="index">
                            <img :src="item" />
                        </view>
                        <view class="img-con" @click="chooseImage">
                            <img :src="'static/images/polling/icon-AddPic.png'" class="img-pic" />
                            <view>添加照片</view>
                        </view>
                    </view>
                </block>
                <!-- 视频 -->
                <block v-else-if="item.pointType==8">
                    <view class="r-left">
                        <view>{{String(index+1).padStart(2, '0')+'.'}}</view>
                        <view>{{ item.pointName }}</view>
                    </view>
                    <view class="img-flex">
                        <!--  v-for="(item,index) in videoArr" :key="index" -->
                        <view class="img-show" v-for="(item,index) in videoArr" :key="index">
                            <!-- @error="videoErrorCallback" 
                                :danmu-list="danmuList"  -->
                            <!-- <video id="myVideo" :src="videoArr"
                                enable-danmu danmu-btn controls
                            ></video> -->
                            <video :src="item" controls></video>
                        </view>
                        <view class="img-con" @click="chooseVideo">
                            <img :src="'static/images/polling/icon-AddVideo.png'" class="img-pic" />
                            <view>添加视频</view>
                        </view>
                    </view>
                </block>
                <view class="report-border" :style="{borderColor:index<optionObj.list.length-1?'#E7E7E7':'#fff'}"></view>
            </view>

            <view class="btn-submit">
                <button type="primary" @click="handleSubmit">提交</button>
            </view>
        </view>
    </view>
    <!-- 弹窗提示 -->
    <pollingShowModal :visible="visible"
        :title="title"
        :content="content" 
        :subContent="subContent"
        :btnFlag2="btnFlag2"
        :btnTxt="btnTxt"
        :isGreen="isGreen"
        :subTime="subTime"
        @close="handleClose"
        @confirm="handleConfirm"
        ref="showModel"
    ></pollingShowModal>
   
</view>
</template>
<script setup>
import { ref,onMounted,onUnmounted,nextTick,computed,reactive } from 'vue'
import { onLoad,onHide} from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import multipleSelect from "@/components/multipleSelect.vue";
import pollingShowModal from "@/components/pollingShowModal.vue";
import { parseTime } from '@/utils/datetime.js';
import { formatTaskStatus } from '@/utils/status.js';
import { taskDetail } from '@/api/polling.js'
import {uploadFileMinio} from '@/utils/minio.js'

let workId = ref(undefined);
let checkList=[
    { value: 0, text: "答案1" },
    { value: 1, text: "答案2" },
    { value: 2, text: "答案3" },
    { value: 3, text: "答案4" },
    { value: 4, text: "答案5" },
    { value: 4, text: "答案6" }
];
onLoad(option => {
    // console.log(option)
    workId.value = option.id;
    getList();
})

// 查询列表
let list = ref([]);
let optionObj = ref({})

// 获取数据列表
const getList = () => {
    // let res = await noticeList();
    // 1 单选 2多选 3判断  4问答 5 读卡 6 扫码 7 拍照 8 视频 9 定位
    let res = {
        "code": 200,
        "msg": "操作成功",
        "data": {
            optionName:'配电箱箱体和内部线路检查',
            planTime:new Date().getTime(),
            list:[
                { 
                    pointName:'技术中心机房总电源', pointId:202512297899, pointType:1, 
                    optionList:[
                        {
                            "optionId": 189,
                            "pointId": 188,
                            "optionTitle": "A",
                            "optionContent": "卫生检查1",
                            "createTime": "2025-11-11 11:48:43",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:48:43",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 190,
                            "pointId": 188,
                            "optionTitle": "B",
                            "optionContent": "卫生检查2",
                            "createTime": "2025-11-11 11:48:43",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:48:43",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 191,
                            "pointId": 188,
                            "optionTitle": "C",
                            "optionContent": "卫生检查3",
                            "createTime": "2025-11-11 11:48:43",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:48:43",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 192,
                            "pointId": 188,
                            "optionTitle": "D",
                            "optionContent": "卫生检查4",
                            "createTime": "2025-11-11 11:48:43",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:48:43",
                            "modifyUser": "SSEYS1695"
                        }
                    ]
                },
                {   pointName:'监控室消防设备阀门正常开启闭合', pointId:202512297899, pointType:2, 
                    optionList:[
                        {
                            "optionId": 182,
                            "pointId": 122,
                            "optionTitle": "A",
                            "optionContent": "区域一",
                            "createTime": "2025-11-11 11:40:52",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:40:52",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 183,
                            "pointId": 122,
                            "optionTitle": "B",
                            "optionContent": "区域二",
                            "createTime": "2025-11-11 11:40:52",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:40:52",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 184,
                            "pointId": 122,
                            "optionTitle": "C",
                            "optionContent": "区域三",
                            "createTime": "2025-11-11 11:40:52",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:40:52",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 185,
                            "pointId": 122,
                            "optionTitle": "D",
                            "optionContent": "区域四",
                            "createTime": "2025-11-11 11:40:52",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 11:40:52",
                            "modifyUser": "SSEYS1695"
                        }
                    ]
                },
                {   pointName:'监控室10组灭火器压力指针处于绿色区域', pointId:202512297899, pointType:3,
                    optionList:[
                        {
                            "optionId": 154,
                            "pointId": 127,
                            "optionTitle": "A",
                            "optionContent": "是",
                            "createTime": "2025-11-11 09:56:34",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 09:56:34",
                            "modifyUser": "SSEYS1695"
                        },
                        {
                            "optionId": 155,
                            "pointId": 127,
                            "optionTitle": "B",
                            "optionContent": "否",
                            "createTime": "2025-11-11 09:56:34",
                            "createUser": "SSEYS1695",
                            "modifyTime": "2025-11-11 09:56:34",
                            "modifyUser": "SSEYS1695"
                        }
                    ]
                },
                { pointName:'库房灭火器压力指针处于绿色区', pointId:202512297899,pointType:4,},
                { pointName:'技术中心机房总电源', pointId:202512297899,pointType:5,},
                { pointName:'监控室消防设备阀门正常监控室消防设备阀门正常监控室消防设备阀门正常', pointId:202512297899,pointType:6,},
                { pointName:'库房灭火器压力指针处于绿色区', pointId:202512297899,pointType:7,},
                { pointName:'技术中心机房总电源', pointId:202512297899,pointType:8,},
            ],
        }
    }
    let data = res.data||{};
    // data.list.forEach(item=>{
    //     item.chooseList
    // })
    optionObj.value = data
}

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

// radio 单选选择
const radioChange=(e,item)=>{
    // console.log(e,item)
    let radioValue = e.detail.value;
    item['optionIds']=radioValue;

}

// 单选多选处理
const changeCheck = (param,param2,item) => {
    // console.log(param,param2,item)
    item['optionIds'] = param2.join(",");
    // console.log(item)
}

// 照片及拍照处理
const imgArr = ref([]);
const imgArr2=ref([]);
const chooseImage = () => {
    imgArr.value = [];
    uni.chooseImage({
        // count: 1, // 默认是9，这里设置为1次只选1张
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，可选 'original' 或 'compressed'
        sourceType: ['album', 'camera'], // 指定来源是相册还是相机，默认二者都有
        success: async (res) => {
            // 选择成功，返回本地文件路径列表
            let files = res.tempFilePaths;
            // console.log('图片临时路径:', files, res.tempFiles);
            // 显示本地图片
            imgArr.value.push(...res.tempFilePaths)

            // 执行上传
            uploadFileMinio(res.tempFiles,'/polling',files).then(res=>{
                console.log("上传成功后图片路径====>",res)
                imgArr2.value = res;
            })
        },
        fail: (err) => {
            console.log('选择图片失败', err);
        }
    });
};

// 视频处理
const videoSrc = ref('');
const videoArr = ref([]);
const chooseVideo = () => {
    uni.chooseVideo({
        sourceType: ['album', 'camera'], // 来源：相册和相机
        maxDuration: 60, // 最大时长（秒）
        camera: 'back', // 使用后置摄像头
        compressed: true, // 压缩视频
        success: (res) => {
            videoSrc.value=res.tempFilePath;
            videoArr.value.push(res.tempFilePath)
            console.log('视频路径:', res.tempFilePath);
            console.log('视频时长:', res.duration);
            console.log('视频大小:', res.size);
        },
        fail: (err) => {
            console.error('选择视频失败:', err);
        }
    });
};


// nfc 处理
let discoveryCallback = null
const initNFC = () => {
   
    // 确保在 App 环境
    if (typeof plus === 'undefined') {
        showModel('此功能仅支持 App 端')
        return
    }

    // 检查设备是否支持NFC
    if (!plus.nfc) {
        showModel('设备不支持 NFC')
        return;
    }
    if (!plus.nfc.isSupportNFC()) {
        showModel('设备不支持 NFC')
        return;
    }

    // 检查NFC是否开启
    plus.nfc.isNFCEnabled((enabled) => {
        if (enabled) {
            startDiscovery()
        } else {
            showModel('请先开启设备NFC功能')
        }
    },(error) => {
        console.error('检查NFC状态失败:'+error.message);
        showModel('检查NFC状态失败')
    })
}
// 执行NFC扫描
const startDiscovery = () => {
  // 开始监听NFC标签
    plus.nfc.startDiscovery((res) => {
        console.log('NFC监听启动成功')
        // 监听NFC标签被发现的事件
        discoveryCallback = (result) => {
            try {
                console.log("NFC监听返回=>",result)
                // 尝试读取标签ID或NDEF数据
                const tag = result.tag
                if (tag && tag.id) {
                    // 将标签ID字节数组转换为十六进制字符串
                    const tagId = tag.id.map(b => b.toString(16).padStart(2, '0')).join(':')
                    console.log(`检测到标签，ID: ${tagId}`)
                // 此处可以处理tag.ndefMessage等数据
                } else {
                    console.log( `检测到标签，但无法解析数据`)
                }
            } catch (error) {
                console.log( '处理NFC数据时出错：' + error.message)
            }
        }
        plus.nfc.addEventListener('discovered', discoveryCallback, false)
    },(err) => {
        console.log( 'NFC监听启动失败：' + err.message)
    })
}

// 扫二维码
const scanStr = ref(undefined);
const handleScan = () => {
  // 调用扫码API
    uni.scanCode({
        success: (res) => {
            scanStr.value = res.result;
            console.log('扫码结果:', res.result); // 二维码内容
            console.log('码类型:', res.scanType); // 码类型，如 QR_CODE
            // ['optionIds'] = res.result;
            // 处理扫码结果，例如跳转页面
            // 如果是URL，可以跳转
            // if (res.result.startsWith('http')) {
            //     uni.navigateTo({
            //         url: '/pages/webview/webview?url=' + encodeURIComponent(res.result)
            //     });
            // } else {
            //     // 其他内容，如文本，可以展示或处理
            //     uni.showModal({
            //         content: `扫描到内容：${res.result}`,
            //         showCancel: false
            //     });
            // }
        },
        fail: (err) => {
            console.error('扫码失败:', err);
        }
    });
}

// 提交
const handleSubmit=()=>{
    showModel('有未完成的巡检项');
    // showModel2('此巡检项已完成');
}

// 自定义弹窗
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)=>{
    visible.value = true;
    content.value = str;
    subContent.value='提交时间';
    btnTxt.value='确定';
    btnFlag2.value=false;
    isGreen.value = true;
    subTime.value = new Date().getTime();
}
//关闭
const handleClose=()=>{
    visible.value = false;
}

// 执行提交
const handleConfirm=()=>{
    if(isGreen.value){
        visible.value = false;
    }
}

// 组件卸载时停止监听
onUnmounted(() => {
    // #ifdef APP-PLUS
    if (discoveryCallback) {
        plus.nfc.removeEventListener('discovered', discoveryCallback)
    }
    plus.nfc.stopDiscovery?.()
    // #endif
})
</script>
<style scoped>
.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;
}
.week{
    padding:0 40rpx;
    color: #fff;
    font-size:32rpx;
    margin-bottom:20rpx;
}

.white-bg{
    width: 680rpx;
    padding: 15rpx 30rpx 40rpx 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-left{
    display: flex;
    /* align-items: center; */
    width:70%;
    font-size:28rpx;
}
.report-list .r-left view:first-child{
    margin-right: 10rpx;
}
.report-list .r-right{
    display: flex;
    font-size:30rpx;
    align-items: center;
    justify-content: center;
}
.report-list .r-right.r-active{
    color:#05A3F4
}
.report-list .r-active .r-font{
    color:#919191;
    font-size:18rpx;
    text-align: center;
}
.report-list .r-input{
    border:1px solid #E7E7E7;
    border-radius: 10rpx;
    width:620rpx;
    padding:15rpx 25rpx;
    margin:20rpx 0 30rpx;
}
.report-list .place-input{
    color:#BFBFBF;
    font-size:28rpx;
}
.report-list .textarea{
    min-height: 50rpx;
}
.r-right :deep(.uni-radio-input){
    width:36rpx;
    height: 36rpx;
}
.r-right .uni-input{
    width:100%;
}
.report-list :deep(.uni-select-dc){
    margin:20rpx 0 30rpx;
}
.report-list :deep(.uni-select-dc .uni-select-dc-select){
    color:#BFBFBF;
    font-size:28rpx;
}
.img-nfc{
    width:50rpx;
    height: 40rpx;
    margin-right:10rpx;
}
.report-list .img-flex{
    display: flex;
    flex-flow:row wrap;
    margin-bottom:30rpx;
}
.report-list .img-show img,
.report-list .img-show video{
    width:210rpx;
    height: 140rpx;
}
.report-list .img-show :deep(.uni-video-cover-play-button){
    width:64rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size:60rpx;
}

.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:70rpx;
    height: 50rpx;
    margin-top:30rpx;
}
.report-list .img-show,
.report-list .img-con{
    width: calc(100% / 3 - 10px); /* 减去一些间隙以避免溢出 */
    margin:20rpx 20rpx 0 0;
}

.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;
}
.btn-submit{
    width:400rpx;
    margin:0 auto;
}
.btn-submit uni-button[type='primary']{
    background-color: #05A3F4;
    border-radius: 40rpx;
    line-height: 2.2;   
}
.btn-submit uni-button:after{
    border-color:#05A3F4;
}
</style>