<template>
  <div class="leftSD">
    <!-- 隧道简介 -->
    <div class="topBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">隧道简介</div>
      </div>
      <div class="topContent contentBox">
        <img :src="jianjie" alt="" class="topImg" />
        <div class="topWZ">{{ introduce }}</div>
      </div>
    </div>
    <!-- 感知设备 -->
    <div class="centerBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">感知设备</div>
      </div>
      <div class="centerContent contentBox">
        <div
          class="shebeiBox"
          v-for="(item, i) in shebeiList"
          :key="i"
          @click="bus.emit('Tunnel_flyTo', item)"
          :style="{ visibility: item.visible ? 'visible' : 'hidden' }"
        >
          <div class="shebeiBox_left">
            <div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
            <div class="shebeiBox_left_num">
              <span>{{ item.activeNum }}</span
              >个
              <!-- <span>{{ item.activeNum + '/' + item.allNum }}</span
              >个 -->
            </div>
          </div>
          <div class="shebeiBox_right">
            <img :src="item.icon" alt="" class="shebei_img" />
          </div>
        </div>
      </div>
    </div>
    <!-- 隧道监控 -->
    <div class="bottomBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">隧道监控</div>
      </div>
      <div class="bottomContent contentBox">
        <div class="videoBox" v-for="(item, i) in videoList" :key="i" @click="showVideo(item)">
          <div class="videoTitle">{{ item.title }}</div>
          <img :src="item.img" alt="" class="videoImg" />
          <!-- <video controls="controls" :src="item.url" id="videoEvent" loop></video> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="leftSD">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import bus from '@/bus';
// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
// import ps_icon from '@/assets/newImgs/ps.png'; //排水

import jianjie from '@/assets/tunnelImg/jianjie.png';
import SD01 from '@/assets/tunnelImg/SD01.png';
import SD02 from '@/assets/tunnelImg/SD02.png';
import SD03 from '@/assets/tunnelImg/SD03.png';
import SD04 from '@/assets/tunnelImg/SD04.png';
import lfj_icon from '@/assets/tunnelImg/lfj_icon.png';
import sxj_icon from '@/assets/tunnelImg/sxj_icon.png';
import qt_icon from '@/assets/tunnelImg/qt_icon.png';
import jgwyj_icon from '@/assets/tunnelImg/jgwyj_icon.png';
import tjy_icon from '@/assets/tunnelImg/tjy_icon.png';
import ybj_icon from '@/assets/tunnelImg/ybj_icon.png';
import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
const introduce =
  '延安市杨家岭隧道位于延安市中心城区西北部，走向大致由南向北。项目起点位于延安市拟建的延师桥北桥头、并与现有的延安市枣园路相交，路线向北穿杨家岭隧道至杨家岭沟内、与拟建的延安市杨家岭道路相交。路线全长0.911公里、其中隧道775米。';
const videoList = [
  {
    title: '杨家岭隧道上新城方向洞口',
    pointCode: '7H0961CPAN3D25A',
    img: SD01,
    url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji1.mp4',
  },
  {
    title: '杨家岭隧道上新城方向洞内50米',
    pointCode: '6M07046RAN8CF8D',
    img: SD02,
    url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji2.mp4',
  },
  {
    title: '杨家岭隧道新城下山方向洞口',
    pointCode: '8L06A0DPANC7F5D',
    img: SD03,
    url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji3.mp4',
  },
  {
    title: '杨家岭隧道新城下山方向洞内50米',
    pointCode: '8L06A0DPAN08D33',
    img: SD04,
    url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji4.mp4',
  },
];
const shebeiList = [
  {
    name: ['激光位移计'],
    icon: jgwyj_icon,
    num: '2/27',
    activeNum: '2',
    allNum: '27',
    visible: true,
  },
  {
    name: ['静力水准仪'],
    icon: jlszy_icon,
    num: '2/2',
    activeNum: '2',
    allNum: '2',
    visible: true,
  },
  {
    name: ['应变计'],
    icon: ybj_icon,
    num: '1/45',
    activeNum: '1',
    allNum: '45',
    visible: true,
  },
  {
    name: ['裂缝计'],
    icon: lfj_icon,
    num: '1/27',
    activeNum: '1',
    allNum: '27',
    visible: true,
  },
  {
    name: ['摄像机'],
    icon: sxj_icon,
    num: '0/4',
    activeNum: '4',
    allNum: '4',
    visible: true,
  },
  {
    name: ['光纤光栅', '调节仪'],
    icon: tjy_icon,
    num: '0/5',
    activeNum: '0',
    allNum: '5',
    visible: false,
  },
];

const showVideo = item => {
  // bus.emit('Tunnel_flyTo', item);
  // bus.emit('Tunnel_video', item);
  let data = {
    title: item.title + '摄像机',
    comIDs: ['Imou'],
    getSiteId: item.pointCode,
  };
  bus.emit('publicDialog', data);
};
</script>

<style lang="scss" scoped>
.leftSD {
  width: 100%;
  height: 100%;
  // box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}

.topBox {
  width: 100%;
  height: calc(100% - 486px);
  // flex: 1;
  // border: 1px solid red;
  // background: red;
  .topContent {
    margin: 6px 0 5px;
    height: calc(100% - 55px);
    .topImg {
      display: block;
      width: 100%;
      height: calc(100% - 145px);
    }
    .topWZ {
      width: 100%;
      height: 140px;
      white-space: pre-wrap;
      word-break: break-word;
      text-indent: 2em;
      overflow-y: auto;
      padding: 10px;
      // box-sizing: border-box;
      background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
      background-size: 100% 100%;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      line-height: 22px;
      color: #61cafc;
    }
  }
}
.centerBox {
  // background: blue;
  width: 100%;
  // height: 33%;
  .centerContent {
    padding: 6px 0 6px;
    height: 174px;
    box-sizing: border-box;
    .shebeiBox {
      position: relative;
      width: 136px;
      height: 76px;
      // margin-right: 10px;

      padding: 4px 0px 6px 6px;
      // background: linear-gradient(0deg, rgba(17, 102, 139, 0.6) 0%, rgba(0, 65, 103, 0.3) 100%);
      border-radius: 2px;
      // border: 1px solid #007aa8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      // kpbj_img
      background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
      background-size: 100% 100%;
      // &:nth-child(3n) {
      //   margin-right: 0;
      // }
      .shebeiBox_left {
        z-index: 99;
        height: 100%;
        // padding: 10px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .shebeiBox_left_font {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          // height: 26px;
          // line-height: 26px;
        }
        .shebeiBox_left_num {
          font-weight: 500;
          font-size: 12px;
          color: #cef6ff;
          span {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 22px;
            color: #15d2fd;
            margin-right: 10px;
          }
        }
      }
      .shebeiBox_right {
        z-index: 99;
        .shebei_img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}
.bottomBox {
  width: 100%;
  // height: 35%;
  // flex: 1;
  .bottomContent {
    margin-top: 6px;
    // height: calc(100% - 50px);
    height: 218px;
    .videoBox {
      // border: 1px solid red;
      width: 206px;
      height: 104px;
      position: relative;
      .videoTitle {
        position: absolute;
        right: 0;
        bottom: 0;
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
      .videoImg {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      #videoEvent {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.contentBox {
  // border: 1px solid yellow;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
}
</style>