<template>
  <!-- 水质监测站详情弹窗 -->
  <div class="shuizhiModals">
    <n-tabs type="line" @update:value="changeTab" animated>
      <n-tab-pane name="0" tab="监测详情">
        <div class="szjcz">
          <div class="contLeft">
            <div class="title">站点基本信息</div>
            <div class="part">
              <div class="detail" v-for="(val, keys, index) in detailName" :key="index">
                <p>{{ val }}</p>
                <p v-if="keys != 'status'">{{ detailVal[keys] }}</p>
                <p v-if="keys == 'status'">{{ detailVal[keys] == 0 ? '在线' : '离线' }}</p>
              </div>
            </div>
          </div>
          <div class="contRight">
            <div class="search">
              <n-date-picker v-model:value="dateRange" @update:value="getLineTableData" type="daterange" />
              <n-select :options="szOptions" v-model:value="yinziVal" placeholder="选择因子" @update:value="getLineTableData" />
            </div>
            <div id="echartYz"></div>
            <div class="table">
              <n-data-table
                :columns="columns"
                :data="tableData"
                :loading="tableLoading"
                :remote="true"
                :pagination="pagination"
                :bordered="false"
              />
            </div>
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane name="1" v-if="detailVal.videoPathList.length > 0" tab="视频监控">
        <div class="cameraBtn">
          <n-button type="primary" @click="changeTab(2, item.key)" v-for="(item, index) in detailVal.videoPathList" :key="'a' + index">
            {{ item.label }}
          </n-button>
        </div>
        <!-- 视频盒子 -->
        <div id="fxPlay" v-if="ifShowVideo" class="fxPlayBox"></div>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import * as echarts from 'echarts';
import { lyInfoStationDetail, lyInfoStationLine, lyInfoStationTable } from '@/services';
import { formatDate } from '@/utils/util';

export default {
  name: 'shuizhiModals',
  props: {
    stationCode: String,
  },
  setup(props, context) {
    console.log(props.stationCode);
    const allData = reactive({
      ifShowVideo: false,
      tableLoading: false,
      tableData: [],
      columns: [
        { key: 'ttTime', title: '时间' },
        { key: 'value', title: '观测值' },
        { key: 'waterLevelDesc', title: '水质评价' },
        { key: 'assessmentScope', title: '水质评价范围' },
        { key: 'alarmValue', title: '触发报警值' },
        { key: 'warningValue', title: '触发预警值' },
      ],
      dateRange: [Date.now() - 1 * 24 * 60 * 60 * 1000, Date.now()],
      yinziVal: 'codmn',
      szOptions: [
        { value: 'codmn', label: 'COD(mg/L)' },
        { value: 'ph', label: 'PH' },
        { value: 'do', label: 'DO(mg/L)' },
        { value: 'nh4n', label: 'NH3-N(mg/L)' },
        { value: 'tp', label: 'TP(mg/L)' },
      ],
      detailName: {
        stName: '站点名称',
        stCode: '站点编码',
        stationType: '站点类型',
        area: '河道名称',
        createTime: '安装时间',
        lon: '经度',
        lat: '纬度',
        platformName: '项目名称',
        person: '负责人',
        address: '安装地址',
        status: '站点状态',
      },
      detailVal: {
        videoPathList: [],
      },

      oWebControl: null,
      plugKey: '',
      Count: 0,
      width: 900,
      height: 480,
      showVideos: {
        cameraIndexCode: '4097ade6e64142d7ac7adff80b4617f0', // 监控点编号4097ade6e64142d7ac7adff80b4617f0
        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
        transMode: 1, // 传输协议：0-UDP，1-TCP
        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
        wndId: 1, // 播放窗口序号
      },
      szOption: {
        legend: {
          show: false,
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '0%',
          top: '16%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['06-01', '06-02', '06-03'],
          axisLabel: {
            textStyle: {
              color: '#B4C9E0',
            },
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: '水质值',
            areaStyle: { normal: {} },
            type: 'line',
            smooth: true,
            color: '#C72B31',
            data: [5, 7, 3],
          },
        ],
      },
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 4,
      showSizePicker: true,
      pageSizes: [4, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      pageSlot: 5,
      prefix: () => {
        return '共 ' + paginationReactive.itemCount + ' 项';
      },
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    // tab切换
    const changeTab = (val, code) => {
      if (val == 0) {
        nextTick(() => {
          getLineTableData();
        });
        allData.ifShowVideo = false;
        if (allData.oWebControl) {
          allData.oWebControl.JS_HideWnd();
          allData.oWebControl.JS_DestroyWnd();
          allData.oWebControl = null;
          allData.ifShowVideo = false;
        }
      } else {
        allData.ifShowVideo = true;
        let video = {
          cameraIndexCode: code ? code : allData.detailVal.videoPathList[0].key, // 监控点编号4097ade6e64142d7ac7adff80b4617f0
          streamMode: 0, // 主子码流标识：0-主码流，1-子码流
          transMode: 1, // 传输协议：0-UDP，1-TCP
          gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
          wndId: -1, // 播放窗口序号
        };
        allData.showVideos = video;
        if (allData.oWebControl == null) {
          initPlugin();
        } else {
          allData.oWebControl.JS_HideWnd();
          allData.oWebControl.JS_DestroyWnd();
          allData.oWebControl = null;
          initPlugin();
        }
      }
    };
    /* 创建插件实例 */
    function initPlugin() {
      const dll = { dllPath: './VideoPluginConnect.dll' };
      allData.oWebControl = new WebControl({
        szPluginContainer: 'fxPlay', // 指定容器id
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: () => {
          allData.oWebControl.JS_StartService('window', dll).then(() => {
            // 设置视频 web 插件消息回调
            allData.oWebControl.JS_SetWindowControlCallback({
              // cbIntegrationCallBack: msg => { }
            });
            // 启动插件服务成功
            allData.oWebControl.JS_CreateWnd('fxPlay', allData.width, allData.height).then(() => {
              // JS_CreateWnd创建视频播放窗口，宽高可设定
              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
              console.log('启动插件成功！');
            });
          });
          allData.oWebControl.oDocOffset.top = 60;
        },
        // 插件服务启动失败，弹框提示
        cbConnectError: () => {
          allData.oWebControl = null;
          allData.Count++;
          if (allData.Count < 2) {
            WebControl.JS_WakeUp('VideoWebPlugin://');

            setTimeout(() => {
              initPlugin();
            }, 8000);
          } else {
          }
          console.log('创建插件失败');
        },
      });
    }
    /* 获取公钥 */
    function initVideo(oWebControl) {
      const params = {
        funcName: 'getRSAPubKey',
        argument: JSON.stringify({ keyLength: 1024 }),
      };

      oWebControl.JS_RequestInterface(params).then((res) => {
        if (res.responseMsg.data) {
          allData.plugKey = res.responseMsg.data;
          getVideoConfig(oWebControl);
        }
      });
    }
    /* 视频插件配置  插件初始化 */
    function getVideoConfig(oWebControl) {
      const configObj = {
        funcName: 'init',
        argument: JSON.stringify({
          appkey: '26265267', // API网关提供的appkey
          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret
          ip: '192.168.10.49', // API网关IP地址z
          playMode: 0, // 播放模式 0-预览，1-回放
          port: 443, // 端口
          snapDir: 'D:\\SnapDir', // 抓图存储路径
          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
          layout: '1x1', // 布局
          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
          encryptedFields: 'secret', // 加密字段
          showToolbar: 1, // 是否显示工具栏
          showSmart: 1, // 是否显示智能信息
          showToolbar: 0, //是否显示工具栏 0不显示   1显示
          // buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769", // 自定义工具条按钮 新的
        }),
      };
      oWebControl.JS_RequestInterface(configObj).then(() => {
        oWebControl.JS_Resize(allData.width, allData.height);
        getClickAction();
      });
    }
    /* 视频流RSA加密 */
    function setEncrypt(value) {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(allData.plugKey);
      return encrypt.encrypt(value);
    }
    /* 视频预览 */
    function getClickAction() {
      console.log(allData.showVideos, 'showVideos');
      allData.oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify(allData.showVideos),
      });
    }
    // 折线图加载
    let echartShuizhijc = null;
    const shuizhiEcharts = () => {
      echartShuizhijc = echarts.init(document.getElementById('echartYz'));
      echartShuizhijc.clear();
      echartShuizhijc.setOption(allData.szOption);
    };
    // 折线图表格数据加载
    async function getLineTableData() {
      let params = {
        stCode: props.stationCode,
        property: allData.yinziVal,
        startTime: formatDate(allData.dateRange[0]),
        endTime: formatDate(allData.dateRange[1]),
      };
      let res = await lyInfoStationLine(params);
      if (res && res.code == 1) {
        allData.szOption.xAxis.data = res.data.tt;
        allData.szOption.series[0].data = res.data.property;
        shuizhiEcharts();
      }
      getTableData();
    }
    async function getTableData() {
      let params = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          stCode: props.stationCode,
          property: allData.yinziVal,
          startTime: formatDate(allData.dateRange[0]),
          endTime: formatDate(allData.dateRange[1]),
        },
      };
      let res = await lyInfoStationTable(params);
      if (res && res.code == 1) {
        allData.tableData = res.data.list;
        paginationReactive.pageCount = res.data.pages;
        paginationReactive.itemCount = res.data.total;
      }
    }
    // 加载基本信息数据
    const getBaseData = async () => {
      let params = {
        stCode: props.stationCode,
      };
      let res = await lyInfoStationDetail(params);
      if (res && res.code == 1) {
        let datas = res.data;
        allData.detailVal = datas;
      }
    };
    onMounted(() => {
      getLineTableData();
      getBaseData();
    });
    onBeforeUnmount(() => {
      if (allData.oWebControl != null) {
        allData.ifShowVideo = false;
        allData.oWebControl.JS_HideWnd();
        allData.oWebControl.JS_DestroyWnd();
        allData.oWebControl = null;
      }
      if (!!echartShuizhijc) echartShuizhijc.dispose();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      changeTab,
      getLineTableData,
    };
  },
};
</script>

<style lang="less">
.shuizhiModals {
  color: #b4c9e0;
  height: 575px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .szjcz {
    display: flex;
    margin: 10px 0px;
    .contLeft {
      width: 300px;
      .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);
        }
      }
    }
    .contRight {
      flex: 1;
      padding-left: 20px;
      margin-left: 20px;
      border-left: 2px solid rgba(1, 27, 46, 0.5);
      .search {
        display: flex;
        .n-date-picker {
          width: 260px;
          margin: 0px 20px;
        }
        .n-select {
          width: 150px;
        }
      }
      #echartYz {
        margin-top: 10px;
        width: 580px;
        height: 200px;
      }
      .table {
        width: 100%;
        margin-top: 20px;
        max-height: 240px;
        overflow: auto;
        .n-data-table-td,
        .n-data-table-th {
          padding: 6px !important;
          text-align: center;
        }
      }
    }
  }
  .fxPlayBox {
    width: 900px;
    height: 480px;
    margin-top: 10px;
  }
  .cameraBtn {
    overflow: auto;
    height: 34px;
    .n-button {
      margin-right: 15px;
    }
  }
  .n-tabs-tab {
    font-size: 15px;
  }
}
</style>