<script lang="ts">
export default {
    name: "stationboard", // 变电站首页
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick, onBeforeUnmount,computed  } from "vue";
import { ElMessage } from "element-plus";
import { getVoicePrintByArea, getVoicePatrolPage, executeVoicePatrolTask } from "@/api/videomonitor/index";
import Page from '@/components/Pagination/page.vue'
import { useUserStore } from '@/store/modules/user';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import wavEcharts from '@/components/wavEcharts/index.vue';
import dayjs from 'dayjs'
function today(){
  let  startTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
  let endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  tableData.value = [startTime,endTime]
}
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
function getData() {
    getInit()
}
const CameraName = ref("")
const navlist: any = ref([])
const treeData: any = ref([])
navlist.value = [{
    name: '全部'
}, {
    name: '在线'
}, {
    name: '离线'
}]
const activeIndex = ref(0)
const status: any = ref(null)
const currentNodeKey = ref()
function navClick(index: any) {
    activeIndex.value = index
    if (activeIndex.value == 0) {
        status.value = null
    } else if (activeIndex.value == 1) {
        status.value = 1
    } else if (activeIndex.value == 2) {
        status.value = 0
    }
    getInit()
}
function getInit() {
    const params = {
        stationId: userStore.stationId,
        deviceName: CameraName.value,
        status: status.value
    }
    getVoicePrintByArea(params).then((res: any) => {
        treeData.value = res.data
        voiceprint_one.value = res.data[0].children[0]
        getdata()
    })
}

const voiceprint_one: any = ref({})
const defaultprops = {
    label: "patroldeviceName",
}
function handleNodeClick(data: any, node: any) {
    if (data.children) {
        node.isCurrent = false
        currentNodeKey.value = ""
        nextTick(() => {
            // currentNodeKey.value = orgId.value
        })
    } else {
        voiceprint_one.value = data
        getdata()
        // loading.value = true
        // Maindata.value = data
        // orgId.value = data.bayId;

    }
}
onBeforeUnmount(() => {
})
onMounted(() => {
    getInit()
    today()
})

const tableData:any = ref([])
const treeloading = ref(false)
const environment_data = ref([

])
const total: any = ref()
const params: any = ref({
    stationId: userStore.stationId,
    patroldeviceId: voiceprint_one.value.patroldeviceId,
    size: 10,
    current: 1,
    startDate: '',
    endDate: '',
})
function getdata() {
    console.log(tableData.value)
    if (tableData.value) {
        params.value.startDate = tableData.value[0]
        params.value.endDate = tableData.value[1]
    } else {
        params.value.startDate = ''
        params.value.endDate = ''
    }

    getVoicePatrolPage(params.value).then((res: any) => {
        environment_data.value = res.data.records
        params.value.size = res.data.size
        params.value.current = res.data.current
        total.value = res.data.total
    })
}
//控制行变色
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
const minLong = ref('')
function recording() {
    var tast = /^\+?[1-9][0-9]*$/; //正整数 
    if (tast.test(minLong.value) == false) {
        ElMessage({
            type: 'warning',
            message: '请输入正确的录制时长',
        })
        return false
    }

    executeVoicePatrolTask({ id: voiceprint_one.value.patroldeviceId, duration: minLong.value }).then((res: any) => {
        if (res.code == 0) {
            ElMessage({
                type: 'success',
                message: '开始录制',
            })
            getdata()
        }
    })
}
const dialogVisible = ref(false)
const dataOpen = ref()
function handleClose() {
    dialogVisible.value = false
}
function open(row: any) {
    console.log(row)
    dialogVisible.value = true
    dataOpen.value = row
} 
</script>
<template>
    <div>
        <div id="richboxid" class="videomonitor-box">
            <div id="richleft" class="videomonitor-left">
                <div class="stationboard-box-title">
                    <img src="@/assets/navigation/ty_bq.png" />
                    <div class="imgname">声纹列表</div>
                </div>

                <el-input v-model="CameraName" clearable placeholder="请输入声纹名称" @clear="getData()"
                    @keyup.enter="getData()" style="margin-left:14px ;width: 230px;" class="videomonitor-input">
                    <template #suffix>
                        <img src="@/assets/monitorsystem/spjk_ss.png" style="cursor:pointer ;" @click="getData">
                    </template>
                </el-input>
                <div class="nav-box">
                    <div class="nav-list" v-for="(item, index) in navlist"
                        :class="{ 'nav-active': activeIndex == index }" @click="navClick(index)">
                        {{ item.name }}
                    </div>
                </div>
                <el-scrollbar style="margin-left:0px ;margin-top:10px ;" height="calc(77vh)">
                    <el-tree :data="treeData" :props="defaultprops" @node-click="handleNodeClick" default-expand-all
                        :current-node-key="currentNodeKey" node-key="bayId">
                        <template #default="{ node }">
                            <span>{{ node.data.name }}</span>
                            <span>{{ node.label }}</span>
                        </template>
                    </el-tree>
                </el-scrollbar>
            </div>
            <div class="videomonitor_right">
                <div class="videomonitor_right_top">
                    <div class="stationboard-box-title">
                        <img src="@/assets/navigation/ty_bq.png" />
                        <div class="imgname">声纹装置信息 <span style="color:#00ffff ;">(在线)</span> </div>
                    </div>
                    <!-- <img src="@/assets/tank/line2.png" alt=""> -->
                    <div class="top_table" v-if="voiceprint_one">
                        <div class="table_one">
                            <div class="table_one_left">设备编码</div>
                            <div class="table_one_right">{{ voiceprint_one.patroldeviceCode }}</div>
                        </div>
                        <div class="table_one" style="border-left:0px;">
                            <div class="table_one_left">设备名称</div>
                            <div class="table_one_right">{{ voiceprint_one.patroldeviceName }}</div>
                        </div>
                        <div class="table_one">
                            <div class="table_one_left">设备型号</div>
                            <div class="table_one_right">{{ voiceprint_one.deviceModel }}</div>
                        </div>
                        <div class="table_one" style="border-left:0px;">
                            <div class="table_one_left">安装位置</div>
                            <div class="table_one_right">{{ voiceprint_one.place }}</div>
                        </div>
                        
                       
                        <div class="table_one" style="border-bottom: 1px solid #005ba9;">
                            <div class="table_one_left">以太网IP地址</div>
                            <div class="table_one_right">{{ voiceprint_one.ipaddr }}</div>
                        </div>
                        <div class="table_one" style="border-bottom: 1px solid #005ba9; border-left:0px;">
                            <div class="table_one_left">实物ID</div>
                            <div class="table_one_right">{{ voiceprint_one.materialId }}</div>
                        </div>
                        
                    </div>
                </div>
                <div class="videomonitor_right_bottom">
                    <div class="stationboard-box-title">
                        <img src="@/assets/navigation/ty_bq.png" />
                        <div class="imgname">声纹装置信息 <span style="color:#00ffff ;">(在线)</span> </div>
                    </div>
                    <img src="@/assets/tank/line2.png" alt="">
                    <div class="bottom_table">
                        <div class="screenHomepage">
                            <el-date-picker class="screenHomepage" popper-class="elDatePicker" @change="getdata()"
                                style="width: 300px; margin-right: 10px;" v-model="tableData" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
                            <el-button class="searchButton" @click="getdata()">搜索</el-button>
                            <el-input v-model="minLong" clearable placeholder="录制时长"
                                style="margin-left:30px ;width: 180px;">
                                <template #append>
                                    s
                                </template>
                            </el-input>
                            <el-button class="searchButton" @click="recording()"
                                style="margin-left: 5px;">录制</el-button>
                        </div>
                        <el-table :data="environment_data" :row-class-name="tableRowClassName" class="PatrolMonitoring"
                            v-loading="treeloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
                            style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(45vh); overflow: auto "
                            :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                            <el-table-column type="index" label="序号" width="80px" align="center" />
                            <el-table-column property="fileName" label="文件名称" align="center" />
                            <el-table-column property="duration" label="时长" width="60px" align="center">
                                <template #default="scope">
                                    <span>{{ scope.row.duration }}s</span>
                                </template>
                            </el-table-column>
                            <el-table-column property="patroldeviceName" width="160px" label="监测设备" align="center">

                            </el-table-column>
                            <el-table-column property="date" label="录制时间" width="160px" align="center" />
                            <el-table-column property="name" label="操作" align="center" width="80px">
                                <template #default="scope">
                                    <el-button class="searchButton" @click="open(scope.row)"
                                        style="width:40px;height:24px;">播放</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="width:100%;display:flex;align-items:center;margin-top:10px;">
                            <Page style="margin:0 auto ;" :total="total" v-model:size="params.size" :jumper="'hide'"
                                v-model:current="params.current" @pagination="getdata()"></Page>
                        </div>

                    </div>
                </div>
            </div>
            <Eldialog v-if="dialogVisible" :title="'文件播放'" :zIndex="2000" :width="'80%'" @before-close="handleClose">
                <template v-slot:PopFrameContent>
                    <wavEcharts :fileUrl="url + '/playAudioFile?filename=' + encodeURI(dataOpen.fileName)"  />
                    <!-- <audio style="width: 100%;" :src="url + '/playAudioFile?filename=' + encodeURI(dataOpen.fileName)"
                        controls>
                    </audio> -->
                </template>
            </Eldialog>
            <!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="'文件播放'"
                append-to-body width="800px" draggable class="monitor-dialog">
                <audio style="width: 100%;" :src="url + '/playAudioFile?filename=' + encodeURI(dataOpen.fileName)"
                    controls>
                </audio>
            </el-dialog> -->
        </div>
    </div>
</template>
<style scoped lang="scss">
//轮训弹窗设置


.imgbg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.videomonitor-box {
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding: 8px;
    padding-bottom: 0;
    height: calc(92vh);

    .telescopicidsbgcolor {
        background: rgb(7, 162, 110);
    }

    .telescopicidsbgcolor:hover {
        background: linear-gradient(to left, #b1b1b1, #ebebeb, #b1b1b1) !important;

    }

    .videomonitor-left {
        width: 261px;
        min-width: 261px;
        height: calc(100vh - 90px);
        // border: 1px solid rgba(0, 249, 162, 0.2);
        // background: rgba(17, 52, 44, 0.9);
        background: url(@/assets/navigation/ty_260x988.png);
        background-size: 100% 100%;

        .nav-box {
            padding-top: 10px;
            padding-left: 14px;
            width: 250px;
            display: flex;
            justify-content: space-between;

            .nav-list {
                width: 65px;
                height: 30px;
                line-height: 30px;
                border: 1px solid rgba(0, 255, 255, 0.3);
                font-family: 'MicrosoftYaHei Regular', 'MicrosoftYaHei';
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.5);
                text-align: center;
                cursor: pointer;
                margin-right: 6px;
            }

            .nav-active {
                color: rgb(0, 255, 255);
                border: 1px solid rgb(0, 255, 255);
                background: rgba(0, 255, 255, 0.2);
            }
        }

        .el-tree {
            background: transparent;
            color: #ffffff;
            --el-tree-node-hover-bg-color: transparent;
            --el-tree-text-color: rgb(0, 249, 162, 0.5);
            // --el-tree-expand-icon-color: var(--el-text-color-placeholder);

        }

    }

    .videomonitor_right {
        width: 85%;
        height: calc(90vh);
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .videomonitor_right_top {
            width: 100%;
            height: 240px;
            // border: 1px solid red;
            background: url(@/assets/navigation/sbjc_485.png);
            background-size: 100% 100%;

            .top_table {
                width: 100%;
                padding: 25px 20px 0px 20px;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;

                .table_one {
                    width: 50%;
                    display: flex;
                    align-items: center;
                    height: 44px;
                    border: 1px solid #005ba9;
                    border-bottom: 0px;
                    font-size: 14px;

                    .table_one_left {
                        width: 30%;
                        height: 44px;
                        color: rgba(255, 255, 255, 0.781);
                        text-align: left;
                        font-family: 'Arial Normal', 'Arial';
                        font-weight: 400;
                        font-style: normal;
                        border-right: 1px solid #005ba9;
                        box-sizing: border-box;
                        padding: 10px;
                    }

                    .table_one_right {
                        width: 70%;
                        height: 44px;
                        color: #fff;
                        text-align: left;
                        font-family: 'Arial Normal', 'Arial';
                        font-weight: 400;
                        font-style: normal;
                        box-sizing: border-box;
                        padding: 10px;
                    }
                }
            }
        }

        .videomonitor_right_bottom {
            width: 100%;
            flex: 1;
            // height: 450px;
            background: url(@/assets/navigation/sbjc_485.png);
            background-size: 100% 100%;
            margin-top: 28px;

            .bottom_table {
                width: 100%;
                box-sizing: border-box;
                padding: 10px;
            }
        }
    }

    .stationboard-box-title {
        font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: #ffffff;
        height: 40px;
        display: flex;
        align-items: center;
        padding-left: 20px;
    }

    .imgname {
        padding-left: 10px;
    }

    .titleline {
        width: 100%;
        height: 1px;
    }
}



.Camera-buttons-box {
    display: flex;
    justify-content: center;
}

.Camera-img {
    width: 100%;
    height: calc(100vh - 140px);
    border: 2px solid #323030;
}

.Jessibuca-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .Camera-img4 {
        width: 50%;
        height: 50%;
        // border: 2px solid transparent;
        border: 2px solid #323030;
    }

    .Camera-img9 {
        width: 33.33%;
        height: 33.33%;
        border: 2px solid #323030;

    }

    .Camera-img16 {
        width: 25%;
        height: 25%;
        border: 2px solid #323030;

    }

    .CameraActive {
        border: 2px solid rgb(7, 162, 110);
    }
}

.videomonitor-righthide {
    width: 20px;
    min-width: 20px;
    height: calc(100vh - 90px);
    cursor: pointer;
    // background: rgb(0, 255, 170,0.2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.videomonitor-righthide:hover {
    // height: rgb(0, 255, 170);
}

.videomonitor-right {
    position: relative;
    width: 307px;
    min-width: 307px;
    height: calc(100vh - 90px);
    // border: 1px solid rgba(0, 249, 162, 0.2);
    // background: rgba(17, 52, 44, 0.9);
    background: url(@/assets/monitorsystem/spjk_ytbj.png) no-repeat center center;
    background-size: 100% 100%;

    :deep(img) {
        pointer-events: none;
        -webkit-touch-callout: none;
        /*系统默认菜单被禁用*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -khtml-user-select: none;
        /*早期浏览器*/
        -moz-user-select: none;
        /*火狐*/
        -ms-user-select: none;
        /*IE10*/
        user-select: none;
    }

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

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

        .Camera-left-button {
            width: 48px;
            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;

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

        .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);
            }
        }
    }

    .Camera-operate-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border: 1px solid rgb(7, 162, 110);
        cursor: pointer;
        margin-left: 10px;
    }

    .Camera-operate-buttons:hover {
        background-color: rgba(33, 191, 149, 0.2);
    }

    .informationtitle {
        width: 100px;
        height: 36px;
        line-height: 36px;
        border: 1px solid rgba(0, 249, 162, 0.3);
        border-right: 0;
        padding-left: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        text-align: left;

    }

    .informationcontent {
        width: 165px;
        height: 36px;
        line-height: 36px;
        border: 1px solid rgba(0, 249, 162, 0.3);
        padding-left: 10px;
        font-size: 14px;
        color: #FFFFFF;
        text-align: left;
        overflow: hidden;
        /*内容超出后隐藏*/
        text-overflow: ellipsis;
        /* 超出内容显示为省略号*/
        white-space: nowrap;
        /*文本不进行换行*/
    }

    .informationtop0 {
        border-top: 0;
    }

}

:deep(.el-input-group__append) {
    background-color: #00ffff00 !important;
}
</style>
