<template>
  <view
    class="xd-tips-block"
    :style="{
      margin: margin,
    }"
  >
    <view
      class="xd-tips-block__title"
      :style="{
        color:titleColor,
        padding: padding,
      }">
      <view>
        <xd-font-icon
          v-if="icon"
          :icon="icon"
          :size="iconFont"
          :color="styleMainColor"
        ></xd-font-icon>
      </view>
      <view :style="{fontSize: titleFont}">{{title}}</view>
    </view>
    <view
      class="xd-tips-block__body"
      :style="{
        padding: padding,
        background:background,
        borderRadius: borderRadius,
        color:descColor,
        fontSize: descFont
      }"
      >
      <slot>{{desc}}</slot>
    </view>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
  import {
    getParentsStyle,
  } from '@/utils/xd.base';

  /**
   * XdTipsBlock 温馨提示模块
   * @description 温馨提示模块
   * @tutorial
   * @property margin {String} margin的原始值  默认：0 34px
   * @property padding {String} padding的原始值 默认：0 20rpx
   * @property background {String} background的原始值  默认： #fff
   * @property borderRadius {String} 是否圆角 默认值：15rpx
   * @property title {String} 标题 默认值：温馨提示
   * @property titleColor {String} 标题颜色 默认值：''
   * @property titleFont {String} 标题文字大小 默认值：'28rpx'
   * @property icon {String} 标题前是否显示icon 默认值：iconinfo
   * @property desc {String} 提示文案 默认值：''
   * @property descColor {String} 正文颜色 默认值：''
   * @property descFont {String} 正文文字大小 默认值：'26rpx'
   */

  export default {
    name: "XdTipsBlock",
    components:{
      XdFontIcon
    },
    props: {
      margin: {
        type: String,
        default: '0 34rpx'
      },
      padding: {
        type: String,
        default: '20rpx'
      },
      background: {
        type: String,
        default: '#fff'
      },
      borderRadius: {
        type: String,
        default: '15rpx'
      },

      title: {
        type: String,
        default: '温馨提示'
      },
      titleColor: {
        type: String,
        default: '#666'
      },
      titleFont: {
        type: String,
        default: '28rpx'
      },

      icon: {
        type: String,
        default: 'iconinfo'
      },

      iconFont: {
        type: Number,
        default: 36
      },

      desc: {
        type: String,
        default: ''
      },
      descColor: {
        type: String,
        default: '#999'
      },
      descFont: {
        type: String,
        default: '26rpx'
      },

    },
    data(){
      return {
        styleMainColor: null, //插件主题风格样式
      }
    },
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
    }
  }
</script>

<style scoped lang="less">
  .xd-tips-block {
    font-size: @xd-font-size-base;
    &__body {

    }
    &__title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: bold;
      padding-bottom: unit(20,rpx);

      /deep/ .xd-iconfont {
        margin-right: unit(10,rpx);
      }
    }

  }
</style>
