<template>
  <!-- 降雨日历 -->
  <div class="rainCaldarPage">
    <div class="partTitleHM flex flex-r">
      <span style="padding-right: 10px">降雨日历</span>

      <el-tooltip class="box-item" effect="customized" placement="bottom-end">
        <div class="rain_des flex">
          <el-icon style="margin-top: 14px" size="25">
            <InfoFilled />
          </el-icon>
          <!-- <span class="label_text">图例</span> -->
        </div>
        <template #content>
          <div class="tuli_data_list flex flex-v">
            <div class="flex flex-r flex flex-justcontent-spacearound" style="width: 100%">
              <div class="tab_label" :class="[activeTab == 0 ? 'active_tab_label' : '']" @click="activeTab = 0">12小时</div>
              <div class="tab_label" :class="[activeTab == 1 ? 'active_tab_label' : '']" @click="activeTab = 1">24小时</div>
            </div>
            <div class="flex flex-r list flex-justcontent-start flex-align-center" v-for="item in tuLiList">
              <div class="img_icon flex" v-if="item.icon">
                <img :src="getAllImageUrl(item.icon, 'newImgs/layerIcon')" />
              </div>
              <div v-else :class="item.iconName"></div>
              <p class="title" :title="item.layerName">{{ item.layerName }}</p>
            </div>
          </div>
        </template>
      </el-tooltip>
      <el-button type="warning" size="small" style="position: relative; left: 45%; top: 10px" @click="handleReport">分析报告</el-button>
    </div>
    <div class="partContHM">
      <div class="content flex flex-1 flex-v" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)">
        <el-calendar class="elCalendar" v-model="search.selectVal" ref="calendar">
          <template #header="{ date }">
            <span style="margin-left: 20px">{{ date }}</span>
            <el-button-group>
              <el-button size="small" @click="selectDate('prev-year', date)" title="上一年">
                <el-icon>
                  <DArrowLeft />
                </el-icon>
              </el-button>
              <el-button size="small" @click="selectDate('prev-month', date)" title="上个月">
                <el-icon>
                  <ArrowLeft />
                </el-icon>
              </el-button>

              <el-button size="small" @click="selectDate('today', date)">最新降雨</el-button>
              <el-button size="small" @click="selectDate('next-month', date)" title="下个月">
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </el-button>
              <el-button size="small" @click="selectDate('next-year', date)" title="下一年">
                <el-icon>
                  <DArrowRight />
                </el-icon>
              </el-button>
            </el-button-group>
          </template>
          <template #date-cell="{ data }">
            <div class="cal_box" style="height: 100%" @click="selectDay(data.day)">
              <div
                class="calendar-day"
                :class="[
                  scheduleData.includes(moment(data.day).format('YYYY-MM-DD')) ? 'cursorClass' : '',
                  data.isSelected && scheduleData.includes(moment(data.day).format('YYYY-MM-DD')) ? 'is-selected_cal' : '',
                ]"
              >
                {{ moment(data.day).format('DD') }}
              </div>
              <div
                class="data"
                v-for="(item, index) in calenderData"
                :key="item"
                v-show="item.rainTime == 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: #ffffff"
                    :class="[
                      item.rainLevel == '' ? 'MIDDLE0' : '',
                      item.rainLevel == '1' ? 'MIDDLE1' : '',
                      item.rainLevel == '2' ? 'MIDDLE2' : '',
                      item.rainLevel == '3' ? 'MIDDLE3' : '',
                      item.rainLevel == '4' ? 'MIDDLE4' : '',
                      item.rainLevel == '5' ? 'MIDDLE5' : '',
                      item.rainLevel == '6' ? 'MIDDLE6' : '',
                    ]"
                  >
                    {{ Number(item.rainCumulative) > 1 ? item.rainCumulative + 'mm' : '' }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>

    <!-- 分析报告弹窗 -->
    <el-dialog v-model="dialogShow" title="降雨分析报告" width="70%" append-to-body>
      <RainReportFX v-if="dialogShow" ref="rainReportRef"></RainReportFX>
    </el-dialog>
  </div>
</template>

<script setup>
import { rainTimeDay, queryLastRainDate } from '@/api/zongHeDD.js';
import DEchart from '@/views/sponeScreen/Echarts/DEchart.vue';
import { getStationList } from '@/api/dataAnalysis/syntherticData';
import RainReportFX from './rainReportFX.vue'; //降雨分析报告
const emits = defineEmits(['changeTime', 'update:isShowLengend']);
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const activeTab = ref(0);
const TuLiList12h = [
  {
    icon: '',
    layerName: '小雨(0~5mm)',
    iconName: 'MIDDLE1',
  },
  {
    icon: '',
    layerName: '中雨(5~15mm)',
    iconName: 'MIDDLE2',
  },
  {
    icon: '',
    layerName: '大雨(15~30mm)',
    iconName: 'MIDDLE3',
  },
  {
    icon: '',
    layerName: '暴雨(30~70mm)',
    iconName: 'MIDDLE4',
  },
  {
    icon: '',
    layerName: '大暴雨(70~140mm)',
    iconName: 'MIDDLE5',
  },
  {
    icon: '',
    layerName: '特大暴雨(>140mm)',
    iconName: 'MIDDLE5',
  },
];
const TuLiList24h = [
  {
    icon: '',
    layerName: '小雨(<10mm)',
    iconName: 'MIDDLE1',
  },
  {
    icon: '',
    layerName: '中雨(10~25mm)',
    iconName: 'MIDDLE2',
  },
  {
    icon: '',
    layerName: '大雨(25~50mm)',
    iconName: 'MIDDLE3',
  },
  {
    icon: '',
    layerName: '暴雨(50~100mm)',
    iconName: 'MIDDLE4',
  },
  {
    icon: '',
    layerName: '大暴雨(100~250mm)',
    iconName: 'MIDDLE5',
  },
  {
    icon: '',
    layerName: '特大暴雨(>250mm)',
    iconName: 'MIDDLE5',
  },
];
let calenderData = ref([]);
const scheduleData = ref([]);
const calendar = ref(null);
const loading = ref(true);
const rainReportRef = ref(null);
const dialogShow = ref(false);
let count = 0;
const search = ref({
  rangeTime: proxy.moment().format('YYYY-MM'),
  selectVal: '',
});

const tuLiList = computed(() => {
  return activeTab.value == 0 ? TuLiList12h : TuLiList24h;
});
//日历头部点击
const selectDate = (val, date) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
  let newDate = date.replace(/\s+/g, '').split('年');
  let month = newDate[1].split('月');
  let date2 = `${newDate[0]}-${month[0]}`;
  let startDate = null;
  switch (val) {
    case 'prev-year':
      startDate = proxy.moment(date2).subtract(1, 'years').format('YYYY-MM');
      // 当 expression 等于 value1 时执行的代码块
      break;
    case 'next-year':
      startDate = proxy.moment(date2).add(1, 'years').format('YYYY-MM');
      break;
    case 'prev-month':
      startDate = proxy.moment(date2).subtract(1, 'months').format('YYYY-MM');
      break;
    case 'next-month':
      startDate = proxy.moment(date2).add(1, 'months').format('YYYY-MM');
      break;
    // ... 可以有更多的 case 子句
    default:
      startDate = proxy.moment(new Date()).format('YYYY-MM');
      break;
  }
  search.value.rangeTime = startDate;
  console.log(search.value.rangeTime, '点击');
  if (val == 'today') {
    count = 0;
    console.log('today');
    getQueryLastRainDate();
  } else {
    getRainTimeDayData();
  }
};
//获取降雨日历数据
const getRainTimeDayData = () => {
  count++;
  let data = {
    belongTimeStartTime: proxy.moment(search.value.rangeTime).startOf('month').format('YYYY-MM-DD'),
    belongTimeEndTime: proxy.moment(search.value.rangeTime).endOf('month').format('YYYY-MM-DD'),
  };
  loading.value = true;
  rainTimeDay(data).then(res => {
    loading.value = false;
    calenderData.value = res.data;
    console.log(calenderData.value, 'calenderData.value222222');
    let newData = res.data && res.data.filter(item => item.rainCumulative != 0 && Number(item.rainCumulative) > 1);
    scheduleData.value = newData.map(item => item.rainTime);
    // 今日
    if (newData.length == 0) {
      search.value.selectVal = calenderData.value[0].rainTime;
      localStorage.setItem('searchTime', search.value.selectVal);
    } else {
      // 第一次默认不取列表数据
      if (count > 1) {
        search.value.selectVal = newData[0].rainTime;
        bus.emit('changeRainDate', search.value.selectVal);
        localStorage.setItem('setRainDateKF', search.value.selectVal);
      }
    }
  });
};
// 降雨日历点击事件
const selectDay = val => {
  console.log(val, '111');
  bus.emit('changeRainDate', val);
  localStorage.setItem('setRainDateKF', val);
};
//获取最近一次的降雨日期
const getQueryLastRainDate = () => {
  queryLastRainDate().then(res => {
    search.value.selectVal = res.data.rainTime;
    search.value.rangeTime = proxy.moment(res.data.rainTime).format('YYYY-MM');
    console.log(search.value.selectVal, ' 222222 search.value.rangeTime');
    getRainTimeDayData();
    bus.emit('changeRainDate', search.value.selectVal);
    localStorage.setItem('setRainDateKF', search.value.selectVal);
  });
};
function handleReport() {
  dialogShow.value = true;
  setTimeout(() => {
    console.log(search.value.selectVal, 'rangeTime.value');
    rainReportRef.value.getRainTimeDayData(search.value.selectVal);
    rainReportRef.value.getRainList();
  });
}
onMounted(() => {
  getQueryLastRainDate();
});
</script>

<style lang="scss" scoped>
.rainCaldarPage {
  width: 100%;
  height: 340px;
  .partContHM {
    height: calc(100% - 40px);
    background-size: 100% 100%;
    .content {
      width: 100%;
      height: 100%;
      // background: yellowgreen;
      overflow: hidden;
      :deep(.elCalendar) {
        border: none !important;
        background: linear-gradient(90deg, rgba(0, 44, 75, 0.8) 0%, rgba(0, 86, 146, 0.3) 100%);
        border-radius: 6px;
        border: 1px solid;
        border-image: linear-gradient(0deg, #47afff, #47afff) 10 10;
        height: 100%;

        .calendar-day {
          font-weight: 500;
          font-size: 14px;
          color: #ffffff !important;
        }

        .cursorClass {
          cursor: pointer !important;
          pointer-events: auto !important;
        }

        .data-body {
          position: relative;
          height: 100%;

          .datadiv {
            position: absolute;
            height: 14px;
            line-height: 14px;
            left: 50%;
            margin-left: -18px;
            bottom: -8px;
            font-size: 11px;
          }

          .MIDDLE1 {
            background-color: #70ccf4;
          }

          .MIDDLE2 {
            background-color: #009de2;
          }

          .MIDDLE3 {
            background-color: #e1c401;
          }

          .MIDDLE4 {
            background-color: #ff9f15;
          }

          .MIDDLE5 {
            background-color: #e20f36;
          }

          .MIDDLE6 {
            background-color: #760404;
          }
        }

        .prev,
        .current,
        .next {
          cursor: not-allowed;
          pointer-events: none;
        }

        .prev > .el-calendar-day {
          display: none !important;
        }

        .next > .el-calendar-day {
          display: none !important;
        }

        .is-today {
          .date_box {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            width: 30px !important;
            height: 30px !important;
            background: #047af3 !important;
            border-radius: 50%;
            overflow: hidden;
            color: #ffffff !important;
          }
        }

        .cal_box {
          position: relative;

          .is-selected_cal {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            width: 25px !important;
            height: 25px !important;
            line-height: 25px;
            background: #1effff;
            border-radius: 50%;
            overflow: hidden;
            color: #042e77 !important;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -10px;
            margin-left: -10px;
          }

          .datadiv {
            // bottom: -50px !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;
        }

        //取消日历选中背景颜色
        .el-calendar-table td.is-selected {
          background-color: inherit;

          .datadiv {
            bottom: -45px;
          }
        }

        .el-calendar-table thead th {
          color: #c6c6c6;
          font-size: 16px;
        }

        .el-calendar__header {
          // display: none;
          background: linear-gradient(90deg, rgba(0, 44, 75, 0.8) 0%, rgba(0, 86, 146, 0.3) 100%);
          padding: 3px 0;
          border-bottom: 1px solid #074687;

          span {
            color: #3afff8;
            font-size: 15px;
            font-weight: 600;
          }

          .el-button {
            background: transparent;
            border: none;

            .el-icon {
              color: #5899ff;
              font-size: 23px;
              font-weight: 700;
            }
          }
        }

        .el-calendar-day {
          height: 38px !important;
          line-height: 38px !important;
          border: none;
          text-align: center;
          padding: 0px !important;
          // background: #003b6d;
          font-size: 12px;

          .date_box {
            width: 100%;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 15px;
            color: #8dbeff;
          }
        }

        .el-calendar__body {
          padding: 0px 0 10px 0 !important;
          // background: #003b6d;
        }

        /* 日历单元格鼠标经过背景色 */
        .el-calendar-table .el-calendar-day:hover {
          background: none !important;

          .date_box {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            width: 30px !important;
            height: 30px !important;
            background: #1effff;
            border-radius: 50%;
            overflow: hidden;
            color: #042e77;
          }
        }

        .el-calendar-table:not(.is-range) td.next {
          .calendar-day {
            color: #a8abb2;
          }
        }
      }
    }
  }
}
.rain_des {
  font-family: Source Han Sans CN;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;

  .label_text {
    color: #37ceff;
    padding-left: 3px;
  }
}
.tuli_data_list {
  width: auto;
  // padding: 10px;
  // background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
  border-radius: 4px;
  border: 1px solid #42a4ef;
  transition: all 0.5s;
  .tab_label {
    font-family: Source Han Sans CN;
    color: #dfdada;
    line-height: 15px;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    &:hover {
      color: #1effff;

      &::after {
        content: '';
        position: absolute;
        height: 2px;
        left: 3px;
        right: 3px;
        bottom: 0;
        background: #1effff;
      }
    }
  }

  .active_tab_label {
    color: #1effff;

    &::after {
      content: '';
      position: absolute;
      height: 2px;
      left: 3px;
      right: 3px;
      bottom: 0;
      background: #1effff;
    }
  }

  .list {
    width: 100%;
    color: #dfdada;
    line-height: 25px;
    font-size: 14px;
    height: 30px;
    .img_icon {
      width: 35px;
    }

    .MIDDLE1 {
      width: 35px;
      height: 3px;
      background-color: rgba(7, 213, 118, 0.5);
    }

    .MIDDLE2 {
      width: 35px;
      height: 3px;
      background-color: rgba(38, 129, 240, 0.5);
    }

    .MIDDLE3 {
      width: 35px;
      height: 3px;
      background-color: rgba(247, 223, 56, 0.5);
    }

    .MIDDLE4 {
      width: 35px;
      height: 3px;
      background-color: rgba(230, 85, 41, 0.5);
    }

    .MIDDLE5 {
      width: 35px;
      height: 3px;
      background-color: rgba(255, 26, 26, 0.5);
    }

    .title {
      margin-left: 8px;
    }
  }
}
</style>