<script lang="ts">
export default {
  name: "ordercontrol", // 联动任务查询
};
</script>
<script setup lang="ts">
import Page from '@/components/Pagination/page.vue'
import { ref, onMounted, nextTick } from "vue";
import { getdata } from "@/api/ordercontrol";
import { useUserStore } from '@/store/modules/user';
import { getTableData } from "@/api/patroldetails";
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import { ElMessage } from "element-plus";
import axios from 'axios';
import { getLinkTaskTodo } from "@/api/Intelligentlinkage/index";
import { getDeviceByType } from "@/api/device";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const userStore = useUserStore();
const videoUrl = ref('')
//控制行变色
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 defaultProps = {
  children: 'children',
  label: 'deviceName',
}
//获取表格数据
//表格所需参数
const date: any = ref([])
const info: any = ref({
  size: 10,
  current: 1,
  stationCode: userStore.stationCode,
  startDate: '',
  endDate: '',
  linkageDeviceName: '',
  taskName: '',
  linkageType: '',
  linkageDeviceType: ''
})
const linkageDeviceName = ref()
const taskName = ref()
const total = ref()
const treeloading = ref(false)
const url = userStore.webApiBaseUrl;
//表格数据
const tableData: any = ref([])
const InspectionType: any = ref([])
const linkageDeviceType: any = ref([
  { id: 1, name: '一键顺控' },
  { id: 2, name: '智能联动' },
])
function requestData() {
  getDeviceByType({ dictcode: 'LinkageSignalType' }).then((res: any) => {
    InspectionType.value = res.data
  })
  // getDeviceByType({ dictcode: 'LinkageSignalType' }).then((res: any) => {
  // InspectionType.value = res.data
  // })
}
const implicit = ref(false)
const results = ref(0)
function getData() {

  treeloading.value = true
  info.value.taskName = taskName.value
  info.value.linkageDeviceName = linkageDeviceName.value
  if (date.value.length != 0) {
    info.value.startDate = date.value[0]
    info.value.endDate = date.value[1]
  }
  const parmas = {
    size: info.value.size,
    current: info.value.current,
    stationCode: userStore.stationCode,
    startDate: info.value.startDate,
    endDate: info.value.endDate,
    linkageDeviceName: linkageDeviceName.value,
    taskName: taskName.value,
    linkageDeviceType: info.value.linkageDeviceType,
    linkageType: String(info.value.linkageType)
  }
  getdata(parmas).then((res: any) => {
    treeloading.value = false
    tableData.value = res.data.records
    info.value.size = res.data.size
    info.value.current = res.data.current
    total.value = res.data.total
  })
}

//重置
function resetting() {
  taskName.value = ''
  linkageDeviceName.value = ''
  date.value = []
  info.value.linkageType = ''
  info.value.linkageDeviceType = ''
  info.value.startDate = ''
  info.value.endDate = ''
  getData()
}

//巡视点位弹窗
const infoAll = ref({
  size: 20,
  current: 1,
  taskTodoId: '',
  deviceName: '',
  valid: '',
})
const gettable = ref()
const taskNameOne = ref()
const Treedata = ref()
const defectFilePath = ref()
const alarm = ref()
function pointDetails(row: any) {
  
  const params = {
    stationCode: row.stationCode,
    todoId: row.taskTodoId,
  }
  getLinkTaskTodo(params).then((res: any) => {
    taskNameOne.value = res.data.taskName
    Treedata.value = res.data.children
    const taskTodoId = res.data.children[0].deviceId
    defectFilePath.value = res.data.children[0].defectFilePath
    
    alarm.value = res.data.children[0]
    nextTick(() => {
      treeRef.value?.setCurrentKey(taskTodoId);
    });
  })
}

function handleNodeClick(row: any) {
  RefreshLoad(row)
  alarm.value = row
  defectFilePath.value = row.defectFilePath
}

function Inspection(row: any) {
  pointDetails(row)
  implicit.value = true

}
//图片详情弹窗
const imgUrl = ref()
function imgClick(row: any) {
  imgUrl.value = row.defectFilePath
  results.value = 1
}
//视频配置
const isswitch = ref(false)
const devicechannelInfo = ref({})
const videofmp4 = ref('')
function RefreshLoad(info: any) {
  if (isswitch.value == true) {
    ElMessage({
      type: 'warning',
      message: '正在加载监控视频！',
    })
    return
  }
  devicechannelInfo.value = {
    deviceId: info.deviceId,
    channelId: info.channelId
  }
  isswitch.value = true
  axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.deviceId + '/' + info.channelId, {}).then((res: any) => {
    isswitch.value = false
    if (res.data.data != undefined) {
      videoUrl.value = res.data.data.ws_flv
      videofmp4.value = res.data.data.fmp4
      axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + info.deviceId, {}).then((res: any) => {
        if (res.data.data == "0") {
          axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.deviceId + '/' + info.channelId + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.channelPos + '&combindCode2=0', {}).then((res: any) => { })
        }
      })



    }
  }).catch(function (error: any) {

  })
}

function closeVideo(index: any) { // 关闭视频

}
const treeRef = ref();
const currentNodeKey = ref("")
onMounted(() => {
  getData()
  requestData()
})
</script>
<template>
  <div style="padding:0px 8px;">
    <div class="rightNav">
      <div style="height:37px;position: relative;display: flex;align-items: center; justify-content: space-between;">
        <div style="display: flex;align-items: center;">
          <div style="margin-top: 15px;margin-left: 10px;" class="screenHomepage"> <el-input v-model="linkageDeviceName"
              placeholder="请输入信号名称" @clear="getData()" @keyup.enter="getData()" clearable style="width: 170px;" /></div>
          <div style="margin-top: 15px;margin-left: 10px;" class="screenHomepage"><el-input v-model="taskName"
              placeholder="请输入任务名称" @clear="getData()" @keyup.enter="getData()" clearable style="width: 170px;" /></div>
          <div style="margin-top: 15px;" class="screenHomepage">
            <el-select v-model="info.linkageDeviceType" class="m-2 selType" placeholder="信号类型" @change="getData"
              :teleported="false" :popper-append-to-body="false" clearable>
              <el-option v-for="item in InspectionType" :key="item.id" :label="item.dictname" :value="item.dictname" />
            </el-select>
          </div>
          <div style="margin-top: 15px;margin-right:7px;" class="screenHomepage">
            <el-select v-model="info.linkageType" class=" selType" multiple collapse-tags placeholder="联动类型"
              @change="getData" :teleported="false" :popper-append-to-body="false" clearable>
              <el-option v-for="item in linkageDeviceType" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div style="margin-top: 15px;" class="screenHomepage">
            <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始时间"
              popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间"
              :clearable="false" @change="getData" />
          </div>
          <el-button class="searchButton" @click="getData()">搜索</el-button>
          <el-button class="searchButton" @click="resetting()">重置</el-button>
        </div>
      </div>
      <el-table :data="tableData" :row-class-name="tableRowClassName" class="PatrolMonitoring" v-loading="treeloading"
        style="width: 99%;margin:auto;position: relative;margin: 15px 0px; height:calc(100vh - 285px); overflow: auto "
        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column prop="stationNum" align="center" label="站序号" width="80px" />
        <el-table-column prop="linkageDeviceName" align="center" label="信号名称" />
        <el-table-column prop="" label="信号设备" align="center" width="140px">
          <template #default="scope">
            <span> -- </span>
          </template>
        </el-table-column>
        <el-table-column prop="linkageDeviceType" label="信号来源" align="center" />
        <el-table-column prop="linkageType" align="center" label="联动类型">
          <template #default="scope">
            <span v-if="scope.row.linkageType == 1"> 一键顺控 </span>
            <span v-else-if="scope.row.linkageType == 2"> 智能联动 </span>
            <span v-else-if="scope.row.linkageType == '1,2'"> 一键顺控,智能联动 </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" align="center" />
        <el-table-column prop="deviceSumnum" label="点位数量" align="center" />
        <el-table-column prop="startTime" label="开始时间" align="center">
          <template #default="scope">
            <span v-if="scope.row.startTime">{{ scope.row.startTime }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center">
          <template #default="scope">
            <span v-if="scope.row.endTime">{{ scope.row.endTime }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template #default="scope">
            <div style="display: flex;justify-content: space-around;">
              <div class="button-style" @click="Inspection(scope.row)">详情</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: center;margin-top: 5px;">
        <Page style="position: relative;z-index: 100;" :total="total" v-model:size="info.size" :jumper="'hide'"
          v-model:current="info.current" @pagination="getData()"></Page>
      </div>
    </div>
    <Eldialog v-if="implicit" :title="'巡视详情'" :zIndex="2000" :width="'1200px'" :height="'600px'"
      @before-close="implicit = false">
      <template v-slot:PopFrameContent>
        <div v-if="alarm"
          style="position: relative;  display: flex; box-sizing: border-box;  padding: 8px; padding-bottom: 0;">
          <div class="leftNav">
            <div style="height:40px;position: relative;display: flex;align-items: center;">
              <!-- <img src="@/assets/MenuIcon/bkzs.png" alt="" style="display: block;margin-left: 10px;"> -->
              <span style="z-index:100; font-weight: 700; font-style: normal;
              font-size: 16px; color: #fff;;display:inline-block;position: absolute;left: 10px;top:0px ;"
                class="fontFamily">{{ taskNameOne }}</span>
            </div>
            <!-- <img src="@/assets/MenuIcon/lxhf_hf1.png" alt="" style="width:100%;z-index:51;position: absolute;"> -->
            <el-tree ref="treeRef" :data="Treedata" :current-node-key="currentNodeKey" node-key="deviceId"
              :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick" >
              <template #default="{ node, data }">
                <span>{{ data.orderNum }}、{{ node.label }}</span>
              </template>
            </el-tree>
          </div>
          <div class="rightNav2">
            <div style="height:480px">
              <JessibucaPlayer ref="recordVideoPlayer" :_uid="101" :devicechannelInfo="devicechannelInfo"
                :visible.sync="true" :videoUrl="videoUrl" :videofmp4="videofmp4" :hasAudio="false" fluent autoplay live
                @closeVideo="closeVideo">
              </JessibucaPlayer>
            </div>
            <div style="display:flex;align-items: center;margin-top: 15px;">
              <div class="alarmInfo-line"></div>
              <div class="alarmInfo-title"> <span class="fontFamily">巡视结果 </span></div>
            </div>
            <div style="display: flex;align-items: center;">
              <div style="width:60%;height:100%; position: relative;">
                <div style="position: absolute;
                                    right: 5px;
                                    top: 5px;
                                    width: 26px;
                                    height: 26px;
                                    border-radius: 4px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: pointer;
                                    background: rgba(0,0,0,0.5);">

                  <img src="@/assets/monitorsystem/xsri_fd.png" alt="">
                  <el-image style="position: absolute;width:100%;height:100%; opacity: 0;"
                    :src="url + '/previewimage?filename=' + encodeURI(defectFilePath)" :zoom-rate="1.2"
                    :preview-src-list="[url + '/previewimage?filename=' + encodeURI(defectFilePath)]"
                    :preview-teleported="true" fit="cover" />
                </div>


                <img style="width:500px;height:280px;" :src="url + '/previewimage?filename=' + encodeURI(defectFilePath)">
              </div>
              <div style="width:40%;height:100%;color: #fff;font-size: 14px;margin-left: 20px;">
                <div style="margin-bottom:20px ;">点位名称：{{ alarm.deviceName }}</div>
                <div style="margin-bottom:20px; ">巡视结果：<span style="color: rgb(0, 249, 162);font-weight: 800;">{{
                  alarm.value }}</span></div>
                <div style="margin-bottom:20px ;">巡视结论:<span v-if="alarm.analysisResult == '正常'"
                    style="color: rgb(0, 249, 162)">正常</span>
                  <span v-if="alarm.analysisResult == '异常'"
                    style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
                  <span v-if="alarm.analysisResult == '设备检修'" style="color: rgb(0, 153, 255)">设备检修</span>
                  <span v-if="alarm.analysisResult == '失败'" style="color: rgb(255, 189, 0)">失败</span>
                  <span v-if="alarm.analysisResult == '成功'" style="color: rgb(0, 249, 162)">成功</span>
                  <span v-if="alarm.analysisResult == '' || alarm.analysisResult == null">--</span>
                </div>
                <div style="margin-bottom:20px ;">巡视时间：{{ alarm.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Eldialog>
    <!-- 巡视结果-弹窗 -->
    <!--   -->
    <!-- <div class="el-overlay" v-if="implicit == 1">
      <div class="notification" v-drag>
        <img style="width: 100%;height: 100%;pointer-events: none;" src="@/assets/monitorsystem/ejectbg/u486.png" alt="">
        <img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/MenuIcon/u523.png" alt=""
          @click="implicit = 0">
        <div class="notification-title">巡视详情</div>
        <div class="notification-body">

        </div>
      </div>
    </div> -->
  </div>
</template>
<style scoped lang="scss">
.imgbg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.searchButton {
  border: #0a64a0 solid 1px;
  background-color: #123958;
  color: #009bff;
  margin-top: 15px;
  margin-left: 10px;
}

.rightNav {
  width: 99%;
  height: calc(100vh - 155px);
  overflow: auto;
  margin: 0 8px;
  margin-top: 60px;
  position: relative;
  background: url(@/assets/newimg/cjrw_1890.png);
    background-size: 100% 100%;
}

.leftNav {
  min-width: 280px;
  height: 807px;
  overflow: auto;
  position: relative;
  background: url(@/assets/monitorsystem/spjk_lbbj.png) no-repeat center center;
  background-size: 100% 100%;
  padding: 15px;
}

.rightNav2 {
  width: 100%;
  height: 807px;
  margin: 0 8px;
  position: relative;
  // background: url(@/assets/MenuIcon/xsyue_bj.png);
  // background-size: 100% 100%;
}

// 弹窗
.el-overlay {
  position: fixed;
  z-index: 2023;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;

  .notification-contont {
    width: 1200px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    .notification-title {
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translate(-50%);
    }

    .notification-body {
      width: 1190px;
      height: 735px;
      padding: 0px 20px 30px 20px;
      // border: #00F9A2 1px solid;
      position: absolute;
      bottom: 1%;
      left: 50%;
      // transform: translate(-50%);
    }

  }

  .notification {
    width: 1280px;
    height: 900px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    .notification-title {
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translate(-50%);
    }

    .notification-body {
      width: 1280px;
      height: 840px;
      padding: 0px 20px 30px 20px;
      position: absolute;
      bottom: 0px;
    }
  }
}

.alarmInfo-title {
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #009bff;
}

.alarmInfo-line {
  width: 4px;
  height: 15px;
  background: inherit;
  background-color: #009bff ;
  margin-right: 8px;
}

//控制行变色
// :deep(.warning-row) {
//   background-color: rgb(255 255 255 / 0%) !important;
// }

// :deep(.success-row) {
//   background-color: #17352d !important;
// }
:deep(.el-table__body-wrapper) {
  color: #fff;
}

:deep(.el-table) {
  --el-table-row-hover-bg-color: transparent !important;
  --el-table-border-color: transparent !important;
  --el-table-bg-color: transparent !important;
}

:deep(.el-table__empty-text) {
  color: #fff !important;
}



:deep(.el-input__wrapper) {
  background-color: #0a242000 !important;
  // box-shadow: (0 0 0 1px #086446) inset;
}

:deep(.el-input__inner) {
  color: #fff !important;
}

:deep(.el-select-dropdown__wrap) {
  background-color: #0a242000 !important;
}

:deep(.el-date-editor .el-range-input) {
  color: #fff !important;
}

:deep(.is-disabled) {
  background-color: #0a2320 !important;
  color: #07633e !important;
  border: 1px solid #07633e !important;
}

:deep(.el-tree) {
  background: #ffffff00 !important;
  --el-tree-text-color: #fff !important;
}



:deep(.el-tree-node__content) {
  height: 30px !important;
}

:deep(.el-tree-node__content:hover) {
  border: #008fd4 1px solid;
  height: 30px !important;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa00;
}

:deep(.el-range-separator) {
  color: #a8abb2;
}
</style>

