import { ref, computed } from 'vue'


function useData() {

  // 问题分类
  const categoryList = ref([
    { id: 1, name: '账号问题', count: 12 },
    { id: 2, name: '支付问题', count: 8 },
    { id: 3, name: '订单问题', count: 15 },
    { id: 4, name: '产品使用', count: 23 },
    { id: 5, name: '售后服务', count: 7 },
    { id: 6, name: '其他问题', count: 5 },
  ])
  // 当前选中的分类 ID
  const activeCategory = ref<string | number>(1)


  // 模拟问题数据
  const questions = ref([
    {
      id: 101,
      categoryId: 1,
      title: '如何注册账号？',
      preview: '详细说明注册账号的步骤和注意事项...',
      content: `
      <h3>注册账号步骤</h3>
      <ol>
        <li>点击网站右上角的"注册"按钮</li>
        <li>填写您的手机号码或电子邮箱</li>
        <li>设置登录密码（6-20位字符，包含字母和数字）</li>
        <li>输入收到的验证码</li>
        <li>阅读并同意用户协议</li>
        <li>点击"立即注册"完成注册</li>
      </ol>
      <p><strong>注意事项：</strong></p>
      <ul>
        <li>请使用常用手机号或邮箱，以便接收重要通知</li>
        <li>密码请勿设置过于简单</li>
        <li>如未收到验证码，请检查垃圾邮件或60秒后重新获取</li>
      </ul>
    `,
      updateTime: '2023-05-15',
      views: 1245,
      isHot: true,
      isNew: false,
    },
    {
      id: 102,
      categoryId: 1,
      title: '忘记密码怎么办？',
      preview: '密码找回的几种方法和步骤说明...',
      content: `
      <h3>找回密码方法</h3>
      <p>如果您忘记了密码，可以通过以下方式找回：</p>
      
      <h4>方法一：通过手机找回</h4>
      <ol>
        <li>在登录页面点击"忘记密码"</li>
        <li>选择"通过手机找回"</li>
        <li>输入注册时使用的手机号码</li>
        <li>获取并输入短信验证码</li>
        <li>设置新密码并确认</li>
      </ol>
      
      <h4>方法二：通过邮箱找回</h4>
      <ol>
        <li>在登录页面点击"忘记密码"</li>
        <li>选择"通过邮箱找回"</li>
        <li>输入注册时使用的邮箱地址</li>
        <li>登录邮箱查收重置密码邮件</li>
        <li>点击邮件中的链接设置新密码</li>
      </ol>
      
      <p>如果以上方法都无法解决您的问题，请联系客服人员。</p>
    `,
      updateTime: '2023-06-02',
      views: 876,
      isHot: true,
      isNew: false,
    },
    {
      id: 201,
      categoryId: 2,
      title: '支持哪些支付方式？',
      preview: '介绍平台目前支持的支付渠道...',
      content: `
      <h3>支持的支付方式</h3>
      <p>我们目前支持以下支付方式：</p>
      
      <div class="payment-method">
        <h4>1. 在线支付</h4>
        <ul>
          <li>微信支付</li>
          <li>支付宝</li>
          <li>银联在线支付</li>
          <li>Apple Pay</li>
        </ul>
      </div>
      
      <div class="payment-method">
        <h4>2. 银行卡支付</h4>
        <p>支持以下银行的储蓄卡和信用卡：</p>
        <ul>
          <li>中国工商银行</li>
          <li>中国建设银行</li>
          <li>中国银行</li>
          <li>招商银行</li>
          <li>交通银行等主流银行</li>
        </ul>
      </div>
      
      <p><strong>注意：</strong>部分银行可能有支付限额，请以银行规定为准。</p>
    `,
      updateTime: '2023-04-28',
      views: 1532,
      isHot: false,
      isNew: false,
    },
    {
      id: 301,
      categoryId: 3,
      title: '如何查询订单状态？',
      preview: '订单状态查询的几种途径和方法...',
      content: `
      <h3>查询订单状态</h3>
      <p>您可以通过以下方式查询订单状态：</p>
      
      <h4>方法一：网站查询</h4>
      <ol>
        <li>登录您的账号</li>
        <li>点击右上角"我的订单"</li>
        <li>在订单列表中找到相应订单</li>
        <li>点击"查看详情"查看订单状态</li>
      </ol>
      
      <h4>方法二：手机APP查询</h4>
      <ol>
        <li>打开APP并登录</li>
        <li>点击底部导航栏"我的"</li>
        <li>选择"我的订单"</li>
        <li>查看相应订单状态</li>
      </ol>
      
      <h4>方法三：联系客服查询</h4>
      <p>如果您无法通过以上方式查询，可以联系客服提供订单号查询。</p>
      
      <p><strong>常见订单状态说明：</strong></p>
      <ul>
        <li><span class="status waiting">待付款</span> - 订单已生成，等待支付</li>
        <li><span class="status paid">已支付</span> - 付款成功，等待处理</li>
        <li><span class="status shipped">已发货</span> - 商品已发出</li>
        <li><span class="status completed">已完成</span> - 订单交易完成</li>
        <li><span class="status cancelled">已取消</span> - 订单已取消</li>
      </ul>
    `,
      updateTime: '2023-05-20',
      views: 2104,
      isHot: true,
      isNew: true,
    },
  ])
  // 当前查看的问题详情
  const currentQuestion = ref(null)


  // 搜索查询词
  const searchQuery = ref('')
  // 搜索结果
  const searchResults = ref<Array<typeof questions.value[0]>>([])


  // 获取分类名称
  const getCategoryName = (id: string | number) => {
    const category = categoryList.value.find((c) => (c.id === id))
    return category ? category.name : '所有问题'
  }

  // 切换分类
  const changeCategory = (categoryId: string | number) => {
    activeCategory.value = categoryId
    currentQuestion.value = null
    searchResults.value = []
  }

  // 获取当前分类下的问题
  const questionList = computed(() => {
    return questions.value.filter((q: any) => q.categoryId === activeCategory.value)
  })

  // 显示问题详情
  const showQuestionDetail = (question: any) => {
    currentQuestion.value = question
  }

  // 搜索问题
  const searchQuestions = () => {
    if (!searchQuery.value.trim()) {
      searchResults.value = []
      return
    }

    const query = searchQuery.value.toLowerCase()
    searchResults.value = questions.value.filter((q) => {
      return q.title.toLowerCase().includes(query) || q.preview.toLowerCase().includes(query)
    })
    currentQuestion.value = null
  }

  // 返回问题列表
  const backToList = () => {
    currentQuestion.value = null
  }

  return {
    categoryList,
    activeCategory,
    questionList,
    currentQuestion,
    questions,
    searchQuery,
    searchResults,
    getCategoryName,
    changeCategory,
    showQuestionDetail,
    searchQuestions,
    backToList,
  }
}



export default useData