<template>
  <section class="AiTitle" :class="{ 'bottomBorder': isShowBottomBorder, AiTitleSub: isHasSub}">
    <i class="iconfont iconBack_Large" v-if="isShowBack" @click="onBackBtnClick"/>
    <div class="fill">
      <div class="ailist-title">
        <div class="ailist-title__left">
          <h2>{{ title }}</h2>
          <div v-if="isShowIM" class="openIM iconfont iconGroup_IM" @click="openIM"></div>
        </div>
        <div class="ailist-title__right">
          <ai-area
              v-if="isShowArea"
              :instance="instance"
              v-bind="$attrs"
              :value="value"
              v-on="$listeners"
              :areaLevel="areaLevel"
              :hideLevel="hideLevel"
              :valueLevel="valueLevel"
              :disabled="disabled"/>
          <div class="aititle-right__btns">
            <slot name="rightBtn"></slot>
          </div>
        </div>
      </div>
      <div class="subtitle" v-if="$scopedSlots.sub">
        <slot name="sub"/>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AiTitle',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      required: true
    },
    instance: {
      type: Function
    },
    areaLevel: [String, Number],
    hideLevel: {default: 2},
    valueLevel: [String, Number],
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String
    },
    isShowIM: {
      type: Boolean,
      default: false
    },
    isShowArea: {
      type: Boolean,
      default: false
    },
    openIM: {
      type: Function
    },
    isShowBack: {
      type: Boolean,
      default: false
    },
    isShowBottomBorder: {
      type: Boolean,
      default: false
    },
    classic: Boolean
  },

  computed: {
    isHasSub() {
      return this.$slots.sub
    }
  },

  methods: {
    onBackBtnClick() {
      this.$emit('onBackClick')
      this.$emit('back')
    }
  }
}
</script>

<style scoped lang="scss">
.AiTitle {
  display: flex;

  .ailist-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;

    .ailist-title__left {
      display: flex;
      align-items: center;

      & > i {
        width: auto;
        height: auto;
        margin-right: 8px;
        font-size: 16px;
      }

      h2 {
        color: #222;
        font-size: 16px;
        font-weight: 600;
      }

      .openIM {
        margin-left: 8px;
      }
    }

    .ailist-title__right {
      display: flex;
      align-items: center;
    }

    :deep(.el-button ){
      margin-left: 8px !important;
    }
  }

  &.AiTitleSub {
    height: auto;
    padding: 16px 0;

    .ailist-title {
      height: auto;
      margin-bottom: 3px;
    }
  }

  &.bottomBorder {
    border-bottom: 1px solid #D8DCE3;
  }

  .subtitle {
    width: 100%;
    color: #888888;
    font-size: 12px;
    margin-top: 4px;
  }

  .iconBack_Large {
    line-height: 48px;
    margin-right: 8px;
  }
}
</style>
