<template>
  <div class="container">
    <div class="cul-hd">
      <div class="cul-hd-info">
        <small>“保险从业多年，口碑极佳”</small>
        <h1>{{ info.name }}</h1>
        <cr-tag><svg-icon icon-class="medal" />{{ info.role }}</cr-tag>
        <small>执业保险销售资质：</small>
        <small v-html="`${info.card.slice(0, 15)}<br />${info.card.slice(15)}`"></small>
      </div>
      <cr-image
        class="cul-hd-img"
        src="@/assets/images/consultant/culstor.png"
        width="175px"
        height="224px"
      />
    </div>
    <div class="cul-det">
      <card title="" class="cul-card">
        <router-link tag="div" class="cul-entry" to="/consultant/plan" v-if="hasSuggestion">
          <div class="cul-entry-title">
            <h3>您的专属保险方案</h3>
            <small>CAPTIVE INSURANC</small>
            <cr-tag v-if="relation">{{ relation }}</cr-tag>
          </div>
          <svg-icon icon-class="arrow-right" />
        </router-link>
        <div class="cul-contact" v-else>
          <div class="cul-contact-qrcode">
            <cr-image
              src="@/assets/images/consultant/qrcode-demo.png"
              width="130px"
              height="130px"
            />
            <p>长安识别二维码加好友</p>
          </div>
          <div class="cul-rate">
            <div class="cul-rate-item">
              <h2>{{ info.serveNum }}</h2>
              <p>已服务用户人</p>
            </div>
            <div class="cul-rate-item">
              <h2>{{ info.rate }}</h2>
              <p>满意度</p>
            </div>
          </div>
        </div>
        <div class="cul-tel">
          <a class="cul-tel-num" :href="`tel:${info.tel}`">
            <svg-icon icon-class="call" />{{ info.tel }}
          </a>
          <a class="cul-tel-num" :href="`tel://${info.tel}`">1312312312</a>
          <a class="cul-tel-num" :href="`callto:${info.tel}`">1312312312</a>
          <div class="cul-time">服务时间 {{ info.date }}</div>
        </div>
        <div class="cul-slogan">
          <p>“我们的价值：让客户少花钱买好保险”</p>
          <p>“我们的愿景：让每个家庭都有备无患”</p>
        </div>
        <cr-divider :style="{ marginBottom: 0 }" />
      </card>
      <card title="芒果保险·1对1保险顾问来帮您">
        <div class="cul-odds-list">
          <div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
            <div class="cul-odds-list-title">
              <i class="cul-odds-list-title-icon">{{ index + 1 }}</i>
              <span class="cul-odds-list-title-txt">{{ item.title }}</span>
            </div>
            <div class="cul-odds-list-content">
              <div class="cul-odds-list-content-item" v-for="(it, idx) in item.children" :key="idx">
                <div class="cul-odds-list-content-title">
                  <svg-icon icon-class="check-circle" />
                  {{ it[0] }}
                </div>
                <div class="cul-odds-list-content-txt">{{ it[1] }}</div>
              </div>
            </div>
          </div>
        </div>
      </card>
    </div>
    <copyright :logo="true" />
  </div>
</template>

<script>
import copyright from "@/components/Copyright";
import Card from "@/components/Card";
import { getCulInfo } from "@/api/consultant";
import { getCulsuggestion } from "@/api/consultant";
import settings from "@/api/settings";
const { consultant } = settings;
export default {
  name: "ConsultantExclusive",
  components: {
    Card,
    copyright
  },
  props: {
    hasSuggestion: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      relation: "",
      info: {
        ...consultant
      },
      oddsInsureList: [
        {
          title: "投保前",
          children: [
            ["全方位评估:", "360°筛查、识别、评估您的家庭风险"],
            [
              "量身筛选:",
              "根据您的自身情况，分析对比几百款产品，选出最适合的保障方案，最高节省50%保费"
            ],
            ["保单诊断:", "全面评估已有保单，中立、客观的给您提供针对性的意见 "]
          ]
        },
        {
          title: "投保中",
          children: [
            ["条款解读:", "为您解释复杂难懂的条款"],
            ["有效投保:", "为您做好健康告知，做到有效投保"]
          ]
        },
        {
          title: "投保后",
          children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
        }
      ]
    };
  },
  watch: {
    hasSuggestion: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getSuggestion();
        }
      }
    }
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await getCulInfo({ consultantSecId: this.info.id });
      if (res) {
        this.info.rate = res.satisfaction;
        this.info.serveNum = res.serviceNum;
      }
    },
    async getSuggestion() {
      const res = await getCulsuggestion();
      if (res) {
        this.relation = res.relation;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
