<template>
  <el-date-picker
    value-format="YYYY-MM-DD"
    :clearable="false"
    type="date"
    placeholder="选择日期"
    v-model="contrastTime"
    style="width: 180px"
    popper-class="dialogMonthPopperClass"
    @visible-change="visibleChange"
    @panel-change="panelChange"
    @change="changeTime"
  >
    <template #default="cell">
      <div class="cell" :class="{ current: cell.isCurrent }">
        <span class="text">{{ cell.text }}</span>
        <div class="data" v-for="(item, index) in rainCalenderData" :key="item">
          <div class="data-body" v-if="item.rainTime == cell.dayjs.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-date-picker>
</template>
<script setup>
import { queryOnSIteRainCalendar, rainTimeDay } from '@/api/zongHeDD';
const emits = defineEmits(['change']);
const { proxy } = getCurrentInstance();
const props = defineProps({
  contrastTime: String, //对比时间
  stCode: String, //站点code
  rainIntensity: String, //雨强
  calenderRainTime: String, //面板降雨时间
  projectCode: String, //项目点
});
const rainCalenderData = ref([]); //降雨日历数据
const contrastTime = ref('');
watch(
  () => props.contrastTime,
  val => {
    console.log(props, 'props');
    contrastTime.value = props.contrastTime;
  }
);
//日历面板改变
const panelChange = val => {
  //日面板才调用
  getRainTimeDayData(val);
};
//获取降雨日历数据
const getRainTimeDayData = val => {
  console.log(contrastTime.value);
  val = val || props.calenderRainTime;
  let data = {
    startTime: proxy.moment(val).startOf('month').format('YYYY-MM-DD'),
    endTime: proxy.moment(val).endOf('month').format('YYYY-MM-DD'),
    rainIntensity: props.rainIntensity,
    stCode: props.stCode,
  };

  if (props.stCode) {
    queryOnSIteRainCalendar(data).then(res => {
      rainCalenderData.value = res.data;
    });
  } else {
    let data = {
      belongTimeStartTime: proxy.moment(val).startOf('month').format('YYYY-MM-DD'),
      belongTimeEndTime: proxy.moment(val).endOf('month').format('YYYY-MM-DD'),
    };
    rainTimeDay(data).then(res => {
      rainCalenderData.value = res.data;
    });
  }
};
//切换时间
const changeTime = () => {
  emits('change', contrastTime.value);
};

//刷新面板--到当前日期面板
const visibleChange = val => {
  if (val == true) {
    contrastTime.value = '';
    nextTick(() => {
      contrastTime.value = props.contrastTime;
    });
  }
};
onMounted(() => {
  contrastTime.value = props.contrastTime;
});
defineExpose({
  getRainTimeDayData,
});
</script>
<style lang="scss" scoped>
.dialogMonthPopperClass {
  .el-picker-panel__content {
    .prev-month,
    .next-month {
      .cell {
        display: none;
      }
    }

    .cell {
      &:hover {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50%;
        line-height: 20px;
        background-color: #409eff;
        margin: 0 auto;

        .datadiv {
          bottom: -12px;
        }
      }
    }

    .current {
      .cell {
        color: #fff;
        width: 20px !important;
        height: 20px !important;
        line-height: 20px;
        border-radius: 50%;
        background-color: #409eff;
        margin: 0 auto;

        .datadiv {
          bottom: -12px;
        }
      }
    }
  }

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

    .datadiv {
      position: absolute;
      height: 14px;
      line-height: 14px;
      left: 50%;
      margin-left: -18px;
      bottom: -7px;
      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;
    }
  }
}
</style>