// 定义FAQ数据类型
interface FAQ {
  id: number;
  question: string;
  answer: string;
  category: 'account' | 'order' | 'payment' | 'other';
  expanded: boolean;
}

Page({
  data: {
    // 搜索关键词
    searchKeyword: '',
    
    // 当前选中的分类
    currentCategory: 'all',
    
    // FAQ列表数据
    faqs: [] as FAQ[],
    
    // 过滤后的FAQ列表
    filteredFAQs: [] as FAQ[]
  },
  
  onLoad() {
    // 初始化FAQ数据
    this.initFAQs();
  },
  
  // 初始化FAQ数据
  initFAQs() {
    const faqs: FAQ[] = [
      {
        id: 1,
        question: '如何注册账号？',
        answer: '您可以通过手机号验证码进行注册，点击首页"我的"页面，选择"注册"，输入手机号并获取验证码，设置密码后即可完成注册。',
        category: 'account',
        expanded: false
      },
      {
        id: 2,
        question: '忘记密码怎么办？',
        answer: '在登录页面点击"忘记密码"，输入注册手机号，获取验证码后即可重置密码。',
        category: 'account',
        expanded: false
      },
      {
        id: 3,
        question: '如何修改个人信息？',
        answer: '进入"我的"页面，点击头像或个人信息区域，即可修改昵称、头像等个人信息。',
        category: 'account',
        expanded: false
      },
      {
        id: 4,
        question: '如何查看我的订单？',
        answer: '在"我的"页面中，点击"我的订单"即可查看所有订单状态，包括待付款、待发货、待收货和已完成。',
        category: 'order',
        expanded: false
      },
      {
        id: 5,
        question: '订单可以取消吗？',
        answer: '未付款的订单可以直接取消；已付款但未发货的订单，您可以申请取消，商家审核通过后会为您退款；已发货的订单需要与商家协商后才能取消。',
        category: 'order',
        expanded: false
      },
      {
        id: 6,
        question: '支持哪些支付方式？',
        answer: '目前我们支持微信支付、支付宝、银行卡等多种支付方式，您可以在结算页面选择合适的支付方式。',
        category: 'payment',
        expanded: false
      },
      {
        id: 7,
        question: '支付后多久可以发货？',
        answer: '一般情况下，付款成功后48小时内会安排发货，特殊商品或活动期间可能会有延迟，具体以商品详情页说明为准。',
        category: 'payment',
        expanded: false
      },
      {
        id: 8,
        question: '如何联系客服？',
        answer: '您可以通过帮助中心的"联系客服"按钮，或者在"我的"页面找到"客服中心"，工作时间为9:00-21:00。',
        category: 'other',
        expanded: false
      },
      {
        id: 9,
        question: '如何提交意见反馈？',
        answer: '在"我的"页面找到"意见反馈"入口，选择反馈类型并填写内容，我们会尽快处理您的反馈。',
        category: 'other',
        expanded: false
      }
    ];
    
    this.setData({
      faqs,
      filteredFAQs: faqs
    });
  },
  
  // 切换分类
  switchCategory(e: { currentTarget: { dataset: { category: string } } }) {
    const category = e.currentTarget.dataset.category;
    this.setData({
      currentCategory: category
    }, () => {
      this.filterFAQs();
    });
  },
  
  // 搜索输入变化
  onSearchInput(e: { detail: { value: string } }) {
    const keyword = e.detail.value.trim();
    this.setData({
      searchKeyword: keyword
    }, () => {
      this.filterFAQs();
    });
  },
  
  // 过滤FAQ列表
  filterFAQs() {
    const { faqs, currentCategory, searchKeyword } = this.data;
    
    let filtered = faqs;
    
    // 按分类过滤
    if (currentCategory !== 'all') {
      filtered = filtered.filter(faq => faq.category === currentCategory);
    }
    
    // 按搜索关键词过滤
    if (searchKeyword) {
      const keyword = searchKeyword.toLowerCase();
      filtered = filtered.filter(faq => 
        faq.question.toLowerCase().includes(keyword) || 
        faq.answer.toLowerCase().includes(keyword)
      );
    }
    
    this.setData({
      filteredFAQs: filtered
    });
  },
  
  // 展开/收起FAQ
  toggleFaq(e: { currentTarget: { dataset: { id: number } } }) {
    const id = e.currentTarget.dataset.id;
    const { faqs } = this.data;
    
    // 更新FAQ的展开状态
    const updatedFAQs = faqs.map(faq => {
      if (faq.id === id) {
        return { ...faq, expanded: !faq.expanded };
      }
      return faq;
    });
    
    this.setData({
      faqs: updatedFAQs,
      filteredFAQs: updatedFAQs
    });
  },
  
  // 联系客服
  contactCustomerService() {
    wx.showModal({
      title: '联系客服',
      content: '客服工作时间：9:00-21:00\n我们将尽快为您解答问题',
      confirmText: '立即咨询',
      cancelText: '稍后再说',
      confirmColor: '#51bdb6',
      success: (res) => {
        if (res.confirm) {
          // 实际项目中可以跳转到客服聊天页面
          wx.showToast({
            title: '正在连接客服...',
            icon: 'none',
            duration: 1500
          });
        }
      }
    });
  }
});