<template functional>
  <div
    class="det-hd"
    :class="props.det.type"
    :style="{ backgroundImage: 'url(' + props.det.bgSrc + ')' }"
  >
    <img :src="props.det.logo" alt="logo" class="det-hd-logo" v-if="props.det.logo" />
    <img src="@/assets/logo-top.png" alt="logo" class="det-hd-logo" v-else />
    <div class="det-hd-recommend">
      <img
        :src="props.det.cmdImg"
        alt="智能产品官-小果 为您优选推荐"
        class="det-hd-recommend-img"
        v-if="props.det.cmdImg"
      />
      <template v-else>
        <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
        <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
      </template>
      <cr-tag v-if="props.det.company">
        由
        <strong>{{ props.det.company }}</strong>
        承保
      </cr-tag>
      <div class="tag-placeholder" v-else></div>
    </div>
    <div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
      <img
        :src="props.det.titleImg"
        :alt="props.det.title"
        class="det-hd-insured-title-img"
        v-if="props.det.titleImg"
      />
      <h1 class="det-hd-insured-title" v-else>{{ props.det.title }}</h1>
      <slot>
        <small class="det-hd-insured-sub">
          {{ props.det.sub }}
        </small>
        <h5 class="det-hd-insured-price" v-if="props.det.price">
          <!-- eslint-disable-next-line prettier/prettier -->
          {{ props.det.price[2] || "" }}<strong>{{ props.det.price[0] || "" }}{{ props.det.price[1] || "" }}</strong>{{ (props.det.type === "zhongan" ? props.det.price[3] : "") || "" }}
          <small v-if="props.det.subPrice && props.det.subPrice[0]">
            <!-- eslint-disable-next-line prettier/prettier -->
            {{ props.det.subPrice[2] || "" }}{{ props.det.subPrice[0] || "" }}{{ props.det.subPrice[1] || "" }}
          </small>
        </h5>
        <button
          class="cr-button cr-button--warning cr-button--normal cr-button--square cr-button--block insure-btn"
          type="submit"
        >
          立即投保
          <img src="@/assets/images/goods/detail/get-insure.png" alt="立即投保" />
        </button>
        <div class="det-hd-insured-people">
          已有
          <em>{{ props.det.insuredNum }}</em>
          位用户投保
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailHeader",
  props: {
    det: {
      type: Object,
      default() {
        return {
          bgSrc: "",
          type: "",
          company: "",
          title: "",
          sub: "",
          price: "",
          subPrice: "",
          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;
    height: 32px;
    margin: 16px 0 12px;
  }
  &-recommend {
    color: @white;
    padding: 0 8px;
    &-img {
      width: 163px;
      height: 51px;
      display: block;
      margin: 8px 0 4px;
    }
    &-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/images/goods/detail/stamp.png);
    }
    &-title {
      font-size: 32px;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-lg * 2;
      margin-top: 1px;
      &-img {
        height: 49px;
        display: block;
        margin: 0 auto;
      }
    }
    &-sub {
      .sub-text-mixins();
      color: @black;
      font-size: @font-size-16;
      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();
        color: @black;
      }
    }
    .insure-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      height: @button-large-height;
      line-height: @button-large-line-height;
      font-size: 0px;
      border-radius: @border-radius-max !important;
      box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
      position: relative;
      img {
        position: absolute;
        top: 0;
        z-index: 9;
        left: 0;
        right: 0;
        width: 98px;
        height: 27px;
        display: block;
        margin: 10px auto;
      }
      span {
        font-size: 22px;
        font-weight: bold;
        color: #333333;
      }
    }
    &-people {
      .sub-text-mixins();
      margin-top: 18px;
      color: @black;
      em {
        color: @orange-dark;
        font-style: normal;
        margin: 0 3px;
      }
    }
  }
}
.tag-placeholder {
  height: 30px;
}

.taikang {
  .det-hd {
    &-recommend {
      color: @black;
      .cr-tag {
        color: @white;
        background: linear-gradient(178deg, rgba(114, 114, 114, 1) 0%, rgba(0, 0, 0, 1) 100%);
        strong {
          color: @orange-light;
        }
      }
    }
  }
}
.zhongan {
  .det-hd {
    &-recommend {
      .cr-tag {
        background: linear-gradient(180deg, rgba(122, 127, 255, 1) 0%, rgba(74, 78, 182, 1) 100%);
      }
    }
  }
}
</style>
