<template>
  <div class="help-center">
    <div class="help-center-head">
      <div class="Hc-head-left">
        <p>帮助中心</p>
        <p>HELP CENTER</p>
      </div>
      <cr-image
        class="Hc-head-right"
        round
        width=""
        height=""
        src="../../../assets/images/user/help-center@2x.png"
      />
    </div>
    <div class="help-center-container">
      <help-center-card :content="qaList" type="COMPOSITE"></help-center-card>
      <div class="Hc-container-insurance">
        <div
          class="Hcc-insurance-item"
          v-for="item in goodsList"
          :key="item.id"
          @click="goSubsection(item.id)"
        >
          <p class="Hcci-item-text">{{ item.title }}</p>
          <p
            :class="[
              { 'Hcci-item-icon_medical': item.itype === 'mi' },
              { 'Hcci-item-icon_illness': item.itype === 'cii' },
              { 'Hcci-item-icon_casualty': item.itype === 'ai' },
              { 'Hcci-item-icon_life': item.itype === 'li' },
              'Hcci-item-icon'
            ]"
          >
            {{ item.guarantee_title }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import goodsList from "@/api/goodsList.mock";
import QA from "@/api/helpCenter";
import HelpCenterCard from "./modules/HelpCenterCard";

export default {
  name: "HelpCenter",
  components: {
    HelpCenterCard
  },
  data() {
    return {
      qaList: QA.COMPOSITE,
      goodsList
    };
  },
  methods: {
    goAnswer(type, id) {
      this.$router.push(`/user/help-center/answer/${type}/${id}`);
    },
    goSubsection(type) {
      this.$router.push(`/user/help-center/subsection/${type}`);
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
