<template>
  <div class="reviewTopTime flex flex-justcontent-spacebetween">
    <div class="time">
      当前回顾：从<span>{{ huiguActiveTime }} 8:00</span>到<span
        >{{ moment(huiguActiveTime).add(1, 'days').format('YYYY-MM-DD') }} 8:00</span
      >
    </div>
    <div class="select">
      更多回顾
      <el-date-picker
        class="selectPick"
        v-model="huiguActiveTime"
        value-format="YYYY-MM-DD"
        type="date"
        :disabled-date="hgDisabledDate"
        @panel-change="yueChange"
        @change="dayChange"
        popper-class="dayListPop"
      >
        <template #default="cell">
          <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
            <div class="day">{{ cell.text }}</div>
            <div v-if="isHoliday(cell)" class="num">{{ isHoliVal(cell) }}mm</div>
          </div>
        </template>
      </el-date-picker>
    </div>
  </div>
</template>

<script setup>
import * as hsApi from '@/api/hsApi.js';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['selectTime']);

// let huiguActiveTime=ref(proxy.moment().add(-1, "days").format('YYYY-MM-DD'))

let huiguActiveTime = ref('');
let huiguListTime = ref([]);
let huiguActiveMoon = ref('');
function getRainTime() {
  hsApi.rainCalendarLately().then(res => {
    huiguActiveTime.value = res;
    emits('selectTime', huiguActiveTime.value);
    huiguActiveMoon.value = proxy.moment(res).format('YYYY-MM');
    if (huiguActiveTime.value != '') {
      getRainData();
    }
  });
}
function getRainData() {
  let parms = { queryTime: huiguActiveMoon.value };
  hsApi.rainCalendar(parms).then(res => {
    let array = [];
    res.forEach((i, d) => {
      if (i.weather != '无雨') {
        array.push(i);
      }
    });
    huiguListTime.value = array;
  });
}
// 日历过滤
const hgDisabledDate = time => {
  return time.getTime() > Date.now() - 8.64e7;
};
const isHoliday = ({ dayjs }) => {
  let array = [];
  huiguListTime.value.forEach(i => {
    array.push(proxy.moment(i.date).format('YYYY-MM-DD'));
  });
  return array.includes(dayjs.format('YYYY-MM-DD'));
};
const isHoliVal = ({ dayjs }) => {
  let val = huiguListTime.value.find(i => {
    return (
      proxy.moment(proxy.moment(i.date).format('YYYY-MM-DD')).valueOf() ==
      Number(proxy.moment(dayjs.format('YYYY-MM-DD')).valueOf())
    );
  });
  return val.value;
};
// 日历切换
const yueChange = time => {
  huiguActiveMoon.value = proxy.moment(time).format('YYYY-MM');
  getRainData();
};
const dayChange = time => {
  emits('selectTime', huiguActiveTime.value);
};

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

<style lang="scss" scoped>
.reviewTopTime {
  width: 654px;
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);

  .time {
    width: 550px;
    line-height: 38px;
    // background: url(@/assets/images/oneMap/hgsj.png) no-repeat;
    // background-size: 100% 100%;
    // background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
    // border: 1px solid #47eef3;
    background: url('@/assets/images/fhpl/timebj.png') no-repeat;
    background-size: 100% 100%;
    // box-shadow: inset 0 0 5px 5px #47eef38a;
    font-weight: 500;
    font-size: 16px;
    color: #f2f6ff;
    text-align: center;
    span {
      font-weight: 500;
      font-size: 16px;
      color: #39f7ff;
      margin: 0 20px;
    }
  }
  .select {
    width: 90px;
    height: 30px;
    line-height: 30px;

    // background: url(@/assets/images/oneMap/hgan.png) no-repeat;
    // background-size: 100% 100%;
    border-radius: 18px;
    background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
    border: 1px solid #47eef3;
    // box-shadow: inset 0 0 5px 5px #47eef38a;
    font-weight: 500;
    font-size: 16px;
    color: #f2f6ff;
    text-align: center;
    cursor: pointer;
    position: relative;
    top: 2px;
    :deep(.selectPick) {
      position: absolute;
      left: 0;
      top: 0;
      width: 134px;
      height: 30px;
      opacity: 0;
    }
  }
}
</style>
<style lang="scss">
.dayListPop {
  // background: rgba(11, 52, 116, 0.8) !important;
  // border:1px solid rgba(11, 52, 116,1) !important;

  background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%) !important;
  border: 1px solid #47eef3 !important;
  border-radius: 10px !important;
  .el-date-picker {
    width: 400px;
  }
  .el-picker-panel__content {
    width: 370px;
  }
  .el-date-table td.disabled .el-date-table-cell {
    background: rgba(4, 69, 142, 1);
  }
  .el-date-table td .el-date-table-cell {
    background: rgba(37, 123, 234, 1);
    height: 40px;
    color: #fff;
    .day {
      line-height: 20px;
    }
    .num {
      line-height: 1;
    }
    &.current {
      background: rgba(59, 219, 237, 1);
    }
  }
  .el-date-table td.today {
    .day {
      color: rgba(59, 219, 237, 1);
      font-weight: bold;
    }
  }
  .el-picker-panel {
    background: none;
  }
  .el-popper__arrow::before {
    display: none;
    background: rgba(11, 52, 116, 0.8) !important;
  }
  .el-date-picker__header {
    span {
      color: #00ffff;
    }
  }
  .el-picker-panel__icon-btn {
    color: #fff;
  }
  .el-date-table th {
    color: #fff;
  }
  .el-date-table th {
    border-color: rgba(11, 52, 116, 1) !important;
  }
}
</style>