<template>
  <div class="week-detail">
    <InfoHeader name="运行数据统计" eName="Operation data statistics"></InfoHeader>
    <InfoContent height="auto">
      <div class="detail-content">
        <div class="filter-bar">
          <div class="date-picker">
            <span class="label">选择时间</span>
            <VantCalendarPicker
              ref="VantCalendarPicker"
              width="3.2rem"
              :isHms="isHms"
              :isChangeOption="isChangeOption"
              @dateChange="dateChange"
            ></VantCalendarPicker>
          </div>
          
          <div class="quick-filters">
            <div 
              v-for="(item, index) in tabList" 
              :key="index"
              :class="['filter-btn', { active: currentIndex === index }]"
              @click="handleClickDate(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>

        <div class="chart-container">
          <LineMoreCharts
            chartId="LineMoreCharts"
            :chartLineXData="chartLineXData"
            :chartSettingData="chartSettingData"
            :chartLineYData="chartLineYData"
          ></LineMoreCharts>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import echartMixins from "@/utils/resizeMixins";
import { getBasicDate } from "@/api/elevator";
import LineMoreCharts from "@/components/lineMoreCharts";
import VantCalendarPicker from "@/components/VantCalendarPicker/index.vue";
import moment from "moment";

export default {
  name: 'WeekDetail',
  components: {
    InfoHeader,
    InfoContent,
    LineMoreCharts,
    VantCalendarPicker,
  },
  mixins: [echartMixins],
  data() {
    const now = moment();

    return {
      elevatorNum: "",
      currentIndex: 2,
      tabList: [
        { name: "最近一日", value: 1 },
        { name: "最近一周", value: 2 },
        { name: "最近一月", value: 2 },
      ],
      chartSettingData: {
        lineColor: "#06FCEB",
        areaColor: "#06FCEB",
        seriesName: "电梯数",
        height: "5rem",
        showYaxis: true,
      },
      chartLineXData: [],
      chartLineYData: [],
      startTime: now.clone().subtract(30, "days").format("YYYY-MM-DD 00:00:00"),
      endTime: now.format("YYYY-MM-DD 23:59:59"),
      isHms: true,
      isChangeOption: true,
      statisticsType: 2,
    };
  },
  created() {
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;
      this.$nextTick(() => {
        this.$refs.VantCalendarPicker.setDate([this.startTime, this.endTime]);
        this.getBasicDateApi();
      });
    }
  },
  methods: {
    async getBasicDateApi() {
      // 请求前先清空数据并强制更新图表
      this.chartLineXData = [];
      this.chartLineYData = [];

      const res = await getBasicDate({
        elevatorNum: this.elevatorNum,
        startTime: this.startTime,
        endTime: this.endTime,
        statisticsType: this.statisticsType,
      });
      
      if(res.data) {

        const timeLineList = Array.isArray(res.data.timeLineList) ? res.data.timeLineList : [];
        const upNumList = Array.isArray(res.data.upNumList) ? res.data.upNumList : [];
        const downNumList = Array.isArray(res.data.downNumList) ? res.data.downNumList : [];
        const openCloseNumList = Array.isArray(res.data.openCloseNumList) ? res.data.openCloseNumList : [];
        const stopStationNumList = Array.isArray(res.data.stopStationNumList) ? res.data.stopStationNumList : [];
        const runMileageList = Array.isArray(res.data.runMileageList) ? res.data.runMileageList : [];


        this.chartLineXData = timeLineList;
        this.chartLineYData = [
          {
            data: upNumList,
            name: "上行次数",
            type: "line",
            smooth: true,
            color: "#ECB2C3",
          },
          {
            data: downNumList,
            name: "下行次数",
            type: "line",
            smooth: true,
            color: "#2FB2C3",
          },
          {
            data: openCloseNumList,
            name: "开关门次数",
            type: "line",
            smooth: true,
            color: "#2FF3C3",
          },
          {
            data: stopStationNumList,
            name: "停梯次数",
            type: "line",
            smooth: true,
            color: "#A927C3",
          },
          {
            data: runMileageList,
            name: "运行距离",
            type: "line",
            smooth: true,
            color: "#F3E037",
          }
        ];
      }
    },
    handleClickDate(index) {
      this.currentIndex = index;
      const now = moment();
      
      if (index === 0) {
        // 最近一日
        this.statisticsType = 1;
        this.startTime = now.clone().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
        this.endTime = now.format("YYYY-MM-DD 23:59:59");
      } else if (index === 1) {
        // 最近一周
        this.statisticsType = 2;  // 修改为7，表示按周统计
        this.startTime = now.clone().subtract(7, "days").format("YYYY-MM-DD 00:00:00");
        this.endTime = now.format("YYYY-MM-DD 23:59:59");
      } else {
        // 最近一月
        this.statisticsType = 2;  // 修改为30，表示按月统计
        this.startTime = now.clone().subtract(30, "days").format("YYYY-MM-DD 00:00:00");
        this.endTime = now.format("YYYY-MM-DD 23:59:59");
      }

      // 确保时间选择器更新
      this.$nextTick(() => {
        this.$refs.VantCalendarPicker.setDate([this.startTime, this.endTime]);
        this.getBasicDateApi();
      });
    },

    dateChange(dates) {
      if (dates && dates.length === 2) {
        this.startTime = moment(dates[0]).format("YYYY-MM-DD 00:00:00");
        this.endTime = moment(dates[1]).format("YYYY-MM-DD 23:59:59");
        // 自定义时间范围时，使用日统计
        this.statisticsType = 1;
        this.currentIndex = -1;
        this.getBasicDateApi();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.week-detail {
  margin-bottom: 0.3rem;

  .detail-content {
    .filter-bar {
      padding: 0.3rem;
      background: rgba(16, 41, 95, 0.8);
      border-radius: 0.1rem;
      margin-bottom: 0.3rem;

      .date-picker {
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;

        .label {
          color: #fff;
          font-size: 0.26rem;
          margin-right: 0.2rem;
        }
      }

      .quick-filters {
        display: flex;
        gap: 0.2rem;

        .filter-btn {
          padding: 0.15rem 0.3rem;
          background: rgba(3, 54, 132, 0.3);
          border-radius: 0.1rem;
          color: #fff;
          font-size: 0.24rem;
          cursor: pointer;
          transition: all 0.3s;

          &.active {
            background: #02dff6;
            color: #000;
          }
        }
      }
    }

    .chart-container {
      background: rgba(16, 41, 95, 0.8);
      border-radius: 0.1rem;
      padding: 0.3rem;
      height: 6rem;
    }
  }
}
</style>