<script lang="ts">
export default {
    name: 'editvideo' //控制摄像机
};
</script>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import axios from 'axios';
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const videoUrl = ref("")
const props = defineProps({
    rowInfo: {
        required: false,
        type: Object,
        default: false
    },
    online: {
        required: false,
        type: String,
        default: false
    },

});
const controSpeed = ref(100) // 摄像头转动速度默认值 30
function ptzCamera(command: any) { // 监控视频控制方法
    isGaoliang.value = command
    if (props.online != "1") {
        return
    }
    if (channelId.value == "" || channelId.value == undefined) {
        ElMessage({
            type: 'error',
            message: '暂时无法调试，请先检查视频监控是否正常！',
        })
        return
    }
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/control/' + deviceId.value + '/' + channelId.value + '?command=' + command +
                '&horizonSpeed=' + controSpeed.value + '&verticalSpeed=' + controSpeed.value + '&zoomSpeed=' + controSpeed.value, {}).then((res: any) => { })
        }
    })

}
function condensationChang(command: any) { // 光聚方法  
    if (props.online != "1") {
        return
    }
    if (channelId.value == "" || channelId.value == undefined) {
        ElMessage({
            type: 'error',
            message: '暂时无法调试，请先检查视频监控是否正常！',
        })
        return
    }
    // 近（42H ）    66    远（41H） 65
    const cmdCode = ref()
    if (command == '加') {
        cmdCode.value = 65
        isGaoliang.value = '65'
    } else if (command == '减') {
        cmdCode.value = 66
        isGaoliang.value = '66'
    }
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=80&parameter2=0&combindCode2=0', {}).then((res: any) => { })
        }
    })

}
function apertureChang(command: any) { // 光圈方法
    if (props.online != "1") {
        return
    }
    if (channelId.value == "" || channelId.value == undefined) {
        ElMessage({
            type: 'error',
            message: '暂时无法调试，请先检查视频监控是否正常！',
        })
        return
    }
    // 缩小（48H ）    72    放大（44H） 70
    const cmdCode = ref(72)
    if (command == '加') {
        cmdCode.value = 70
        isGaoliang.value = '70'
    } else if (command == '减') {
        cmdCode.value = 72
        isGaoliang.value = '72'
    }
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=0&parameter2=80&combindCode2=0', {}).then((res: any) => { })
        }
    })
}
function videoRefresh() {
    videoUrl.value = videoUrl.value + '?Math=' + Math.random()
}
const deviceId = ref("")
const channelId = ref("")
const videofmp4 = ref('')
onMounted(() => {
    if (props.rowInfo.deviceId == undefined) {
        deviceId.value = props.rowInfo.deviceid
        channelId.value = props.rowInfo.channelid
    } else {
        deviceId.value = props.rowInfo.deviceId
        channelId.value = props.rowInfo.channelId
    }
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((ress: any) => {
        if (ress.data.data != undefined) {
            videoUrl.value = ress.data.data.ws_flv
            videofmp4.value = ress.data.data.fmp4
        }
    }).catch(function (error: any) {
    })
})
const isGaoliang: any = ref("")
function quxiao() {
    isGaoliang.value = ''
}
</script>
<template>
    <div class="editvideo-box">
        <div style="width: 98%; height: 650px;  margin: auto;">
            <JessibucaPlayer :isClose="false" :_uid="'editvideo1'" :visible.sync="true" :videoUrl="videoUrl"
                :videofmp4="videofmp4" :hasAudio="true" fluent autoplay live></JessibucaPlayer>
        </div>
        <div class="Camera-buttons-box1">
            <div class="Camera-buttons-box">
                <div class="Camera-left-button1" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button2" @mousedown="ptzCamera('upright')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button3" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button4" @mousedown="ptzCamera('downright')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button5" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button6" @mousedown="ptzCamera('downleft')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button7" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button8" @mousedown="ptzCamera('upleft')" @mouseup="ptzCamera('stop')"></div>
                <div class="Camera-left-button9" @click="videoRefresh"></div>
            </div>
            <div>
                <div class="focallengthbox">
                    <div class="focallength1" :class="{ 'gaolaing': isGaoliang == 'zoomout' }"
                        @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
                        <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
                    </div>
                    <div class="focallength2">缩放</div>
                    <div class="focallength1" :class="{ 'gaolaing': isGaoliang == 'zoomin' }"
                        @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
                        <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
                    </div>
                </div>
                <div class="focallengthbox">
                    <div class="focallength1" :class="{ 'gaolaing': isGaoliang == '66' }"
                        @mousedown="condensationChang('减')" @mouseup="quxiao">
                        <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
                    </div>
                    <div class="focallength2">光聚</div>
                    <div class="focallength1" :class="{ 'gaolaing': isGaoliang == '65' }"
                        @mousedown="condensationChang('加')" @mouseup="quxiao">
                        <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
                    </div>
                </div>
                <div class="focallengthbox">
                    <div class="focallength1" :class="{ 'gaolaing': isGaoliang == '72' }"
                        @mousedown="apertureChang('减')" @mouseup="quxiao">
                        <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
                    </div>
                    <div class="focallength2">光圈</div>
                    <div class="focallength1" :class="{ 'gaolaing': isGaoliang == '70' }"
                        @mousedown="apertureChang('加')" @mouseup="quxiao">
                        <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<style scoped lang="scss">
.Camera-buttons-box1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Camera-buttons-box {
    position: relative;
    width: 180px;
    height: 165px;
    // margin-top: 20px;
    // margin-left: 50px;
    // margin-bottom: 10px;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: center;
}

.Camera-left-button1 { 
    cursor: pointer;
    position: absolute;
    top: 29px;
    left: 65px;
    width: 44px;
    height: 35px;
    background: url(@/assets/navigation/sxj_01.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button2 {
    cursor: pointer;
    position: absolute;
    top: 33px;
    left: 100px;
    width: 44px;
    height: 44px; 
    background: url(@/assets/navigation/sxj_02.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button3 {
    cursor: pointer;
    position: absolute;
    top: 65px;
    left: 116px;
    width: 34px;
    height: 44px; 
    background: url(@/assets/navigation/sxj_03.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button4 { 
    cursor: pointer;
    position: absolute;
    top: 100px;
    left: 103px;
    width: 44px;
    height: 44px;
    background: url(@/assets/navigation/sxj_04.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button5 {
    cursor: pointer;
    position: absolute;
    top: 117px;
    left: 70px;
    width: 44px;
    height: 34px;
    background: url(@/assets/navigation/sxj_05.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button6 {
    cursor: pointer;
    position: absolute;
    top: 103px;
    left: 35px;
    width: 43px;
    height: 44px;
    background: url(@/assets/navigation/sxj_06.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button7 {
    cursor: pointer;
    position: absolute;
    top: 69px;
    left: 28px;
    width: 35px;
    height: 44px; 
    background: url(@/assets/navigation/sxj_07.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button8 {
    cursor: pointer;
    position: absolute;
    top: 35px;
    left: 33px;
    width: 43px;
    height: 43px;
    background: url(@/assets/navigation/sxj_08.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button9 {
    cursor: pointer;
    position: absolute;
    top: 63px;
    left: 63px;
    width: 54px;
    height: 54px;
    background: url(@/assets/navigation/sxj_09.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button1:hover {
    background: url(@/assets/navigation/sxj_01.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_011.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button2:hover {
    background: url(@/assets/navigation/sxj_02.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_022.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button3:hover {
    background: url(@/assets/navigation/sxj_03.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_033.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button4:hover {
    background: url(@/assets/navigation/sxj_04.png) no-repeat center center;
    background:url(@/assets/navigation/sxj_044.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button5:hover {
    background: url(@/assets/navigation/sxj_05.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_055.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button6:hover {
    background: url(@/assets/navigation/sxj_06.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_066.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button7:hover {
    background: url(@/assets/navigation/sxj_07.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_077.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button8:hover {
    background: url(@/assets/navigation/sxj_08.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_088.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button9:hover {
    background: url(@/assets/navigation/sxj_09.png) no-repeat center center;
    background: url(@/assets/navigation/sxj_099.png) no-repeat center center;
    background-size: 100% 100%;
}

.gaolaing {
    background: rgba(50, 177, 245, 0.4)
}

.focallengthbox {
    display: flex;
    // padding-left: 40px;
    padding-top: 5px;

    .focallength1 {
        border: 1px solid rgba(50, 177, 245, 0.4);
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .focallength2 {
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-top: 1px solid rgba(50, 177, 245, 0.4);
        border-bottom: 1px solid rgba(50, 177, 245, 0.4);
        width: 120px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #B5D7FF;
    }
}

.Camera-left-buttons {
    position: relative;
    width: 156px;
    height: 156px;
    margin-right: 10px;

    .Camera-left-input {
        width: 130px;
        height: 36px;
    }

    .Camera-left-button {
        position: absolute;
        width: 44px;
        height: 44px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .img {
            width: 12px;
            height: 12px;
        }
    }

    .Camera1 {
        top: 16px;
        left: 16px;
    }

    .Camera2 {
        top: 0px;
        left: 54px;
    }

    .Camera3 {
        top: 16px;
        right: 16px;
    }

    .Camera4 {
        top: 54px;
        left: 0px;
    }

    .Camera5 {
        top: 54px;
        left: 54px;
    }

    .Camera6 {
        top: 54px;
        right: 0px;
    }

    .Camera7 {
        bottom: 16px;
        left: 16px;
    }

    .Camera8 {
        bottom: 0px;
        left: 54px;
    }

    .Camera9 {
        bottom: 16px;
        right: 16px;
    }

    .Camera-left-button:hover {
        // background-color: rgba(33, 191, 149, 0.2);
    }
}

.Camera-right-buttons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 102px;
    height: 156px;

    .buttonurl-box {
        width: 100%;
        height: 48px;
        // background-color: rgba(53, 222, 176,0.4);
        border: 1px solid rgba(0, 249, 162, 1);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .buttonurl-imgbox {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .buttonurl-imgbox:hover {
            background-color: rgba(33, 191, 149, 0.2);
        }
    }
}
</style>
