const request = require('../../utils/request');
Page({
  data: {
    carList: [],
    type: 1,
    selectedSort: '',
    selectedBrand: '',
    selectedPrice: '',
    filterParams: {},
    mainActiveIndex: 0,
    selectedSeriesId: null,
    selectedBrandLabel:"品牌",
    brandTree: [],
    sortOptions: [
      { text: '默认排序', value: '' },
      { text: '最新上架', value: 'created_at-desc' },
      { text: '价格降序', value: 'price-desc' },
      { text: '价格升序', value: 'price-asc' }
    ],
    priceOptions: [
      { text: '全部价格', value: '' },
      { text: '3万以下', value: '0-3' },
      { text: '3-5万', value: '3-5'},
      { text: '5-10万', value: '5-10' },
      { text: '10-15万', value: '10-15' },
      { text: '15-20万', value: '15-20' },
      { text: '20-30万', value: '20-30' },
      { text: '30-50万', value: '30-50' },
      { text: '50万以上', value: ' 50-10000' },
    ],
    extendFields: [], // 筛选配置
    
    // 分页相关
    page: 1,
    pageSize: 10,
    hasMore: true,
    loading: false,
    loadingMore: false,
    
    // 数据状态
    showNoData: false,
    firstLoad: true
  },
  onBrandClick(e) {
    const index = e.detail.index;
    const brand = this.data.brandTree[index];
    this.setData({
      mainActiveIndex: e.detail.index
    });
      // ✅ 如果该品牌没有子系列（children）
  if (!brand.children || brand.children.length === 0) {
    this.setData({
      selectedSeriesId: null, // 没有选中的 series
      selectedBrandLabel: brand.text
    });

    this.reloadList(); // 触发列表加载
    this.selectComponent('#dropdownItemBrand').toggle(false); // 关闭下拉菜单
  }
  },  
  // 下拉刷新事件
  onPullDownRefresh() {
    this.reloadList();
    wx.stopPullDownRefresh();
  },
  
  // 滑动到底部加载更多
  onReachBottom() {
    if (this.data.hasMore && !this.data.loadingMore) {
      this.loadMoreData();
    }
  },
  
  onSeriesSelect(e) {
    const selectedId = e.detail.id;
    const selectedText = e.detail.text;
  
    this.setData({
      selectedSeriesId: selectedId,
      selectedBrandLabel: selectedText // ✅ 更新 dropdown 显示的值
    });
  
    this.reloadList();
    this.selectComponent('#dropdownItemBrand').toggle(false); // 关闭
    // TODO: 发起请求，用 selectedId 作为筛选条件
  },
  onSortChange(e) {
    this.setData({ selectedSort: e.detail });
    this.reloadList();
  },
  onPriceChange(e) {
    this.setData({ selectedPrice: e.detail });
    this.reloadList();
  },
  onParamChange(e) {
    const value = e.detail.value;
    this.setData({ selectedParam: value });
    this.reloadList();
  },

  async reloadList() {
    // 重新加载列表，重置分页
    this.setData({
      page: 1,
      hasMore: true,
      loading: true,
      showNoData: false
    });
    
    const data = {
      sort: this.data.selectedSort,
      brand: this.data.selectedSeriesId,
      price: this.data.selectedPrice,
      attr: this.data.filterParams,
      type: this.data.type,
      page: 1,
      pageSize: this.data.pageSize
    };
    
    try {
      const raw = await request({
        url: '/admin/wechat/api/car',
        method: 'POST',
        data: data
      });
      
      const items = raw.items || [];
      const total = raw.total || 0;
      
      this.setData({
        carList: items,
        hasMore: items.length >= this.data.pageSize && items.length < total,
        loading: false,
        showNoData: items.length === 0 && !this.data.firstLoad,
        firstLoad: false
      });
    } catch (err) {
      console.error('加载列表失败', err);
      this.setData({
        loading: false,
        showNoData: this.data.carList.length === 0
      });
      
      wx.showToast({
        title: '加载失败',
        icon: 'none'
      });
    }
  },
  
  async loadMoreData() {
    if (this.data.loadingMore || !this.data.hasMore) return;
    
    const nextPage = this.data.page + 1;
    this.setData({
      loadingMore: true
    });
    
    const data = {
      sort: this.data.selectedSort,
      brand: this.data.selectedSeriesId,
      price: this.data.selectedPrice,
      attr: this.data.filterParams,
      type: this.data.type,
      page: nextPage,
      pageSize: this.data.pageSize
    };
    
    try {
      const raw = await request({
        url: '/admin/wechat/api/car',
        method: 'POST',
        data: data
      });
      
      const items = raw.items || [];
      const total = raw.total || 0;
      const currentTotal = this.data.carList.length + items.length;
      
      this.setData({
        carList: [...this.data.carList, ...items],
        page: nextPage,
        hasMore: items.length >= this.data.pageSize && currentTotal < total,
        loadingMore: false
      });
      
    } catch (err) {
      console.error('加载更多失败', err);
      this.setData({
        loadingMore: false
      });
      
      wx.showToast({
        title: '加载失败',
        icon: 'none'
      });
    }
  },
  
  onLoad(options){
    if (options.type) {
      this.setData({
        type: options.type
      });
      const new_car_prices = [
        { text: '全部价格', value: '' },
        { text: '5万以下', value: '0-5' },
        { text: '5-10万', value: '5-10' },
        { text: '10-15万', value: '10-15' },
        { text: '15-20万', value: '15-20' },
        { text: '20-30万', value: '20-30' },
        { text: '30-50万', value: '30-50' },
        { text: '50-100万', value: '50-100' },
        { text: '100万以上', value: '100-10000' },
      ];

      const old_car_prices =  [
        { text: '全部价格', value: '' },
        { text: '3万以下', value: '0-3' },
        { text: '3-5万', value: '3-5'},
        { text: '5-10万', value: '5-10' },
        { text: '10-15万', value: '10-15' },
        { text: '15-20万', value: '15-20' },
        { text: '20-30万', value: '20-30' },
        { text: '30-50万', value: '30-50' },
        { text: '50万以上', value: ' 50-100000' },
      ];

      const rent_car_prices =  [
        { text: '全部价格', value: '' },
        { text: '100元以下', value: '0-100' },
        { text: '100-200元', value: '100-200' },
        { text: '200-300元', value: '200-300' },
        { text: '300-500元', value: '300-500' },
        { text: '500-800元', value: '500-800' },
        { text: '800-1500元', value: '800-1500' },
        { text: '1500元以上', value: '1500-100000' },
      ];

      if(options.type == 1){
        this.setData({
          priceOptions: new_car_prices
        });
      }else if(options.type == 2){
        this.setData({
          priceOptions: old_car_prices
        });
      }else{
        this.setData({
          priceOptions: rent_car_prices
        });
      }

    }
    this.loadBrandData();
  },
  async loadBrandData() {
    try {
      const raw = await request({
        url: '/admin/wechat/api/select'
      });

      const brandTree = raw.brands.map(brand => ({
        text: brand.label,
        children: (brand.children || []).map(series => ({
          id: series.value,
          text: series.label
        }))
      }));

      const fields = raw.extend.map(f => {
        // 为 range 类型添加 start/end 临时字段
        if (f.type === 'range') {
          f._rangeStart = '';
          f._rangeEnd = '';
        } else if (f.type === 'checkbox') {
          f.value = []; // 默认空数组
        }
        return f;
      });
      this.setData({ extendFields:fields });
      this.setData({ brandTree });
      this.reloadList();
    } catch (err) {
      console.error('加载品牌失败', err);
    }
  },

  onTagToggle(e) {
    const name = e.currentTarget.dataset.name;
    const value = String(e.currentTarget.dataset.value);
  
    const fields = this.data.extendFields.map(field => {
      if (field.name === name) {
        let list = (field.value || []).map(String);
        const index = list.indexOf(value);
        if (index > -1) {
          list.splice(index, 1);
        } else {
          list.push(value);
        }
        field.value = list;
  
        // ✅ 同步 checked 状态
        field.options.forEach(opt => {
          opt._checked = list.includes(String(opt.value));
        });
      }
      return field;
    });
  
    this.setData({ extendFields: fields });
  },
  goToCarDetail(e) {
    const id = e.currentTarget.dataset.id;
    console.log(`/pages/info/info?id=${id}`)
    wx.navigateTo({
      url: `/pages/info/info?id=${id}`
    });
  },
  onSliderChange(e) {
    const name = e.currentTarget.dataset.name;
    const [start, end] = e.detail;
  
    const fields = this.data.extendFields.map(field => {
      if (field.name === name) {
        field._rangeStart = start;
        field._rangeEnd = end;
      }
      return field;
    });
  
    this.setData({ extendFields: fields });
  },

  onExtendConfirm() {
    const filterParams = {};

    this.data.extendFields.forEach(field => {
      if (field.type === 'checkbox') {
        if (field.value?.length > 0) {
          filterParams[field.name] = field.value;
        }
      } else if (field.type === 'range') {
        if (field._rangeStart || field._rangeEnd) {
          filterParams[field.name] = {
            start: field._rangeStart,
            end: field._rangeEnd
          };
        }
      }
    });
    this.selectComponent('#dropdownItemParam').toggle(false); // 关闭
    this.setData({filterParams:filterParams});
    this.reloadList();
  }
})