<template>
  <view class="page">
    <uv-navbar title="洗车指导" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
    <uv-collapse @change="handleChange" @close="close" @open="open">
      <uv-collapse-item :title="(index+1)+'.'+item.question" :name="item.question"  v-for="(item, index) in state.questions" :key="index">
        <uv-parse :content="item.answer" :selectable="true"></uv-parse>
      </uv-collapse-item>
    </uv-collapse>
  </view>
</template>

<script setup lang="ts">
import {reactive} from "vue";

const guideContent = [
  {
    question: "如何使用自助洗车机？",
    answer: "<p>使用Yeswash自助洗车非常简单，只需三步：</p><p><strong>1. 扫码启动</strong> — 打开小程序，扫描洗车机上的二维码，选择洗车套餐并支付。</p><p><strong>2. 开始洗车</strong> — 支付成功后，按照设备屏幕提示将车辆驶入指定位置，确认无误后在屏幕上点击开始洗车。</p><p><strong>3. 完成取车</strong> — 洗车结束后，设备会有语音和灯光提示，将车辆驶出即可。洗车记录会自动保存在「我的订单」中。</p>"
  },
  {
    question: "洗车前需要做哪些准备？",
    answer: "<p>为了确保洗车效果和车辆安全，请注意以下事项：</p><p>• 关闭所有车窗和天窗，确保完全密闭</p><p>• 检查并收好车外天线（如有可拆卸天线请提前取下）</p><p>• 确认油箱盖已盖紧</p><p>• 车身如有明显大块泥沙、污物，建议先简单清理</p><p>• 车辆改装件（尾翼、行李架等）请确认安装牢固</p>"
  },
  {
    question: "洗车过程中有哪些注意事项？",
    answer: "<p>洗车过程中请务必注意：</p><p>• 车辆挂P挡、拉好手刹，发动机熄火</p><p>• 不要留在车内，在指定安全区域等候</p><p>• 不要在洗车机运行期间靠近或触摸设备</p><p>• 如遇设备异常或异响，请立即按下急停按钮</p><p>• 不要在雷雨天气使用洗车设备</p>"
  },
  {
    question: "洗车后如何查看订单？",
    answer: "<p>洗车完成后，订单会自动保存，您可以通过以下方式查看：</p><p>进入「我的」→「我的订单」，即可查看所有历史洗车记录。点击具体订单可查看详情，包括洗车时间、消费金额、洗车网点等信息。</p>"
  },
  {
    question: "遇到问题如何联系客服？",
    answer: "<p>如在使用过程中遇到任何问题，可通过以下方式联系我们：</p><p>• 进入「首页」→「在线客服」，联系在线客服获取帮助</p><p>• 查看站点详情页的服务电话，直接联系站点工作人员</p><p>• 如有设备故障或洗车质量问题，可通过「故障反馈」提交反馈，我们会尽快处理</p><p>客服工作时间：每日 9:00 - 22:00</p>"
  },
  {
    question: "哪些车型不适合自助洗车？",
    answer: "<p>以下类型的车辆可能不适合使用自助洗车机：</p><p>• 车身高度超过2.2米的车辆（如大型SUV、房车等）</p><p>• 车身宽度超过2.1米的车辆</p><p>• 装有非原厂大型改装件的车辆</p><p>• 车身存在严重破损或漆面大面积脱落的车辆</p><p>如不确定您的车辆是否适用，请先联系客服确认。</p>"
  },
];

const state = reactive({
  questions: guideContent,
});

const handleChange = () => {};

const close = () => {};

const open = () => {};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $uni-bg-color-card;
  box-sizing: border-box;
  padding: 40rpx 32rpx;

  // 折叠面板项间距
  :deep(.uv-collapse-item) {
    margin-bottom: 24rpx;
  }

  // 问题标题文字
  :deep(.uv-cell__title-text) {
    font-size: 30rpx !important;
    font-weight: 500;
    line-height: 1.6 !important;
  }

  // 答案内容容器
  :deep(.uv-collapse-item__content__text) {
    font-size: 28rpx !important;
    line-height: 2 !important;
    padding: 16rpx 15px 32rpx !important;
  }

  // uv-parse 富文本内的段落和文字
  :deep(._p) {
    font-size: 28rpx;
    line-height: 2;
    margin-bottom: 12rpx;
  }

  :deep(._strong) {
    font-size: 28rpx;
    line-height: 2;
  }
}

</style>
