<template>
  <!-- 湖泊监测站详情弹窗 -->
  <div class="shuiweiModals">
    <div class="hpjcz">
      <n-tabs type="bar" v-model:value="value" @update:value="changeTab" animated>
        <n-tab-pane name="基本信息" tab="基本信息">
          <!-- <video height="400" id="video" controls="" :src="videoSrc"></video> -->
          <div class="contLeft" v-if="value == '基本信息'">
            <div class="part">
              <n-space>
                <div class="infoContent flexs">
                  <div class="infoName">经度：</div>
                  <div class="infoData">{{ datas.LGTD }}</div>
                </div>
                <div class="infoContent flexs">
                  <div class="infoName">纬度：</div>
                  <div class="infoData">{{ datas.LTTD }}</div>
                </div>
              </n-space>

              <n-space>
                <div class="infoContent flexs">
                  <div class="infoName">测站编码：</div>
                  <div class="infoData">{{ datas.STCD || '--' }}</div>
                </div>
                <div class="infoContent flexs">
                  <div class="infoName">测站类型：</div>
                  <div class="infoData">泵站</div>
                </div>
              </n-space>
              <n-space>
                <div class="infoContent flexs">
                  <div class="infoName">控制水位(米)：</div>
                  <div class="infoData">{{ datas.FRZ || '--' }}</div>
                </div>
              </n-space>
            </div>
          </div>
          <div class="conttable" v-if="value == '基本信息'">
            <n-data-table
              class="gqtables"
              :columns="columnsJ"
              :max-height="280"
              style="margin-top: 10px; height: 280px"
              striped
              :data="tableDataJ"
              :bordered="false"
            />
          </div>
        </n-tab-pane>
        <n-tab-pane name="视频监控" tab="视频监控" v-if="hkvideo">
          <div v-if="value == '视频监控'">
            <video height="400" id="video" controls="" :src="videoSrc" ref="videoPlayer"></video>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<script>
import VideoNow from './Bzhk.vue';
import { ref, toRefs, onMounted, reactive, onBeforeUnmount } from 'vue';
import { formatDate } from '@/utils/util';
import { getCamreaStream, lyInfoSwlljcData, pumpdaydata } from '@/services';
import * as echarts from 'echarts';
import moment from 'moment';
import Hls from 'hls.js';
let hls;
export default {
  name: 'shuiweiModals',
  components: {
    VideoNow,
  },
  props: {
    valueModalbz: Object,
  },
  setup(props) {
    const allData = reactive({
      videoSrc: '',
      hkvideo: false,
      value: '基本信息',
      yinziValue: 'q',
      datas: [],
      datetime: '',
      columnsJ: [
        {
          title: '监测时间',
          key: 'TM',
          width: '200',
          render(row) {
            return row.TM || '--';
          },
        },

        {
          title: '抽排量',
          key: 'PMPQ',
          render(row) {
            return row.PMPQ || '--';
          },
        },
        {
          title: '开机台数',
          key: 'OMCN',
          render(row) {
            return row.OMCN || '--';
          },
        },
        {
          title: '起排水位',
          key: 'WRZ',
          render(row) {
            return row.WRZ || '--';
          },
        },
        {
          title: '预排水位',
          key: 'GRZ',
          render(row) {
            return row.GRZ || '--';
          },
        },
      ],
      tableDataJ: [],
      detailVal: {},
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      prefix: () => {
        return '共 ' + paginationReactive.itemCount + ' 项';
      },
      onChange: (page) => {
        paginationReactive.page = page;
        // getTableList();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        // getTableList();
      },
    });
    // 流域内流量监测
    let hls = null;
    let echartHxhsw = null;
    const echartCount = () => {
      echartHxhsw = echarts.init(document.getElementById('echartSw'));
      echartHxhsw.clear();
      echartHxhsw.setOption(allData.liuliangOption);
    };
    const changeTab = (val, code) => {
      if (val == '基本信息') {
        if (hls) {
          hls.destroy();
        }
      } else {
        if (hls) {
          hls.destroy();
        }
        getvideo();
      }
    };
    const getvideos = () => {
      var video = document.getElementById('video');
      if (Hls.isSupported()) {
        hls = new Hls();
        hls.loadSource(allData.videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = allData.videoSrc;
        video.addEventListener('canplay', function () {
          video.play();
        });
      }
    };
    // 加载基本信息数据
    const getBaseData = async () => {
      let params = {
        currentPage: 1,
        pageSize: 99,
        searchFilters: [],
        paramMap: {
          stcd: props.valueModalbz.STCD,
          datatime: allData.datetime,
        },
      };
      let res = await pumpdaydata(params);
      if (res) {
        allData.tableDataJ = res.result;
        console.log(allData.tableDataJ, 'res');
      }
    };
    // 加载基本信息数据
    const getvideo = async () => {
      let params = {
        indexCode: 'd1ba9a55543c488b8d76ab6afd09b0d1',
        protocolType: 'hls',
        streamType: 1,
        transmode: 1,
        expand: 'streamform=rtp&transcode=1&videotype=h264',
      };
      let res = await getCamreaStream(params);
      // if (res.code == 200) {
      allData.videoSrc = res.data.url;
      // allData.videoSrc = 'http://192.168.10.49:83/openUrl/uw8sSmQ/live.m3u8';
      console.log(allData.tableDataJ, 'res');
      setTimeout(() => {
        getvideos();
      }, 1000);
      // }
    };
    onMounted(() => {
      allData.datas = props.valueModalbz;
      // getvideo();
      if (props.valueModalbz.name.includes('后湖')) {
        allData.hkvideo = true;
      }
      allData.datetime = moment().format('YYYY-MM-DD');
      if (allData.datetime) {
        getBaseData();
      }
    });
    onBeforeUnmount(() => {
      if (!!echartHxhsw) echartHxhsw.dispose();
      if (hls) hls.destroy();
    });

    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      getBaseData,
      changeTab,
      getvideos,
    };
  },
};
</script>

<style lang="less" scoped>
.shuiweiModals {
  color: #b4c9e0;
  height: 475px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .hpjcz {
    // display: flex;
    margin: 10px 0px;
    .contLeft {
      width: 100%;
      height: 50%;
      .part {
        margin-top: 10px;

        .detail {
          width: 100%;
          display: flex;
          font-size: 14px;
          background: rgba(1, 27, 46, 0.6);
          p {
            height: 34px;
            line-height: 34px;
            width: 100%;
          }

          p:nth-of-type(1) {
            width: 35%;
            text-align: center;
          }
          p:nth-of-type(2) {
            flex: 1;
            text-align: left;
          }
        }
        .detail:nth-of-type(odd) {
          background: rgba(1, 27, 46, 0.3);
        }
      }
    }
    .conttable {
      height: 280px;
      width: 100%;
      flex: 1;
    }
  }
}
.flexs {
  display: flex;
}
.infoContent {
  width: 250px;
}
.conttable {
  margin-top: 20px;
  .gqtables {
    ::v-deep .n-data-table-thead .n-data-table-tr .n-data-table-th {
      text-align: center;
    }
    ::v-deep .n-data-table-tr .n-data-table-td {
      text-align: center;
    }
  }
}
</style>