<template>
  <div class="date-filter-view" style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
    <!-- 视图模式选择（Vue2 v-model 绑定value） -->
    <el-select 
      v-model="innerViewMode" 
      placeholder="选择视图模式" 
      style="width: 120px;"
    >
      <el-option label="日视图" value="day"></el-option>
      <el-option label="月视图" value="month"></el-option>
      <el-option label="年视图" value="year"></el-option>
    </el-select>

    <!-- 日视图：日期范围选择 -->
    <div v-if="innerViewMode === 'day'">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="handleDateRangeChange"
        style="width: 350px;"
      ></el-date-picker>
    </div>

    <!-- 月视图：月份范围选择 -->
    <div v-if="innerViewMode === 'month'">
      <el-date-picker
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        format="yyyy-MM"
        value-format="yyyy-MM"
        @change="handleMonthRangeChange"
        style="width: 350px;"
      ></el-date-picker>
    </div>

    <!-- 年视图：年份选择 -->
    <div v-if="innerViewMode === 'year'">
      <el-date-picker
        v-model="selectedYear"
        type="year"
        placeholder="选择年份"
        format="yyyy"
        value-format="yyyy"
        @change="handleYearChange"
        style="width: 200px;"
      ></el-date-picker>
    </div>

    <el-button type="primary" @click="handleQuery">查询</el-button>
  </div>
</template>

<script>
// 导入日期工具函数（Vue2 导入语法不变）
import { getCurrentMonthFirstDayOrToday } from '../utils/monent'; // 请根据实际路径调整

export default {
  name: 'DateFilterView',
  // Vue2 Props 定义（v-model 对应 value，而非 modelValue）
  props: {
    // Vue2 v-model 绑定的视图模式（day/month/year）
    value: {
      type: String,
      default: 'day',
      validator: (val) => ['day', 'month', 'year'].includes(val)
    },
    // .sync 双向绑定的开始时间
    startTime: {
      type: String,
      default: ''
    },
    // .sync 双向绑定的结束时间
    endTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 内部视图模式（避免直接修改props）
      innerViewMode: this.value,
      dateRange: [],      // 日视图日期范围
      monthRange: [],     // 月视图月份范围
      selectedYear: ''    // 年视图选中年份
    };
  },
  watch: {
    // Vue2 监听外部 v-model 变化（监听 value）
    value(newVal) {
      this.innerViewMode = newVal;
      // 视图变化时初始化对应默认值
      this.initViewDefault(newVal);
    },
    // 监听内部视图模式变化，触发外部事件
    innerViewMode(newVal) {
      // Vue2 v-model 更新事件为 input（而非 update:modelValue）
      this.$emit('input', newVal);
      // 触发视图切换自定义事件
      this.$emit('view-change', newVal);
      // 清空其他视图的选择器
      this.clearOtherViewData(newVal);
    }
  },
  mounted() {
    // 初始化默认视图的日期值
    this.initViewDefault(this.innerViewMode);
    // 如果外部传入了startTime/endTime，同步到内部选择器
    this.syncExternalDateToInner();
  },
  methods: {
    // 初始化对应视图的默认日期
    initViewDefault(viewMode) {
      if (viewMode === 'day') {
        this.initDayViewDefault();
      } else if (viewMode === 'month') {
        this.initMonthViewDefault();
      } else if (viewMode === 'year') {
        this.initYearViewDefault();
      }
    },
    // 清空非当前视图的选择器数据
    clearOtherViewData(currentView) {
      if (currentView !== 'day') this.dateRange = [];
      if (currentView !== 'month') this.monthRange = [];
      if (currentView !== 'year') this.selectedYear = '';
    },
    // 同步外部传入的startTime/endTime到内部选择器
    syncExternalDateToInner() {
      if (!this.startTime || !this.endTime) return;
      
      if (this.innerViewMode === 'day') {
        this.dateRange = [this.startTime, this.endTime];
      } else if (this.innerViewMode === 'month') {
        // 从startTime/endTime提取月份（yyyy-MM）
        const startMonth = this.startTime.slice(0, 7);
        const endMonth = this.endTime.slice(0, 7);
        this.monthRange = [startMonth, endMonth];
      } else if (this.innerViewMode === 'year') {
        // 从startTime提取年份（yyyy）
        this.selectedYear = this.startTime.slice(0, 4);
      }
    },
    // 初始化日视图默认值：当前月第一天-今天
    initDayViewDefault() {
      if (this.startTime && this.endTime) {
        this.dateRange = [this.startTime, this.endTime];
        return;
      }
      // 调用工具函数获取默认值
      const [firstDay, today] = getCurrentMonthFirstDayOrToday();
      this.dateRange = [firstDay, today];
      // 更新外部startTime/endTime（Vue2 .sync 触发 update:xxx）
      this.updateStartAndEndTime(firstDay, today);
    },
    // 初始化月视图默认值：当前月-当前月
    initMonthViewDefault() {
      if (this.startTime && this.endTime) {
        const startMonth = this.startTime.slice(0, 7);
        const endMonth = this.endTime.slice(0, 7);
        this.monthRange = [startMonth, endMonth];
        return;
      }
      const now = new Date();
      const currentMonth = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`;
      this.monthRange = [currentMonth, currentMonth];
      // 转换为该月第一天和最后一天
      const startDate = `${currentMonth}-01`;
      const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      const endDate = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
      this.updateStartAndEndTime(startDate, endDate);
    },
    // 初始化年视图默认值：当前年
    initYearViewDefault() {
      if (this.startTime && this.endTime) {
        this.selectedYear = this.startTime.slice(0, 4);
        return;
      }
      const now = new Date();
      const currentYear = now.getFullYear().toString();
      this.selectedYear = currentYear;
      // 转换为该年1月1日和12月31日
      const startDate = `${currentYear}-01-01`;
      const endDate = `${currentYear}-12-31`;
      this.updateStartAndEndTime(startDate, endDate);
    },
    // 更新开始/结束时间（Vue2 .sync 触发 update:startTime/update:endTime）
    updateStartAndEndTime(start, end) {
      this.$emit('update:startTime', start);
      this.$emit('update:endTime', end);
      // 触发日期变更自定义事件
      this.$emit('date-change', { startTime: start, endTime: end });
    },
    // 日视图日期范围变化处理
    handleDateRangeChange(val) {
      if (val && val.length === 2) {
        this.updateStartAndEndTime(val[0], val[1]);
      } else {
        this.updateStartAndEndTime(undefined, undefined);
      }
    },
    // 月视图月份范围变化处理
    handleMonthRangeChange(val) {
      if (val && val.length === 2) {
        // 开始月份转该月第一天
        const startDate = `${val[0]}-01`;
        // 结束月份转该月最后一天
        const [endYear, endMonth] = val[1].split('-');
        const lastDay = new Date(endYear, endMonth, 0);
        const endDate = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
        this.updateStartAndEndTime(startDate, endDate);
      }
    },
    // 年视图年份变化处理
    handleYearChange(val) {
      if (val) {
        const startDate = `${val}-01-01`;
        const endDate = `${val}-12-31`;
        this.updateStartAndEndTime(startDate, endDate);
      }
    },
    // 查询按钮点击事件
    handleQuery() {
      this.$emit('query', {
        viewMode: this.innerViewMode,
        startTime: this.startTime,
        endTime: this.endTime
      });
    }
  }
};
</script>

<style scoped>
.date-filter-view {
  background: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}
</style>