<template>
  <!-- 海绵监测分析--降雨日历统计 -->
  <div class="monitorCalenderHM">
    <div class="selectTitleHM">
      <div class="flex select_box">
        <!-- 日期类型选择 -->
        <div class="typeDate flex">
          <p :class="['partD', dateIndex == 'day' ? 'active' : '']" @click="changeDate('day')">日</p>
          <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
          <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
        </div>
        <!-- 日历 -->
        <el-date-picker
          format="YYYY-MM"
          value-format="YYYY-MM"
          type="month"
          v-model="datevalue"
          placeholder="选择日期"
          style="width: 140px; margin: 10px 10px"
          @change="timeChange"
          class="datePickerHM"
          popper-class="haiMianScreenPopper"
          size="small"
        />
        <!-- 雨量站选择 -->
        <el-select
          clearable
          filterable
          v-model="rainStation"
          placeholder="请选择雨量站"
          style="margin-top: 10px"
          size="small"
          class="picker"
        >
          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </div>
    </div>

    <!-- 日 -->
    <el-calendar class="elCalendar" v-model="datevalueNew" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)">
      <template #date-cell="{ data }">
        <div
          class="flex flex-v data-day"
          :class="[{ active: data.day === selectVal }]"
          @click="changepeople(data.day)"
          style="position: relative"
        >
          <div class="date_box" @click="DataClick(scheduleData[moment(data.day).format('YYYY-MM-DD')])">
            {{ moment(data.day).format('DD') }}
          </div>
          <div
            class="datadiv flex"
            :style="{
              background:
                rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '1'
                  ? '#009DE2'
                  : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '2'
                  ? '#6A01E1'
                  : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '3'
                  ? '#FF9F15'
                  : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '4'
                  ? '#E20F36'
                  : '',
            }"
          >
            {{
              rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '1'
                ? '小雨'
                : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '2'
                ? '中雨'
                : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '3'
                ? '大雨'
                : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '4'
                ? '暴雨'
                : ''
            }}
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script setup>
// import { rainTimeDay } from '@/api/zongHeDD.js';
const props = defineProps({
  defaultDate: {
    type: String,
    default: '',
  },
  hasClose: {
    type: Boolean,
    default: false,
  },
});
const dateIndex = ref('month');
const { proxy } = getCurrentInstance();
const curDate = props.defaultDate ? proxy.moment(props.defaultDate).format('YYYY-MM') : proxy.moment().format('YYYY-MM');
const curDateNew = props.defaultDate ? new Date(props.defaultDate) : new Date();
const datevalue = ref('2024-08'); //curDate
const datevalueNew = ref('2024-08-07'); //curDateNew
const emits = defineEmits(['change', 'close']);
import bus from '@/bus';
const selectVal = ref(props.defaultDate);
const scheduleData = ref({});
const loading = ref(false);
const rainStation = ref('1');
const rainList = ref([
  { value: '1', label: '雨量站1' },
  { value: '2', label: '雨量站2' },
]);

function timeChange(val) {
  console.log(val);
  datevalueNew.value = new Date(val);
  getRainTimeDayData();
}
function DataClick(params) {
  if (params > 0 && params <= 10) {
    console.log('小雨');
  } else if (params > 10 && params <= 25) {
    console.log('中雨');
  } else if (params > 25 && params <= 50) {
    console.log('大雨');
  } else if (params > 50) {
    console.log('暴雨');
  }
}

//获取降雨日历数据
const getRainTimeDayData = () => {
  let data = {
    fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
    toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
  };
  // loading.value = true;
  // rainTimeDay(data)
  //   .then(res => {
  //     res.data &&
  //       res.data.forEach(item => {
  //         scheduleData.value[item.rainTime] = item.rainCumulative;
  //       });
  //   })
  //   .finally(() => {
  //     loading.value = false;
  //   });
  let datas = [
    { rainTime: '2024-08-03', rainCumulative: 18 },
    { rainTime: '2024-08-07', rainCumulative: 46 },
  ];
  datas.forEach(item => {
    scheduleData.value[item.rainTime] = item.rainCumulative;
  });
};
// 降雨日历点击事件
const changepeople = val => {
  selectVal.value = val;
  emits('change', val);
};

function changeDate(val) {
  dateIndex.value = val;
  let valueFormat =
    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
  datevalue.value = proxy.moment().format(valueFormat);
}

// 根据降雨量计算对应等级
function rainLevel(val) {
  if (val > 0 && val <= 10) {
    return '1'; //小雨
  } else if (val > 10 && val <= 25) {
    return '2'; //中雨
  } else if (val > 25 && val <= 50) {
    return '3'; //大雨
  } else if (val > 50) {
    return '4'; //暴雨
  }
}

onMounted(() => {
  getRainTimeDayData();
  changepeople('2024-08-07'); //默认选中一天
});
</script>

<style lang="scss" scoped>
.monitorCalenderHM {
  .selectTitleHM {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background-size: 100% 100%;
    padding: 0 10px;

    .name {
      font-family: YouSheBiaoTiHei;
      font-weight: bold;
      font-size: 17px;
      line-height: normal;
      letter-spacing: 2px;
      color: #e0e5fa;
      padding-left: 10px;
    }

    .select_box {
      margin-bottom: 0;
    }
    .typeDate {
      color: #fff;
      .partD {
        width: 50px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        cursor: pointer;
        background: #00344f;
        border-radius: 2px;
        margin-right: 5px;
      }
      .active {
        background: #002d44;
        border-radius: 2px;
        border: 1px solid #1cf5fc;
      }
    }

    .closeBtn {
      margin-left: 10px;
      margin-top: 5px;
      cursor: pointer;
      .el-icon {
        color: rgb(0, 238, 255);
      }
    }
  }

  .calendar-day {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #fff;

    &.active {
      background-color: #21adda;
    }
  }

  .datadiv {
    font-size: 10px;
    height: 20px;
  }
}

:deep(.elCalendar) {
  border: none !important;
  background-color: #043864;

  .is-today {
    width: 30px !important;
    height: 30px !important;
    // background-color: #1EFFFF !important;
    border-radius: 15px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 14px;
  }

  .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;
  }

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

  .el-calendar__header {
    display: none;
  }

  .el-calendar-day {
    margin: 0 auto;
    width: 100%;
    height: 40px !important;
    line-height: 40px !important;
    border: none;
    text-align: center;
    padding: 0px !important;
    background: #003958;
    font-size: 12px;
    border-radius: 50%;
    .data-day {
      width: 46%;
      height: 80%;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      &.active {
        background-color: #1effff;
        color: #042e77;
        .datadiv {
          bottom: -10px;
        }
      }
    }
    .date_box {
      width: 100%;
      font-size: 15px;
      margin-top: -5px;
      color: #ebfeff !important;
    }

    .datadiv {
      width: 100%;
      position: absolute;
      bottom: -10px;
      font-size: 11px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      padding-left: 2px;
      color: #fff;
    }
  }

  .is-today {
    .data-day {
      background-color: #047af3;
      color: #fff;
    }
  }

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

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

  .el-calendar-table:not(.is-range) td.next {
    .calendar-day {
      color: #a8abb2 !important;
    }
  }
}
</style>