<template>
    <view class="container">
        <!-- 点位选择下拉菜单 -->
        <view class="select-container">
            <label class="select-label">选择点位</label>
            <input type="text" class="search-input" v-model="searchKeyword" @focus="showOptions = !showOptions"
                placeholder="请输入点位名称搜索" readonly />

            <!-- 下拉选项 -->
            <view class="options-container" v-if="showOptions">
                <!-- 为空时显示提示 -->
                <view v-if="pointsList.length === 0" class="no-options">
                    暂无数据
                </view>
                <!-- 有选项时显示选项列表 -->
                <view v-else>
                    <view v-for="option in pointsList" :key="option.id" class="option-item"
                        @click="option.exec_status != 3 && selectPointHandler(option)"
                        :class="{ 'disabled': option.exec_status == 3 }">
                        <view>
                            {{ option.point_info.point_name }}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 拍照功能和图片预览 -->
        <view class="camera-section">
            <!-- 拍照按钮，当图片数量达到12张时隐藏 -->
            <view class="camera-container" v-if="images.length < 12">
                <image class="camera-icon" src="https://static.hshuishang.com/zhaoxiangji.png"
                    mode="aspectFit" @click="takePhoto"></image>
                <view class="camera-text">点击拍照上传</view>
            </view>

            <!-- 照片列表 -->
            <view class="photos-container">
                <view v-for="(image, index) in images" :key="index" class="photo-item">
                    <image class="photo-preview" :src="image" mode="aspectFit"></image>
                    <!-- 删除图标 -->
                    <view class="delete-icon" @click="deleteImage(index)">×</view>
                </view>
            </view>
        </view>

        <!-- 底部提交按钮 -->
        <view class="footer">
            <button class="submit-button" @click="submitForm">确认提交</button>
        </view>
    </view>
</template>

<script>
import {
    request,
    picUrl,
    uniqueByField,
    menuButtonInfo,
    NavgateTo,
    upload
} from "../../../utils";

import { apiArr } from "../../../api/routingInspection";
export default {
    data() {
        return {
            searchKeyword: '',
            showOptions: false,
            selectedPoint: '',
            selectedPointInfo: null, // 存储完整的点位信息
            pointsList: [],
            images: [], // 存储多张图片路径
            taskId: '',
        }
    },
    onLoad(options) {
        if (options.item) {
            const item = JSON.parse(options.item)
            this.taskId = item.id
            this.getInfo(this.taskId)
        }
    },
    methods: {
        async getInfo(id) {
            const res = await request(apiArr.routingInspectionInfo, "POST", {
                task_id: id,
            });
            this.pointsList = res.task_point_info
        },
        selectPointHandler(option) {
            // 安全检查，确保必要的属性存在
            if (option && option.point_info && option.point_info.point_name) {
                // 根据实际数据结构选择正确的id属性
                this.selectedPoint = option.location_info && option.id
                    ? option.id
                    : option.id || option.point_info.point_name
                this.selectedPointInfo = option // 保存完整的点位信息
                this.searchKeyword = option.point_info.point_name
                this.showOptions = false
                // 切换点位时清空图片数据
                this.images = []
            } else {
                console.warn('选择的点位信息不完整', option)
            }
        },
        takePhoto() {
            // 调起手机拍照功能，不允许从相册选择
            const that = this
            // 计算还可以拍摄的图片数量
            const remainingCount = 12 - that.images.length

            uni.chooseImage({
                count: remainingCount > 0 ? remainingCount : 1, // 最多选择的图片数量
                sizeType: ['original', 'compressed'],
                sourceType: ['camera'], // 只允许拍照
                success: function (res) {
                    const tempFilePaths = res.tempFilePaths
                    // 将新拍摄的图片添加到列表中
                    that.images = [...that.images, ...tempFilePaths]
                    console.log('拍照成功，当前图片数量：', that.images.length)
                },
                fail: function (err) {
                    console.error('拍照失败', err)
                    uni.showToast({
                        title: '拍照失败',
                        icon: 'none'
                    })
                }
            })
        },
        deleteImage(index) {
            // 删除指定索引的图片
            this.images.splice(index, 1)
        },
        async submitForm() {
            // 验证是否选择了点位
            if (!this.selectedPoint) {
                uni.showToast({
                    title: '请选择点位',
                    icon: 'none'
                })
                return
            }

            // 验证是否上传了图片
            if (this.images.length === 0) {
                uni.showToast({
                    title: '请至少上传一张照片',
                    icon: 'none'
                })
                return
            }

            try {
                // 上传所有图片到服务器
                uni.showLoading({
                    title: '正在上传图片...',
                    mask: true
                })

                // 使用Promise.all并行上传所有图片
                const uploadPromises = this.images.map(imagePath => {
                    return new Promise((resolve, reject) => {
                        upload(imagePath, (res) => {
                            if (res.code === 1 && res.data && res.data.path) {
                                resolve(res.data.path); // 上传成功，返回服务器返回的图片URL
                            } else {
                                reject(new Error('图片上传失败'));
                            }
                        });
                    });
                });

                // 等待所有图片上传完成
                const uploadedImageUrls = await Promise.all(uploadPromises);

                uni.hideLoading();

                // 准备提交数据，使用服务器返回的图片URL
                const params = {
                    task_id: parseInt(this.taskId), // 巡检任务ID
                    task_point_id: parseInt(this.selectedPoint), // 巡检点ID
                    image: uploadedImageUrls // 巡检图片，使用服务器返回的URL数组
                }

                console.log('上传成功的图片URL：', uploadedImageUrls)

                // 调用正确的接口
                const res = await request(apiArr.routingInspectionSubmit, "POST", params);

                // 输出提交的数据
                console.log('提交数据：', params)

                // 显示提交成功提示
                uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                })
                // 提交成功后，延迟1秒再重置表单
                setTimeout(() => {
                    this.getInfo(this.taskId);
                }, 1000);
            } catch (error) {
                uni.hideLoading();
                console.error('提交失败', error)
                uni.showToast({
                    title: '提交失败',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style>
@import url("./index.css");
</style>