<template>
  <!-- 河道监测弹窗 -->
  <div class="riverPopup" id="riverPopup" v-show="allData.popupShow">
    <div class="title">
      <div class="titleName">{{ allData.dataList['stName'] }}</div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><Close /></el-icon>
      </div>
    </div>
    <div class="allContent">
      <div class="basicInfo">
        <div class="basicContent">
          <div class="contentInfo">
            <div class="contentName">站点编码：</div>
            <div class="contentValue">{{ allData.dataList['stCode'] }}</div>
          </div>
          <div class="contentInfo" v-if="allData.dataList['address']">
            <div class="contentName">安装地址：</div>
            <div class="contentValue" :title="allData.dataList['address']">
              {{ allData.dataList['address'] }}
            </div>
          </div>
          <div class="contentInfo">
            <div class="contentName">站点经度：</div>
            <div class="contentValue">{{ allData.dataList['lon'] }}</div>
          </div>
          <div class="contentInfo">
            <div class="contentName">站点纬度：</div>
            <div class="contentValue">{{ allData.dataList['lat'] }}</div>
          </div>
          <div class="contentInfo">
            <div class="contentName">在线状态：</div>
            <div class="contentValue">{{ allData.dataList['onlineStatus'] }}</div>
          </div>
        </div>
        <el-image
          v-if="allData.dataList['coverPhotosFileList']"
          :src="allData.dataList['coverPhotosFileList'][0]"
          :preview-src-list="srcList"
          style="padding-left: 50px"
        />
      </div>
      <div class="dividerLine"></div>
      <div class="trend">
        <!-- <el-date-picker
          v-model="allData.dataTime1"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 220px; margin-left: 50px"
          @change="changeDate"
        /> -->
        <el-date-picker
          v-model="allData.dataTime1"
          type="date"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 120px; margin-left: 10px"
          @change="changeDate"
        />
        -
        <el-date-picker
          v-model="allData.dataTime2"
          type="date"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 120px"
          @change="changeDate"
        />
        <div id="chartPopupRiver"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="commonZSPopup">
import bus from '@/bus';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance();
const allData = reactive({
  popupShow: false,
  dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
  dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
  systemType: null,
  dataList: {},
});

const closePopup = () => {
  allData.popupShow = false;
  allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
  allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
  newfiberMapbox.map.easeTo({
    center: [114.312, 34.802],
    zoom: 12.9,
    pitch: 55,
  });
  let clearSelectedFeature = [];
  newfiberMapbox.getLayers().forEach(feature => {
    if (feature.newfiberId == 'highlight_point') {
      clearSelectedFeature.push(feature);
    }
  });

  if (!!clearSelectedFeature.length) {
    clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  }
};
//时间格式化
const getYearMonthDay = time => {
  return proxy.moment(time).format('YYYY-MM-DD');
};
const changeDate = () => {
  getSuperViseData();
};
//获取监测数据
const getSuperViseData = async () => {
  let params = {
    startTime: allData.dataTime1,
    endTime: allData.dataTime2,
    stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    chartOption.popupTrendRiver.xAxis.data = [];
    if (Boolean(datas.propertyMonitorXList.length)) {
      datas.propertyMonitorXList.forEach(i => {
        chartOption.popupTrendRiver.xAxis.data.push(i.substr(0, 16));
      });
    }
    if (datas.propertyMonitorXList.length > 0) {
      chartOption.popupTrendRiver.graphic.invisible = true; //暂无数据
    } else {
      chartOption.popupTrendRiver.graphic.invisible = false; //暂无数据
    }
    if (datas.propertyMonitorList.length > 0) {
      chartOption.popupTrendRiver.series.data = datas.propertyMonitorList.filter(item => item.monitorPropertyName == '水位')[0].ylist;
    } else {
      chartOption.popupTrendRiver.series.data = [];
    }
    // 设置鼠标滚轮放大缩小展示数据区间
    chartOption.popupTrendRiver.dataZoom = [
      { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length / 2] },
    ];
    initEchartsPopup();
  }
};
// 积水点势折线图
let chartPopupRiver = null;
const initEchartsPopup = () => {
  if (!!chartPopupRiver) chartPopupRiver.dispose();
  chartPopupRiver = echarts.init(document.getElementById('chartPopupRiver'));
  chartPopupRiver.clear();
  chartPopupRiver.setOption(chartOption.popupTrendRiver);
};

onMounted(() => {
  bus.on('closeCommonPopup', closeCommonPopup => {
    allData.popupShow = closeCommonPopup;
  });
  bus.on('popupRiverData', data => {
    allData.popupShow = data.popupShow;
    allData.dataList = data.popupInfo;
    getSuperViseData();
  });
});
onBeforeUnmount(() => {
  bus.off('popupRiverData');
  bus.off('closeCommonPopup');
});
</script>
<style lang="scss">
.riverPopup {
  width: 748px;
  height: 476px;
  background-image: url('@/assets/newImgs/layer1.png');
  background-size: 100% 100%;
  z-index: 115;
  position: absolute;
  top: 80px;
  left: 330px;
  .title {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleName {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ccf1ff;
      line-height: 22px;
      padding-left: 80px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      padding-right: 40px;
      height: 22px;
      cursor: pointer;
    }
  }

  .allContent {
    display: flex;
    .basicInfo {
      width: 270px;
      margin-top: 10px;
      .basicContent {
        .contentInfo {
          display: flex;
          align-items: center;
          padding-left: 80px;
          .contentName {
            margin: 3px;
            height: 20px;
            width: 70px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #00d1ff;
          }
          .contentValue {
            height: 20px;
            width: 100px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #00d1ff;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .dividerLine {
      width: 3px;
      height: 350px;
      position: absolute;
      left: 250px;
      border: 1px;
      background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
    }
    .trend {
      width: 450px;
      #chartPopupRiver {
        width: 95%;
        height: 300px;
        margin-top: 10px;
      }
    }
  }
}
</style>