<template>
    <div :class="['tips-con', type, !showBorder&&'not-border'].join(' ')">
      <div v-if="isShowIcon" :class="['tips-icon', isShowIconBorder ==true ?'tips-icon-border':'tips-icon-not-border']"><a-icon :type="iconType" :theme="iconTheme" /></div>
      <!-- <div class="tips-title" v-if="isHtml" v-html="tips"></div>
      <div class="tips-title" v-if="!isHtml"><slot></slot></div> -->
      <div class="tips-title" v-if="!$slots.default" v-html="tips"></div>
      <div class="tips-title" v-if="$slots.default"><slot></slot></div>
    </div>
    </template>
    
    <script>
    export default {
      name:'PTips',
      props:{
        tips:{type:String,default:()=>''},
        // isHtml:{type:Boolean,default:()=>true},
        // warning  error  info
        type:{type:String,default:()=>{ return ''}},
        // 是否显示图标
        isShowIcon:{type:Boolean,default:()=>true},
        // Ant Design Vue 中的icon图标名称
        iconType:{type:String,default:()=>'exclamation-circle'},
        // 图标双色
        iconTheme:{type:String,default:()=>'twoTone'}, // twoTone
        // theme:'filled', // twoTone
        // 是否显示图标边框
        isShowIconBorder:{type:Boolean,default:()=>true},
        // 是否显示外边框
        showBorder:{type:Boolean,default:()=>true},
        showHelp:{type:Boolean, default: () => { return false }}
      },
      mounted(){
        if(this.$isShowHelp == true && this.showHelp === true){
        console.log(`
        组件名称：
            PTips
        使用方法：
            <p-Tips  :tips="'ddd'"></p-Tips>
            <p-Tips > <div>插槽</div> </p-Tips>
        props参数说明：
            props:{
              // 此参数可选  用于显示相应的提示信息
              tips:{type:String,default:()=>''},
              // 此参数可选 显示的类型  可选的值有： warning（表示警告）  error（表示错误提示）  info（表示一般提示）  默认值为空 
              type:{type:String,default:()=>{ return ''}},
              // 此参数可选 是否显示图标
              isShowIcon:{type:Boolean,default:()=>true},
              // 此参数可选 Ant Design Vue 中的icon图标名称
              iconType:{type:String,default:()=>'exclamation-circle'},
              // 此参数可选 图标双色  Ant Design Vue 中的icon图标双色设置
              iconTheme:{type:String,default:()=>'twoTone'}, // twoTone
              // 此参数可选 是否显示图标边框
              isShowIconBorder:{type:Boolean,default:()=>true},
              // 此参数可选 是否显示外边框
              showBorder:{type:Boolean,default:()=>true}
            },
        注：本组件支持插槽（slot），如有复杂显示时可启用插槽
        `);
      }
      },
    }
    </script>
    
    <style lang="less">
    .tips-con{
      // width: auto;
      // height: 34px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #F3F6FD;
      border-radius: 2px;
      border: 1px solid #4167E8;
      padding: 0 16px 0 0;
      margin: 10px 0;
      &.not-border{
        border: 0px solid #4167E8 !important;
      }
      .tips-icon{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 18px;
        width: 18px;
        
        margin: 0 16px;
        color: #4167e8;
        &.tips-icon-border{
          border-image-source: radial-gradient(closest-side at 60% 60%, transparent 0px, transparent 100%, cyan 100%);
          border-image-slice: 1;
          border-width: 2px;
          border-style: solid;
          border-image-outset: 1px;
        }
        &.tips-icon-not-border{
          border-image-source: radial-gradient(closest-side at 60% 60%, transparent 0px, transparent 100%, cyan 100%);
          border-image-slice: 1;
          border-width: 0px;
          border-style: solid;
          border-image-outset: 1px;
        }
      }
      .tips-title{
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #777777;
        line-height: 22px;
      }
      &.warning{
        background: #fffbe6;
        border: 1px solid #ffe58f;
        .tips-icon{
          color: #faad14;
        }
        .tips-title{
          color: rgba(0,0,0,.85);
        }
      }
      &.error{
        background: #fff1f0;
        border: 1px solid #ffa39e;
        .tips-icon{
          color: #f5222d;
        }
        .tips-title{
          color: rgba(0,0,0,.85);
        }
      }
      &.info{
        background: #ffffff;
        border: 1px solid #C2C2C2;
        .tips-icon{
          color: #C2C2C2;
        }
        .tips-title{
          color: #C2C2C2;
          font-size: 12px;
        }
      }
    }
    </style>
    