<template>
  <!-- 降雨特征 -->
  <div class="natureOne">
    <!-- 气象信息 -->
    <div class="weatherPart">
      <div class="publicTitle">气象信息</div>
      <div class="content">
        <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
          <img :src="getNowImage(item.WEA)" />
          <p>{{ item.WEA }}</p>
          <p style="font-size: 20px">{{ item.TIME ? item.TIME.substring(5, 10) : '--' }}</p>
          <p>{{ item.TEM2 }}--{{ item.TEM1 }}</p>
        </div>
      </div>
    </div>
    <!-- 降雨时空统计 -->
    <div class="rainTime">
      <div class="publicTitle">降雨数据采集</div>
      <n-data-table
        :columns="columns"
        :max-height="200"
        style="margin-top: 10px"
        striped
        :data="tableData"
        :loading="tableLoading"
        :bordered="false"
      />
    </div>
    <!-- 积水点统计 -->
    <div class="rainTime">
      <div class="publicTitle">积水点数据采集</div>
      <n-data-table
        :columns="columnsJ"
        :max-height="200"
        style="margin-top: 10px"
        striped
        :data="tableDataJ"
        :loading="tableLoadingJ"
        :bordered="false"
      />
    </div>
    <!-- 降雨场次统计 -->
    <div class="rainCount">
      <div class="publicTitle">降雨场次统计</div>
      <div id="echartCount"></div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import * as echarts from 'echarts';
import { dayWeather, RainStationFindall, rainFeaturesStationCollect, jsdListHjly } from '@/services';
import Popup from './Popup.vue';
import bus from '@/utils/util';
import yuliangImg from '@/assets/newImgs/layerIcon/雨量计.png';
import axios from 'axios';
import { getWeatherImg } from '@/utils/util';

export default {
  name: 'natureOne',
  components: {
    Popup,
  },
  setup() {
    const allData = reactive({
      weatherArr: [],
      rainAnalyses: {},
      index: 0,
      months: new Date().getTime(),
      checkedLegend: [], // 设置默认选中的图例图层
      columns: [
        { title: '雨量站名称', width: '150', key: 'stationName' },
        { title: '今日降雨(mm)', key: 'acuRain' },
        { title: '明日预报降雨(mm)', key: 'preRain' },
      ],
      tableData: [],
      tableLoading: true,

      columnsJ: [
        { title: '积水点名称', width: '150', key: 'STNM' },
        {
          title: '积水深度(mm)',
          key: 'Z',
          render(row) {
            return row.Z || '--';
          },
        },
        {
          title: '监测时间',
          key: 'TM',
          width: '160',
          render(row) {
            return row.TM || '--';
          },
        },
      ],
      tableDataJ: [],
      tableLoadingJ: true,
    });
    // 饼图加载
    let echartNature = null;
    const echartCount = () => {
      let option = {
        legend: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        title: {
          text: '21',
          left: 'center',
          top: '38%',
          textStyle: {
            color: '#fff',
            fontSize: 20,
            align: 'center',
          },
          subtext: '降雨数',
          subtextStyle: {
            color: '#A5BBD2',
            fontStyle: 'normal',
            fontSize: 14,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '55%'],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: '\n{b|{b}} \n {hr|}\n  {c} {per|{d}%}  ',
              backgroundColor: '#00596B',
              borderColor: '#14ccca',
              color: '#14ccca',
              fontWeight: 'bold',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                hr: {
                  borderColor: '#14ccca',
                  width: '100%',
                  borderWidth: 1,
                  textAlign: 'center',
                  height: 0,
                },
                b: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: '500',
                  padding: [13, 4],
                  lineHeight: 16,
                },
                per: {
                  color: '#14ccca',
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 2, name: '10年1遇' },
              { value: 4, name: '5年1遇' },
              { value: 5, name: '2年1遇' },
              { value: 10, name: '1年1遇' },
            ],
          },
        ],
      };
      echartNature = echarts.init(document.getElementById('echartCount'));
      echartNature.clear();
      echartNature.setOption(option);
    };
    // 获取气象数据信息
    const getWeather = async () => {
      let res = await dayWeather();
      let arrs = res || [];
      if (arrs.length > 4) {
        allData.weatherArr = arrs.splice(0, 4);
      }
    };
    // 天气图标
    function getNowImage(code) {
      let image = '';
      if (code === '晴转多云' || code === '多云转晴' || code === '晴') {
        image = getWeatherImg('sunny.png');
      } else if (code === '多云' || code === '阴转多云' || code === '多云转阴' || code === '阴' || code.includes('多云')) {
        image = getWeatherImg('cloudy.png');
      } else if (code === '小雨转阴' || code === '阴转小雨' || code === '晴转阴' || code.includes('小雨')) {
        image = getWeatherImg('overcast.png');
      } else if (code === '阵雨' || code === '小雨转晴' || code === '阵雨转阴' || code.includes('阵雨')) {
        image = getWeatherImg('shower.png');
      } else if (code === '雷阵雨') {
        image = getWeatherImg('thunder-shower.png');
      } else if (code === '小雨' || code === '晴转小雨' || code === '小雨转中雨' || code === '小雨转多云') {
        image = getWeatherImg('light-rain.png');
      } else if (code === '中雨' || code === '中雨转阴' || code.includes('中雨')) {
        image = getWeatherImg('moderate-rain.png');
      } else if (code === '暴雨' || code.includes('大雨')) {
        image = getWeatherImg('heavy-rain.png');
      }
      return image;
    }
    //获取雨量站基本信息
    const getRainStation = async () => {
      let res = await RainStationFindall();
      if (res && res.code == 200) {
        let datas = res.data;
        datas.forEach((item) => {
          if (!!!item.name.includes('雨量站')) {
            if (item.name.includes('长丰')) {
              item.name = '长丰雨量计';
            } else {
              item.name = item.name + '雨量计';
            }
          }
        });
        let yuliangJSON = mapbox.getWKTtoGeojson(datas);
        // 加载雨量监测站点位
        mapbox.loadPointsLayer(yuliangImg, 'yuliangJC', yuliangJSON, 'name', true);
      }
    };

    // 获取积水点数据
    const getWaterLoging = async () => {
      allData.tableLoadingJ = true;
      let res = await jsdListHjly({ currentPage: 1, pageSize: 99, searchFilters: [] });
      console.log(res);
      allData.tableDataJ = res.result || [];
      allData.tableLoadingJ = false;
    };

    // 获取降雨数据采集
    const getRainList = async () => {
      allData.tableLoading = true;
      let res = await rainFeaturesStationCollect();
      if (res && res.code == 200) {
        let datas = res.data || [];
        allData.tableData = datas || [];
        datas.map((item) => {
          if (item.acuRain == null) item.acuRain = '--';
          if (item.preRain == null) item.preRain = '--';
          if (!item.stationName.includes('雨量站')) {
            item.stationName = item.stationName + '雨量计';
          }
        });
        allData.tableData = datas;
        allData.tableLoading = false;
      }
    };
    // 初始化地图武汉3D建筑
    const setMap3D = async () => {
      // 由于白膜文件过大，所以使用axios请求获取
      let res = await axios.get('../../../../../static/gisJson/WHbulding.json');
      let WHbulding = res.data;
      //添加武汉3D建筑
      mapbox.addBulding('bulding', WHbulding);
      //初始化地图视角
      mapbox._map.setZoom(14).setPitch(60).setCenter([114.275596, 30.610028]);
      getRainStation();
    };

    onMounted(() => {
      setMap3D(); // 初始化地图武汉3D建筑
      // 设置默认选中的图例图层
      bus.emit('showDefaultLegend', allData.checkedLegend);
      getRainList();
      getWaterLoging(); //积水点
      echartCount();
      bus.emit('ifQixiang', true);
      // 添加弹窗
      mapbox._map.on('click', 'yuliangJC_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'yuliangJC_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      //添加鼠标样式
      mapbox.changeTypeOfmouse('yuliangJC_layer');
      bus.on('pointToDetail', (param) => {
        mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
      });
      getWeather();
    });
    onBeforeUnmount(() => {
      bus.emit('ifQixiang', false);
      bus.emit('showDefaultLegend', []); //清空图例默认开启
      if (echartNature) echartNature.dispose();
      // 移除图层
      if (mapbox._map.getLayer('yuliangJC_layer')) {
        mapbox._map.removeLayer('yuliangJC_layer').removeSource('yuliangJC_source');
      }
      //移除Popup
      bus.off('pointToDetail');
      if (!!mapbox._popup) {
        mapbox._popup.remove();
      }
    });
    return {
      ...toRefs(allData),
      getRainStation,
      getNowImage,
    };
  },
};
</script>
<style lang="less">
.natureOne {
  width: 100%;
  height: 100%;

  .weatherPart {
    margin-top: 10px;

    .content {
      width: 435px;
      background: #023b53;
      border-radius: 15px;
      margin: 10px 0px;
      display: flex;
      justify-content: space-around;
      .part {
        width: 100px;
        flex-shrink: 0;
        padding: 10px 0px;
        text-align: center;
        font-size: 15px;
        img {
          width: 60%;
        }
        p {
          height: 30px;
          line-height: 30px;
        }
      }
      .part:nth-of-type(odd) {
        background: #012c3f;
      }
    }
  }
  .rainTime {
    margin-top: 20px;
    .n-data-table {
      .n-data-table-th,
      .n-data-table-td {
        text-align: center;
      }
    }
  }
  .rainCount {
    margin-top: 20px;
    #echartCount {
      margin-top: 20px;
      width: 430px;
      height: 200px;
    }
  }
}
</style>