<template>
  <!-- 日期选择组件 -->
  <el-date-picker
    v-model="dateTime"
    :value-format="props.valueFormat"
    :type="props.dateType"
    range-separator="-"
    start-placeholder="开始周期"
    end-placeholder="结束周期"
    :shortcuts="shortcuts"
    @change="changeDate"
    :clearable="false"
  >
    <template #default="cell">
      <!-- <div class="cell">
        <span class="text">{{ cell.text }}</span>
        <span v-if="isHoliday(cell)" class="holiday">大雨</span>
      </div> -->
      <div class="el-date-table-cell">
        <span class="el-date-table-cell__text">{{ cell.text }}</span>
        <div v-if="holidays.includes(moment(cell.date).format('YYYY-MM-DD'))" class="holiday">
          <span class="red-point"></span>
          <img
            v-if="rainDays[moment(cell.date).format('YYYY-MM-DD')] == '1_SMALL'"
            :src="getTongJiImageUrl(`xiaoyu_icon`)"
            class="h_icons"
          />
          <img
            v-else-if="rainDays[moment(cell.date).format('YYYY-MM-DD')] == '2_MIDDLE'"
            :src="getTongJiImageUrl(`zhongyu_icon`)"
            class="h_icons"
          />
          <img v-else :src="getTongJiImageUrl(`dayu_icon`)" class="h_icons" />
        </div>
      </div>
    </template>
  </el-date-picker>
</template>

<script setup>
import { listRainDate } from '@/api/dataAnalysis/dataCapability';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update']);
//组件参数
const props = defineProps({
  //日期类型
  dateType: {
    type: String,
    default: 'daterange',
  },
  //时间组
  dateTime: {
    type: [Array, String],
  },
  //时间格式化类型
  valueFormat: { type: String, default: 'YYYY-MM-DD HH:mm:ss' },
});

const holidays = ref([]); //降雨天气日期
const rainDays = ref({}); //降雨天气对象
const dateTime = ref([]); //时间范围
// const dateType = ref('daterange');

const shortcuts = computed(() => {
  return [
    {
      text: '昨日',
      value: () => {
        return [
          proxy.moment().subtract(1, 'day').startOf('day').format(props.valueFormat),
          proxy.moment().subtract(1, 'day').endOf('day').format(props.valueFormat),
        ];
      },
    },
    {
      text: '今日',
      value: () => {
        return [
          proxy.moment(new Date()).startOf('day').format(props.valueFormat),
          proxy.moment(new Date()).endOf('day').format(props.valueFormat),
        ];
      },
    },
    {
      text: '最近一周',
      value: () => {
        return [proxy.moment().subtract(7, 'day').format(props.valueFormat), proxy.moment(new Date()).format(props.valueFormat)];
      },
    },
    {
      text: '最近一月',
      value: () => {
        return [
          proxy.moment().subtract(1, 'months').format(props.valueFormat),
          proxy.moment(new Date()).format(props.valueFormat),
        ];
      },
    },
    {
      text: '最近半年',
      value: () => {
        return [
          proxy.moment().subtract(6, 'months').format(props.valueFormat),
          proxy.moment(new Date()).format(props.valueFormat),
        ];
      },
    },
    {
      text: '最近一年',
      value: () => {
        return [
          proxy.moment().subtract(1, 'years').format(props.valueFormat),
          proxy.moment(new Date()).format(props.valueFormat),
        ];
      },
    },
    {
      text: '今年',
      value: () => {
        return [
          proxy.moment(proxy.moment().year(proxy.moment().year()).startOf('year').valueOf()).format(props.valueFormat),
          proxy.moment(proxy.moment().year(proxy.moment().year()).endOf('year').valueOf()).format(props.valueFormat),
        ];
      },
    },
    {
      text: '去年',
      value: () => {
        return [
          proxy
            .moment(
              proxy
                .moment()
                .year(proxy.moment().year() - 1)
                .startOf('year')
                .valueOf()
            )
            .format(props.valueFormat),
          proxy
            .moment(
              proxy
                .moment()
                .year(proxy.moment().year() - 1)
                .endOf('year')
                .valueOf()
            )
            .format(props.valueFormat),
        ];
      },
    },
  ];
});

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

//获取降雨时段
function getListRainDate() {
  var startTime = props.dateType == 'date' ? dateTime.value : dateTime.value[0];

  let data = {
    startDatetime: proxy.moment(startTime).subtract(1, 'months').startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    endDatetime: proxy.moment(startTime).add(1, 'months').startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  };
  listRainDate(data).then(res => {
    let days = res.data && res.data.filter(item => item.rainLevel != '0_NAN');
    holidays.value = days.map(item => {
      return proxy.moment(item.date).format('YYYY-MM-DD');
    });
    days.forEach(item => {
      rainDays.value[proxy.moment(item.date).format('YYYY-MM-DD')] = item.rainLevel;
    });
  });
}

function changeDate() {
  emit('update', dateTime.value);
}
</script>
<style lang="scss" scoped>
.el-date-table-cell {
  height: 40px !important;
  padding: 3px 0;
  box-sizing: border-box;
}

.el-date-table-cell .holiday {
  position: relative;
}
.red-point {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: -23px;
  left: 50%;
  transform: translateX(-50%);
}
.h_icons {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
}
</style>