/*
 * @Author: pengmeng@yangqianguan.com
 * @Date: 2019-06-12 15:53:10
 * @Last Modified by: pengmeng
 * @Last Modified time: 2020-08-12 15:08:39
 */
<template>

    <thead>
        <template v-if="options.extraThDefsList">
            <tr v-for="(extraThDefs, index) in options.extraThDefsList" ref="extraRows" :key="index">
                <th
                    v-for="(extraTh, index) in extraThDefs"
                    :key="index"
                    :colspan="extraTh.colspan">{{ extraTh.label }}
                </th>
            </tr>
        </template>

        <tr
            ref="rows"
            :style="getRowStyle(0)"
        >
            <th v-if="fixed!=='right'&&options.enableSelection" class="select-area">
                <label>
                    <input
                        v-model="isSelected"
                        type="checkbox"
                        @change="onSelect">
                </label>
            </th>

            <th
                v-for="(colDef) in activeColDefs"
                :key="colDef.field"
            >
                <div :style="getColStyle(colDef)">
                    <div class="filter-area"></div>

                    <span
                        :class="{'enabled-click': isShowSortIcon(colDef.field)}"
                        class="sort-click-area"
                    >
                        <slot
                            :name="`header-${colDef.field}`"
                            :field="colDef.field"
                            :colDef="colDef"
                            :value="getColLabel(colDef)">
                            {{ getColLabel(colDef) }}
                        </slot>
                        <i
                            v-if="colDef.children"
                            :class="getFoldClass(colDef.field)"
                            @click="toggleFold(colDef.field, colDef)"
                        ></i>

                        <div
                            class="sort-area"
                            @click="toggleSort(colDef.field)"
                        >
                            <div
                                v-if="isShowSortIcon(colDef.field)"
                                :class="{
                                    'sort-icon-up': isSortIconUp(colDef.field),
                                    'sort-icon-down': isSortIconDown(colDef.field)
                                }"
                                class="sort-icon"
                            ></div>
                        </div>
                    </span>
                </div>
            </th>
        </tr>
    </thead>
</template>

<script>
import common from './mixin/common';
import {OrderType, NextOrderType} from '../../constant/OrderConf';
import {getText} from '../../util/i18n';// eslint-disable-line

export default {
    name: 'BTableHeader',
    mixins: [common],
    props: {
        isAllSelected: {
            type: Boolean,
            default: false
        },
        sortInfo: {
            type: Object,
            default: () => ({
                field: '',
                order: OrderType.NONE
            })
        }

    },
    data() {
        return {
            isSelected: false
        };
    },
    watch: {
        isAllSelected(val) {
            const vm = this;
            vm.isSelected = val;
        }
    },
    methods: {
        getColLabel({label, labelKey, name}) {
            label = label || name;
            if (labelKey) {
                label = getText({vm: this, key: labelKey, defaultText: labelKey});
            }

            return label;
        },

        onSelect() {
            const vm = this;
            vm.$emit('select-all-change', vm.isSelected);
        },

        isSortIconUp(field) {
            const {sortInfo} = this;
            return sortInfo.field === field && sortInfo.order === OrderType.ASC;
        },

        isSortIconDown(field) {
            const {sortInfo} = this;
            return sortInfo.field === field && sortInfo.order === OrderType.DESC;
        },

        isShowSortIcon(field) {
            const {enableSort, sortInfo: {supportFields = []}} = this;
            if (!enableSort) return false;
            if (!supportFields.length) return true;

            return supportFields.includes(field);
        },

        getFoldClass(field) {
            const isFoldOpen = this.foldMap[field];
            return {
                'b-icon-create': !isFoldOpen,
                'b-icon-minus': isFoldOpen
            };
        },

        toggleFold(field, colDef) {
            const vm = this;

            if (colDef.children) {
                vm.$emit('toggle-fold', {field});
            }
        },

        toggleSort(field) {
            const vm = this;
            const {
                sortInfo: {order: originOrder, field: originFiled}
            } = vm;

            if (vm.isShowSortIcon(field)) {
                const order = originFiled === field ? NextOrderType[originOrder] : OrderType.DESC;
                vm.$emit('toggle-sort', {field, order});
            }
        }
    }
};
</script>