/*
 * @Author: zhangzc
 * @Email: zhangzc2@guahao.com
 * @Date: 2019-04-25 14:56:51
 * @Last Modified by: tangliang
 * @Last Modified time: 2021-04-20 16:22:37
 * @Description: 带提示的标题组件
 */
<template>
    <span>
        <!-- 表头左边icons -->
        <span v-for="(item,index2) in leftArr"
              :key="index2"
              class="my-tooltip ">
            <el-tooltip v-if="item.tooltipLabel"
                        :content="item.tooltipLabel"
                        v-bind="item.extend"
                        effect="dark"
                        placement="top"
                        transition="el-fade-in-linear">
                <i :class="[item.iconClass || 'el-icon-warning-outline']"
                   :style="{color:item.color}" />
            </el-tooltip>
            <span v-else>
                <i v-if="!item.iconText"
                   :class="[item.iconClass || 'el-icon-warning-outline']"
                   :style="{color:item.color}" />
                <span v-else
                      :class="[item.iconClass]"
                      :style="{color:item.color}"
                      v-text="item.iconText" />
            </span>
        </span>
        <!-- 表头文字 -->
        <span v-text="label"
              :style="{maxWidth:`calc( 100% - ${iconConfig.length*17}px)`}"
              class="my-table-header" />
        <!-- 表头右边边icons -->
        <span v-for="(item,index2) in rightArr"
              :key="index2"
              class="my-tooltip ">
            <el-tooltip v-if="item.tooltipLabel"
                        :content="item.tooltipLabel"
                        v-bind="item.extend"
                        effect="dark"
                        placement="top"
                        transition="el-fade-in-linear">
                <i :class="[item.iconClass || 'el-icon-warning-outline']"
                   :style="{color:item.color}" />
            </el-tooltip>
            <span v-else>
                <i v-if="!item.iconText"
                   :class="[item.iconClass || 'el-icon-warning-outline']"
                   :style="{color:item.color}" />
                <span :class="[item.iconClass]"
                      :style="{color:item.color}"
                      v-text="item.iconText" />
            </span>
        </span>
    </span>
</template>

<script>
export default {
    name: 'BkTableHeaderIcons',
    props: {
        scope: {
            type: Object,
            default: () => ({})
        },
        label: {
            type: String,
            default: ''
        },
        iconConfig: {
            type: Array,
            default: () => ([])
        }
    },
    data() {
        return {
            leftArr: [],
            rightArr: []
        };
    },
    created() {
        if (this.iconConfig.length <= 0) {
            return;
        }
        this.rightArr = [];
        this.leftArr = [];
        this.iconConfig.map(item => {
            const newItem = {
                color: '#606266',
                iconClass: '',
                iconText: '',
                // effect: 'dark',
                tooltipLabel: '',
                position: 'left',
                extend: {
                    effect: 'dark'
                },
                ...item
            };// Object.assign(defaultObj, item);
            if (item.position === 'right') {
                this.rightArr.push(newItem);
            } else if (item.position === 'left') {
                this.leftArr.push(newItem);
            }
            return '';
        });
    }
};

</script>
