<template>
    <div class="bigBox">
        <MOSTY.FromPage title="预制点选择" @closeDialog="black">
            <template #content>
                <div class="main">
                    <div class="left">
                        <video controls style="width:100%;height:100%;object-fit:fill" id='videoElement'></video>
                    </div>
                    <div class="right">
                        <MOSTY.Assort title="方向控制" style="padding: 10px" />
                        <div class="controller">
                            <div v-for="btn in directionButton" :key="btn.key"
                                :class="[btn.value !== 9 ? 'sector' : '', btn.key]" :title="btn.label"
                                @mousedown="handleRegulate(btn, 0)" @mouseup="handleRegulate(btn, 1)">
                                <el-icon>
                                    <CaretLeft />
                                </el-icon>
                            </div>
                        </div>
                        <MOSTY.Assort title="预制点" style="padding: 10px" />
                        <div style="text-align: left;" class="ml10">
                            <el-button size="small" @click="createPrefabricatedPoints()">创建</el-button>
                        </div>
                        <el-table size="small" :data="pointList" style="width: 100%">
                            <el-table-column prop="presetPointName" label="名称" />
                            <el-table-column label="操作">
                                <template #default="{ row }">
                                    <span class="operedit" @click="selectPoint(row)">
                                        <el-icon>
                                            <Position />
                                        </el-icon>选择</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </template>
            <template #footer>
                <el-button @click="black"> <el-icon>
                        <DocumentDelete />
                    </el-icon>关闭</el-button>
            </template>
        </MOSTY.FromPage>
    </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage, ElMessageBox } from "element-plus"
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
let cameraDirectionControl = reactive({ stepX: 4, stepY: 4 })
let listOfPreFabricatedCameraPoints = ref([])
let hls = null
let pointList = ref([])
const props = defineProps({
    sbbh: {
        type: String,
        default: '1003105'
    },
    tddh: {
        type: String,
        default: '1003105$1$0$0'
    }
});
const directionButton = reactive([
    { label: "上", key: "up", value: 1 },
    { label: "右上", key: "up-right", value: 7 },
    { label: "右", key: "right", value: 4 },
    { label: "右下", key: "down-right", value: 8 },
    { label: "下", key: "down", value: 2 },
    { label: "左下", key: "down-left", value: 6 },
    { label: "左", key: "left", value: 3 },
    { label: "左上", key: "up-left", value: 5 },
    { label: "中心", key: "center", value: 9 }]
)
const emit = defineEmits("saveSuccess");
onMounted(() => {
    initVideo(props.tddh)
    getPointList()
});

/**
 * 创建预设点
 */
const createPrefabricatedPoints = () => {
    ElMessageBox.prompt("输入预制点名称", "预制点创建", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "预制点名称不能为空"
    }).then(({ value }) => {
        let data = {
            presetPointCode: generateUniqueCode(listOfPreFabricatedCameraPoints.value),
            operateType: 3,
            presetPointName: value
        }
        cameraPreFabricationPointSetting(data)
    }).catch((err) => {
        ElMessage({
            type: "info",
            message: "Input canceled"
        })
    })
}
/**
 * 设置功能预制点
 * @param data
 */
const cameraPreFabricationPointSetting = async (data) => {
    await postApi({ ...data, channelId: props.tddh }, "/mosty-lps/daSdk/operatePresetPoint")
    await getPointList()
}
/**
 * 生成唯一编码
 * @param presetArray
 * @returns {string}
 */
function generateUniqueCode(presetArray) {
    const existingCodes = new Set(presetArray.map(item => item.presetPointCode))
    let code
    do {
        const num = Math.floor(Math.random() * 256) + 1
        code = num.toString().padStart(3, "0")
        if (existingCodes.size >= 256) throw new Error("所有可能的编码都已被占用")
    } while (existingCodes.has(code))
    return code
}
/**
 * 保存预制点
 * @param data
 */
const selectPoint = (data) => {
    emit("saveSuccess", data);
}
/**
 * 获取预置点
 * @param id
 */
const getPointList = async () => {
    let data = await postApi({ channelId: props.tddh }, "/mosty-lps/daSdk/getPresetPoints")
    if (data instanceof Array) pointList.value = data
}
/**
 * 摄像头方向控制
 * @param btn
 * @param type
 */
const handleRegulate = async (btn, type) => {
    cameraDirectionControl.channelId = props.tddh
    cameraDirectionControl.command = !type ? 1 : 0
    cameraDirectionControl.direct = btn.value
    await postApi(cameraDirectionControl, "/mosty-lps/daSdk/operateDirect")
}
/**
 * 初始化摄像头设备
 * @param channelId
 * @param domId
 */
const initVideo = async (channelId) => {
    if (hls !== null) hls.destroy()
    const videoElement = document.getElementById("videoElement")
    //调用Hls.isSupported()检查浏览器是否支持MSE
    let data = await postApi({ channelId, "streamType": 1, type: "hls" }, "/mosty-lps/daSdk/realtime")
    if (proxy?.$Hls.isSupported()) {
        hls = new Hls()
        hls.attachMedia(videoElement)
        hls.on(Hls.Events.MEDIA_ATTACHED, async () => {
            hls.loadSource(data)
            hls.on(Hls.Events.MANIFEST_PARSED, () => videoElement.play())
        })
        return
    } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
        // 如果支持原生播放
        videoElement.src = data
        videoElement.addEventListenter("canplay", () => videoElement.play())
        return
    }
    ElMessage.error("当前环境不支持初始化")
}
const black = () => {
    emit("saveSuccess");
};

</script>

<style lang="scss" scoped>
.bigBox {
    .main {
        height: 100%;
        display: flex;

        .left {
            width: 75%;
            height: 100%;
            border: 1px solid grey;
        }

        .right {
            width: 25%;
            height: 100%;
            border: 1px solid grey;

            .controller {
                margin: 0 auto;
                position: relative;
                width: 200px;
                height: 200px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(22deg);
                box-shadow: var(--panel-head-box-shadow);
                border-radius: 50%;
                z-index: 9;

                .sector {
                    width: 194px;
                    height: 194px;
                    background-color: #f6f4f4;
                    clip-path: polygon(50% 50%, 100% 50%, 100% 3%);
                    border-radius: 50%;
                    position: absolute;
                    cursor: pointer;

                    &:hover {
                        background-color: var(--core-hover-color);
                    }

                    .el-icon {
                        position: absolute;
                        right: 20px;
                        top: 63px;
                        transform: rotate(-200deg);
                        color: black;
                    }
                }

                /* 各个方向的扇形按钮 */
                .up {
                    transform: rotate(270deg);
                }

                .right {
                    transform: rotate(0deg);

                    .el-icon {
                        transform: rotate(-202deg);
                    }
                }

                .down-right {
                    transform: rotate(45deg);
                }

                .down {
                    transform: rotate(90deg);

                    .el-icon {
                        transform: rotate(-204deg);
                    }
                }

                .down-left {
                    transform: rotate(135deg);
                }

                .left {
                    transform: rotate(180deg);

                    .el-icon {
                        transform: rotate(-200deg);
                    }
                }

                .up-left {
                    transform: rotate(225deg);
                }

                .up {
                    transform: rotate(270deg);
                }

                .up-right {
                    transform: rotate(315deg);
                }

                /* 中心的圆形空心区域 */
                .center {
                    position: absolute;
                    transform: translate(-50%, -50%);
                    /* 将中心定位到控制器的中心 */
                    width: 65px;
                    height: 65px;
                    top: 100px;
                    left: 100px;
                    background-color: var(--core-button-normal-bg-color);
                    border: 1px solid var(--core-border-color);
                    border-radius: 50%;
                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                    z-index: 10;
                    /* 确保中心区域在其他扇形之上 */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;

                    &:hover {
                        background-color: var(--core-hover-color);
                    }
                }
            }
        }
    }

    display: block !important;
    padding: 0 14px;
    box-sizing: border-box;
}
</style>