<template functional>
  <div
    class="det-hd"
    :class="props.det.type"
    :style="{ backgroundImage: 'url(' + props.det.bgSrc + ')' }"
  >
    <img src="../../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
    <div class="det-hd-recommend">
      <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
      <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
      <cr-tag>
        由
        <strong>{{ props.det.company }}</strong>
        承保
      </cr-tag>
    </div>
    <div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
      <h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
      <small class="det-hd-insured-sub">
        <slot>{{ props.det.sub }}</slot>
      </small>
      <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
      <cr-button type="warning" block @click="listeners.click">立即开启保障</cr-button>
      <div class="det-hd-insured-people">
        已有
        <em>{{ props.det.insuredNum }}</em>
        位用户投保
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailHeader",
  props: {
    det: {
      type: Object,
      default() {
        return {
          bgSrc: "",
          type: "",
          company: "",
          title: "",
          sub: "",
          price: "",
          insuredNum: 0
        };
      }
    }
  }
};
</script>
<style lang="less">
@import "../../../../style/var.less";
.sub-text-mixins {
  font-size: @font-size-12;
  color: @gray-4;
  line-height: @line-height-sm;
}
.det-hd {
  background-color: transparent;
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 10px 16px;
  &-logo {
    position: relative;
    left: -16px;
    width: 100px;
    height: 32px;
    margin: 16px 0 12px;
  }
  &-recommend {
    color: @white;
    padding: 0 8px;
    &-h2 {
      font-size: @font-size-20;
      font-weight: @font-weight-bold;
      line-height: 28px;
    }
    &-h1 {
      font-size: @font-size-26;
      font-weight: @font-weight-bold;
      line-height: 37px;
      margin-top: -3px;
    }
    .cr-tag {
      background: linear-gradient(180deg, rgba(219, 99, 19, 1) 0%, rgba(192, 83, 10, 1) 100%);
      font-size: 12px !important;
      font-weight: normal !important;
      strong {
        font-weight: bold;
      }
    }
  }
  &-insured {
    margin-top: 39px;
    background: @white;
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
    border-radius: @border-radius-md;
    padding: 30px 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: bottom right;
    background-size: 19%;
    &.stamp {
      background-image: url(../../../../assets/goods/detail/stamp.png);
    }
    &-title {
      font-size: 32px;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-lg * 2;
      margin-top: 1px;
    }
    &-sub {
      .sub-text-mixins();
      margin-top: 8px;
    }
    &-price {
      font-size: @font-size-16;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-sm;
      margin-top: 24px;
      strong {
        color: @orange-dark;
        font-size: @font-size-32;
        font-weight: @font-weight-bold;
        margin: 0 3px;
      }
      small {
        margin-left: 5px;
        .sub-text-mixins();
      }
    }
    .cr-button {
      margin-top: 30px;
      height: @button-large-height;
      line-height: @button-large-line-height;
      font-size: @font-size-16;
      box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
    }
    &-people {
      .sub-text-mixins();
      margin-top: 18px;
      em {
        color: @black;
        font-style: normal;
        margin: 0 3px;
      }
    }
  }
}
</style>
