<template>
  <!-- 断面监测弹窗 -->
  <div class="waterLeverEchart" v-show="allData.popupShow">
    <div class="title">
      <div class="titleName">{{ allData.dataList['名称'] }}</div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><Close /></el-icon>
      </div>
    </div>
    <div class="dividerLine"></div>
    <div id="chartWaterLevel" style="height: 200px"></div>
  </div>
</template>

<script setup name="waterLeverEchart">
import bus from '@/bus';
import { nextTick } from 'vue';
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
const allData = reactive({
  popupShow: false,
  dataList: {},
});

const closePopup = () => {
  allData.popupShow = false;
};
// 积水点势折线图
let chartPopupWaterLevel = null;
const initEchartsWater = () => {
  if (!!chartPopupWaterLevel) chartPopupWaterLevel.dispose();
  chartPopupWaterLevel = echarts.init(document.getElementById('chartWaterLevel'));
  chartPopupWaterLevel.clear();
  chartPopupWaterLevel.setOption(chartOption.floodOneMapWaterLevel);
};

onMounted(() => {
  bus.on('closeCommonPopup', closeCommonPopup => {
    allData.popupShow = closeCommonPopup;
  });
  bus.on('popupDuanMianData', data => {
    console.log(data);
    allData.popupShow = data.popupShow;
    let newName = `${data.popupInfo['名称'].split('断')[0]}沿程水位`;
    allData.dataList = data.popupInfo;
    allData.dataList['名称'] = newName;
    nextTick(() => {
      initEchartsWater();
    });
  });
});
onBeforeUnmount(() => {
  bus.off('popupDuanMianData');
  bus.off('closeCommonPopup');
});
</script>
<style lang="scss">
.waterLeverEchart {
  width: 850px;
  height: 250px;
  position: absolute;
  bottom: 8%;
  left: 16%;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  .title {
    margin-top: 10px;
    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;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      margin-right: 20px;
      height: 22px;
      cursor: pointer;
    }
  }
  .dividerLine {
    height: 2px;
    border: 1px;
    margin: 0px 0 10px 0px;
    background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  }
}
</style>