<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>
      <div class="introduction-contents3">
        <div class="head">
          <span style="width: 33.3%" class="center">积水点名称</span>
          <span style="width: 33.3%" class="center">积水深度(m)</span>
          <span style="width: 33.3%" class="center">监测时间</span>
        </div>
        <div class="content">
          <ul class="list" ref="dispatchRef">
            <li
              style="display: flex; align-items: center"
              v-for="(item, index) in tableDataJ"
              @click="handleRowClick(item, index)"
              :key="index"
            >
              <div style="width: 33.3%; text-align: center" class="ellipsis">
                <n-popover trigger="hover">
                  <template #trigger>
                    <div class="ellipsis popovers">
                      {{ item.STNM }}
                    </div>
                  </template>
                  <span>{{ item.STNM }}</span>
                </n-popover>
              </div>
              <div style="width: 33.3%" class="center">
                {{ item.Z }}
              </div>
              <div style="width: 33.3%" class="center">
                {{ item.TM }}
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- <n-data-table
        :columns="columnsJ"
        :max-height="200"
        style="margin-top: 10px"
        striped
        :data="tableDataJ"
        :loading="tableLoadingJ"
        :bordered="false"
        :row-key="(row) => row.id"
        @row-click="handleRowClick"
      /> -->
    </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 { rainlistHjly, dayWeather, jsdListHjly } from '@/services';
import Popup from './Popup.vue';
import bus from '@/utils/util';
import yuliangImg from '@/assets/newImgs/layerIcon/rainStation_gis.png';
import { getWeatherImg, formatDate } from '@/utils/util';

export default {
  name: 'natureOne',
  components: {
    Popup,
  },
  setup() {
    const allData = reactive({
      tableLoading: true,
      weatherArr: [],
      rainAnalyses: {},
      index: 0,
      months: new Date().getTime(),
      checkedLegend: [
        { isCheck: false, layername: 'waterLoging' },
        { isCheck: false, layername: 'mingqu' },
        { isCheck: false, layername: 'anhan' },
        { isCheck: false, layername: 'xianghan' },
        { isCheck: false, layername: 'layer0' },
        { isCheck: false, layername: 'layer1' },
        { isCheck: false, layername: 'layer5' },
        { isCheck: false, layername: 'layer6' },
        { isCheck: false, layername: 'layer8' },
        { isCheck: false, layername: 'layer9' },
        { isCheck: false, layername: 'layer11' },
      ], // 设置默认选中的图例图层
      columns: [
        { title: '雨量站名称', width: '150', key: 'STNM' },
        { title: '今日降雨(mm)', key: 'DAYDRP' },
        {
          title: '明日预报降雨(mm)',
          key: 'preRain',
          render(row) {
            return '--';
          },
        },
      ],
      tableData: [],

      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;
    }
    //获取雨量站geojson
    const getRainStationGeojson = (dataList) => {
      return turf.featureCollection(
        dataList.map((data) => {
          return turf.point([Number(data.LGTD), Number(data.LTTD)], data);
        })
      );
    };

    //获取雨量站基本信息
    const getRainStation = async () => {
      let yuliangJSON = getRainStationGeojson(allData.tableData);
      // 加载雨量监测站点位
      newfiberMap.addGeojsonPoint({
        id: 'yuliangJC',
        data: yuliangJSON,
        icon: yuliangImg,
        text: '',
        fontSize: '18',
        font: 'Source Han Sans CN',
        height: 124,
        width: 64,
        labelOffset: [0, -140],
        imgOffset: [0, 0],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: 'rgba(66, 144, 234,1)',
        outlineColor: 'rgba(0, 0, 0, 0.8)',
        outlineWidth: 6,
        show: true,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      });
    };
    // 获取降雨数据采集
    const getRainList = async () => {
      allData.tableLoading = true;
      // 市信息中心接口
      let params = {
        currentPage: 1,
        pageSize: 99,
        searchFilters: [],
        paramMap: {
          begindate: formatDate(Date.now(), 'YYYY-MM-DD') + ' 00:00:00',
          enddate: formatDate(Date.now(), 'YYYY-MM-DD') + ' 23:23:59',
        },
      };

      let res = await rainlistHjly(params);
      if (res) {
        allData.tableData = res.result || [];
        allData.tableData.forEach((item) => {
          item.name = item.STNM;
          item.DAYDRP = item.DAYDRP + 'mm';
          item.MAXDRP = item.MAXDRP + 'mm';
          item.stationType = 'rainStation';
        });
        allData.tableLoading = false;
        // 地图渲染雨量站点位
        setTimeout(() => {
          // getRainStation();
        }, 1000);
      }
    };

    // 获取积水点数据
    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 handleRowClick = (row) => {
      newfiberMap.map.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(row.LNG, row.LAT, 3000.0),
      });
    };

    onMounted(() => {
      getRainList(); //获取雨量站列表
      getWaterLoging(); //积水点
      let closePopup = false;
      bus.emit('closePopup', closePopup);
      //  设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      }, 1000);

      /*      newfiberMap.flyTo({
        lon: 114.264596,
        lat: 30.500028,
        heading: 2.281299097855777,
        zoom: 5358.12942752382,
        pitch: -25.2508969308367,
        roll: 0.005453465256790101,
      });*/
      echartCount();
      getWeather();
    });
    onBeforeUnmount(() => {
      bus.emit('ifQixiang', false);
      bus.emit('showDefaultLegend', [
        { isCheck: true, layername: 'waterLoging' },
        { isCheck: true, layername: 'mingqu' },
        { isCheck: true, layername: 'anhan' },
        { isCheck: true, layername: 'xianghan' },
        { isCheck: true, layername: 'layer0' },
        { isCheck: true, layername: 'layer1' },
        { isCheck: true, layername: 'layer5' },
        { isCheck: true, layername: 'layer6' },
        { isCheck: true, layername: 'layer8' },
        { isCheck: true, layername: 'layer9' },
        { isCheck: true, layername: 'layer11' },
      ]); //清空图例默认开启
      if (echartNature) echartNature.dispose();
    });
    return {
      ...toRefs(allData),
      getRainStation,
      getNowImage,
      getWaterLoging,
      handleRowClick,
    };
  },
};
</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;
    }
  }
}
.introduction-contents3 {
  height: 200px;
  .head {
    display: flex;
    height: 40px;
    padding: 0 10px;
    align-items: center;
    background: #012c3f;
    span {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #669db4;
      text-align: center;
    }
  }

  .headbgc1 {
    background-image: url('/src/assets/imgs/gateway1/I.png');
    background-size: cover;
  }
  .content {
    height: calc(100% - 45px);
    overflow: hidden;
  }
  .list {
    // padding: 0 10px;
    height: 100%;
    overflow: auto;
    color: #ffffff;

    li {
      height: 45px;
      cursor: pointer;
    }

    li:nth-child(odd) {
      background: rgba(0, 0, 0, 0.2);
    }
  }

  ul {
    list-style-type: none;
  }

  li span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
  }
}
.center {
  text-align: center;
}
</style>