<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div class="dzfxxxtjlb">
    <div class="leafTotal">
      <i>实时数据</i>
    </div>
    <div class="total_lb total_lb22">
      <a-tabs v-model:activeKey="activeKey" @change="(key) => changeTabs(key)" class="user">
        <a-tab-pane key="1">
          <template #tab>
            <span> 监测数据 </span>
          </template>
          <div class="listData">
            <listStyle :dataInfo="{ roll: true, header: columns, bodyData: monitorDevicesList }" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span> 视频 </span>
          </template>
          <videoList />
          <!-- <div class='videoListDiv'>
            <div class='tempVideoListDiv'>
              <template v-for="item in videoList" :key="item.id">
              <div class='imageItem'   @click="goToVideo(item)">
                <a-image
                :class="{ active: selectedOption === item.id }"
                    :src='item.url||""'
                    fallback="data:image/png;base64,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"
                  />
                <span> {{ item.monitorPointName }}</span>
              </div>
            </template>
            </div>

            
          </div> -->
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #tab>
            <span> 水文气象 </span>
          </template>
         <!-- <div style="width: 500px;
         height: 500px;background-color: aqua;">123</div> -->
           <water></water>

         

  


          
        </a-tab-pane>
        <a-tab-pane key="4">
          <template #tab>
            <span> 地震 </span>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
//滚动插件
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';

import listStyle from '/@/components/listStyle/index.vue';
import videoList from './components/videoList.vue';
// import playVideo from './components/playVideo.vue';
import { dateFormat } from '/@/utils/common/compUtils';
import { reactive } from 'vue';
import tFMapUitl from '/@/utils/TFMapUitl';
import water from './components/water.vue'

export default defineComponent({
  name: 'TotalStatis',
  components: { listStyle, videoList,water },
  setup() {
    const columns = [
      {
        title: '地灾点',
        dataIndex: 'monitorPointName',
        key: 'monitorPointName',
      },
      {
        title: '传感器名称',
        dataIndex: 'sensorSiteCode',
        key: 'sensorSiteCode',
      },
      {
        title: '采集时间',
        dataIndex: 'time',
        key: 'time',
        ellipsis: true,
      },
    ];
    const monitorDevicesStore = useMonitorDevicesStore();
    onMounted(() => {
      getMonitorDevicesList(monitorDevicesStore);
    });
    const monitorDevicesList = ref([]);
    let tempEvent = null;
    function getMonitorDevicesList(monitorDevicesStore) {
      monitorDevicesStore.LiGongMonitorDataTop20().then((res) => {
        // console.log('API:ligongMonitorDataTop20', res.result);
        monitorDevicesList.value = res.result;
        monitorDevicesList.value.forEach((item) => {
          item.time = isToday(item.time) ? dateFormat(item.time, 'hh:mm:ss') : item.time;
        });
        window.setTimeout((e) => {
          if (tempEvent) {
            window.clearTimeout(tempEvent);
          }
          tempEvent = getMonitorDevicesList(monitorDevicesStore);
        }, 1000 * 60 * 2);
      });
    }

    /**
     * @description 判断时间是为当天
     */
    function isToday(str) {
      const date = new Date(str);
      const today = new Date();

      return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
    }

    onUnmounted((e) => {
      if (tempEvent) {
        window.clearTimeout(tempEvent);
      }
    });
    function changeTabs(e) {
      console.log('change tabs', e);
    }
    return {
      changeTabs,
      monitorDevicesList,
      activeKey: ref('1'),
      columns,
    };
  },
  mounted() {
    // debugger
    // console.log($echarts)
  },
});
</script>

<style lang="less" scoped>
.dzfxxxtjlb {
  height: 216px;
  margin: 0px;
  padding: 0px;

  ::v-deep .ant-tabs-nav-animated > div {
    display: flex;
    justify-content: center;
  }
  ::v-deep .ant-tabs-nav-animated > div > div {
    flex: 1;
    text-align: center;
  }
  @font-face {
    font-family: 'AlimamaShuHeiTi';
    src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
  }
  ::v-deep .ant-table-fixed-header .ant-table-scroll .ant-table-header {
    overflow: none !important;
  }
  ::v-deep .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
    background: rgba(8, 39, 55, 0) !important;
  }
  ::v-deep .ant-table-header {
    background: rgba(8, 39, 55, 0) !important;
  }
  ::v-deep .total_lb22 .ant-tabs-nav .ant-tabs-tab {
    margin-right: 0px;
    padding: 6px 0px 4px 10px;
    
  }
  ::v-deep .total_lb22 .ant-tabs-nav .ant-tabs-tab-active {
    // color: #ffe75c !important;
    background: url('../../assets/images/imageSelect2.png') no-repeat;
    background-position: 10px 21px;
  }
  ::v-deep .ant-tabs-bar {
    margin: 0 0 6px 0;
    border-bottom: 0px solid #303030 !important;
  }
  ::v-deep .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 0 0 0px;
  }
  ::v-deep .ant-tabs-tab .anticon {
    margin-right: 0px;
  }
  ::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: rgba(8, 39, 55, 0.7);
  }
  ::v-deep .ant-table-placeholder {
    background: rgba(0, 0, 0, 0) !important;
  }
  ::v-deep .ant-tabs-nav-animated > div {
    display: flex;
    justify-content: center;
  }

  ::v-deep .ant-tabs-nav-animated > div > div {
    flex: 1;
    text-align: center;
  }

  @font-face {
    font-family: 'AlimamaShuHeiTi';
    src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
  }

  ::v-deep .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
    background: rgba(8, 39, 55, 0) !important;
  }

  ::v-deep .ant-table-header {
    background: rgba(8, 39, 55, 0) !important;
  }

  ::v-deep .total_lb22 .ant-tabs-nav .ant-tabs-tab {
    margin-right: 0px;
    padding: 6px 0px 4px 10px;
  }

  ::v-deep .total_lb22 .ant-tabs-nav .ant-tabs-tab-active {
    // color: #ffe75c !important;
    background: url('../../assets/images/imageSelect2.png') no-repeat;
    background-position: 10px 21px;
  }
   ::v-deep .total_lb22 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active {
    background: url('../../assets/images/imageSelect2.png') no-repeat;
    background-position: 10px 21px;
  }
  ::v-deep .total_lb22 .ant-tabs-nav > div > div:nth-child(4).ant-tabs-tab-active {
    background: url('../../assets/images/imageSelect2.png') no-repeat;
    background-position: 10px 21px;
  }

  ::v-deep .ant-tabs-bar {
    border-bottom: 0px solid #303030 !important;
  }

  ::v-deep .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 0 0 0px;
  }

  ::v-deep .ant-tabs-tab .anticon {
    margin-right: 0px;
  }

  ::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: rgba(8, 39, 55, 0.7) !important;
  }

  ::v-deep .ant-table-tbody > tr > td {
    padding: 10px 0px;
  }

  ::v-deep .ant-table-thead > tr > th {
    background: rgba(8, 39, 55, 0) !important;
    color: #00d0e3 !important;
    padding: 10px 0px;
    border: none !important;
  }

  ::v-deep .ant-table {
    background: rgba(8, 39, 55, 0) !important;
    color: #fff;
  }

  ::v-deep .ant-tabs-ink-bar {
    visibility: hidden;
  }

  ::v-deep .ant-tabs-top > .ant-tabs-nav::before,
  .ant-tabs-bottom > .ant-tabs-nav::before,
  .ant-tabs-top > div > .ant-tabs-nav::before,
  .ant-tabs-bottom > div > .ant-tabs-nav::before {
    border-bottom: 0px;
  }

  ::v-deep .ant-tabs {
    color: #69aeec;
    // #6ca5dd
  }
  ::v-deep .ant-tabs .bodyItem {
    color: #fff;
    // #6ca5dd
  }

  ::v-deep .ant-tabs-nav .ant-tabs-tab-active {
    color: #fff;
  }
  ::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    // color: #ffe75c;
  }

  ::v-deep .ant-tabs-tab {
    // font-size: 18px;
    // font-weight: bold;
    font-size: 16px;
    font-weight: normal !important;
  }

  ::v-deep .ant-table-tbody > tr > td {
    // border-bottom: 0px solid #303030 !important;
  }

  .ant-tabs-tab-active {
    background-color: yellow;
  }

  .tab-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 24px;
  }

  .icon {
    margin-right: 16px;
  }

  .text {
    color: #333;
  }

  ::v-deep .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list,
  .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list {
    height: 32px;
  }

  ::v-deep .ant-tabs-nav {
    // background: rgba(3, 49, 79, 0.4);
    border-left: 0px;
    border-right: 0px;

  
  }

  .total_lb {
    position: relative;
    z-index: 12;
    padding: 15px 20px;
    overflow: hidden;
    width: 400px;
    height: calc(100% + 50px) !important;
    // height: calc(100% - 660px);
    // height: calc(100% - 609px);
    // height: calc(100% - 47px);
    color: #fff;
    // border: 1px solid transparent;
    background: rgba(3, 49, 79, 0.4);
    border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
    .listData {
      // height: calc(100% - 40px);
      height: 200px;
    }
  }
 .total_lb:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient( rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
 // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.total_lb:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient( rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}


  .leafTotal {
    width: 400px;
    height: 47px;
    background: url('../../assets/images/jcsbtj.png') no-repeat;
  //   background: url('../../assets/images/panels.png') no-repeat;
  // background-position: -14px -13px;
  //   background-size: 101% 131%;
    font-size: 19px;
    font-weight: bold;
    color: #fff;
    line-height: 38px;
    margin: 20px 0px 5px 0px;
  }

  .leafTotal i {
    margin-left: 32px;
    font-family: 'AlimamaShuHeiTi';
    margin-right: 98px;
    font-weight: bold;
    // font-style: normal;
    margin-left: 32px;
    margin-right: 98px;

    // background-image:-webkit-linear-gradient(bottom,#6FCFFF,#fff); 
    // -webkit-background-clip:text; 
    // -webkit-text-fill-color:transparent; 
  }

  .leafTotal b {
    font-weight: normal;
    font-size: 15px;
    color: #a7e6fa;
  }

  @media screen and (min-width: 2160px) {
    .total_lb {
      // height: 430px;
      height: calc(100vh - 790px);
    }
  }

  ::v-deep .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated,
  .ant-tabs .ant-tabs-bottom-content.ant-tabs-content-animated {
    // height: calc(100vh - 850px);
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 720px);
  }
}
::v-deep .ant-tabs-nav-container{
  background: url('../../assets/images/tab-背景.png') no-repeat;
    background-size: 100% 100%;
    // background-color: #fff 0;
    background-position: 0px 0px;
    z-index: 10;
 
}
// background: url('../../assets/images/tab-背景.png') no-repeat;
//     background-size: 100% 100%;
// .ant-tabs-nav
</style>
