<template>
   <div class="flow-card">
      <div class="flow-tip-wrapper">
        <div class="flow-tip" :class="{'flow-tip-spec': tip.length > 3, 'tip-success-item': isGreen, 'tip-error-item': !isGreen}">
           <span>{{tip}}</span>
           <svg class="icon flow-tip__icon" :class="{'tip-success': isGreen, 'tip-error': !isGreen}" aria-hidden="true">
              <use xlink:href="#icon-jiedian"/>
           </svg>
        </div>
      </div>
      <div class="flow-card-wrapper">
        <slot name="content">
          
        </slot>
      </div>
      <div class="flow-additional__txt flow-card-wrapper" v-show="isAdditional">
          <slot name="additional__txt"></slot>
      </div>
   </div>
</template>

<script>
//import { mapState } from 'vuex'

export default {
  name: "this",
  props: {
    isGreen: {
      type: Boolean,
      default: true,
      required: true
    },
    tip: {
      type: String,
      default: "",
      required: true
    },
    isAdditional: {
      type: Boolean,
      default: false,
      required: false
    },
  },
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "template",
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
    @import "~@/common/less/variable.less";
    @nice-gray: #747474;
    .flow-card {
      margin-top: 8px;
      position: relative;
      .flow-tip-wrapper {
        position: absolute;
        top:16.5px;
        left: 0;
      }
      .flow-tip {
        width: 33px;
        height: 37px;
        color: white;
        position: relative;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        .flow-tip__icon {
          position: absolute;
          right:-10px;
          font-size: 15px;
          top: 10px;
        }
      }
      .flow-tip-spec {
        line-height: 15px;
      }
      .tip-success-item {
        background: @nice-green;
      }
      .tip-error-item {
        background: @nice-red;
      }
      .tip-success {
        color: @nice-green;
      }
      .tip-error {
        color: @nice-red;
      }
      .flow-card-wrapper {
        background: white;
        padding-top: 13.5px;
        padding-left: 50px;
        padding-bottom: 13.5px;
        text-align: left;
        color: @nice-gray;
        font-size: 13px;
        font-weight: 400;
      }
      .flow-additional__txt {
        margin-top: 1px;
      }
    }
</style>