<template>
  <div class="rec-container">
    <card title="" footer="1">
      <div class="rec-hd" slot="header">
        <div class="rec-hd-title">再买一份{{ title }}<br />构建全面保障</div>
        <div class="rec-hd-sub">{{ sub }}</div>
      </div>
      <div class="rec-sign">
        <div class="rec-sign-item" v-for="(item, index) in rec" :key="index">
          <cr-image :src="item.img" width="96px" height="98px" />
          <p
            v-for="(it, index) in item.title"
            :key="index"
            :class="{ 'rec-sign-item-bold': index === 0 }"
          >
            {{ it }}
          </p>
        </div>
      </div>
      <div class="rec-ft" slot="footer">
        <h6 v-if="goodActionInfo.title">
          {{ goodActionInfo.title[2] || "" }}
          <strong>{{ goodActionInfo.title[0] || "" }}</strong>
          {{ goodActionInfo.title[1] || "" }}
          <small v-if="goodActionInfo.sub">{{ goodActionInfo.sub }}</small>
        </h6>
        <cr-button type="warning" size="large" block>立刻开启保障</cr-button>
        <div class="rec-ft-tip">
          <div class="rec-ft-tip-tag">
            由<strong>{{ company }}</strong>
            公司承保
          </div>
          <a href="javascript:;">了解更多</a>
        </div>
        <div class="rec-person">
          <div class="rec-person-item"><svg-icon icon-class="medal" />王*闹</div>
          <div class="rec-person-item"><svg-icon icon-class="medal" />183******892</div>
        </div>
      </div>
    </card>
    <card title="投保提示">
      <ul class="rec-tip">
        <li class="rec-tip-item" v-for="(it, index) in notice" :key="index">
          <p>{{ it }}</p>
        </li>
      </ul>
      <cr-divider />
      <div class="rec-tip-link">
        <a
          href="javascript:;"
          @click="openIframe(item.id)"
          v-for="(item, index) in popupArray"
          :key="index"
        >
          {{ item.title }}
        </a>
      </div>
    </card>
  </div>
</template>
<script>
import rec from "@/api/policy.rec";
import Card from "@/components/Card";
export default {
  name: "RecGood",
  components: {
    Card
  },
  data() {
    return {
      ...rec
    };
  }
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
@import "../../../../style/mixins.less";
.rec {
  &-container {
    width: 343px;
    margin: 24px auto;
    background-color: @white;
    overflow: hidden;
    border-radius: @border-radius-md;
    .card:first-child {
      padding-bottom: 0;
    }
    @{deep} .card-body {
      margin-bottom: 0;
    }
  }
  &-hd {
    flex: 1;
    &-title {
      font-size: 24px;
      font-weight: @font-weight-bold;
      color: #333;
      line-height: 33px;
    }
    &-sub {
      font-size: @font-size-12;
      font-weight: @font-weight-bold;
      color: @orange-dark;
      line-height: @line-height-sm;
      margin-top: 11px;
    }
  }
  &-ft {
    h6 {
      margin: 0 0 22px;
      text-align: center;
      font-size: @font-size-16;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-sm;
    }
    strong {
      color: @orange-dark;
      font-weight: @font-weight-bold;
      font-size: 32px;
    }
    small {
      color: @gray-4;
      line-height: @line-height-sm;
      font-size: @font-size-12;
      margin-left: 10px;
    }
    .cr-button {
      box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
      border-radius: @border-radius-max !important;
    }
    &-tip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 21px 0 7px;
      &-tag {
        .sub-text-mixins();
        strong {
          font-size: @font-size-12;
          color: @black;
        }
      }
    }
  }
  &-person {
    background-color: @gray-1;
    border-radius: @border-radius-sm;
    padding: 10px 20px;
    &-item {
      margin: 9px 0;
      font-size: 12px;
      line-height: 12px;
      color: @black;
      font-weight: @font-weight-bold;
      .svg-icon {
        width: 18px;
        height: 18px;
      }
      &:first-child {
        font-size: 16px;
      }
    }
  }
  &-sign {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 20px;
    &-item {
      flex: 1;
      .item-show-mixin();
      .cr-image {
        margin-right: -25px;
        margin-bottom: -15px;
      }
      &:nth-child(2) {
        margin: 0 25px;
      }
      &-bold {
        font-weight: @font-weight-bold;
      }
    }
  }
  &-tip {
    padding-left: 16px;
    &-item {
      list-style-type: decimal;
      padding-left: 8px;
      font-size: @font-size-12;
      color: @black;
      font-weight: bold;
      p {
        line-height: @line-height-sm + 2;
        color: @gray-5;
        margin-bottom: 12px;
      }
    }
    &-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      a {
        font-size: @font-size-12;
        color: @black;
        &::after {
          display: inline-block;
          content: " ";
          width: 0;
          height: 12px;
          border-right: 1px @blue solid;
          margin: 0 3px 0 6px;
          vertical-align: -2px;
        }
        &:last-child::after {
          display: none;
        }
      }
    }
  }
}
</style>
