<template>
  <!-- 监测监视--降雨日历统计 -->
  <div class="monitorCalender">
    <div :class="isCaleisnder">
      <div class="selectTitleHM">
        <div class="name">降雨日历统计</div>
        <el-date-picker
          :clearable="false"
          format="YYYY-MM"
          v-model="datevalue"
          type="month"
          placeholder="选择月"
          style="width: 150px"
          size="small"
          @change="timeChange()"
        />
      </div>

      <el-calendar v-model="datevalue">
        <template #date-cell="{ data }">
          <div style="height: 100%" @click="changepeople(data.day)">
            <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
            <div
              class="data"
              v-for="(item, index) in allData.scheduleData"
              :key="item"
              v-show="moment(item.rainTime).format('YYYY-MM-DD') == moment(data.day).format('YYYY-MM-DD')"
            >
              <div class="data-body" v-if="item.rainTime == moment(data.day).format('YYYY-MM-DD')">
                <div class="datadiv" style="color: #ffeb3b">
                  {{ item.rainCumulative == 0.0 ? '' : item.rainCumulative ? item.rainCumulative + 'mm' : '' }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-calendar>
      <div class="supervisePopupPK" id="supervisePopupPK" v-show="allData.popupShow">
        <div class="titleTop">
          <div class="titleName">{{ dialogTitle }}</div>
          <div class="closePopup">
            <el-icon :size="18" @click="closePopup"><Close /></el-icon>
          </div>
        </div>
        <div class="allContent">
          <div id="waterChar" class="chartHeight"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import optionChart from './chartOption.js';
import { rainTimeDay } from '@/api/newPageline/riverCapacity.js';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
import { rainDistributionMapData } from '@/api/floodSys/floodStation.js';
import { getKrigingByPoints } from '@/utils/gis/rainkriging';
import bjBoundaryJson from '@/assets/geojson/krigingBoundary.json';
import moment from 'moment';
import { nextTick, onBeforeUnmount } from 'vue';
const datevalue = ref(new Date());
const dialogTitle = ref('');
const { proxy } = getCurrentInstance();
const waterEchart = shallowRef(null);
const fromTime = ref('');
const toTime = ref('');
const krigingJson = ref([]);
const Chartvalue = ref({
  xlist: [],
  ylist: [],
});

const props = defineProps({
  isCaleisnder: {
    type: String,
    default: '',
  },
});
const allData = reactive({
  popupShow: false,
  clickitem: '',
  scheduleData: [],
});
const closePopup = () => {
  allData.popupShow = false;
};

// 畅通道echart
function waterBarChartHM(rainList) {
  let stCode = '';
  let startTime = '';
  let endTime = '';
  stCode = rainList.stCode;
  startTime = rainList.rainTime + ' 08:00:00';
  endTime = moment(rainList.rainTime).add(1, 'days').format('YYYY-MM-DD 08:00:00');
  console.log(endTime, 'stCode');
  let prams = {
    stCode: stCode,
    startTime: startTime,
    endTime: endTime,
  };
  graphicReport(prams).then(res => {
    // console.log('res.data', res, res.data.propertyMonitorXList);
    Chartvalue.value.xlist = res.data.propertyMonitorXList;
    if (res.data.propertyMonitorXList.length == 0) return;
    res.data.propertyMonitorList.map(item => {
      console.log(item, 'item');
      if (item.monitorPropertyName == '5分钟时段降水量') {
        Chartvalue.value.ylist = item.ylist;
      }
    });
    intChart();
  });
}
//获取降雨插值
const getRainDistribution = async time => {
  if (newfiberMapbox.map.getLayer('kriging_layer')) {
    newfiberMapbox.map.removeLayer('kriging_layer');
    newfiberMapbox.map.removeLayer('krigingSymbol_layer');
    newfiberMapbox.map.removeSource('kriging_source');
    newfiberMapbox.map.removeSource('krigingSymbol_source');
  }
  !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
  krigingJson.value = [];
  let params = {
    startTime: time,
    endTime: time,
  };
  let res = await rainDistributionMapData(params);
  if (res && res.code == 200) {
    let allRainData = res.data;
    if (!!!allRainData.length) {
      proxy.$modal.msgError('暂无数据');
      return;
    }
    allRainData.forEach(data => {
      // data.rainSiteDistributionVOS.push(
      //   {
      //     lonLat: '113.973921,30.951959',
      //     p24: '19.1',
      //     stCode: '2109600001',
      //     stName: '市政府雨量站',
      //   },
      //   {
      //     lonLat: '113.953921,30.901959',
      //     p24: '10.1',
      //     stCode: '2109600001',
      //     stName: '市政府雨量站',
      //   }
      // );
      let rainDataJson = getKrigingJson(data.rainSiteDistributionVOS);
      krigingJson.value.push(rainDataJson);
    });
    addKrigingLayer(krigingJson.value[0]);
  }
};
//获取雨量插值json
const getKrigingJson = dataList => {
  if (!!!dataList.length) return;
  let features = [];
  dataList.forEach(element => {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])],
      },
      // properties: { value: element.p24, name: `${element.p24}mm`, label: element.p24 + `${element.p24}mm` },
      properties: { value: element.p24, name: `${element.p24}mm`, label: `${element.p24}mm` },
    };
    features.push(feature);
  });
  return {
    type: 'FeatureCollection',
    features: features,
  };
};
//地图添加降雨插值图
const addKrigingLayer = geoJson => {
  let layerId = `kriging_layer`;
  let sourceId = `kriging_source`;
  let layerSymbolId = `krigingSymbol_layer`;
  let sourceSymbolId = `krigingSymbol_source`;
  let kriging = getKrigingByPoints(geoJson, bjBoundaryJson);
  !newfiberMapbox.map.getSource(sourceSymbolId) && newfiberMapbox.map.addSource(sourceSymbolId, { type: 'geojson', data: geoJson });
  !newfiberMapbox.map.getLayer(layerSymbolId) &&
    newfiberMapbox.map.addLayer({
      id: layerSymbolId,
      type: 'symbol',
      source: sourceSymbolId,
      layout: {
        'text-field': '{label}',
        'text-font': ['KlokanTech Noto Sans Regular'],
        'text-size': 16,
        'text-line-height': 3,
        'text-anchor': 'bottom',
        'text-max-width': 50,
        'text-offset': [-2, 1],
      },
      paint: {
        'text-color': '#ffffff',
      },
    });
  !newfiberMapbox.map.getSource(sourceId) && newfiberMapbox.map.addSource(sourceId, { type: 'geojson', data: kriging });
  !newfiberMapbox.map.getLayer(layerId) &&
    newfiberMapbox.map.addLayer({
      id: layerId,
      type: 'fill',
      source: sourceId,
      layout: {},
      paint: {
        'fill-color': { type: 'identity', property: 'color' },
        'fill-opacity': 0.6,
      },
    });
};
const intChart = () => {
  let waterBar = JSON.parse(JSON.stringify(optionChart.option2));
  waterEchart.value = proxy.echarts.init(document.getElementById('waterChar'));
  waterBar.graphic.invisible = true; // 暂无数据
  waterBar.series = [
    {
      name: '',
      type: 'bar',
      barWidth: '40%',
      data: Chartvalue.value.ylist,
    },
  ];
  waterBar.tooltip = {
    trigger: 'item',
    formatter: function (params, index) {
      // console.log('echarts', params, 'index', index);
      return '时间:' + params.name + '</br>' + '降雨量:' + params.data + 'mm';
    },
  };
  waterBar.xAxis = {
    type: 'category',
    data: Chartvalue.value.xlist,
    axisLabel: {
      color: '#c6c6c6',
    },
    axisLine: {
      lineStyle: {
        color: '#066592',
      },
    },
  };
  waterBar.dataZoom = [{ type: 'inside', startValue: Chartvalue.value.xlist[Chartvalue.value.xlist.length / 2] }];
  waterBar.yAxis.name = '单位: mm';
  waterEchart.value.clear();
  waterEchart.value.setOption(waterBar);
};

function timeChange() {
  let startDate = moment(datevalue.value).startOf('month').format('YYYY-MM-DD');
  let endDate = moment(datevalue.value).endOf('month').format('YYYY-MM-DD');
  let prams = {
    fromTime: startDate,
    toTime: endDate,
  };
  rainTimeDay(prams).then(res => {
    let datas = res.data;
    allData.scheduleData = datas;
  });
}

// 降雨日历点击事件
const changepeople = time => {
  fromTime.value = time;
  let rainList = '';
  allData.scheduleData.map(element => {
    if (element.rainTime == time) {
      rainList = element;
    }
  });
  console.log(rainList.rainCumulative, 'rainCumulative', time);
  getRainDistribution(time);
  if (!rainList.rainCumulative || rainList.rainCumulative <= 0.0) {
    proxy.$modal.msgError('当日暂无降雨');
  } else {
    if (props.isCaleisnder !== 'calender2') {
      return;
    } else {
      allData.popupShow = true;
      dialogTitle.value = time + '降雨量';
      nextTick(() => {
        waterBarChartHM(rainList);
      }, 0);
    }
  }
};
function resizeTheChart() {
  waterEchart.value.resize();
}
onMounted(() => {
  timeChange();
  window.addEventListener('resize', resizeTheChart);
});
onBeforeUnmount(() => {
  if (newfiberMapbox.map.getLayer('kriging_layer')) {
    newfiberMapbox.map.removeLayer('kriging_layer');
    newfiberMapbox.map.removeLayer('krigingSymbol_layer');
    newfiberMapbox.map.removeSource('kriging_source');
    newfiberMapbox.map.removeSource('krigingSymbol_source');
  }
});
</script>

<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.monitorCalender {
  position: relative;
  .el-calendar {
    // height: 100%;
    border: none !important;
    background-color: rgba(1, 20, 49, 0.8);
  }
  .el-calendar-day {
    height: 25px !important;
    border: none;
    text-align: center;
    padding: 0px !important;
    background: #021532;
    font-size: 12px;
  }
  .el-calendar__header {
    padding: 5px 5px;
  }
  .el-calendar__body {
    height: 200px;
    padding: 0px !important;
    background: #021532;
  }

  .calender {
    .selectTitleHM {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 45px;
      background: url('@/assets/images/setting/titleBg.png') no-repeat;
      background-size: 100% 100%;
      .name {
        font-family: YouSheBiaoTiHei;
        font-size: 22px;
        font-style: normal;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 2px;
        color: #21adda;
        margin-left: 70px;
        background: linear-gradient(180deg, #fff 26.56%, #21adda 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .el-calendar {
      height: 180px;
      border: none !important;
      background-color: #00314e;
    }
    .el-calendar-day {
      height: 40px !important;
      border: none;
      text-align: center;
      padding: 0px !important;
      background: #00314e;
      font-size: 12px;
    }
    .el-calendar__body {
      height: 200px;
      padding: 0px !important;
      background: #00314e;
    }
    /* 日历单元格鼠标经过背景色 */
    .el-calendar-table .el-calendar-day:hover {
      background-color: #003f62 !important;
    }
    // #supervisePopupPK {
    //   position: fixed;
    //   left: 52%;
    //   top: 70%;
    //   transform: translate(-50%, -50%);
    //   width: 420px;
    //   height: 250px;
    //   background: #004065;
    //   border: 1px solid #114f89;
    //   z-index: 2000;
    // }
  }

  .calender2 {
    .el-calendar {
      // height: 100%;
      border: none !important;
      background-color: rgba(1, 20, 49, 0.8);
    }
    .el-calendar-day {
      height: 25px !important;
      border: none;
      text-align: center;
      padding: 0px !important;
      background: #021532;
      font-size: 12px;
    }
    /* 日历单元格鼠标经过背景色 */
    .el-calendar-table .el-calendar-day:hover {
      background-color: #052351 !important;
    }
  }
  .el-calendar-table tr:first-child td,
  .el-calendar-table td,
  .el-calendar-table tr td:first-child {
    border: none;
  }
  .el-calendar-table {
    padding: 2px;
  }
  .is-selected {
    color: #1989fa;
  }
  //取消日历选中背景颜色
  .el-calendar-table td.is-selected {
    background-color: inherit;
  }
  /* 日历单元格鼠标经过背景色 */
  .el-calendar-table .el-calendar-day:hover {
    background-color: #052351 !important;
  }
  .datadiv {
    font-size: 10px;
  }
  .yellow {
    color: #ffeb3b;
  }
  .blue {
    color: #2196f3;
  }
  .dialogClass {
    position: fixed;
    top: 250px;
    width: 100vw;
    height: 500px;
    left: 0;
  }
  .el-calendar__header {
    display: none;
  }
  #supervisePopupPK {
    position: fixed;
    left: 52%;
    top: 19%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 210px;
    background: #021534;
    border: 1px solid #114f89;
    z-index: 2000;
    .titleTop {
      position: relative;
      height: 30px;
      padding-top: 8px;
      margin-left: 20px;
    }
    .closePopup {
      cursor: pointer;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #1096db;
    }

    .allContent {
      width: 360px;
      height: 180px;
    }
    .chartHeight {
      width: 360px;
      height: 180px;
    }
  }
}
</style>