
<template>
  <div class="header-table-custom">
    <span>{{label}}</span>
    <el-tooltip class="item" effect="dark" placement="top">
      <i class="el-icon-question" style="font-size:16px; color:#aaa;"></i>
      <div slot="content" v-if="notice.length > 0">
        <div v-for="(item,index) in notice" :key="index">
          <span v-if="!getType(item)">{{item.label}}:</span>
          <span>{{item|getName}}</span>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "XdTableNotice",
  props:{
    label:{
      type: String,
      required: true
    },
    notice:{
      type:Array,
      default(){
        return []
      }
    },
  },
  filters:{
    getName(value){
      if(typeof value === 'string') return value;
      else return  value.value
    },
  },

  methods:{
    getType(item){
      return typeof item === 'string'
    }
  }
}
</script>


<style scoped lang="scss">
.header-table-custom {
  display: flex;
  align-items: center;

  & > span {
    margin-right: 5px;
  }
}

.el-icon-question {
  margin-top: 1px;
}
</style>
