<template>
  <div class="date-container">
    <div class="range-picker" @click="showCalendar">
      <span class="date-text">{{ formatDisplayDate }}</span>
      <van-icon name="calendar-o" class="calendar-icon" />
    </div>

    <!-- 日期选择弹出层 -->
    <van-popup v-model="showPicker" position="bottom" round>
      <van-calendar
        v-model="showPicker"
        type="range"
        :min-date="minDate"
        :max-date="maxDate"
        :show-confirm="true"
        color="#326aff"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import moment from "moment";
import { Calendar, Icon, Popup, DatetimePicker } from 'vant';

export default {
  components: {
    [Calendar.name]: Calendar,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  
  props: {
    isHms: {
      type: Boolean,
      default: false,
    },
    isChangeOption: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "4.2rem",
    },
  },

  data() {
    const now = new Date();
    return {
      showPicker: false,
      value2: [],
      currentDate: now,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 11, 31),
    };
  },

  watch: {
    showPicker(visible) {
      if (visible) {
        this.$store.commit("CHANGE_MIDDLE_MENU", false);
      } else {
        // 获取当前页面路径
        const currentPath = window.location.pathname;
        const notMiddleMenuPaths = ['/elevatorDetail']
        if (notMiddleMenuPaths.includes(currentPath)) {
          return
        }
        this.$store.commit("CHANGE_MIDDLE_MENU", true);
      }
    },
  },

  computed: {
    formatDisplayDate() {
      if (!this.value2 || this.value2.length !== 2) {
        return '请选择日期';
      }
      let [start, end] = this.value2;
      // 隐藏时分秒展示
      start = moment(start).format("YYYY-MM-DD");
      end = moment(end).format("YYYY-MM-DD");
      return `${start} - ${end}`;
    }
  },

  created() {
    // 保持原有的初始化逻辑
    if (this.isHms) {
      this.value2 = [
        moment()
          .subtract(this.isChangeOption ? 1 : 3, "months")
          .format("YYYY-MM-DD HH:mm:ss"),
        moment().format("YYYY-MM-DD HH:mm:ss"),
      ];
    } else {
      this.value2 = [
        moment().subtract(3, "months").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD"),
      ];
    }
  },

  methods: {
    showCalendar() {
      this.showPicker = true;
    },
    onConfirm(date) {
      if (Array.isArray(date)) {
        // 日期范围选择的情况
        const [start, end] = date;
        this.value2 = [
          moment(start).format(this.isHms ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"),
          moment(end).format(this.isHms ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD")
        ];
      } else {
        // 单个日期时间选择的情况
        this.value2 = [
          moment(date).format("YYYY-MM-DD HH:mm:ss"),
          moment(date).format("YYYY-MM-DD HH:mm:ss")
        ];
      }
      
      this.showPicker = false;
      this.handleDateChange(this.value2);
    },

    onCancel() {
      this.showPicker = false;
    },

    handleDateChange(e) {
      if (e && e.length > 0) {
        this.$emit("dateChange", e);
      }
    },

    setDate(date) {
      this.value2 = date;
    },
  },
};
</script>

<style lang="scss" scoped>
.date-container {
  z-index: 9999999;
  .range-picker {
    background-color: rgb(26, 44, 117);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    height: 0.6rem;
    line-height: 0.6rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .date-text {
      color: white;
      font-size: 0.24rem;
    }

    .calendar-icon {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.24rem;
    }
  }
}

// 自定义 vant 组件样式
:deep(.van-calendar) {
  --calendar-background-color: #04308d;
  --calendar-popup-background-color: #04308d;
  --calendar-selected-day-background-color: #326aff;
  --calendar-day-text-color: #fff;
  
  .van-calendar__header {
    background-color: #04308d;
  }

  .van-calendar__month-title,
  .van-calendar__weekday {
    color: #fff;
  }
}

:deep(.van-datetime-picker) {
  background-color: #04308d;
  
  .van-picker__title {
    color: #fff;
  }
  
  .van-picker-column__item {
    color: #fff;
    
    &--selected {
      color: #326aff;
    }
  }
}
</style>