<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: 694px;
  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;
    // 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: 134px;
    line-height: 38px;
    // background: url(@/assets/images/oneMap/hgan.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;
    // box-shadow: inset 0 0 5px 5px #47eef38a;
    font-weight: 500;
    font-size: 16px;
    color: #F2F6FF;
    text-align: center;
    cursor: pointer;
    position: relative;
    :deep(.selectPick){
      position: absolute;
      left: 0;
      top: 0;
      width:134px;
      height: 38px;
      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>