<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">{{ params.name }}</div>
      <div class="content">
        <div class="part" v-if="params.code">
          <div class="name">Code：</div>
          <div class="value">{{ params.code }}</div>
        </div>
        <div class="part" v-if="params.area">
          <div class="name">政区：</div>
          <div class="value">{{ params.area }}</div>
        </div>
        <div class="part" v-if="params.stationClass">
          <div class="name">类型：</div>
          <div class="value">{{ params.stationClass }}</div>
        </div>
        <div class="part" v-if="params.sewageSystem">
          <div class="name">污水系统：</div>
          <div class="value">{{ params.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="params.lon">
          <div class="name">经度：</div>
          <div class="value">{{ params.lon }}</div>
        </div>
        <div class="part" v-if="params.geometrys">
          <div class="name">经度：</div>
          <div class="value">{{ params.geometrys.split(/\(| |\)/)[1] }}</div>
        </div>
        <div class="part" v-if="params.supplier">
          <div class="name">经度：</div>
          <div class="value">{{ params.supplier.split(/\(| |\)/)[1] }}</div>
        </div>
        <div class="part" v-if="params.geometry">
          <div class="name">经度：</div>
          <div class="value">{{ params.geometry.split(/\(| |\)/)[1] }}</div>
        </div>
        <div class="part" v-if="params.lat">
          <div class="name">纬度：</div>
          <div class="value">{{ params.lat }}</div>
        </div>
        <div class="part" v-if="params.geometrys">
          <div class="name">纬度：</div>
          <div class="value">{{ params.geometrys.split(/\(| |\)/)[2] }}</div>
        </div>
        <div class="part" v-if="params.supplier">
          <div class="name">纬度：</div>
          <div class="value">{{ params.supplier.split(/\(| |\)/)[2] }}</div>
        </div>
        <div class="part" v-if="params.geometry">
          <div class="name">纬度：</div>
          <div class="value">{{ params.geometry.split(/\(| |\)/)[2] }}</div>
        </div>

        <div class="part" style="width: 98%; flex-wrap: wrap">
          <div class="divclass2Font" v-if="params.introduction">
            <p class="name">简介</p>
            {{ params.introduction }}
          </div>
          <img :src="params.link" class="img" />
        </div>
        <!-- 查看工艺图 -->
        <div class="part gongyt" v-if="params.url">
          <div class="value" @click.stop="checkGyt(params)">查看工艺图</div>
        </div>
        <!-- 雨量站、雨量计历史数据 -->
        <div class="part" v-show="params.name.includes('雨量站')">
          <div class="name" style="width: 100%">降雨历史数据:</div>
          <div class="value"></div>
        </div>
        <div class="part" style="width: 100%" v-show="params.name.includes('雨量站')">
          <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 { getRainValue } 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({
      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 = () => mapbox.closeMarkerPopup();

    // 工艺图点击
    async function checkGyt(url) {
      bus.emit('getGongYt', url);
    }
    // 降雨历史数据
    const echartRain = async () => {
      let chart = document.getElementById('echartHistory');
      chart.removeAttribute('_echarts_instance_');
      let obj = {
        startTime: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000),
        endTime: formatDate(Date.now()),
        stationId: props.params.code,
      };
      let res = await getRainValue(obj);
      if (res.code == 200) {
        let datas = res.data || [];
        let arr1 = [],
          arr2 = [];
        datas.map((item) => {
          arr1.push(item.time);
          arr2.push(item.value);
        });
        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(() => {
      if (Object.keys(props.params).length == 0) return;
      allData.showCzxq = true;
      if (props.params.name.includes('雨量站')) {
        setTimeout(() => {
          echartRain();
        }, 200);
      }
    });
    onBeforeUnmount(() => {
      if (!!!allData.echartHistorys) {
        allData.echartHistorys.dispose();
      }
    });
    return {
      ...toRefs(allData),
      closepopupdefect,
      checkGyt,
    };
  },
});
</script>

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