<template>
  <div class="popupdefect">
    <!-- 全局地图点位卡片 -->
    <!-- 感知网-厂站工情 -->
    <div class="publicMapTips" id="czgqBox" v-if="showCzxq">
      <div class="close">
        <n-icon size="24" @click="closepopupdefect()">
          <Close />
        </n-icon>
      </div>
      <div class="title">{{ popupInfo.name }}</div>
      <div class="content">
        <div class="part" v-if="popupInfo.code">
          <div class="name">Code：</div>
          <div class="value">{{ popupInfo.code }}</div>
        </div>
        <div class="part" v-if="popupInfo.area">
          <div class="name">政区：</div>
          <div class="value">{{ popupInfo.area }}</div>
        </div>
        <div class="part" v-if="popupInfo.stationClass">
          <div class="name">类型：</div>
          <div class="value">{{ popupInfo.stationClass }}</div>
        </div>
        <div class="part" v-if="popupInfo.sewageSystem">
          <div class="name">污水系统：</div>
          <div class="value">{{ popupInfo.sewageSystem }}</div>
        </div>
        <!-- <div class="part"
             v-if="!!params.rainArea">
          <div class="name">雨水分区：</div>
          <div class="value">{{ params.rainArea }}</div>
        </div> -->
        <div class="part" v-if="popupInfo.lon">
          <div class="name">经度：</div>
          <div class="value">{{ popupInfo.lon }}</div>
        </div>
        <div class="part" v-if="popupInfo.LNG">
          <div class="name_1">经度：</div>
          <div class="value">{{ popupInfo.LNG }}</div>
        </div>
        <div class="part" v-if="popupInfo.geometrys">
          <div class="name">经度：</div>
          <div class="value">{{ popupInfo.geometrys.split(/\(| |\)/)[1] }}</div>
        </div>
        <div class="part" v-if="popupInfo.supplier">
          <div class="name">经度：</div>
          <div class="value">{{ popupInfo.supplier.split(/\(| |\)/)[1] }}</div>
        </div>
        <div class="part" v-if="popupInfo.geometry">
          <div class="name">经度：</div>
          <div class="value">{{ popupInfo.geometry.split(/\(| |\)/)[1] }}</div>
        </div>
        <div class="part" v-if="popupInfo.lat">
          <div class="name">纬度：</div>
          <div class="value">{{ popupInfo.lat }}</div>
        </div>
        <div class="part" v-if="popupInfo.LAT">
          <div class="name_1">纬度：</div>
          <div class="value">{{ popupInfo.LAT }}</div>
        </div>
        <div class="part" v-if="popupInfo.geometrys">
          <div class="name">纬度：</div>
          <div class="value">{{ popupInfo.geometrys.split(/\(| |\)/)[2] }}</div>
        </div>
        <div class="part" v-if="popupInfo.supplier">
          <div class="name">纬度：</div>
          <div class="value">{{ popupInfo.supplier.split(/\(| |\)/)[2] }}</div>
        </div>
        <div class="part" v-if="popupInfo.geometry">
          <div class="name">纬度：</div>
          <div class="value">{{ popupInfo.geometry.split(/\(| |\)/)[2] }}</div>
        </div>
        <div class="part" v-if="popupInfo.STCD">
          <div class="name_1">测站编码：</div>
          <div class="value">{{ popupInfo.STCD }}</div>
        </div>
        <div class="part" v-if="popupInfo.DSNM">
          <div class="name_1">行政区划：</div>
          <div class="value">{{ popupInfo.DSNM }}</div>
        </div>
        <div class="part" v-if="popupInfo.DAYDRP">
          <div class="name_1">日降雨量：</div>
          <div class="value">{{ popupInfo.DAYDRP }}</div>
        </div>
        <div class="part" v-if="popupInfo.MAXDRP">
          <div class="name_1">最大小时降雨量：</div>
          <div class="value">{{ popupInfo.MAXDRP }}</div>
        </div>
        <div class="part" v-if="popupInfo.SWVal">
          <div class="name_1">积水深度(mm)：</div>
          <div class="value">{{ popupInfo.SWVal }}</div>
        </div>
        <div class="part" style="width: 98%; flex-wrap: wrap">
          <div class="divclass2Font" v-if="popupInfo.introduction">
            <p class="name">简介</p>
            {{ popupInfo.introduction }}
          </div>
          <img :src="popupInfo.link" class="img" />
        </div>
        <!-- 查看工艺图 -->
        <div class="part gongyt" v-if="popupInfo.url">
          <div class="value" @click.stop="checkGyt(popupInfo.url)">查看工艺图</div>
        </div>
        <!-- 雨量站、雨量计历史数据 -->
        <div class="part" v-show="popupInfo.name.includes('雨量站')">
          <div class="name" style="width: 100%">降雨历史数据:</div>
          <div class="value"></div>
        </div>
        <div class="part" style="width: 100%" v-if="popupInfo.STCD">
          <div id="echartHistory"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch, defineComponent, onBeforeUnmount, nextTick } from 'vue';
import { Close } from '@vicons/ionicons5';
import { NIcon } from 'naive-ui';
import bus from '@/utils/util';
import * as echarts from 'echarts';
import { rainHistoryHjly, jsdRealHjly } from '@/services';
import { formatDate } from '@/utils/util';

export default defineComponent({
  name: 'popupdefect',
  components: {
    Close,
    NIcon,
  },
  props: {
    params: {
      type: Object,
      default: () => new Object({}),
    },
  },
  setup(props) {
    const allData = reactive({
      popupInfo: null,
      showCzxq: false,
      echartHistorys: null,
      historyOption: {
        legend: {
          show: false,
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '0%',
          top: '20%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['11', '22'],
          axisLabel: {
            textStyle: {
              color: '#B4C9E0',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            },
          },
        },
        yAxis: {
          type: 'value',
          name: 'mm',
          nameTextStyle: {
            color: '#B4C9E0',
          },
          axisLabel: {
            textStyle: {
              color: '#B4C9E0',
            },
          },
          axisLine: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            },
          },
        },
        series: [
          {
            name: '降雨历史数据',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(63,159,48,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(63,159,48,0.3)',
                },
              ]),
              borderRadius: [12, 12, 0, 0],
            },
            data: [0, 0.8],
          },
        ],
      },
    });
    // 关闭事件
    const closepopupdefect = () => {
      allData.showCzxq = false;
    };

    // 工艺图点击
    async function checkGyt(popupInfo) {
      bus.emit('getGongYt', popupInfo);
    }
    // 降雨历史数据
    const echartRain = async () => {
      let chart = document.getElementById('echartHistory');

      chart.removeAttribute('_echarts_instance_');
      let res = null;
      if (allData.popupInfo.stationType == 'rainStation') {
        let obj = {
          currentPage: 1,
          pageSize: 99,
          searchFilters: [],
          paramMap: {
            begindate: formatDate(Date.now() - 24 * 1 * 60 * 60 * 1000, 'YYYY-MM-DD hh'),
            enddate: formatDate(Date.now(), 'YYYY-MM-DD hh'),
            stcd: allData.popupInfo.STCD,
          },
        };
        res = await rainHistoryHjly(obj);
      } else if (allData.popupInfo.stationType == 'waterLoging') {
        // let obj = {
        //   currentPage: 1,
        //   pageSize: 99,
        //   searchFilters: [],
        //   paramMap: {
        //     stcd: allData.popupInfo.STCD,
        //   },
        // };
        // res = await jsdRealHjly(obj);
      }
      if (res) {
        let datas = res.result || [];
        let arr1 = [],
          arr2 = [];
        datas.map((item) => {
          arr1.push(item.TM || item.Z);
          arr2.push(item.DRP);
        });
        if (datas.length == 0) {
          chart.innerHTML = '暂无历史数据';
          chart.style.cssText = 'text-align:center; color: #909399; line-height: 160px';
        } else {
          allData.historyOption.xAxis.data = arr1;
          allData.historyOption.series[0].data = arr2;
          allData.echartHistorys = echarts.init(chart);
          allData.echartHistorys.clear();
          allData.echartHistorys.setOption(allData.historyOption);
        }
      }
    };

    onMounted(() => {
      bus.on('popupInfo', (data) => {
        allData.popupInfo = data;
        console.log('allData.popupInfo--', allData.popupInfo);
        if (Object.keys(allData.popupInfo).length == 0) return;
        allData.showCzxq = true;
        if (allData.popupInfo.STCD) {
          setTimeout(() => {
            echartRain();
          }, 200);
        }
      });
      bus.on('closePopup', (data) => {
        allData.showCzxq = data;
      });
    });
    onBeforeUnmount(() => {
      bus.off('popupInfo');
      bus.off('closePopup');
      if (!!!allData.echartHistorys) {
        allData.echartHistorys.dispose();
      }
    });
    return {
      ...toRefs(allData),
      closepopupdefect,
      checkGyt,
    };
  },
});
</script>

<style scoped lang="less">
.popupdefect {
  position: absolute;
  background: #034259d5;
  z-index: 99;
  #czgqBox {
    .part {
      width: 50%;
      padding-left: 20px;
      font-size: 14px;
      line-height: 26px;
      .name {
        width: 80px;
        font-weight: bold;
        color: #14ccca;
      }
      .name_1 {
        width: 120px;
        font-weight: bold;
        color: #14ccca;
      }
      .img {
        width: 100%;
      }
      #echartHistory {
        width: 100%;
        height: 160px;
        margin-top: 10px;
      }
    }
    .gongyt {
      color: yellow;
      cursor: pointer;
    }
  }
}
</style>