<template>
  <!-- 日历组件 -->
  <el-date-picker
    ref="elPicker"
    :size="size"
    v-model="dateTimeValue"
    :type="dateType"
    :range-separator="rangeSeparator"
    :placeholder="placeholder"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    @change="changeDate"
    @focus="isShow($event)"
    @visible-change="closeAdd"
    :clearable="delClearable"
    :popper-class="`${popperClass} ${pickerId}`"
    :default-time="defaultTime"
    :format="format"
    :value-format="valueFormat"
  >
    <template #default="cell">
      <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
        <div class="day">{{ cell.text }}</div>
        <div class="holiday">
          <div class="onename">{{ filtrationTimeShow(cell.date) }}</div>
          <div class="twoname">{{ filtrationTimeShowtwo(cell.date) }}</div>
        </div>
      </div>
    </template>
  </el-date-picker>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
import { weatherDayList } from '@/components/DateSelect/DateSelectApi';
import { guid } from '@/utils/ruoyi';
const pickerId = ref('pikerid' + guid());
const props = defineProps({
  dateType: {
    type: String,
    default: 'datetimerange',
  },
  size: {
    type: String,
    default: 'default',
  },
  //时间组
  dateTime: {
    type: [Array, String],
  },
  //时间格式化类型
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss',
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss',
  },
  placeholder: {
    type: String,
    default: '请选择时间',
  },
  startPlaceholder: {
    type: String,
    default: '开始时间',
  },
  endPlaceholder: {
    type: String,
    default: '结束时间',
  },
  rangeSeparator: {
    type: String,
    default: '-',
  },
  //   样式class
  popperClass: {
    type: String,
    default: 'timePickerPopper',
  },
  //   默认开始结束时分秒
  defaultTime: {
    // type: [Array, String],
    // default: [new Date(2024, 1, 1, 12, 0, 0), new Date(2024, 2, 1, 8, 0, 0)],
  },
  //   是否显示清除
  delClearable: {
    type: Boolean,
    default: true,
  },
});
const badgeDate = ref([]);
// const badgeDate = ref([
//   {
//     rainLevel: '中雨',
//     rain: '11.2',
//     time: '2023-07-08 00:00:00',
//   },
//   {
//     rainLevel: '晴天',
//     rain: '0',
//     time: '2023-07-09 00:00:00',
//   },
//   {
//     rainLevel: '暴雨',
//     rain: '35.55',
//     time: '2023-07-10 00:00:00',
//   },
//   {
//     rainLevel: '多云',
//     rain: '0',
//     time: '2023-07-22 00:00:00',
//   },
// ]);

const dateTimeValue = ref(null);
const emit = defineEmits();

watch(
  () => props.dateTime,
  val => {
    dateTimeValue.value = val;
  },
  { immediate: true }
);

const datesYear = ref(new Date().getFullYear());

const changeDate = value => {
  // console.log(value);
  emit('update:dateTime', dateTimeValue.value);
};

const filtrationTimeShow = Date => {
  let array = badgeDate.value;
  let getdate = proxy.moment(Date).format('YYYY-MM-DD');
  for (let index = 0; index < array.length; index++) {
    if (array[index].time.includes(getdate)) {
      if (array[index].rain == 0) {
        return '';
      } else {
        return array[index].rain;
      }
    }
  }
};

const filtrationTimeShowtwo = Date => {
  let array = badgeDate.value;
  let getdate = proxy.moment(Date).format('YYYY-MM-DD');
  for (let index = 0; index < array.length; index++) {
    if (array[index].time.includes(getdate)) {
      if (array[index].rainLevel.includes('无雨')) {
        return '';
      } else {
        return array[index].rainLevel;
      }
    }
  }
};

// 获取焦点 展示日期
function isShow(e) {
  nextTick(() => {});
  monthChange();
}

function closeAdd(value) {
  // console.log(value);

  if (value) {
    document
      .querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
      .forEach(item => item.addEventListener('click', monthChange));

    document
      .querySelectorAll(
        "[class='el-picker-panel__icon-btn d-arrow-left'],[class='el-picker-panel__icon-btn arrow-left'],[class='el-picker-panel__icon-btn arrow-right'],[class='el-picker-panel__icon-btn d-arrow-right']"
      )
      .forEach(item => item.addEventListener('click', monthChange));
  } else {
    document
      .querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
      .forEach(item => item.removeEventListener('click', monthChange));

    document
      .querySelectorAll(
        "[class='el-picker-panel__icon-btn d-arrow-left'],[class='el-picker-panel__icon-btn arrow-left'],[class='el-picker-panel__icon-btn arrow-right'],[class='el-picker-panel__icon-btn d-arrow-right']"
      )
      .forEach(item => item.removeEventListener('click', monthChange));
  }
}

// 获取降雨日历数据
function GetweatherDayList() {
  let data = {
    start: datesYear.value + '-01-01',
    end: datesYear.value + '-12-31',
  };

  weatherDayList(data).then(res => {
    // console.log('newget', res);
    badgeDate.value = res.data;
  });
}

// 获取降雨日历数据
function GetweatherDayListrange(year, year2) {
  let data = {
    start: year + '-01-01',
    end: year2 + '-12-31',
  };

  weatherDayList(data).then(res => {
    // console.log('newget', res);
    badgeDate.value = res.data;
  });
}

// 切换年月后重新调接口
function monthChange() {
  let newclass = '.' + pickerId.value;
  // 获取动态的第一层
  var oParent = document.querySelector(newclass);
  if (oParent) {
    // console.log('props.dateType', props.dateType);
    if (props.dateType.includes('range')) {
      var two = oParent.querySelectorAll('.el-date-range-picker__header')[0];
      var twoyear = oParent.querySelectorAll('.el-date-range-picker__header')[1];
      if (two) {
        var year = two.querySelectorAll(':scope > div')[0].innerHTML.slice(0, 4);
        var year2 = twoyear.querySelectorAll(':scope > div')[0].innerHTML.slice(0, 4);
        // console.log('yearrange', year, year2);
        if (year != datesYear.value) {
          datesYear.value = year;
          if (year != year2) {
            GetweatherDayListrange(year, year2);
          } else {
            GetweatherDayList();
          }
        }
      }
    } else {
      // // 获取年月 单时间
      let year = oParent.querySelectorAll('.el-date-picker__header-label')[0].innerHTML.slice(0, 4);
      // console.log('yearsssssssssssss', year);
      if (year != datesYear.value) {
        datesYear.value = year;
        GetweatherDayList();
      }
    }
  }
}

onMounted(() => {
  GetweatherDayList();
});
</script>
<style lang="scss">
.timePickerPopper {
  .available {
    // line-height: 30;
    // padding: 5px;
  }
  .holiday {
    position: absolute;
    // height: 20px;
    line-height: 12px;
    color: #409eff;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 999;

    .onename {
      font-size: 12px !important;
    }

    .twoname {
      font-size: 10px !important;
    }
  }

  .el-date-table td .el-date-table-cell {
    height: 0.26rem !important;
    margin: 0 !important;
  }

  .el-date-table td.start-date .el-date-table-cell {
    background: rgba(203, 225, 228, 1);
  }
  .el-date-table td.end-date .el-date-table-cell {
    background: rgba(203, 225, 228, 1);
  }

  .current {
    color: #409eff !important;
  }
}
</style>