<template>
  <div class="good-action">
    <div class="good-action-left">
      <a href="javascript:;" class="good-action-left-btn" @click="leftClick">
        <svg-icon icon-class="assistant" />
        <i>客服</i>
      </a>
    </div>
    <div class="good-action-content">
      <slot>
        <h6 v-if="content.title">
          {{ content.title[2] || "" }}
          <strong>{{ content.title[0] || "" }}</strong>
          {{ content.title[1] || "" }}
        </h6>
        <small v-if="content.sub">
          {{ content.sub[2] || "" }}
          {{ content.sub[0] || "" }}
          {{ content.sub[1] || "" }}
        </small>
      </slot>
    </div>
    <div class="good-action-right">
      <cr-button type="warning" round @click="rightClick" native-type="submit">我要投保</cr-button>
    </div>
  </div>
</template>

<script>
/**
 * @description: 底部购买
 * @param {type}
 * @return:
 */
const LEFT_BTN_CLICK_EVENT = "leftClick";
const RIGHT_BTN_CLICK_EVENT = "click";
export default {
  name: "GoodAction",
  props: {
    leftBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    rightBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    content: {
      type: [String, Object],
      default: ""
    }
  },
  methods: {
    leftClick() {
      this.$emit(LEFT_BTN_CLICK_EVENT, {});
    },
    rightClick() {
      // TODO
      this.$emit(RIGHT_BTN_CLICK_EVENT, {});
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
.good-action {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: @white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  &-left {
    display: flex;
    align-items: center;
    position: relative;
    &::after {
      content: " ";
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 32px;
      width: 0;
      border-right: 1px solid #ebebeb;
    }
    &-btn {
      color: @black;
      padding: 0 16px;
      .svg-icon {
        display: block;
        width: 28px;
        height: 28px;
        margin: 0 auto;
      }
      i {
        display: block;
        line-height: @line-height-sm + 2;
        font-style: normal;
        width: 28px;
        margin: 0 auto;
      }
    }
  }
  &-content {
    flex: 1;
    padding: 0 12px;
    h6 {
      font-size: @font-size-16;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-sm;
      margin-bottom: 4px;
    }
    strong {
      color: @orange-dark;
    }
    small {
      display: block;
      color: @gray-4;
      line-height: @line-height-sm;
      font-size: @font-size-11;
    }
  }
  &-right {
    padding-right: 8px;
    .cr-button {
      width: 188px;
      font-size: @font-size-16 !important;
      border-radius: @border-radius-max !important;
      box-shadow: 1px 2px 8px 0px rgba(255, 200, 66, 0.4);
    }
  }
}
</style>
