<template>
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 入口 -->
  <uni-card
    class="entry-card"
    :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
    :padding="'20px 10px'"
    :border="false"
  >
    <view class="item">
      <view
        v-for="(item, index) in entryItemList"
        :key="index"
        @click="handleClick(item)"
        class="item"
      >
        <view>
          <view class="text">{{ item.name }}</view>
          <view class="desc">{{ item.desc }}</view>
          <image :src="`${url}/static/img/battery/${item.path}`"></image>
        </view>
      </view>
    </view>
  </uni-card>
  <!-- 介绍 -->
  <uni-card
    class="avatar-card"
    :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
    :padding="'20px 10px'"
    :border="false"
  >
    <view class="title">回收流程</view>
    <view class="flow">
      <text class="text">在线登记</text>
      <image :src="`${url}/static/img/battery/arrow.png`"></image>
      <text class="text">免费上门</text>
      <image :src="`${url}/static/img/battery/arrow.png`"></image>
      <text class="text">结算打款</text>
      <image :src="`${url}/static/img/battery/arrow.png`"></image>
      <text class="text">订单完成</text>
    </view>
    <up-gap height="10" bgColor="#F8F8F8"></up-gap>
    <view class="title mt-20">回收物品</view>
    <uni-grid :column="2" :showBorder="false" :square="false">
      <uni-grid-item
        class="item"
        v-for="(item, index) in serviceItemList"
        :key="index"
      >
        <uni-card
          :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
          :padding="'0px'"
          :margin="'5px'"
          :border="false"
        >
          <view style="background-color: #e8edff">
            <image
              mode="aspectFill"
              :src="`${url}/static/img/vehicle/${item.path}`"
            ></image>
          </view>
          <view class="text-box">
            <text class="text">{{ item.name }}</text>
          </view>
        </uni-card>
      </uni-grid-item>
    </uni-grid>

    <!-- 常见问题 -->
    <view class="title mt-20 mb-20">常见问题</view>
    <view class="commonQ">
      <view v-for="(item, index) in questionList" :key="index">
        <view class="question">{{ item.q }}</view>
        <view class="answer">
          <view v-html="item.a"></view>
        </view>
      </view>
    </view>

    <view class="other">
      <view>其他问题请咨询客服电话</view>
      <view>15150231777</view>
    </view>
  </uni-card>
</template>

<script setup lang="ts">
import CustomSwiper from "@/components/CustomSwiper/index.vue";
import { url } from "@/utils/data";

const bannerList = [
  {
    imgUrl: "ba-a1.png",
  },
];

const entryItemList = ref([
  {
    path: "1.png",
    name: "我要询价>>",
    desc: "极速回复 · 价格透明",
    url: "/pagesBattery/inquiry",
  },
  {
    path: "2.png",
    name: "我要登记>>",
    desc: "免费上门 · 极速打款",
    url: "/pagesBattery/registration",
  },
]);
const serviceItemList = ref([
  {
    path: "e1.png",
    name: "锂电池包回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e2.png",
    name: "锂电模组回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e3.png",
    name: "电芯回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e4.png",
    name: "极片回收",
    url: "/pagesVehicle/index",
  },
]);

const questionList = ref([
  {
    q: "1、为什么我的车无法评估?",
    a:
      "如若车辆出现以下情况，有概率出现无法评估或信息不完整的情况，您可过段时间后再次进行查询或联系客服进行反馈。<br/>" +
      "a、核实车辆型号信息是否正确，可在车辆行驶证、合格证、车辆铭牌等资料上进行查询;<br/>" +
      "b、该车型出品时间较短，如遇此种情况请联系客户反馈，我们会及时更新数据库信息;<br/>" +
      "c、部分油电混动、增程式及个别特殊车型(如纯进口车型)。",
  },
  {
    q: "2、报告中表显行驶里程和车上实际的里程表数据为什么不一致?",
    a:
      "1、报告表显行驶里程数据 >车辆里程表的数据分析:疑似调表。<br/>" +
      "2、报告表显行驶里程数据=车辆里程表的数据 看是否有疑似调表提醒:<br/>" +
      "① 有提示--疑似调表<br/>" +
      "② 无提示--需结合充电数据，行驶时间等综合判断是否有调表可能性;<br/>" +
      "3、报告表显行驶里程数据小于车辆里程表的数据此时，以车辆里程表数据为准， 原因分析:<br/>" +
      "① 报告每月3日00:00更新，本月行驶数据尚未更新。<br/>" +
      "② 车辆可能因信号、流量、平台等原因导致行驶数据未及时上传。",
  },
  {
    q: "3、为什么电池健康度数据缺失?",
    a:
      "首先，如出现该情况，针对数据缺失模块不扣除积分。<br/>" +
      "【原因】可能原因是，车辆长时间未行使或充电。车辆若长时间停放，电池化学性能会发生一定变化，从准确性角度考虑，我司不会对电池健康状况做评估。<br/>" +
      "【建议】<br/>" +
      "① 车辆长时间(超过7天)不使用时，尽量保持电池电量40%~60%，其它范围有降低动力电池的使用寿命的风险，建议每1-2个月对动力电池进行满充后再进行放电至40%~60%不然存在引起动力电池过放、降低电池性能的风,险。<br/>" +
      "② 本月充放电后，可于下月3日后可再次评估。",
  },
  {
    q: "4、多次查询为何报告数据结果相同?",
    a: "新能源车辆电池耐久度设计具有较大冗余空间，在行驶里程较短、充放电次数较少时车辆短期内电池各项数据不会出现较大波动，建议每次查询时间间隔1个月以上，以便查看数据波动。",
  },
  {
    q: "5、为什么表显里程数、健康度评估等数据更新时间不是每月3日?",
    a: "新能源车是电子产品，可能会因为信号、硬件传感器等问题导致数据无法传输或上传出现延迟，我们采用最后一次数据上传时间作为数据更新时间。",
  },
  {
    q: "6、为什么检测报告不显示充电次数，电池循环次数?",
    a: "因为数据传输故障、硬件系统故障、信号缺失等原因，充电数据、循环次数上传不完整，从数据的准确性考虑不做评估展示。",
  },
]);

const handleClick = (item: any) => {
  uni.navigateTo({
    url: item.url, // 要跳转到的页面路径
  });
};
</script>

<style lang="scss" scoped>
.entry-card {
  .item {
    display: flex;
    justify-content: space-evenly;
    > view {
      background-color: #e8edff;
      border-radius: 13rpx;
      width: 300rpx;
      padding: 20rpx 10rpx;
      position: relative;
    }
    image {
      width: 140rpx;
      height: 140rpx;
      position: absolute;
      right: -10rpx;
      bottom: -20rpx;
    }
    .text {
      font-weight: 400;
      font-size: 28rpx;
      color: #294ac7;
      line-height: 42rpx;
    }
    .desc {
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.55);
      line-height: 42rpx;
      position: relative;
      z-index: 99;
    }
  }
  .item + .item {
    margin-left: 30rpx;
  }
}

.avatar-card {
  .flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 20rpx;

    image {
      width: 38rpx;
      height: 12rpx;
    }
    .text {
      background: #e8edff;
      border-radius: 28rpx;
      border: 1px solid rgba(0, 0, 0, 0.35);
      font-weight: 400;
      font-size: 24rpx;
      color: #272727;
      padding: 10rpx 10rpx;
    }
  }
  .title {
    font-weight: 500;
    font-size: 36rpx;
    color: #282728;
    text-align: center;
    line-height: 80rpx;
  }
  ::v-deep .uni-card--shadow {
    padding: 0px !important;
  }
  ::v-deep .uni-grid {
    justify-content: space-evenly !important;
  }
  .item {
    text-align: center;
    image {
      width: 100%;
      height: 180rpx;
    }
    .text-box {
      background-color: #e8edff;
      font-weight: 400;
      color: #011b7d;
      font-size: 28rpx;
      padding-bottom: 20rpx;
      margin-top: -10rpx;
    }
  }

  .commonQ {
    .question {
      font-size: 32rpx;
      color: #000;
      font-weight: bold;
    }
    .answer {
      font-size: 30rpx;
      color: rgba(0, 0, 0, 0.55);
    }
  }

  .other {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    margin-top: 50rpx;
    margin-bottom: 50rpx;
  }
}
</style>