<template>
  <!-- 监测监视--降雨日历统计 -->
  <div class="monitorCalender">
    <div class="selectTitleHM">
      <div class="name">降雨日历统计</div>
      <div class="flex select_box">
        <el-date-picker
          format="YYYY-MM"
          value-format="YYYY-MM"
          v-model="datevalue"
          type="month"
          placeholder="选择月"
          style="width: 150px"
          @change="timeChange"
          class="datePicker"
          popper-class="haiMianScreenPopper"
        />
        <div class="closeBtn" v-if="hasClose" @click="close">
          <el-icon :size="20">
            <Close />
          </el-icon>
        </div>
      </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">{{ moment(data.day).format('DD') }}</div>
          <div class="datadiv flex" style="color: #ffeb3b">
            {{
              scheduleData[moment(data.day).format('YYYY-MM-DD')] == 0.0
                ? ''
                : scheduleData[moment(data.day).format('YYYY-MM-DD')]
                ? scheduleData[moment(data.day).format('YYYY-MM-DD')] + 'mm'
                : ''
            }}
          </div>
        </div>
        <!-- <div class="data" v-for="(item, index) in scheduleData" :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: #ffeb3b">
                {{ item.rainCumulative == 0.0 ? '' : item.rainCumulative ? item.rainCumulative + 'mm' : '' }}
              </div>
            </div>
          </div> -->
      </template>
    </el-calendar>
  </div>
</template>

<script setup>
const props = defineProps({
  defaultDate: {
    type: String,
    default: '',
  },
  hasClose: {
    type: Boolean,
    default: false,
  },
});
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(curDate);
const datevalueNew = ref(curDateNew);
const emits = defineEmits(['change', 'close']);
const selectVal = ref(props.defaultDate);
const scheduleData = ref({});
const loading = ref(false);
function timeChange(val) {
  datevalueNew.value = new Date(val);
  getRainTimeDayData();
}

//获取降雨日历数据
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;
  //   });
};
// 降雨日历点击事件
const changepeople = val => {
  selectVal.value = val;
  emits('change', val);
};

const close = () => {
  emits('close');
};

onMounted(() => {
  getRainTimeDayData();
});
</script>

<style lang="scss" scoped>
.monitorCalender {
  .selectTitleHM {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background-image: url('@/assets/images/fhpl/dialog_header.png');
    background-repeat: no-repeat;
    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;
    }

    .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: #003b6d;
    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: -20px;
        }
      }
    }
    .date_box {
      width: 100%;
      font-size: 15px;
      margin-top: -5px;
      color: #a8abb2 !important;
    }

    .datadiv {
      width: 100%;
      position: absolute;
      bottom: -10px;
      font-size: 12px;
    }
  }

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

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

  /* 日历单元格鼠标经过背景色 */
  .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>