<template>
  <div class="myvideo" style="width: 100%; height: 100%">
    <div class="left">
      <div class="commontitle">
        <div class="left">
          <span>实时监控</span>
          <img src="/static/screen/img/titleIcon.png" alt="" />
        </div>
        <div class="right">
          <el-input v-model="searchText" @keyup.enter="searchHandle" placeholder="搜索区域/设备">
            <template #suffix>
              <el-icon style="cursor: pointer" class="el-input__icon" @click="searchHandle" color="#2E84E5"><search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <!--  -->
      <div style="width: 794px; height: 487px; padding-top: 26px">
        <!-- <img src="/static/screen/testimg/2.png" alt="" style="width: 100%; height: 100%" /> -->
        <iframe id="rtsIframe" style="width: 100%; height: 100%" :src="rtsUrl" frameborder="0"></iframe>
      </div>
    </div>
    <div class="right">
      <div class="cateBox">
        <div @click="cate = 1" :class="{ active: cate == 1 }">
          <div class="title">区域选择</div>
          <CaretBottom v-if="cate == 1" color="#fff" width="11px" />
        </div>
        <div @click="cate = 2" :class="{ active: cate == 2 }">
          <div class="title">设备选择</div>
          <CaretBottom v-if="cate == 2" color="#fff" width="11px" />
        </div>
      </div>
      <ul v-if="cate == 1">
        <li
          v-for="(item, index) in areaList"
          :class="{ active: item.id == areaId }"
          :key="index"
          class="wrap1"
          @click="areaItemClick(item)"
          :title="item.name"
        >
          {{ item.name }}
        </li>
        <template v-if="!areaList.length">
          <li class="wrap1" style="border: none">暂无区域</li>
        </template>
      </ul>
      <ul v-if="cate == 2">
        <li
          v-for="(item, index) in deviceList"
          :class="{ active: item.sensorId == sensorId }"
          :key="index"
          class="wrap1"
          @click="itemClick(item)"
          :title="item.sensorName"
        >
          {{ item.sensorName }}
        </li>
        <template v-if="!deviceList.length">
          <li class="wrap1" style="border: none">暂无设备</li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { screenApi } from "@/api";
const props = defineProps({
  screenData: {}
});
const searchText = ref("");
const cate = ref(1);
const resInfo = ref([]);
const allDevice = ref([]);
const areaList = ref([]);
const deviceList = ref([]);
const deviceList_copy = ref([]);
const areaId = ref("");
const sensorId = ref("");
// 获取区域设备信息
const getInfo = () => {
  resInfo.value = props.screenData.camera || [];
  areaList.value = JSON.parse(JSON.stringify(resInfo.value));
  resInfo.value.forEach(e => {
    allDevice.value = allDevice.value.concat(e.cameraInfos);
  });
  let obj = areaList.value.find(e => e.cameraInfos.length);
  areaId.value = obj.id;
  deviceList.value = obj.cameraInfos;
  deviceList_copy.value = JSON.parse(JSON.stringify(obj.cameraInfos));
  cate.value = 2;
  itemClick(deviceList.value[0]);
};
// 搜索
const searchHandle = () => {
  if (cate.value == 1) {
    areaList.value = resInfo.value.filter(e => {
      return e.name.includes(searchText.value);
    });
  }
  if (cate.value == 2) {
    deviceList.value = deviceList_copy.value.filter(e => {
      return e.sensorName.includes(searchText.value);
    });
  }
};
// 点击某区域
const areaItemClick = item => {
  areaId.value = item.id;
  deviceList.value = item.cameraInfos;
  deviceList_copy.value = JSON.parse(JSON.stringify(item.cameraInfos));
};
// 点击某设备
const itemClick = item => {
  if (sensorId.value == item.sensorId) return;
  if (streamId.value) stopUrl();
  let rtsUrl_ = "/static/rtsPlayer.html?height=487px&rtsUrl=";
  sensorId.value = item.sensorId;
  screenApi.detail({ sensorId: item.sensorId }).then(res => {
    if (res.code == 200) {
      if (res.data.rtsPullStreamUrls[0]) {
        rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url;
      }
      streamId.value = res.data.streamId;
      videoToken.value = res.data.videoToken;
    }
  });
};
// 展示视频
const streamId = ref("");
const videoToken = ref("");
const rtsUrl = ref("");
const stopUrl = () => {
  if (!streamId.value) return;
  screenApi.stopUrl({
    sensorId: sensorId.value,
    streamId: streamId.value,
    videoToken: videoToken.value
  });
};
onMounted(() => {
  getInfo();
  init();
});
const init = () => {};
onUnmounted(() => {
  stopUrl();
});
defineExpose({
  init
});
</script>
<style lang="scss" scoped>
.myvideo {
  display: flex;
  .left {
    flex: 1;
  }
  .right {
    width: 186px;
    padding-left: 14px;
    .cateBox {
      display: flex;
      color: #79bde5;
      font-size: 16px;
      height: 50px;
      padding-top: 8px;
      > div {
        color: #79bde5;
        font-size: 16px;
        flex: 1;
        text-align: center;
        cursor: pointer;
        &.active {
          background: linear-gradient(9deg, #10cefe 7.44%, #fff 79.62%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      & > div:first-child > .title {
        display: block;
        border-right: 1px solid #2e84e5;
      }
    }
    ul {
      li {
        height: 47px;
        border: 1px solid #35c9f0;
        background: #0c1749;
        margin-top: 8px;
        box-sizing: border-box;
        color: #10cefe;
        font-size: 14px;
        line-height: 47px;
        text-align: center;
        cursor: pointer;
        padding: 0 12px;
        box-sizing: border-box;
        &.active {
          background: #0c4dcf;
        }
      }
    }
  }
}
:deep(.el-input__wrapper) {
  border-radius: 17.5px;
  border: 1px solid #2e84e5;
  background: #112060;
  width: 260px;
  height: 35px;
}
:deep(.el-input__inner) {
  color: #fff; /* 将文字颜色改为红色 */
  font-size: 12px;
}
:deep(input::-webkit-input-placeholder) {
  -webkit-text-fill-color: #2e84e5;
  font-size: 12px;
}

/* 文字溢出 */
.wrap1 {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>