<template>
  <div class="container">
    <div class="cul-hd">
      <div class="cul-hd-pr">
        <div class="cul-process">
          <div
            class="cul-process-item"
            v-for="(item, index) in processList"
            :key="index"
            :class="{ active: item.active }"
          >
            <svg-icon :icon-class="item.icon" />
            <p>{{ item.sub }}</p>
          </div>
        </div>
      </div>
      <card title="1" footer="1">
        <template slot="header">
          <h5 class="cul-hd-card-title">您准备为谁买保险？</h5>
          <span class="step"><em>1</em>/8</span>
          <div class="cul-tip">
            想为多人买保险的情况，请在和保险顾问沟通时说明信息，保险顾问会为每一位家人量身定制方案哦~=
          </div>
        </template>
        <div class="cul-hd-card-body">
          <cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
        </div>
        <div slot="footer" class="cul-hd-card-footer">
          <cr-button
            type="warning"
            size="large"
            block
            @click="$router.push('/consultant/exclusive')"
          >
            下一步
          </cr-button>
          <a href="javascsript:;">返回上一步</a>
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
export default {
  name: "ConsultantQuestion",
  components: {
    Card,
    CrRadioBtn
  },
  data() {
    return {
      formData: {},
      insuredOptions: [
        { label: "本人", value: "1" },
        { label: "配偶", value: "2" },
        { label: "父母", value: "3" },
        { label: "子女", value: "4" }
      ],
      processList: [
        { icon: "package-active", sub: "聘请成功", active: true },
        { icon: "page-active", sub: "完成问卷", active: true },
        { icon: "flag-black", sub: "顾问服务" }
      ]
    };
  },
  mounted() {}
};
</script>
<style lang="less" src="./index.less" scoped></style>
