<template>
  <div class="left_safe">
    <!-- 标题区域 -->
    <div class="safe_title"></div>
    <!-- 内容区域 -->
    <div class="safe_body">
      <!-- 左边边框线区域 -->
      <div class="body_line"></div>
      <!-- 右边边框线区域 -->
      <div class="body_line right"></div>
      <!-- 搜索框区域 -->
      <div class="body_search">
        <!-- <el-input
          v-model="inputValue"
          placeholder="请输入地点名称"
          :suffix-icon="Search"
        /> -->
      </div>
      <!-- 主体内容区域 -->
      <div class="body_content">
        <!-- 左边景区列表区域 -->
        <div class="content_left">
          <div class="left_list">
            <!-- 每一个景区区域 -->
            <div
              class="town_item"
              :title="item.title"
              v-for="(item, index) in scenicData"
              :key="index"
              @click="handleClick(item)"
            >
              <div class="item_text">{{ item.title }}</div>
              <div class="item_icon"></div>
            </div>
          </div>
        </div>
        <!-- 右边监控列表区域 -->
        <div class="content_right">
          <div
            class="right_box"
            v-for="(item, index) in scenicData.slice(0, 9)"
            :key="index"
          >
            <div class="box_video" :id="index + 'leftWatch'"></div>
            <div class="box_name">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 景区监控点位弹窗区域 -->
  <Transition name="fade">
    <WatchDetailDialog
      v-if="showWatch"
      :currentWatch="currentWatch"
      @closeDialog="closeDialog"
    />
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
// import { Search } from "@element-plus/icons-vue";
import WatchDetailDialog from "../center/watchDetailDialog.vue";
// 引入景点数据
import { scenicData } from "@/components/map/scenicData";
// 引入监控相关的数据接口
import { getVedio } from "@/api/video/index";
// @ts-ignore
import WasmPlayer from "@easydarwin/easywasmplayer";

const $emit = defineEmits(["handleChange"]);

// 搜索框绑定数据
// const inputValue = ref<string>("");

// 景区监控点位弹窗显示隐藏控制
const showWatch = ref(false);
// 当前监控点位
const currentWatch = ref("");

// 监控实例数组
const playerList = ref<any>([]);

onMounted(() => {
  // 获取监控视频地址
  getVideosData();
});

onUnmounted(() => {
  // 销毁WasmPlayer实例
  destroyVideos();
});

// 获取监控视频地址
const getVideosData = () => {
  scenicData.slice(0, 9).forEach(async (ele, index) => {
    const res = await getVedio(ele.rtspaddr);
    let player = new WasmPlayer(null, index + "leftWatch");
    player.play(res, 1);
    playerList.value.push(player);
  });
};

// 点击每一个景区时的回调
const handleClick = (item: any) => {
  // console.log(item);
  showWatch.value = true;
  currentWatch.value = item.title;
  // 触发自定义事件
  $emit("handleChange");
};

// 销毁WasmPlayer实例
const destroyVideos = () => {
  playerList.value.forEach((ele: any) => {
    ele.destroy();
  });
};

// 自定义事件
const closeDialog = (data: boolean) => {
  showWatch.value = data;
};
</script>

<style lang="scss" scoped>
.left_safe {
  margin-left: 140px;
  width: 2011px;
  height: 100%;

  .safe_title {
    margin-top: 67px;
    width: 2011px;
    height: 96px;
    background-image: url(@/assets/images/14.png);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .safe_body {
    position: relative;
    margin-top: 61px;
    height: 1394px;

    .body_line {
      position: absolute;
      top: 28px;
      width: 41px;
      height: 1364px;
      background-image: url(@/assets/images/analyse-line.png);
      background-size: 100% 100%;
    }

    .right {
      right: 0;
      transform: rotateY(180deg);
    }

    .body_search {
      margin-left: auto;
      margin-right: 78px;
      padding: 0 28px;
      width: 652px;
      height: 75px;
      // border: 2px solid rgba(204, 204, 204, 0.5);

      .el-input {
        height: 100%;
        font-size: 30px;

        ::v-deep(.el-input__wrapper) {
          background-color: transparent;
          box-shadow: none;

          .el-input__inner {
            color: #fff;
          }
        }
      }
    }

    .body_content {
      display: flex;
      justify-content: space-between;
      margin-top: 49px;
      height: 1230px;

      .content_left {
        padding: 54px 63px;
        margin-left: 39px;
        width: 387px;
        height: 100%;
        background-image: url(@/assets/images/15.png);
        background-size: 100% 100%;

        .left_list {
          width: 100%;
          height: 100%;
          overflow-y: auto;

          .town_item {
            display: flex;
            align-items: center;
            margin-bottom: 17.5px;
            padding-left: 44px;
            width: 260ox;
            height: 76px;
            font-size: 30.5px;
            cursor: pointer;
            background: linear-gradient(
              90deg,
              rgba(142, 207, 250, 0.2) 0%,
              rgba(138, 208, 255, 0.09) 41.47%,
              rgba(163, 248, 255, 0) 100%
            );

            .item_text {
              width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .item_icon {
              margin-left: auto;
              margin-right: 30px;
              width: 23px;
              height: 19px;
              background-image: url(@/assets/images/right2.png);
              background-size: 100% 100%;
            }
          }
        }
      }

      .content_right {
        display: grid;
        gap: 30px 19px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 388px;
        padding-right: 15px;
        margin-right: 45px;
        width: 1447px;
        height: 100%;
        overflow-y: auto;

        .right_box {
          border-radius: 10px;
          overflow: hidden;
          background-color: rgba(52, 77, 94, 0.4);

          .box_video {
            width: 469px;
            height: 313px;
            background-color: rgba($color: #000000, $alpha: 0.3);
          }

          .box_name {
            padding: 10px 0 0 26px;
            width: 469px;
            height: 75px;
            font-size: 30px;
          }
        }
      }
    }
  }
}
</style>
