/*
 * @Author: pengmeng@yangqianguan.com
 * @Date: 2019-06-12 15:52:02
 * @Last Modified by: pengmeng
 * @Last Modified time: 2020-08-13 15:11:25
 */

<template>
    <component :is="tbodyComponent" v-bind="tbodyProps" v-on="tbodyListeners">
        <template v-if="hasChildren">
            <template v-for="(record, lineIndex) in renderedRecords">
                <tr
                    v-b-tooltip:[!!lineTip(record)]="lineTip(record)"
                    ref="rows"
                    :key="lineIndex"
                    :style="getRowStyle(lineIndex)"
                    :class="getRowClass(record, lineIndex)"
                    @click="onLineClick(record,lineIndex)"
                    @mouseenter="handleMouseEnter">
                    <td
                        v-if="fixed!=='right'&&options.enableSelection"
                        :class="{'left':fixed!=='right'}"
                        class="select-area"
                        field="_check">
                        <label>
                            <input
                                v-model="selectedRows[lineIndex]"
                                :disabled="isSelectDisabled(record)"
                                type="checkbox"
                                @change="onSelectChange(record)">
                        </label>
                    </td>

                    <td
                        v-for="(colDef,index) in activeColDefs"
                        :key="getCellKey(colDef)"
                        :style="getColStyle(colDef)"
                        :class="[{'empty':isEmptyField(record, colDef)},colDef.fixed,]"
                        v-bind="{...colDef.tdProps,field:colDef.field}"
                    >
                        <div v-if="showIcon(record,index,colDef)" class="extend-area">
                            <i
                                :class="[{'b-icon-right': !!record.extend, 'b-icon-bottom': !record.extend}, 'extend']"
                                @click.self.stop="toggleExtend(record)" ></i>
                        </div>


                        <slot
                            :name="colDef.field"
                            :field="colDef.field"
                            :colDef="colDef"
                            :record="record"
                            :sum-index="getSumIndex(lineIndex)"
                            :row-selected="selectedRows[lineIndex]"
                            :line-index="lineIndex"
                            :value="getCellValue(record, colDef)">
                            {{ getCellValue(record, colDef) }}
                        </slot>
                        <empty-cell v-if="isEmptyField(record, colDef)" :empty-render="options.emptyRender"/>
                    </td>
                </tr>
                <template v-if="!record.extend">
                    <tr
                        v-for="(childrenRecord, childrenLineIndex) in record.children"
                        ref="rows"
                        :key="`children-${childrenLineIndex}`"
                        @mouseenter="handleMouseEnter">
                        <td
                            v-for="(colDef,index) in activeColDefs"
                            :key="`children-${getCellKey(colDef)}`"
                            :style="getColStyle(colDef)"
                            :class="[{'empty':isEmptyField(record, colDef)},colDef.fixed]"
                            v-bind="{...colDef.tdProps,field:colDef.field}"
                        >
                            <div v-if="index === 0" class="extend-area">
                                <i
                                    v-if="showIcon(childrenRecord,index,colDef)"
                                    :class="[
                                        {'b-icon-right': !!childrenRecord.extend, 'b-icon-bottom': !record.extend},
                                        'extend'
                                    ]"
                                    @click.self.stop="toggleExtend(childrenRecord)" ></i>
                            </div>
                            <slot
                                :name="colDef.field"
                                :field="colDef.field"
                                :colDef="colDef"
                                :record="childrenRecord"
                                :row-selected="selectedRows[lineIndex]"
                                :line-index="lineIndex"
                                :value="getCellValue(childrenRecord, colDef)">
                                {{ getCellValue(childrenRecord, colDef) }}
                            </slot>
                            <empty-cell
                                v-if="isEmptyField(childrenRecord, colDef)"
                                :empty-render="options.emptyRender"/>
                        </td>
                    </tr>
                </template>
            </template>
        </template>
        <template v-else>
            <template v-for="(record, lineIndex) in renderedRecords">
                <tr
                    v-b-tooltip:[!!lineTip(record)]="lineTip(record)"
                    ref="rows"
                    :key="lineIndex"
                    :style="getRowStyle(lineIndex)"
                    :class="getRowClass(record, lineIndex)"
                    @click="onLineClick(record,lineIndex)"
                    @mouseenter="handleMouseEnter">
                    <td
                        v-if="fixed!=='right'&&options.enableSelection"
                        :class="{'left':fixed!=='right'}"
                        class="select-area"
                        field="_check">
                        <label>
                            <input
                                v-model="selectedRows[lineIndex]"
                                :disabled="isSelectDisabled(record)"
                                type="checkbox"
                                @change="onSelectChange(record)">
                        </label>
                    </td>

                    <td
                        v-for="(colDef,index) in activeColDefs"
                        :key="getCellKey(colDef)"
                        :style="getColStyle(colDef)"
                        :class="[{'empty':isEmptyField(record, colDef)},colDef.fixed,]"
                        v-bind="{...colDef.tdProps,field:colDef.field}"
                    >
                        <div v-if="showIcon(record,index,colDef)" class="extend-area">
                            <i
                                :class="[{'b-icon-right': !!record.extend, 'b-icon-bottom': !record.extend}, 'extend']"
                                @click.self.stop="toggleExtend(record)" ></i>
                        </div>


                        <slot
                            :name="colDef.field"
                            :field="colDef.field"
                            :colDef="colDef"
                            :record="record"
                            :sum-index="getSumIndex(lineIndex)"
                            :row-selected="selectedRows[lineIndex]"
                            :line-index="lineIndex"
                            :value="getCellValue(record, colDef)">
                            {{ getCellValue(record, colDef) }}
                        </slot>
                        <empty-cell v-if="isEmptyField(record, colDef)" :empty-render="options.emptyRender"/>
                    </td>
                </tr>
            </template>
        </template>
        <tr
            v-if="showSummary"
            v-show="renderedRecords && renderedRecords.length > 0">
            <td
                v-for="(colDef,index) in activeColDefs"
                :key="`footer-${index}`"
                v-text="sums[colDef.field]" ></td>
        </tr>
    </component>
</template>

<script>

import {isFunc} from '../../util/check';
import {evalProp} from '../../util/object-util';
import {removeClass, addClass} from '../../util/dom';
import getValue from '../../util/get-value';
import {filterFuncMap} from '../../filter/filter';
import {getText} from '../../util/i18n';// eslint-disable-line

import common from './mixin/common';

let uniqueCellKey = 1;

export default {
    name: 'BTableBody',

    components: {
        emptyCell: {
            functional: true,
            render: (ce, ctx) => evalProp(ctx.props.emptyRender, ce)
        }
    },
    mixins: [common],

    props: {
        tbodyComponent: {
            type: [String, Object],
            default: 'tbody'
        },
        tbodyProps: {
            type: Object,
            default: null
        },
        tbodyListeners: {
            type: Object,
            default: null
        },
        renderedRecords: {
            type: Array,
            default: () => []
        },
        selectedRows: {
            type: Array,
            default: () => []
        },
        pagination: {
            type: Object,
            default: () => {}
        },
        showSummary: {
            type: Boolean,
            default: false
        },

        sumText: {
            type: String,
            default: '合计'
        },

        summaryMethod: {
            type: Function,
            default: null
        },

        hasChildren: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        sums() {
            const vm = this;
            const {showSummary, sumText, summaryMethod, options: {colDefs}, renderedRecords} = vm;
            if (!showSummary) return [];
            const record = JSON.parse(JSON.stringify(renderedRecords));
            if (summaryMethod) return summaryMethod(colDefs, record);
            const sums = {};
            colDefs.forEach(({field, map, filter}, index) => {
                if (index === 0) {
                    sums[field] = sumText;
                    return;
                }
                const values = record.map(item => Number(item[field]));
                const precisions = [];
                let notNumber = true;
                values.forEach((value) => {
                    if (!Number.isNaN(value) && !map && !filter) {
                        notNumber = false;
                        const decimal = (`${value}`).split('.')[1];
                        precisions.push(decimal ? decimal.length : 0);
                    }
                });
                const precision = Math.max.apply(null, precisions);
                if (!notNumber) {
                    sums[field] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!Number.isNaN(value)) {
                            return parseFloat((prev + curr).toFixed(Math.min(precision, 4)));
                        }
                        return prev;

                    }, 0);
                } else {
                    sums[field] = '/';
                }
            });
            return sums;
        }

    },

    watch: {
        hoverIndex(newVal, oldVal) {
            let raf = window.requestAnimationFrame;
            if (!raf) {
                raf = fn => setTimeout(fn, 16);
            }
            raf(() => {
                // const {rows} = this.$refs;
                const rows = this.$el.querySelectorAll('tr');
                const oldRow = rows[oldVal];
                const newRow = rows[newVal];
                if (oldRow) {
                    removeClass(oldRow, 'hover-row');
                }
                if (newRow) {
                    addClass(newRow, 'hover-row');
                }
            });
        }
    },

    methods: {
        toggleExtend(record) {
            const {extend} = record;
            this.$set(record, 'extend', !extend);
            this.$forceUpdate();
        },

        showIcon(record, index, {fixed}) {
            return this.hasChildren
                && index === 0
                && !!record.children
                && record.children.length > 0
                && fixed !== 'right';
        },

        lineTip(record) {
            const vm = this;
            const {options: {lineTip}} = vm;

            return evalProp(lineTip, record);
        },

        isSelectDisabled(record) {
            const {options: {disableSelect = () => false}} = this;
            return disableSelect(record);
        },

        getSumIndex(rowIndex) {
            const {pageNo = 1, pageSize = 10} = this.pagination;
            return (pageNo - 1) * pageSize + rowIndex;
        },

        handleMouseEnter(event) {
            const vm = this;
            const {fixHeight, options: {extraThDefsList}, fixed} = vm;
            let addition = 1;
            if (extraThDefsList) addition = 2;
            if (!!fixHeight && !fixed) addition = 0;
            const {target: {rowIndex}} = event;
            this.$emit('change-row', rowIndex - addition);
        },

        onSelectChange(record) {
            const vm = this;
            vm.$emit('select-change', record);
        },

        onLineClick(record, lineIndex) {
            const vm = this;
            vm.$emit('line-click', record, lineIndex);
        },

        getCellKey({field, enforceUpdateCell = false}) {
            uniqueCellKey += 1;
            return enforceUpdateCell ? `${field}${uniqueCellKey}` : field;
        },

        getCellValue(record, {field, filter, map = {}, mapKey, needSplit = true}) {
            const filterFunc = isFunc(filter) ? filter : filterFuncMap[filter];

            const valueRaw = getValue(record, field, {needSplit});
            const valueI18nMapped = mapKey && getText({vm: this, key: mapKey, defaultText: map})[valueRaw];
            const valueMapped = map[valueRaw] || valueI18nMapped || valueRaw;
            const valueFiltered = filterFunc ? filterFunc(valueMapped, record) : valueMapped;
            const value = valueFiltered;
            return value;
        },

        isEmptyField(record, {field, needSplit = true}) {
            const valueRaw = getValue(record, field, {needSplit});
            return !valueRaw && valueRaw !== 0;
        },

        getRowClass(record, index) {
            const {renderedRecords, options: {genRowClass}, selectedRows} = this;
            return {
                selected: selectedRows[index],
                ...(typeof genRowClass === 'function' ? genRowClass(record, index, renderedRecords) : {})
            };
        }

    }
};
</script>