// pages/writeReading/components/meterList/index.js
import { getMeterReadingRouteMeterDetail } from "../../../../service/workBench"
import request from "../../../../utils/request"
import { alertInfo, alertSuccess, alertError } from "../../../../utils/index"
const { OK } = request;

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    list: Array,
    active: Number,
    meterInfo: Object,
    finishNumber: Number,
  },
  observers: {
    "active,list": function(newActive, newList) {
      if (newActive >= 0 && newList.length) {
        this.getMeterInfo(newList?.[newActive]?.meterId, newActive, true)
      }
      if (newActive === 0) {
        this.setData({ scrollLeft: 0 })
      } else if (newActive > 0) {
        this.setData({ scrollLeft: (220 * (newActive) - 20) + "rpx" })
      }
      const { scrollWidth } = this.data;
      if (scrollWidth) {
        this.setData({
          maxScrollLeft: newList?.length ? 220 * newList.length - (scrollWidth || 0) - 20 : 0,
        })
      }
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    animationData: {}, // 存储动画数据
    position: 0,
    scrollLeft: 0, // 当前滚动位置
    maxScrollLeft: 0, // 最大可滚动距离
  },
  lifetimes: {
    attached() {
      const that = this;
      const query = this.createSelectorQuery();
      query.select('.meterListScrollView').boundingClientRect()
      query.exec(function(res){
        const { list } = that.data;
        const length = that.data.list?.length || 0;
        that.setData({
          maxScrollLeft:length ? 220 * list.length - (res?.[0]?.width || 0) - 20 : 0,
          scrollWidth: res?.[0]?.width || 0
        })
      }) 
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleLeft() {
      // 将动画数据设置到 data 中，从而触发视图更新
      const currentPosition = this.data.position
      if (currentPosition === 0) {
        this.setData({
          position: currentPosition,
        });
        return;
      }
      this.setData({
        position: this.data.position + 300,
      });
  
    },
    handleRight() {
      // // 将动画数据设置到 data 中，从而触发视图更新
      // const currentPosition = this.data.position
      // if (currentPosition === 0) {
      //   this.setData({
      //     position: currentPosition,
      //   });
      //   return;
      // }
      
      this.setData({
        position: this.data.position - 300,
      });
  
    },
    handleSelect(e) {
      const { id, index } = e.currentTarget.dataset;
      this.getMeterInfo(id, index)
    },
    async getMeterInfo(id, index, noChange) {
      const { code, message, data } = await getMeterReadingRouteMeterDetail(id)
      if (code !== OK) {
        alertError(message)
        return;
      }
      if (noChange) {
        this.triggerEvent("changeMeter", { meter: data })
        return;
      }
      this.triggerEvent("changeMeterAndIndex", { index: index, meter: data })
    },
    // onScroll(e) {
    //   // 实时更新当前滚动位置，可用于更复杂的边界判断
    //   this.setData({
    //     scrollLeft: e.detail.scrollLeft
    //   });
    // },
  
    handleScrollLeft() {
      // 向左滚动：减少 scrollLeft，但不能小于0
      const newScrollLeft = Math.max(0, this.data.scrollLeft - 200);
      this.setData({
        scrollLeft: newScrollLeft
      });
    },
  
    handleScrollRight() {
      // 向右滚动：增加 scrollLeft，但不能超过 maxScrollLeft
      const newScrollLeft = Math.min(this.data.maxScrollLeft, this.data.scrollLeft + 200);
      this.setData({
        scrollLeft: newScrollLeft
      });
    }
  }
})