<template>
  <modal
    v-model="show"
    :closeable="true"
    cancel-btn=""
    confirm-btn="0.99元聘请"
    @confirm="go"
    @close="onClose"
    class="rec"
  >
    <div class="rec-title" slot="title">
      <small class="rec-title_small">亲爱的用户</small>
      <h4 class="rec-title_h4">芒果保险恭喜您<br />受邀0.99元聘请保险顾问</h4>
    </div>
    <div class="rec-reason">
      <div class="rec-reason-item">
        <svg-icon icon-class="check-circle" />
        <span class="plan-tip_offset">【省钱】帮您最高节省50%保费</span>
      </div>
      <div class="rec-reason-item">
        <svg-icon icon-class="check-circle" />
        <span class="plan-tip_offset">【放心】中立客观的量身定制方案</span>
      </div>
      <div class="rec-reason-item">
        <svg-icon icon-class="check-circle" />
        <span class="plan-tip_offset">【专业】帮您解读条款做到有效投保 </span>
      </div>
    </div>
    <div class="rec-discount">限时优惠 <del>原价199元</del></div>
  </modal>
</template>

<script>
import Modal from "@/components/Modal";
const DIALOG_CHANGE_EVENT = "input";
const DIALOG_CLOSE_EVENT = "close";

export default {
  name: "AdvisorRecDialog",
  components: {
    Modal
  },
  props: {
    value: null
  },
  data() {
    return {
      show: false
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.show = val;
      }
    },
    show(val) {
      this.$emit(DIALOG_CHANGE_EVENT, val);
    }
  },
  methods: {
    onClose() {
      this.$emit(DIALOG_CLOSE_EVENT, 1);
    },
    go() {
      this.$emit(DIALOG_CLOSE_EVENT, 2);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../../style/var.less";
.rec {
  &-title {
    &_small {
      font-size: @font-size-16;
      color: @gray-4;
      line-height: @line-height-sm + 3;
    }
    &_h4 {
      font-size: @font-size-18;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-lg + 1;
    }
  }
  &-reason {
    margin: 10px 0 40px;
    .svg-icon {
      width: 14px;
      height: 14px;
    }
    &-item {
      font-size: @font-size-14;
      color: @gray-4;
      line-height: @line-height-lg;
    }
  }
  &-discount {
    position: absolute;
    bottom: -78px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: @font-size-12;
    color: @red;
    line-height: @line-height-sm;
    text-align: center;
  }
  @{deep} .panel-body {
    position: relative;
  }
  @{deep} .panel-foot {
    padding-bottom: 50px;
  }
}
</style>
